开发环境:nodejs,npm,git,webstorm,chrome
项目搭建:git,webpack,webpack-dev-server
-
网络数据请求功能
-
获取服务端接口url,参数功能
-
hogan 渲染html模板功能
-
通用提示功能,验证功能封装(手机号,邮箱验证,非空验证)
主要是购物车模块的逻辑实现,有点难
就一个支付页面,比较有技术含量的是,添加了支付二维码自动刷新功能
##项目启动和使用
npm install (--registry=https://registry.npm.taobao.org)
可用换源的方式加快依赖的安装
npm run dev_linux(lnux)
npm run dev(windows)
npm run dist_linux(linux)
npm run dist(windows)
此次发布的项目是经过更新的,webpack从1.x.x升级到了4.x.x,对node,npm版本要求也很高,不需要用Charles代理软件,直接将跨域问题放到webpack中解决。
之前的配置文件和依赖版本如下所示:node版本最好6.12.3
"devDependencies": {
"css-loader": "^0.28.1",
"extract-text-webpack-plugin": "^1.0.1",
"file-loader": "^0.11.1",
"html-loader": "^0.4.5",
"html-webpack-plugin": "^2.28.0",
"style-loader": "^0.17.0",
"url-loader": "^0.5.8",
"webpack": "^1.15.0",
"webpack-dev-server": "^1.16.5"
},
"dependencies": {
"font-awesome": "^4.7.0",
"hogan.js": "^3.0.2"
}
这个时候会用到代理软件Charles
在开发的时候要请求测试环境的接口, 直接请求会造成跨域,所以先请求html所在域下面的接口地址, 再用代理软件把请求劫持到远程的接口地址,用起来比较简易。