在线商城Java项目(第二阶段)-前端
可在电脑上阅读，以获取最佳阅读效果，谢谢！
已支持在线查看PDF电子书版本
项目开始 20171216
结束时间 20171223
Git代码地址:https://gitee.com/jiangjiesheng/mmall_fe/tree/v1.0
https://gitee.com/jiangjiesheng/mmall_admin/tree/v1.0
点击在线阅读PDF电子书版本(无需下载)
目录
一、架构设计
1、分层架构
2、模块化
3、架构设计
4、技术选型
二、开发环境搭建
三、Gitee项目初始化
四、创建本地项目结构
五、相关工具包介绍
六、项目基本配置及各种loader安装
1、安装css loader
2、安装css单独打包
3、安装html-webpack-plugin (html模板的处理)
4、安装html loader
5、安装url-loader
6、安装webpack-dev-server
七、业务代码
八、Linux线上环境发布
九、云监控
一、架构设计
1、分层架构
定义：把功能相似，抽象级别相近的实现进行分层隔离
优势：松散耦合，（易维护、易复用、易扩展）
常见分层方式：MVC、MVVM
2、模块化
定义：解决一个复杂问题时，自顶向下逐层把系统划分成若干模块的过程
意义：解耦、可并行开发
模块化开发方案：AMD、CMD、CommonJS、ES6
3、架构设计
逻辑层： 主模块（子模块、子模块、子模块）
数据层：Service--->对接服务器
工具层：工具
4、技术选型
软件过程、前后端分离、构建工具、框架、版本控制、发布方式
软件过程：
敏捷开发：以用户的需求进化为核心、采用迭代、循序渐进的方式进行软件开发
是一种迭代的意识和方法、而不是概览和工具
优点：能够应对满足不断变化的需求
缺点：对团队成员的能力要求比较高
前后端分离：本地开发环境搭建成本高、共同维护成功高、发布风险高
方案：纯静态html、完全通过接口做数据交互
优点：完全脱离了后端模板，系统复杂度低
缺点：不太利于SEO
优化方案：Server Rander/蜘蛛定制页面
框架选型：
用户端：
特点：求稳 用户类型多样 有SEO要求，多页应用
方案：jQuery+原生CSS
管理端：
特点：求快 用户类型单一 无SEO要求
方案：React+Sass
构建工具：Grunt（太过复杂） Gulp Webpack（支持Commonjs）
方案：Webpack
版本控制：Git
发布方式：拉取待发布代码-->编译打包-->发布到线上机器
域名分布：
html ---> www./admin.
js+css ---> s.
image ---> img.
二、开发环境搭建
1、nodejs简介
定义：js的服务端运行环境
用途：构建工具webpack的环境依赖
特点：单线程、异步编程
应用场景：低运算、高I/O（webui、游戏、在线聊天，作为网络连接的中间件）
nodejs的包管理工具-npm（nodejs package manager）
nodejs安装：【安装A】
官网 nodejs.org https://nodejs.org/download/release/v4.4.7/
Mac:node-vxxx.pkg
https://nodejs.org/download/release/v4.4.7/node-v4.4.7.pkg
windows：node-vxxx-msi （如果64位安装有问题，可以换成32位）
https://nodejs.org/download/release/v4.4.7/node-v4.4.7-x64.msi
LInux：node-vxxx-linux-x64.tar.gz
https://nodejs.org/download/release/v4.4.7/node-v4.4.7-linux-x64.tar.gz
①ln -s /app/software/nodejs/bin/npm /usr/local/bin/
②ln -s /app/software/nodejs/bin/node /usr/local/bin/
测试：node -v（之前已经打开的cmd窗口要先关闭）
2、git安装【安装B】
注意可以在.gitconfig中添加默认的[user]、[alias]、[push]
本机已安装git，相关安装见《在线商城Java项目(第一阶段)-服务端(环境和业务)》
Windows下查看Git安装路径 where git
Linux下查看安装路径 whereis git
3、sublime使用技巧【安装C】
轻量级、运行速度快、支持多光标操作、扩展性良好
sublime常用设置：
Sublime Text -> Preferences -> Setting-User
{
"font-size":18,
"tab-size":4,
"translate_tabs_to_spaces":true,
"update_check":false
}
快捷键：
ctrl shift d 复制行
ctrl shift k 删除行
ctrl ；注释
ctrl d 查找并选择
ctrl shift f 在文件夹红查找
4、代理软件
相关信息见
《js-跨域请求-jsonp-header-服务器代理-Asp.NET配置跨域访问-跨域处理的4种方式总
结》
三、项目初始化
1、目录结构的设计
page + view view
service js
src => => dist =>
util css
image resource
2、搭建git仓库
先在gitee的个人中心的左边的“组织”新建组织
https://gitee.com/jiangjiesheng-com-mmall
将https://gitee.com/jiangjiesheng/mmall后台项目在项目主页的“管理”中添加到组织中
然后在https://gitee.com/organizations/jiangjiesheng-com-mmall/projects的“项目”上
点击+号，新建前端项目mmall-front
（这里不用组织，后台项目转移到组织后会导致之前后台项目的链接都不能使用，创建原地
址项目mmall后重新push后台项目到v1.0，然后切换本地分支git checkout master，强制
提交到git的主干上 git push -u -f origin master，然后本地重新切回到v1.0,
git checkout v1.0，最后删除git组织）
删除组织重新新建项目mmall-fe(front_end)
3、git项目初始化后，复制SSH协议（不用重复的输入账号密码）的链接
到本地sublime专用文件夹，不要创建项目文件夹，直接右击打开Git Bash Here，
执行 git clone git@gitee.com:jiangjiesheng/mmall_fe.git
即可。
touch t.txt 后提交到git测试（这时是master主干）
查看本地分支
git branch
查看远程分支
git branch -r
在本地主干分支的基础上创建分支v.10
git checkout -b v1.0 origin/master (origin/master应该可以省略)
touch v1.0.txt 后
git push后提示：
fatal: The upstream branch of your current branch does not match
the name of your current branch. To push to the upstream branch
on the remote, use
git push origin HEAD:master
To push to the branch of the same name on the remote, use
git push origin v1.0
To choose either option permanently, see push.default in 'git help config'.
可以选择提示中两条语句按照需要执行，也可以执行：
git push origin HEAD -u （创建新分支后首次push）
修改文件后再次提交
git push即可
以上都是先从远程初始化好git仓库后再关联到本地项目的
还可以先创建本地项目，然后把本地项目关联到远端仓库
关联本地项目到远程git仓库：
touch mmall_fe
cd mmall_fe
touch text.html
git init
ls -la
复制出远端git项目的SSH地址 git@gitee.com:jiangjiesheng/mmall_fe.git
git remote add origin git@gitee.com:jiangjiesheng/mmall_fe.git
git pull origin master （拉取远程分支）
git status
显示本地有之前新创建的test.html
即可
注：git commit -am “” ，a表示全部，m表示注释
配置.gitignore文件
git checkout master （切回主干，不确定有没有必要，没有必要）
vi .gitignore
.DS_Store
/node_modules/
/dist/
提交 .gitignore文件
四、创建本地项目结构
cd mmall_fe --> git checkout v1.0 --> mkdir src --> cd src --> mkdir view(page service util)
这时候git status，提示没有文件变动，可能是git不对空文件夹监控（如果有一个空文件夹时，
git status 就可能显示）
五、相关工具包介绍
首先安装node.js
1> npm init
npm init --> 生成package.json
（init这步可以在git bash中操作，cd 到项目文件夹上，输入必要的信息）
安装依赖包 npm install xxx@v.v.v
(参数 -g 表示全局安装，参数 --registry=https://registry.npm.taobao.org)
删除依赖包 npm uninstall xxx@v.v.v
2> Webpack
设计思想：require anything
加载方式：各种loader插件
编译方式：commonjs模块 -> function类型模块
官方文档：http://webpack.github.io/docs/
安装（可在git bash或cmd中操作）：
npm install webpack -g //实际编译会有问题
npm install webpack@1.15.0 --save-dev (不建议设计2.x，在IE8下会报错)
以上两步都执行一下
特别注意：以上命令可能会出错
全局安装webpack v^1.15.0
命令: (sudo) npm install -g webpack@^1.15.0【安装D】
webpack -v
//--save-dev 会自动将依赖写入package.json
webpack.config.js（手动创建 https://zhuanlan.zhihu.com/p/24108353）
entry:js的入口文件
external：外部依赖的声明
output：目标文件
resolve：配置别名
module：各种文件、各种loader
plugin：插件
Webpack 各种 Loaders
html：html-webpack-plugin / html-loader
js：label-loader + babel-preset-es2015
css：style-loader + css-loader
image+font：url+loader
Webpack常用命令
webpack
webpack -p （压缩：用于线上发布）
webpack --watch（监听文件改动，自动编译，用于开发过程）
webpack --config webpack.config.js
Webpack-dev-server
作用：前端开发服务器（文件改动时，自动刷新浏览器）
安装：npm install webpack-dev-server --save-dev 【安装D2】
配置：webpack-dev-server/client?http://localhost:8080
使用：webpack-dev-server --port 8088 --inline
webpack对脚本和样式的处理
首选安装一下sublime插件FileHeader
https://www.cnblogs.com/vince-cup/p/5763801.html
使用方式 Ctrl+Shift+A
六、项目基本配置及各种loader安装
npm init完成后且手动创建并配置webpack.config.js后
直接打包测试webpack
安装jquery：npm install jquery --save
在js中引入jquery，var $ = require('jquery');
但是这里引入的jq不是全局可用的，还是使用jq cdn地址（2.0以上版本对IE8不支持）
<script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
提取公共模块：
http://webpack.github.io/docs/list-of-plugins.html
ctrl F 搜索 CommonsChunkPlugin
"use strict";
设立"严格模式"的目的：错误检测、规范、效率、安全、面向未来
- 消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为;
- 消除代码运行的一些不安全之处，保证代码运行的安全；
- 提高编译器效率，增加运行速度；
- 为未来新版本的Javascript做好铺垫。
安装css loader
npm install css-loader style-loader --save-dev【安装E】
安装css单独打包
npm install extract-text-webpack-plugin --save-dev
http://www.jianshu.com/p/439764e3eff2
安装报错
https://github.com/webpack-contrib/extract-text-webpack-plugin
进入分支旁边的Tags可以看到历史版本
npm install extract-text-webpack-plugin@1.0.1 --save-dev【安装F】
安装html-webpack-plugin//html模板的处理
npm install html-webpack-plugin --save-dev【安装G】
https://www.npmjs.com/package/html-webpack-plugin
搜索Installation(webpack.config.js配置相关)
安装html loader
npm install html-loader --save-dev【安装H】
使用时要注意
<%=require('html-loader!./layout/html-head.html') %>
要加上html-loader!
安装url-loader
npm install url-loader --save-dev
https://github.com/webpack-contrib/url-loader
如果提示报错
https://segmentfault.com/q/1010000011516676/a-1020000011553779
可以先安装低版本的file-loader
npm install file-loader@0.11.1 --save-dev【安装I】
或者在package.json中添加 (未测试)
"peerDependencies": {
"webpack": ">=1.3.0 <3 || ^1.15.0"
}
然后重新执行npm install url-loader --save-dev即可 【安装J】
安装webpack-dev-server（实时渲染）
npm install webpack-dev-server@1.16.5 -g
参数改成-g失败，使用--save-dev
npm install webpack-dev-server@1.16.5 --save-dev【安装K】
(如果在unix系统提示文件不存在，加sudo)
https://github.com/webpack/webpack-dev-server/
启动
webpack-dev-server
找到提示的地址 http://localhost:8080/webpack-dev-server/
打开后发现会有iframe嵌套
修改配置文件中的entry入口
webpack-dev-server --inline --port 8088
http://localhost:8088
设置开发环境配置参数WEBPACK_ENV
Linux下启动(或者可在git bash中)
WEBPACK_ENV=dev webpack-dev-server --inline --port 8088
WEBPACK_ENV=online -p
在package.json中写入启动脚本命令(含有windows下命令)
"scripts": {
"dev":" WEBPACK_ENV=dev webpack-dev-server --inline --port 8088",
"dev_win":"set WEBPACK_ENV=dev && webpack-dev-server --inline --port 8088",
"dist":" WEBPACK_ENV=online webpack -p",
"dist_win":"set WEBPACK_ENV=online && webpack -p"
},
命令行启动 npm run dev (注意：这里在windows下，即使使用git bash也会启动失败)
而是要使用 npm run dev_win （dev_win 可换成dist_win）
以上都完成后提交到git上
并打一个tag，打tag一般用于更新大版本时
git tag tag-dev-initial
git push origin tag-dev-initial
可以在线上分支切换中看到标签，github也是类似的位置
七、业务代码
由于前端项目不是重点，这里不再做具体记录，除非有重点内容
1> encodeURIComponent 处理url含有特殊编码时可能被截断
2> 安装hogan（渲染html）
npm install hogan --save 【安装L】
效果：
var html ="<div>{{data}}</div>";
var d ={
data:123
}
console.log(_mm.renderHtml(html,d)); //<div>123</div>
3> 安装npm install font-awesome --save（图标字体库）【安装M】
//引入要注意全路径 require('node_modules/font-awesome/css/font-awesome.min.css')
（比较特殊）
框架、页面基本样式模板、js基本工具处理完成-2017171221
后台项目地址（启动方法见《README.md》）
https://gitee.com/jiangjiesheng/mmall_admin/tree/v1.0/
sass安装：
checking for Python executable "python2" in the PATH
http://blog.csdn.net/xuyunfei_2012/article/details/54574203
八、Linux线上环境发布
1> 安装node.js
wget https://nodejs.org/download/release/v4.4.7/node-v4.4.7-linux-x64.tar.gz
解压到/usr/mylibs 文件夹下
并bin文件夹配置到/etc/profile并source /etc/profile
注意 （不同环境变量之间使用：连接，连接要加上$符号）
export NODE_PATH=/usr/mylibs/node-v4.4.7-linux-x64
export PATH=$PATH:$JAVA_HOME/bin:$MAVEN_PATH/bin:$NODE_PATH/bin
退出node编辑环境：Ctrl+D或者Ctrl+C两次
2> 安装webpack
npm install webpack -g --registry=https://registry.npm.taobao.org
webpack -v 查看版本
3> 安装ruby
sudo yum -y install ruby
ruby -v 查看版本
4> 安装sass
sudo gem install sass --no-user-install
或者
yum install rubygems
sudo su -c "gem install sass"
安装出错：
mkmf.rb can't find header files for ruby at /usr/share/include/ruby.h
如果是在centos等系统下面，执行命令：yum install ruby-devel
如果是在Ubuntu等系统下面，执行命令:apt-get isntall ruby-dev
后再次执行安装命令
sass -v 查看版本
5> 自动化发布
cd /developer/git-repository/
git clone git@gitee.com:jiangjiesheng/mmall_fe.git
git clone git@gitee.com:jiangjiesheng/mmall_admin.git
cd mmall_fe
git checkout v1.0
npm install --registry=https://registry.npm.taobao.org
npm run dist (或者 webpack)
看看能不能打包成功，生成dist
cd mmall_admin
git checkout v1.0
npm install --registry=https://registry.npm.taobao.org
npm run dist (或者 webpack)
看看能不能打包成功，生成dist
cd /product
mkdir frontend
cd /frontend
mkdir mmall_fe
mkdir mmall_admin
cp -R /developer/git-repository/mmall_fe/dist/ ./mmall_fe/
自动化发布脚本
后台的发布脚本 在 cd /home/admin/mylibs ，现在也放在developer/git-repository/
九、云监控
https://cloudmonitor.console.aliyun.com/?spm=5176.200021.0.0.gqk7Sc#/sites/
站点管理--添加监控点
mmall_front_all-本地项目-前端和后台管理页面结束-2017171221
npm 打包失败处理
----------------180305最新出错解决方案-----------------------------------
Error: Cannot find module 'webpack'
再安装一遍 npm install -g webpack@^1.15.0
ERROR in ./src/util/mm.js
Module not found: Error: Cannot resolve module 'hogan.js' in D:\workspace\sublime\mmall_fe\src\util
@ ./src/util/mm.js 12:12-31
npm install hogan --save
npm install font-awesome --save
npm run dev_win
提示webpack：fialed to compile 似乎也能访问
(npm run dist_win 不会启动webpack-dev-server)
windows环境打包出错
提示 set WEBPACK_ENV=dev && webpack-dev-server --port 8088 --inline 有错误
https://segmentfault.com/q/1010000012943398
在任务管理中终止node.exe 进程即可
windows环境查看占用端口的进程
netstat -aon | findstr "8088" // 注意加双引号
tasklist | findstr "PID号" // 注意加双引号