江哥架构师笔记–
课程：Vue2.0 / Node.js / MongoDB 打造商城系统
地址：https://coding.imooc.com/learn/list/113.html
代码：https://git.andblog.cn/root/vue-imoocmall
https://github.com/caixiangc/imoocMall
第1章 课程介绍
1-1 课程-导学 (16:00)
章节如下：
1-2：vue基础
3-4：vueRouter vueResource
5：es6语法
6-14：实战项目
15：vuex
16：webpack
17：部署
收获：
掌握vue全家桶
掌握vue的spa开发
掌握node+express后端接口
1-2 前端框架回顾 (06:04)
1-3 vue概况以及核心思想 (19:36)
2013年底个人开发，2014.11发布0.11版本
vue结合周边生态构成一个灵活的、渐进的框架
核心思想：数据驱动、组件化
通过MVVM数据绑定实现自动同步
通过原生js来模拟vue双向数据绑定原理实现
1-4 vue框架优缺点对比 (07:04)
vue比react快一倍多
更快，更小的体积
简单语法，便于入门
第2章 Vue基础
2-1 nodejs和npm的安装和环境搭建 (07:21)
http://www.runoob.com/nodejs/nodejs-install-setup.html
https://segmentfault.com/a/1190000007829080
Linux 上安装 Node.js
直接使用已编译好的包
Node 官网已经把 linux 下载版本更改为已编译好的版本了，我们可以直接下载解压后使用：
# wget https://nodejs.org/dist/v10.9.0/node-v10.9.0-linux-x64.tar.xz // 下载
# tar xf node-v10.9.0-linux-x64.tar.xz // 解压
# cd node-v10.9.0-linux-x64/ // 进入解压目录
# ./bin/node -v // 执行node命令 查看版本
v10.9.0
解压文件的 bin 目录底下包含了 node、npm 等命令，我们可以使用 ln 命令来设置软连接：
ln -s /usr/software/nodejs/bin/npm /usr/local/bin/
ln -s /usr/software/nodejs/bin/node /usr/local/bin/
查看已安装的模块
npm list
2-2 vue环境搭建以及vue-cli使用 (17:09)
vue多页面引用：
<script src="xxx">
npm install vue
vue-cli构建spa应用
npm install -g vue-cli #全局安装，不是安装到某个项目下面
vue init webpack-simple democ #简单模式
vue init webpack demo2 #复杂模式，多了build目录，config目录
cd demo2
npm install
npm run dev
2-3 vue配置（上） (20:34)
vue init的时候eslink，可以不安装，是语法检查工具。e2e可以不安装，端到端测试
webpack配置文件说明，如果哪个require包不知道什么意思，可以在npm官网查看什么作用
https://www.jianshu.com/p/a28777405fe9
require("../config") 等于 require("../config/index.js")，如果名字为index.js，可以省略
项目里面main.js里面有
new Vue({
el: '#app',
router,
template: '<App/>',
//render: h => h(App),
components: {App} //这个意思和上面的箭头函数表示的意思是一样的
})
2-4 vue配置（下） (15:00)
vue-cli配置说明，有空详细看下文章就可以
https://segmentfault.com/a/1190000010659925
config/index.js
assetsPublicPath: '/', 作用为静态资源地址，/static/xxx，如果为cdn上面，这里可以配置为：baidu.com，则静态地址都为：baidu.com/static
轮子工厂，很多轮子
http://www.wheelsfactory.cn/#/detail?id=239
2-5 vue基础语法 (20:19)
父子通信还要看！！！！！！！！！！！！！
第3章 Vue-router
3-1 路由基础介绍 (05:27)
前端路由：根据不同url地址展现不同内容或页面
优点：
体验好，不用每次都从服务端拉取，快速展现
缺点：
不利于搜索引擎索引
无法记录之前的滚动位置，无法在前进，后退的时候记住滚动的位置
3-2 动态路由匹配 (09:20)
https://router.vuejs.org/zh/guide/essentials/dynamic-matching.html
路由有两种模式：history模式和hash模式。hash模式url里面有#，history模式里面没有
src/router/index.js 如下
import Vue from 'vue'
import Router from 'vue-router'
import GoodsList from '@/components/GoodsList.vue'
Vue.use(Router);
export default new Router({
mode: 'history',
routes: [
{
path: '/goods/:goodsId',
name: 'GoodsList',
component: GoodsList
}]
})
src/components/GoodsList.vue 如下
<template>
<div>
<span>{{msg}}</span><br>
<span>{{$route.params.goodsId}}</span>
</div>
</template>
<script>
export default{
data(){
return{
msg:"hello vue"
}
}
}
</script>
3-3 嵌套路由 (09:26)
见代码
还需要看文档，文档说的可能更明白
3-4 编程式路由 (08:30)
通过js来实现页面的跳转
$router.push({path:'name'?a=123})或者$router.push({path:'name',query:{a:123}})
下面是个示例
<button @click='jump'>button</button>
methods:{
jump(){
this.$router.push({path:'/cart?a=2'});
}
}
3-5 命名路由和命名视图 (07:37)
通过定义路由的名字来进行跳转
router{
path: 'cart/:cartId'
}
下面是视图
<router-link v-bind:to='{name:'cart', params:{cartId:123}}'>跳转</router-link>
点击会跳转到：/cart/123
第4章 Vue-resource/Axios
4-1 Vue-Resource使用（上） (22:39)
安装：npm install vue-resource --save
http://www.cnblogs.com/keepfool/p/5657065.html
get方法
methods: {
get(){
this.$http.get('package.json',{
params: {
userId: "101",
},
headers: {
token: "abcd",
}
}).then(res=>{
this.msg = res.data;
},error=>{
this.msg = error;
});
}
post方法
post: function(){
this.$http.post("package.json",{
userId: "102",
},{
headers:{
access_token: "abc",
}
}).then(function(res){
this.msg = res.data;
})
}
jsonp
这个支持跨域，其他的不支持，上面的get方法不支持跨域
jsonp: function(){
this.$http.jsonp("http://www.a.com/a.js").then(function(res){
this.msg = res.data;
})
4-2 Vue-Resource使用（下） (08:42)
全局拦截器，所有的请求都会先执行下面的操作，然后进行正常的操作
mounted:function(){
Vue.http.interceptors.push(function(request, next){
console.log("request init");
next(function(response){
console.log("response init");
return response;
})
})
},
执行过程，在请求前先执行的内容
request init
get请求
response init
全局路径，不用在后面每个请求上都写全路径，而是在全局路径的基础上进行请求，能少写些字
new Vue({
http:{
root:"www.abc.com/test"
}
4-3 axios基础介绍 (18:13)
https://ykloveyxk.github.io/2017/02/25/axios%E5%85%A8%E6%94%BB%E7%95%A5/
get方法
get: function(){
axios.get("../package.json",{
params:{
userId: "999",
},
headers:{
token: "jack"
}
}).then(res=>{
this.msg = res.data;
}),catch(function(error){
console.log("error:"+error);
})
}
post方法
post: function(){
axios.post("../package.json",{
userId: "888"
},{
headers:{
token: "tom"
}
}).then(res=>{
this.msg = res.data;
}),catch(function(error){
console.log("error:"+error);
})
}
http方法
http: function(){
axios({
url: '../package.json',
method: 'post',
data: {
userId: '101',
},
params:{
userId: '102',
},
headers:{
token: "tom",
}
}).then(res=>{
this.msg = res.data;
}),catch(function(error){
console.log("error:"+error);
})
}
全局拦截器，所有的请求都会先执行下面的操作，然后进行正常的操作
mounted:function(){
axios.interceptors.request.use(function(config){
console.log('request init');
return config;
})
axios.interceptors.response.use(function(response){
console.log('response init');
return response;
})
},
第5章 ES6常用语法
5-1 ES6简介 (01:48)
2009年es5出现
2015年es6出现
5-2 ES6常用命令 (36:37)
var 可以先使用，后定义，函数级的作用域。let，const必须先定义，后使用，块级作用域
<body>
<h2>es6演示</h2>
<div id="log" class="log"></div>
<script>
console.log("a"+a);
var a=1;
console.log("b"+b);
let b=2;
</script>
</body>
模板语言：方便将变量名放到字符串中
let userName = 'jack';
var a = `i am ${userName}`
es6新增默认参，函数默认参数，和py一样
function(flag=true){
...
}
箭头函数的作用域和外层函数的作用相同，会省去很多的麻烦
如果是普通的函数，返回给对象this不是外部函数里面的this，需要重新赋值给外部的this。而箭头函数作用域是一样的，直接赋值就可以
http: function(){
var _this=this
axios({
url: '../package.json',
method: 'get',
}).then(function(res){
_this.msg = res.data;
})
}
如果是箭头函数
http: function(){
axios({
url: '../package.json',
method: 'get',
}).then(res=>{
this.msg = res.data;
})
}
5-3 拓展参数讲解 (15:48)
下面使用es6的语法，m是可变参数，和py差不多，然后还使用箭头函数
<script>
let sum = (...m)=>{
let total = 0;
for (var i of m){
total += i;
}
console.log(`total:${total}`);
};
sum(1,2,3);
</script>
5-4 Promise讲解 (14:36)
为了解决多级嵌套回调的问题
先跳过，用到再说
5-5 ES6模块化开发讲解 (11:48)
es6的import和export使用
5-6 AMD、CMD、CommonJS和ES6差异 (09:52)
第6章 商品列表模块实现
6-1 商品列表组件拆分 (22:11)
组件可以复用，可以复用的功能放到组件里面
页面是单独一个功能
所有的静态资源都在resource目录里面
src/assets目录偏向于存放组件的静态资源
static目录偏向于存放业务方面的静态资源
static目录对应的url位置为：localhost:8080/static，也就是说说对应的根目录下的static
当组件的变量名和名字相同的时候，后面的可以省略
components:{
NavHeader,
NavFooter: NavFooter,
NavBread,
}
插槽和py里面的自定义是一样的意思
公共组件为
<nav class="nav-breadcrumb">
<a href="/">Home</a>
<slot name="bread"></slot>
<slot name="b"></slot>
</nav>
然后每个不同的页面在这个组件中显示的字符不同，直接在不同页面里面写入自定义的名字就行，然后每个页面显示出来的就不同
<nav-bread>
<span slot="bread">goods</span>
<span slot="b">test</span>
</nav-bread>
6-2 商品列表数据渲染实现 (16:22)
当build和config目录里面的文件修改后，需要重启服务！！！
这节主要是模拟一个简单的服务端，获取json数据
这一节先跳过，和后面的9.2节一块看
6-3 实现图片懒加载 (17:53)
这一节先跳过，和后面的9.2节一块看
第7章 Node.js基础
7-1 Linux环境下配置Node环境 (14:03)
各个平台的安装过程
7-2 创建http Server容器 (27:24)
一个简单的demo来演示服务端
7-3 通过node加载静态页面 (19:34)
也是服务端的演示
7-4 搭建基于Express框架的运行环境 (18:45)
安装express generator生成器
通过生成器生成框架
npm install -g express-generator
这里将前后端分为不同的目录来进行试验
前端代码目录：front-end
后端代码目录：back-end
express back-end 通过express生成back-end项目目录，里面默认会包含几个文件夹
npm install 安装依赖
npm run start 启动服务
访问web界面：http://localhost:3000/
当修改了项目文件，需要重启服务才能生效
npm install ejs --save
后面修改了一些配置，需要看具体的文件
–
–
–
评论前必须登录！
注册