【笔记】imooc - Vue2.0+Node.js+MongoDB全栈打造商城系统

心已赠人 2022-03-26 06:55 299阅读 0赞

## 第一章 ##

##### 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

### 第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][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][https_pan.baidu.com_s_1mhPejwO]  
[http://www.imooc.com/article/18438][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][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基本语法 ###

一、数据库对比

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

二、打开数据库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 课程总结 ###

[https_npm.taobao.org_mirrors_node_v6.10.3_node-v6.10.3-linux-x64.tar.xz]: https://npm.taobao.org/mirrors/node/v6.10.3/node-v6.10.3-linux-x64.tar.xz
[https_pan.baidu.com_s_1mhPejwO]: https://pan.baidu.com/s/1mhPejwO
[http_www.imooc.com_article_18438]: http://www.imooc.com/article/18438
[root_123.57.2.144]: mailto:root@123.57.2.144