决定把电商这个项目吃透，就主要讲这一个项目！好好讲这一个，node就不讲了，暂时后端真没时间看了。等春招完了之后再用java写写后端，准备秋招。
复盘第一节：webpack的使用
webpack配置文件里主要是引用（require）、入口文件、出口文件（打包到哪）、解析模块（用来解析css、gif等文件）、插件，本地写的html和js（js里引用了css）是通过html-webpack-plugin放在一起的，所以这个插件很重要。里面有几个参数
entry:{
'common' : ['./src/page/common/index.js'],
'index' : ['./src/page/index/index.js'],
},
output:{
path:'./dist',
publicPath:'/dist',
filename:'js/[name].js'
},
plugins:[
new HtmlWebpackPlugin({
title : '首页',
template : './src/view/index.html',
filename : 'view/index.html',
inject : true,
hash : true,
chunks : ['common','index']
}),
new ExtractTextPlugin("css/[name].css"),
]
template是html文件所在位置，chunk是这个html文件所要引用的js文件是哪几个（放在entry入口文件中的js），这样一来，一个html+js+css就打包成功了。如果要把css单独打包出来，则使用ExtractTextPlugin插件，单独将css抽离出来。
复盘第二节：架构设计
本地分为：view（html）、page（js+css）、image、service（接口调用服务）、util（通用工具如ajax请求等的封装）这五大部分，view和page里又分了通用的头部尾部导航栏等的封装文件夹。
复盘第三节：开始动手！
一步一步来，首先做什么呢？
先做个通用的头部、尾部和导航栏吧！（忘了，首先应该是把通用的样式写好（require进通用js中，样式要进入js里然后被导入）= =）
1、头部其实就一个。
它的业务逻辑是点击搜索，比较简单啊，就是得到输入的值keyword，然后用window.location.href=’./list.html?keyword=’+keyword定向到一个list页，返回页面。如果是点击进入此页面还需要将keyword回填到表单中。
还有一个头是head标签里的头，如下，也封装了起来，因为每个页面都需要。
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="keywords" content="happymmall,电商">
<meta name="description" content="happymmall,电商开发教程">
2、尾部只有html和css，没有什么业务逻辑。
3、导航栏比较复杂，有头部导航栏、侧边导航栏和一个只有logo的导航栏。
先说简单的，只有logo的导航栏，就是html和css。
然后是侧边导航。
业务逻辑是渲染list数据并在页面为其中一个值的时候将其设为active。
这个里面的html很简单，就是ul，li是放在string里作模版渲染，插一句，模版渲染使用的是hogan，语法很简单：
// 引入hogan
var hogan = require('hogan.js');
// 渲染所需模板
var template = '<div>Hey! I am {{name}}!</div>';
// 渲染所需数据
var data = { name : 'Rosen' };
// 模板的编译
var compiledTemplate = hogan.compile(template);
// 模板的渲染
var result = compiledTemplate.render(data);
// 输出结果 console.log(result);
// output: <div>Hey! I am Rosen!</div>
{{#list}} {{/list}}表示循环
{{^list}} {{/list}}表示非真值循环
最后是头部导航了
这个的业务逻辑稍有点多
html里，要先把‘欢迎xxx，退出‘这一块隐藏掉（使用的是display：none）
js业务逻辑里实现哪些功能呢？登录、注册、退出、加载信息这几块。
登录/注册：点击后跳转至登录注册页，注意登录按钮还需要加redirect=当前href，告知登录页登录成功后返回哪个href，要在登录页的登录按钮写这个业务。
退出：post请求给后台接口，然后reload页面。
加载用户信息：调用后台接口，如果已经登录会返回用户信息，然后把登录注册这段html隐藏，把欢迎username，退出这段显示出来，并把username替换成返回来的用户数据。
加载购物车数量：调用后台接口，返回用户购物车数量，然后把数据写到html中。
这几个模块做好之后，某个页面需要的话就可以直接使用html-loader：
<%= require(‘html-loader!./layout/header.html’) %>这样
直接引进某个页面中啦，是不是很简单！模块化就是如此吧！当然，不要忘记必需的js和css样式要在需要的页面中引入哦！
复盘第四节：用户模块设计！
用户模块是重点，主要是注册，登录，找回密码，个人信息展示与修改这几大块。这些主要是业务逻辑。
1、从注册说起吧
页面比较简单，输入用户名、密码、密码确认、电话邮箱、密码提示问题和答案这几块，下角是已有账号去登录。主要是表单的验证与提交。
输入用户名用到了异步验证，即移开焦点（blur）后即与后台验证是否存在。其他几个模块也是用到blur，即移开焦点后即验证输入是否合法，若不合法，会直接在下面提示错误信息。
点击提交按钮，进行全局验证（主要是看各个表单blur后验证的值为true还是false），数据没有问题则提交后台，页面跳转至操作成功页，否则显示错误信息。
2、登录页
页面也比较简单，就帐号和密码，下角是忘记密码和注册。输入帐号密码，简单验证一下数据（主要是输入不能为空），点击登录后提交表单数据给后台，后台返回成功或失败，成功则跳转到之前的页面（即redirect=…… 这个是之前在需要跳转至登录页的页面写好的），失败显示错误信息（密码错误）。
3、找回密码
这个是一个单页面应用，首先html是三块，输入用户名、显示输入密码提示问题并输入答案拿到token、根据token重设密码，这三个一开始都是隐藏的，在js中逐步显示。
js业务逻辑是一开始执行onload把输入用户名显示出来，然后用户输入用户名，点击下一步之后显示用户对应的提示问题（调用接口），然后输入答案，点击下一步调接口检查是否正确，如果正确接口将返回一个token并将输入新密码页面显示出来，输入新密码，并将token一起post到后台，返回修改成功。
4、修改密码
在侧边栏里有修改密码这一项，点击之后会进入修改密码这一页面，页面包含原密码，新密码和确认新密码三项，业务功能也很简单，提交原密码、新密码到接口即可。
5、个人中心
要显示个人信息，必须请求后台数据，所以要用到模版渲染，一开始的html是显示一个loading图标，当请求成功后，将数据显示出来，业务逻辑比较简单就是模版渲染插入到原页面中。
6、个人信息修改
基本和个人中心页一样，但是模版不同，渲染后个人信息在表单中，用户可编辑，点击提交post信息到后台接口，弹出窗口成功，返回个人中心页。
