第一章
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 或errorCallback
return response
})
}))
4-02 vue-router使用（下）
一、请求的url的相同部分统一设置
http{root: 'localhost:8080/test_project/api'}
二、同ajax
this.$http({
url: '',
params: {},
headers: {},
timeout: 300
before: 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、
扫一扫
1076
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
