第一章

1-01 导学

一、vue和react 目前都使用了virtual dom
二、vue、react相同点
1、利用虚拟dom实现快速渲染（jquery是直接操作dom, 虚拟dom:内存中构建类似于dom的对象）
2、轻量级
3、响应式组件
4、服务端渲染（ssr）
5、易于集成路由工具，打包工具以及状态管理工具。
6、优秀的支持和社区

1-02 前端框架回顾

一、基于MV*模式的vue框架
1、model绑定view
2、没有控制器概念
3、数据驱动，状态管理

1-03 vue概括核心思想

一、vue
1、vue本身并不是一个框架
2、vue结合周边生态构成一个灵活的、渐进式的框架
3、声明式渲染-组件系统-客户端路由-大规模状态管理
4、defineProperty

var obj = {};
Object.defineProperty(obj, 'userName', {get: function(){console.log('get init');},set: function(){console.log('set init');}
})

1-04 vue的优点对比

一、课程用到的技术栈
1、前端：vue全家桶，es6
2、后台：express框架(node)，DB用的是mongo

第02章 vue基础

2-01 nodejs和npm的安装和环境搭建

一、npm是一个包管理工具，依赖于Nodejs运行环境。

2-02 vue环境搭建以及vue-cli使用

二、vue-cli 构建spa应用
1、npm install -g vue-cli
2、vue init webpack demo2，项目名称得是小写的demo2，如果是Demo2，则验证不会通过。

2-04 vue配置（下）

一、/build/
1、dev-client.js，热更新插件
2、dev-server.js,启动一个express框架
二、加载一张图片，会自动发送一个请求，非常耗费资源，base64文本插进去，这个请求就省掉了。
三、node_modules：项目的安装依赖，一般根据自己项目需求安装，github上下载下来的没有node_modules。

2-05 vue基础语法

一、模板语法
1、mustache语法：{{msg}}
2、html赋值： v-html=
3、绑定属性：v-bind:id=
4、使用表达式：{{ok ? ‘yes’ : ‘no’}}
5、文本赋值：v-text
6、指令： v-if=
7、过滤器：{{message | capitalize}} 和v-bind:id=“rawId | formatId”
二、class和style绑定
1、对象语法：v-bind:class="{active: isActive, ‘text-danger’: hasError}"
2、数组语法
v-bind:class=“activeClass”
data: {activeClass: ‘active’}
3、style绑定-对象语法：v-bind:style="{color: activeColor, fontSize: fontSize + ‘px’}"
三、条件渲染
1、v-if
2、v-else
3、v-else-if
4、v-show
5、v-cloak，如果页面刷新太快，某些元素没有加载出来,v-cloak可以同步隐藏Html代码。
四、vue事件处理器
1、v-on:click="greet"或者@click=“greet”
2、v-on:click.stop, v-on:click.stop.prevent, v-on:click.self, v-on:click.once
stop：阻止冒泡
prevent：阻止默认事件，a链接不会再跳转页面
self：给自己绑定事件，子元素不绑定这个事件
once：只绑定一次。
3、v-on:keyup.enter
enter、tab、delete等
五、vue组件
1、全局组件和局部组件
2、父子组件通讯-数据传递
3、slot

第03章 vue-router

3-01 路由基础介绍

一、前端路优缺点
1、优点
（1）用户体验好，不需要每次都从服务器获取。
2、缺点
（1）不利于seo
（2）使用浏览器的前进，后退键的时候重新发送请求，没有合理利用缓存。
（3）单页面无法记住之前滚动的位置，无法在前进，后退的时候记住滚动的
二、路由
1、<router-link> 或者this.$router.push({path: ''}) 路由的跳转
2、<router-view> 组件的渲染
三、路由
1、动态路由匹配
router/index.js中：path: '/goods/:id;
2、嵌套路由
router/index.js里有路由，下级的页面也可以通过

<div>{{$route.params.goodsId}} </div>  组件之间路由切换
<router-link to="/goods/title">
<router-view>

添加路由，
3、编程式路由
通过js来实现页面的跳转

（1）$router.push('name')
（2）$router.push({path:'name'})
（3）$router.push({path:'name?a=123'})
（4）$router.go(1)

如果页面获取路由
{{$route.query.goodsId}}
4、命名路由和命名视图
（1）什么是命名路由和命名视图
①给路由定义不同的名字，根据名字进行匹配
②给不同的router-view定义名字，通过名字进行对应组件的渲染
（2）命名路由
goods.vue

<router-link :to="{name:'cart', params:{cartId:123}}">
params是路由的参数，不是页面之间跳转的参数
<router-view name="cart">

（3）命名视图
①app.vue

<router-view></router-view>
<router-view name="title"></router-view>
<router-view name="img"></router-view>

②router/index.js

routes:[{path: '/',name: 'GoodsList',components: [default: GoodsList,title: Title,img: Image]}
]

第04章 vue-resource 和axios

4-01 vue-router使用（上）

一、vue-resource的请求api是按照rest风格设计的，7种请求api
（1）get(url, [options])

this.$http.get('package.json', {params: {userId: '101'}, // 参数写到params中headers: {token: 'abcd'}
}).then(res => {this.msg = res.data; // 最终的结果是res.data，不是res
}，error => {this.msg = error;
})

（2）head(url, [options])
（3）delete(url, [options])
（4）josnp(url, [options])

this.$http.jsonp('package.json', {userId: '101'},{headers: {token: 'abcd'}
}).then(res => {this.msg = res.data; // 最终的结果是res.data，不是res
}，error => {this.msg = error;
})

（5）post(url, [body], [options])

this.$http.post('package.json', {userId: '101'},{headers: {token: 'abcd'}
}).then(res => {this.msg = res.data; // 最终的结果是res.data，不是res
}，error => {this.msg = error;
})

（6）put(url, [body], [options])
（7）patch(url, [body], [options])
二、参数
1、url、method、body（request body）、params、headers、timout、before、progress、credientials、emulateHTTP、interceptors（全局拦截器）

Vue.http.interceptors.push((request, () => {// 请求发送前的处理逻辑next((response) => {// 请求发送后的逻辑处理// 根据请求的状态，response参数会返回给successCallback 或errorCallbackreturn response})
}))

4-02 vue-router使用（下）

一、请求的url的相同部分统一设置
http{root: 'localhost:8080/test_project/api'}
二、同ajax

this.$http({url: '',params: {},headers: {},timeout: 300before: function(){}
}).then(function(res){})

4-03 axios介绍

一、不推荐vue-resource，推荐axios
二、axios基础介绍
1、axios.request(config)
2、axios.get(url[, config])
3、axios.delete(url[, config])
4、axios.head(url[, config])
5、axios.options(url[, config])
6、axios.post(url[, data[, config]])
7、axios.put(url[, data[, config]])
8、axios.put(url[, data[, config]])
9、

axios.all([getUserAccount(), getUserPermission()]).then(axios.spread(function(acct, perms){}))

三、vue-resource插件是挂载到vue实例中的，axios插件是一个暴露的全局变量，并没有挂载到vue实例中。
四、axios的method为get时，用params:{id: 2},为post时，用data:{id: 1}
五、拦截

// 请求的拦截
axios.interceptors.request.use(function(config) {console.log('request init');return config;
})
// 响应后的拦截
axios.interceptors.response.use(function(response) {console.log('response init');return response;
})

第05章 es6常用语法

5-02 es6常用命令

一、参数不定，循环

function sum(...m) {let total = 0;for (var i of m) {total += i;}console.log(`total:${total}` ;
}
sum(4, 8, 9, 10)

（2）

let sum3 = (...m) => {
let total = 0;for (var i of m) {total += i;}console.log(`total:${total}` ;}

二、扩展
…放在参数的位置成为rest参数
…与数组结合成为函数的扩展，是一种运算符
arr1.concat(arr2)
[…arr1, …arr2]

5-04 es6模块化开发讲解

一、单独引入js
1、import，相当于以前的require.js，异步加载js

5-05 amd、cmd、commonJs、es6差别

一、amd、cmd、CommonJs和es6对比
1、AMD是RequireJS在推广过程中对模块定义的规范化产出。（异步模块化定义）

difine(['package/lib'], function(lib){function foo() {lib.log('hello world');}return {foo: foo}
})

2、CMD是SeaJS在推广过程中对模块定义的规范化产出（同步模块化定义）

// 所有模块都通过define来定义
define(function(require, exports, module) {// 通过require引入依赖var $ = require('jquery');var Spinning = require('./spinning');
})

amd依赖前置，cmd依赖就近
3、CommonJS规范-module.exports
前端浏览器不支持module.exports
后端服务器支持module.exports

exports.area = function(r) {return Math.PI * r * r;
}
exports.circumference = function(r) {return 2 * Math.PI * r;
}

(1)匿名输出module.exports
(2)带名字的输出：exports.area
4、es6特性：export/ import

export default {data(){return {}}
}

(1)amd, cmd, commonjs都是es5规范，export, import是es6规范。

第06章 商品列表模块实现

6-01 商品列表组件拆分

一、一般assets里的是组件资源，打包过程中会打包到一起，static放的都是页面上要加载的图片（页面上比较大的图片）

6-02 商品列表数据渲染

一、每个组件的data都必须是一个函数，不是一个对象。不允许组件之间进行共享，每个组件必须是独立的。
二、图片最好不直接写src，最好动态绑定src，如果直接写src，第一次加载，图片地址可能加载速度没那么快，可能加载不出图片。
<img :src="imgSrc">
<img :src="'/static/img/name.png'"> 如果是字符串，等用’’

6-03 实现图片懒加载

一、图片懒加载插件
1、npm i vue-lazyload --save
2、main.js

import VueLazyLoad from 'vue-lazyload';
Vue.use(VueLazyLoad, {loading: "/static/loading-svg/loading-bar.svg"
});

3、GoodsList.vue

<img v-lazy="'/static/img/1.png'">

第07章 node

7-01 linux环境搭建

一、node.js在linux下安装和环境搭建 linux/ˈlɪnəks/
1、wget https://npm.taobao.org/mirrors/node/v6.10.3/node-v6.10.3-linux-x64.tar.xz
2、xz -d node-v6.10.3-linux-x64.tar.xz / tar -xzvf node-v6.10.3-linux-x64.tar.gz
3、tar -xvf node-v6.10.3-linux-x64.tar
4、ln -s /node-v6.10.3-linux-x64/bin/node /usr/local/bin/node
5、ln -s /node-v6.10.3-linux-x64/bin/npm /usr/local/bin/npm
6、ln:link
二、/usr/local里有node
/usr/bin/： 可执行文件一般都会放到这里
三、方法2（不推荐，安装的版本较低，且不稳定）
1、sudo apt-get install nodejs
2、sudo apt-get install npm

7-02 创建httpserver

一、commonjs规范都是通过module.exports输出的，一般通过require加载，一个js文件就代表一个模块。
二、nodejs支持es6，nodejs基于chrome v8，chrome v8引擎支持大部分es6，不需要编译。
nodejs端的引擎都是统一的，前端es6有很多浏览器是不支持的，所以前端代码需要babel进行编译。
三、运行脚本通过node运行，require在安装Node的时候已经安装到包里，可直接用require
四、path是一个全局变量，用在哪儿，就表示当前目录
inspect，把字符串转换成对象
五、http模块没有server的方法

7-03 通过Node加载静态资源

一、fs，文件系统
二、一般被调用方被称为服务端，调用方称为客户端。
三、基于Node的所有框架都是基于最底层模块进行封装的。

7-04 搭建基于express运行环境

一、安装express generator生成器，能快速生成一个项目
二、选择jade,ejs,html模板
三、搭建express环境
1、cd imoocMall
2、express server //创建了一个server文件夹，有bin,public，routes等文件
（1）bin：可执行文件，通过http创建了一个server，其他的都是一些配置文件
（2）public：静态资源
（3）routes：路由
①index.js，路由是按模块划分的
（4）app.js：文件入口
// 通过use安装第三方插件

app.use(express.static(path.join(__dirname, 'public'))); // 设置静态目录

（5）package.json：配置文件
如果前后端没有分离，可以共用一个package.json
3、cnpm i
4、cd server
5、node bin/www
四、使用html，不使用Jade
1、cnpm i ejs --save
2、server/ app.js

var ejs = require('ejs');
app.engine('.html', ejs._express);
app.set('view Engine', 'html');

3、server/ views/ index.html，创建html
4、node server www

第08章 mongoDB介绍

8-02 linux 平台下的搭建

一、mongoDB安装和环境搭建
1、下载安装包或者压缩包
2、上传服务器，解压缩。
3、添加db存储和日志存储文件夹
https://pan.baidu.com/s/1mhPejwO
http://www.imooc.com/article/18438
三、连接服务器
1、 ssh root#123.57.2.144（#后面是服务器地址）
2、cd / 进入根目录
3、command + t 新开一个窗口
4、ftp ssh scp，链接远程服务器，像服务器发送文件
5、scp /Macsoft/mongodb-linux-x86_64_ubuntu1404-3.4.tgz root@123.57.2.144? （/表示传到根目录）
本机往服务器传，所以要在本机执行shell命令，而不是在服务器执行。
6、tar -zxvf mongodb-linux-x86_64_ubuntu1404-3.4.tgz (解压)
7、mkdir mongodb （创建文件夹）
8、cd mongodb-linux-x86_64_ubuntu1404-3.4 (进入文件夹)
9、ls -la（查看文件）
10、cd
11、mv mongodb-linux-x86_64_ubuntu1404-3.4 mongodb（mv：移动，把项目整体移动进去）
12、clear
13、mkdir data （data：存放数据库db文件）
14、mkdir logs（logs：存放日志）
15、cd logs/
16、touch mongo.log
17、cd
18、mkdir etc
19、rm -rf et
20、vi mongo.conf （vi可以直接编辑）按i开始编辑
21、bdpath=/mongodb/data
logpath=/mongodb/logs/mongo.log
logappend=true // 错误追加，而不是覆盖
journal=true // 默认是true
quiet=false // 默认过滤true，如果需要调试，就设置成true
port=27017
22、按esc退出编辑模式，shift+:+wq 保存退出
23、cd 退出
24、cd mongodb-linux-x86_64_ubuntu1404-3.4/bin/
25、mongod -f /mongodb/etc/mongo.conf
26、打开mongohub
27、ln -s mongodb-linux-x86_64_ubuntu1404-3.4/bin/mongo /usr/local/bin/mongo (建立一个软链接）
28、ln -s mongodb-linux-x86_64_ubuntu1404-3.4/bin/mongod /usr/local/bin/mongod
29、mongod -f /mongodb/etc/mongod.conf （-f指定配置文件）
30、show dbs
31、use demo
32、db goods insert({id: 1000,“name”}) // goods集合
33、db.goods.find() // shell语句，可以用客户端操作
四、mongohub（mongodb客户端管理工具）
1、可以创建数据库

8-03 给mogodb创建用户

一、添加用户
1、创建管理员
2、授权认证
3、给使用的数据库添加用户
二、1、mongod -f /usr/local/etc/mongod.conf // 非授权模式
mongod -f /usr/local/etc/mongod.conf --auth // 授权方式
3、mongo
4、show dbs
5、use admin
6、db createUser({user: “admin”, pwd: “admin”, roles: [“root”]})
3.4以前的2.几的版本：用的是 addUser()，而不是createUser
7、db.auth(“admin”, “admin”)
8、use test // 切换数据库
9、db createUser({user: ‘root’, pwd: ‘123456’, roles: [{role: ‘dbOwner’, db: ‘test’}]})
10、mongod -f /usr/local/etc/mongod.conf --auth // 认证方式

8-04 mogodb基本语法

一、数据库对比

SQL术语/概念	MongoDB术语、概念	解释/说明
database	database	数据库
table	collection	数据库表/集合
row	document	数据记录行/文档
column	field	数据字段/域
index	index	索引
table joins		表连接，MongoDB
primary key	primary key	主键，MongoDB自动将_id字段设置为主键

二、打开数据库mongoDB步骤：
（1）进入数据库文件目录：cd /Users/yquanmei/dd/software/mongoDB/mongodb-osx-x86_64-4.0.2
（2）启动脚本/启动配置文件：mongod --dbpath data --logpath log/mongod.log --logappend --fork
（3）启动数据库：mongo

8-05 表数据设计和插入

一、
1、mongodb终端
（1）use db demo
（2）db.goods.insert({“productId”:“10001”,“productName”:“aaa”,“salePrice”:249,“productImage”:“1.jpg”})
2、客户端导入：Mongohub
（1）db.createCollection(“users”)；// 提前建立一个集合
3、直接导入数据
（1）mongoimport -d db demo -c users --files /Users/jacksoft/Desktop/dumail-users

第09章 基于node.js开发商品列表接口

9-01 node的启动和调试

一、nodejs启动调试方式
1、通过node命令启动
2、webstorm配置启动入口
3、

9-02 基于express实现商品列表查询接口

9-03 商品列表分页和排序功能实现（上）

9-04 商品列表分页和排序功能实现（下）

9-05 价格过滤功能实现

9-06 加入购物车功能实现

第10章 登录模块实现

10-01 登录功能实现

10-02 登出功能实现

10-03 登录拦截

10-04 全局模态框组件实现

第11章 购物车模块实现

11-01 购物车列表功能实现

11-02 商品删除功能实现

11-03 商品修改功能

11-04 购物车全选和商品实时计算功能实现

第12章 地址模块实现

12-01 地址里诶包渲染实现（上）

12-02 地址列表渲染功能实现（下）

12-03 地址里列表切换和展开功能实现

12-04 地址设置默认功能实现

12-05 地址删除功能实现

第13章 订单确认模块实现

13-01 订单确认列表渲染功能实现

13-02 创建订单功能实现

第14章 订单成功模块实现

14-01 订单成功页面功能实现

第15章 基于vuex改造登录和购物车数量功能

15-01 vuex基本介绍

15-02 vuex的语法讲解

15-03 通过vuex实现登录和购物车数量（上）

15-03 通过vuex实现登录和购物车数量（下）

第16章 webpack使用

16-01 webpack基本介绍

16-02 插件静态部分实现

16-03 插件功能实现

16-04 webpack打包功能实现（上）

16-05 webpack打包功能实现（下）

16-06 npm插件发布

16-07 webpack多页面构建（上）

16-08 webpack多页面构建（下）

16-09 webpack多页面构建-第三方库

第17章 线上部署

17-01 线上部署（上）

17-02 线上部署（中）

17-03 线上部署（下）

第18章 课程总结

18-01 课程总结