Octopus-【思路】-jscode

jscode

            //1.0 思路
            //VH.PutSet(TagFields.PageName, PageName.Index);
            //VContent.Put(TagFields.JsCode, VH.OutString(string.Concat(this.PcMobile, "common/_Self_Js.html"), true));

面临问题:以前的的代码只能放在页面的底部,虽然可以每个页面载入自己的代码,但是代码摆放的位置不够灵活
而且代码没有压缩功能。

还可能由于页面没有载入完全导致js代码执行起来有问题。看了下兰亭的网页,他们把大量的js代码,甚至JQuery库都输出在了页面上

后来想了一下为什么这样做?
可以减少不必要的js额外请求;不会因为库没有下载下来导致一些代码没有执行
实现要求:使用${jscode}标签在页面中的任意位置,输出该页面自定义的js代码,并提供对代码的压缩功能

第一个版本思路
NVelocity有一个助手,在初始化完成之后指定一个模板的名字,就可以输出这个模板的字符串,有了字符串就可以对字符串进行压缩处理
所以尝试了下

#region 代码
            /*VelocityHelper vh = new VelocityHelper();
            string pathTemplate = ConfigHelper.BaseDirectory + "themes\\" + ConfigManager.GetConfig().Theme
                + ConfigManager.GetConfig().PCthemeDir.Replace("/", "\\") + "common\\";
            vh.Init(pathTemplate);
            vh.PutSet(TagFields.PageName, PageName.Index);
            string jsString = vh.OutString("_Self_Js.html");
            VContent.Put("jsstring", ZipHtml.GZipHtml(jsString));*/
            #endregion

第一:每个页面都要编写上面的代码增加了额外的开销
第二:麻烦
第三:手机模板和PC模板各自定义的js代码有可能不一样,所以_Self_Js.html不在同一个目录下,所以不行

第二个版本思路
尝试将VelocityHelper封装到页面的基类中去,变成一个静态的变量,这样不用增加额外的对象开销,而且内部的引擎不用做过多的初始化
在static HttpCustom()中尝试将其初始化,模板路径和HttpCustom路径保持一致,并且只初始化一次
这样在每个页面中 只需要调用就可以生成这个页面的js代码,同时传递了PcMobile目录,就可以为PC和Mobile生成各自的js代码 【比第一版的思路好多了】

VH.OutString(string.Concat(this.PcMobile, "common/vmjs.vm"), true)

坏处:每个页面都需要编写这个代码,代码还得需要编译
每个页面还需要PutSet这个页面的类型,才能动态的加载js代码
不灵活 也比较麻烦

第三版
既然可以在html中调用对象的方法,那么应该讲VH对象添加到数据上下文当中去
在html页面中调用这个方法
同时做进一步的封装string.Concat(this.PcMobile, “common/vmjs.vm”) 封装到 VH的内部处理
将PcMobile 封装成它的一个属性,在HttpCustom识别出访问设备,也就是PcMobile初始化之后
也将VH的PcMobile 初始化,如此一来
在页面中就可以这样调用

    $VH.PutSet("pagename","index")
    $VH.OutString(true)

好处:灵活了许多
pagename 不仅仅是系统中固定的那几个值了,可以自定义
而且可以自定义是否压缩js代码
到此完成!

总结:封装思想  确定需求

Octopus-对比shopify

到时是选择shopify?还是选择独立站程序?我为什么选择独立站程序呢?
首先不是单纯的建站,不是从网上下载一套开源程序,安装插件,简单部署一下就上线
一个好的网站是一个非常复杂的系统:前端页面、后台操作、速度、安全、客户体验、功能模块
作为程序员你要熟悉各个层面,不仅仅是业务你要懂,优化体验你更要了解
网站的风格实现,怎么去做,这就需要更多的知识来支撑
一个网站涉及到下面诸多标签
C#,asp.net,SQL,sqlite,css,html,js,jquery,cdn,windows server,iis,MVC,动静分离
多语言,多模板,多货币

简单对比

1.流量方面
无论是shopify还是独立站程序,都不能带给你流量,流量要靠自己

2.最大优势
独立站程序最大的好处就是,不受限制,功能模块可以按照自己的业务需求来进行定制扩展,自由度很高

3.成本费用
独立站程序成本非常低,一个域名+一台服务器费用,shopify的费用收取
在顾小北文章中已经说了,熟悉shopify的自然知道
http://www.guxiaobei.com/shopify-website-building.html

4.批量站群
我想目前shopify还做不到,独立站程序能轻松搞定,各种模板各种产品,只要加服务器域名即可
独立站程序本身占用资源非常少

5.建站分析
网站的风格,自己用代码实现,不是类似wordpress的拖拽方式,虽然简单,但是存在代码冗余,影响解析
全部使用自己的代码实现,自由

最后总结
就像顾小北说的,我喜欢把流量掌握在自己手中,不受到平台政策等等各种影响
同样的我想把独立b2c网站技术掌握在自己手中,只要有域名+服务器,我就可以做出满足我业务需求的网站
售卖产品,不收平台限制。
这就是我一直在这方面,不断维护这套系统的原因,希望为更多的跨境电商提供技术支持

Octopus-backend目录文件说明列表

Backend_ShoppingCart.html 购物车页面调用的模块

_w_cart_empty.html购物车为空模块
_w_cart_mobile.html手机端展示
_w_cart_pc.html电脑端展示
_w_coupon.html判断优惠码消息提示
_w_coupon_code.html展示优惠码
_w_layer.htmlloading遮盖层

Backend_New_Shipping.html 确认客户收货地址页面调用的模块

_w_backend_new_shipping_hidden.html隐藏的提交参数
_w_address_detail.html遍历客户的收货地址
_w_get_ship_list.html遍历送货方式列表

Backend_New_Payment.html 确认客户账单地址页面调用的模块

_w_payment_order_detail_V2.html展示订单详情
_w_address_detail_for_payment.html展示地址详情
_w_get_pay_list.html展示支付方式

Backend_Complete.html 填写信用卡信息完成支付页面Backend_Complete_Western_Union.html 单独使用西联支付的说明页面Backend_Edit_Address.html 编辑【收货】地址页面Backend_Change_Payment_Address.html 修改添加账单地址的页面Backend_Login.html 登陆页面

_Form_Login.html

Backend_Register.html 注册页面

_w_address_form_div.html注册表单:收货地址信息部分
_w_address_reg_div.html注册表单:用户信息部分

_Backend_footer.html backend头部_Backend_header.html backend尾部共计15个wid的小模块,9个页面

Octopus-common文件夹解析

html_header.html

程序全局的头部<head></head>标签之间的代码,最最主要的功能就是根据不同的页面加载不同的样式表。

html_footer.html

程序的底部</body>标签之前,主要就是加载全局的js脚本,遵循“头部样式底部脚本的原则”

_OCT.html

定义了系统中使用的一些业务实例,实例在全局可用,最最靠前的一个wid部件

_SEO.html

定义系统的SEO三要素

_Self_Js.html

定义每个页面的一些个性化的js脚本,每个页面运行的js代码多少有些差异,我想让每个页面只加载并运行只属于自己的代码。我把它单独成一个wid部件,方便被各个页面所引用,这是早期的设计。后面我使用VH助手,对这个部件进行计算,并将计算结果压缩输出。VH是什么?后期我会讲解。此部件的输出调用在html_footer.html页面,在加载了所有的代码之后使用$VH.OutString(true)来输出这个部件。

_t_js.html

是我喜欢测试一些js代码在页面中运行的效果,测试通过之后将代码在拷贝到lib.js中

51.html

顾名思义,此处写网站的统计代码,单独分离出来,有好有坏,好处就是你可以只将此部件在需要统计的页面引用。

Octopus-系统解析-OctService基类定义

OctService页面服务类,请求上下文

封装了9个属性

数据:UserData,LangItems

用户:SessionID,CustomerID,IsLogin,Customer

业务:CartID,Currency,Language

下面我来说说这几个属性是怎么初始化的,小伙伴先有一个大概的了解,其实非常的简单,理解程序代码要先理解代码的执行流程。执行的流程必然有先后的顺序,下面我让大家看看Octopuscart的先后顺序是怎么走的。

在静态构造函数中加载语言包,静态构造函数只需要执行一次

此时LangItems被初始化

在构造函数中初始化:货币,语言,购物车ID


注意:构造函数中不能获得Session对象,所以此时不能对session进行任何的操作,但是可以对cookie进行操作
货币,语言,购物车ID会被保存到客户端的Cookie中,所以我们先在此处做一次初始化【PS:语言的暂时没用到】

以货币为例:货币在前台页面可以切换。

初始化过程是:先获取系统配置的货币–》Currency具有默认的值–》从cookie中读取客户端的货币代码–》根据此代码对Currency设置–》回写货币代码到cookie【重新刷新了客户端cookie的生命周期】

语言和购物车ID都是这个初始化过程,不过我的项目中语言没有实现,代码逻辑和货币一模一样,可以照葫芦画瓢。

到此时我们已经初始化了4个属性了:

LangItems–Currency–Language–CartID小伙伴继续往下走!

在ProcessRequest中此时Session才可以使用,所以此处可以判断用户是否登陆

HttpContext.Current.Session.SessionID就可以用了,所以一下子就能拿到SessionID,那么如果用户登陆了,就可以检查session,判断是否登陆了获取登陆用户的ID。

判断逻辑非常简单,根据OCKeys.Session_User_ID键值在会话中获取顾客的ID,如果顾客的ID>0,表示当前用户登陆了。

除此之外,还对cookie进行了检查,如果用户选择记住用户选项,那么看看cookie中保存的信息是否有效。如果有效,用于也处于登陆状态。

到此处我们就初始化了SessionID—IsLogin—CustomerID—Customer 等4个选项哦!对了是不是少了一个呢?UserData:UserData我是用来存取数据用的,它在用户登陆的时候会用到,此处先不做介绍。

Octopus-乡间小记-第001期

001: 关于系统中自定义实体带来的弊端
死板不够灵活,查询是灵活多样的,获取数据之前我们不晓得需要什么字段的数据,如果事先定义好一个实体对象,那么获取的数据只能就是定义的类型,这个类型中有些字段我们不需要,但是它被定义了,我们可以初始化这些字段数据,但是总是感觉不好,你定义了,但是在此处查询中你又没有用到它,感觉啰嗦,所以使用通用的一个自定义实体。

002:以点打面

编写文章的时候采用以一点打面的手法来操作。比如写文章的时候可以从一个点入手,Octopus的Url重写;Octopus某个数据表设计手法等等,从细微之处入手,文章慢慢展开娓娓道来,不要一开始就将主题开展的特别宽泛。

Octopus-backend目录文件说明列表

Backend_ShoppingCart.html 购物车页面调用的模块

_w_cart_empty.html购物车为空模块
_w_cart_mobile.html手机端展示
_w_cart_pc.html电脑端展示
_w_coupon.html判断优惠码消息提示
_w_coupon_code.html展示优惠码
_w_layer.htmlloading遮盖层

Backend_New_Shipping.html 确认客户收货地址页面调用的模块

_w_backend_new_shipping_hidden.html隐藏的提交参数
_w_address_detail.html遍历客户的收货地址
_w_get_ship_list.html遍历送货方式列表

Backend_New_Payment.html 确认客户账单地址页面调用的模块

_w_payment_order_detail_V2.html展示订单详情
_w_address_detail_for_payment.html展示地址详情
_w_get_pay_list.html展示支付方式

Backend_Complete.html 填写信用卡信息完成支付页面Backend_Complete_Western_Union.html 单独使用西联支付的说明页面Backend_Edit_Address.html 编辑【收货】地址页面Backend_Change_Payment_Address.html 修改添加账单地址的页面Backend_Login.html 登陆页面

_Form_Login.html

Backend_Register.html 注册页面

_w_address_form_div.html注册表单:收货地址信息部分
_w_address_reg_div.html注册表单:用户信息部分

_Backend_footer.html backend头部_Backend_header.html backend尾部共计15个wid的小模块,9个页面