Vue2.0+Node.js+MongoDB全栈打造商城系统
Vue2.0+Node.js+MongoDB全栈打造商城系统
F:\Vue教程\Vue2.0+Node.js+MongoDB全栈打造商城系统\第1章课程介绍
1.1导学.mp4
vue框架对比
Vue和React对比
.Angular提供的更多是一整套解决方案，后者更像是一个生态
.Vue和React目前都使用了Virtual Dom
vue框架对比
Vue
·模板和渲染函数的弹性选择
·简单的语法及项目创建
·更快的渲染速度和更小的体积
React
·更适用于大型应用和更好的可测试性
•同时适用于Web端和原生App
·更大的生态團带来的更多支持和工具
Vue和React相同点
·利用虚拟DOM实现快速渲染
·轻量级 优秀的支持和社区
响应式组件
服务器端渲染
·易于集成路由工具，打包工具以及状态管理工具
1.2前端框架回顾.wmv
前端JS框架回顾
DOJO Spine emben prototype REQUIRE.js JQuery BACKBONE.JS React Vue Angular
斯坦福大学计算机系宣布，《编程导论》课程放弃使用Java语言，全部改用JavaScript
模块化的开发框架 require.js
基于DOM操作的函数库 jquery.js
基于MVC模式的Spine框架
Model和View解耦
Controller控制DOM
完全照搬MVC模式
基于MV*模式的Vue框架
Model绑定View
没有控制器概念
数据驱动，状态管理
1.3vue概括核心思想.wmv
vue概况以及核心思想
2013年底作为尤雨溪个人实验项目开始开发
2014年2月公开发布
2014年11月发布0.11版本
截至目前所经历的版本vue 0.11、vue 1.0、vue 2.0
截至目前版本已经发布到2.3.2，GitHub上面已经有52，640 Stars
vue商城蜗牛1266840774
Vue本身并不是一个框架
Vue结合周边生态构成一个灵活的、渐进式的框架
核心思想
数据驱动，组件化
通过MVVM的数据绑定实现自动同步
Vue组件树 组件化
Vue如何实现双向数据绑定？
•Object.defineProperty（）函数
控制台 shift+回车 换行
<input type="text" id='a'>
<span id="b"></span>
var obj={}
Object.property(obj,'username',{
value:"koo",
get(){},
set(newVal){
document.getElementById('a').value=newVal
document.getElementById('b').innerHTML=newVal
}
})
document.addEventListener('keyup',(e)=>{
obj.username=e.target.value
})
1.4vue的优点对比.wmv
基于全栈开发一个简易的商城系统 前端使用Vue全家桶以及ES6 后端使用Express框架，DB使用Mongo
Mongo 忙狗
课程收获
掌握Vue全家桶知识
掌握基于Vue的SPA应用开发
掌握ES6知识
掌握Node + Express的后端接口开发
掌握MongoDB等数据库知识
掌握Vue+Node项目的线上部署
express exbolai
F:\Vue教程\Vue2.0+Node.js+MongoDB全栈打造商城系统\第2章Vue基础
2-1 nodejs和npm的安装和环境搭建.wmv
webpack babel vue express gulp grunt
下载地址：https://nodejs.org/en/download/
npm install-g cnpm-registry=https://registry.npm.taobao.org
node -v v6.0.0 npm -v 4.5.0
cnpm list
2-2 vue环境搭建以及vue-cli使用.wmv
Vue多页面应用文件引用
·官网拷贝：
•npm安装
vue-cli构建SPA应用
npm install-g vue-cli
vue init webpack-simple demo
vue init webpack demo2
gitbase
vue 2.2.6
cnpm start / cnpm run dev
2-3 vue配置（上）.wmv
2-4 vue配置（下）.wmv
2-5 vue基础语法.wmv
Vue基础语法介绍
模板语法
.Mustache语法：{{msg}}
.Html赋值：v-html=""
·绑定属性：v-bind:id=""
使用表达式：{{ok?'yes':'no'}}
文本赋值：v-text=""
·指令：v-if=""
过滤器：{{messagge|capitalize}}和v-bind:id="rawld | formatld"
Class和Style绑定
对象语法:v-bind:class="{active:isActive,'text-danger':hasError}"
数组语法
<div v-bind:class="[activeClass,errorClass]">
data:{activeClass:'active',errorClass:'text-danger'}
style绑定-对象语法:v-bind:style="{color:acticeColor,fontSize:fontSize+'px'}"
条件渲染
v-if v-else v-else-if v-show v-cloak
vue事件处理器
.v-on:click="greet"或者@click="greet"
.v-on:click.stop，v-on:click.stop.prevent，v-on:click.self，v-on:click.once
v-on:keyup.enter
.enter .tab .detele .esc .space .up ..down .left .right （捕获、删除"和-退格键）
Vue组件
·全局组件和局部组件
·父子组件通讯-数据传递 props emit
Slot
F:\Vue教程\Vue2.0+Node.js+MongoDB全栈打造商城系统\第3章Vue-router
1路由基础介绍.wmv
什么是前端路由？
路由是根据不同的url地址展示不同的内容或页面
前端路由就是把不同路由对应不同的内容或页面的任务交给前端来做，之前是通过服务端根据url的不同返回不同的页面实现的
什么时候使用前端路由？
在单页面应用，大部分页面结构不变，只改变部分内容的使用
前端路由有什么优点和缺点？
优点：用户体验好，不需要每次都从服务器全部获取，快速展现给用户
缺点：
不利于SEO使用浏览器的前进，后退键的时候会重新发送请求，没有合理地利用缓存
单页面无法记住之前滚动的位置，无法在前进，后退的时候记住滚动的位置
vue-router用来构建SPA
动态路由匹配
嵌套路由
编程式路由
命名路由和命名视图
2动态路由配置.wmv
什么是动态路由？
模式 匹配路径 $route.params
/user/:username /user/evan {username:'evan'}
/user/:username/post/:post_id /user/evan/post/123 {username:'evan',post_id:123}
components 模态框 对话框 导航 复用的组件
views 购物车 订单页面...
/user/:id动态路由 {{this.$route.params.id}}
/user/id33 user?id=123
history.back后退 history.go前进
mode history/hash
history 起s吃里
3嵌套路由.wmv
什么是嵌套路由？
路由嵌套路由
js children 秋的 不加/
html <router-link to="/good/user"> 写全部
4编程试路由.wmv
什么是编程式路由？
通过js来实现页面的跳转
$router.push('/name')
$router.push({path:"/name"})
$router.push({path:"/name?a=123"})或者$router.push({path:"name",query:{a:123}})
接受参数this.$route.query.a
$router.go(1)
5命名路由和命名视图.wmv
什么是命名路由和命名视图？
给路由定义不同的名字，根据名字进行匹配
给不同的router-view定义名字，通过名字进行对应组件的渲染
<router-view></router-view>
<router-view name="title"></router-view>
<router-view name="img"></router-view>
router.js 加载对应的组件
new Router({
routes:[
{path:'/',name:"Home",components:{
default:Home,
title:Title,
img:Image
}}
]
})
F:\Vue教程\Vue2.0+Node.js+MongoDB全栈打造商城系统\第4章Vue-resource和Axios
1vue=resourse使用上.wmv
Vue-Resource基础介绍
.
• npm install vue-resource -save
vue-resource的请求API是按照REST风格设计的，它提供了7种请求API：
get(url,[options]) 服务器拿数据
head(url,[options])
delete(url,[options])
jsonp(url,[options])
post(url,[body],[options]) 提交数据
put(url,[body],[options])
patch(url,[body],[options])
全局拦截器interceptors
Vue.http.interceptors.push((request,next)=>{
//请求发送前的处理逻辑
next((response)=>{
//请求发送后的处理逻辑
//根据请求的状态，response参数会返回给successcal1back或errorCalLback
return response
})
})
http://coding.imooc.com/leam/ist/113.html
2下.wmv
new Vue({
http:{
root:"http://127.0.0.1/"
},
methods:{}
})
this.$http({
url:'package.json',
params:{
userId:'123'
},
headers:{token:'123'},
timeout:5,
before(){}
}).then()
3axios介绍.wmv
npm install axios-save
axios.request(config)
axios.get(url[,config])
delete head options
axios.post(url[,data[,config]])
put patch
箭头函数 作用域和外面保持一致
get-params post-data
拦截器
axios.interceptors.request.use(config=>{
return config
})
axios.interceptors.response.use
F:\Vue教程\Vue2.0+Node.js+MongoDB全栈打造商城系统\第5章ES6常用语法
5-1 ES6简介.wmv
5-2 ES6常用命令.wmv
ES6常用命令介绍二
函数的Rest参数和扩展
Promise使用
module.exports和ES6 import/export的使用
``字符串模板 ...三个点 for(let i of m)
arr1.concat(arr2) = [...arr1,...arr2]
... 参数 数组扩展 字符串拆解
5-3 拓展参数讲解.wmv
Promise.all([pro1,pro2]).then(([res1,res2])=>{})
5-4 Promise讲解.wmv
import * as util from './xx'
util.sum()
import()异步加载
5-5 ES6模块化开发讲解.wmv
AMD，CMD，CommonJs和ES6对比
什么是AMD，CMD，CommonJs？
它们之间有什么区别？
项目当中都是如何运用的。
AMD是RequireJS在推广过程中对模块定义的规范化产出。异步加载
define(['package/lib'],function(lib){
function foo(){
lib.log('hello')
}
return {
foo:foo
}
})
依赖前者
CMD是SeaJS在推广过程中对模块定义的规范化产出。淘宝团队
//所有模块都通过define来定义
define(function(require,exports,module){
//通过require引入依赖
var $=require('jquery')
var Spinning=require('./spinning')
})
依赖就近 同步概念 用到那就导入那
CommonJS规范-module.exports 前端不支持 node支持
exports.area=function(r){
return Math.PI*r*r
}
ES6特性export/import
export default{}
import x from 'xx'
5-6 AMD、CMD、CommonJS和ES6差异.mov
F:\Vue教程\Vue2.0+Node.js+MongoDB全栈打造商城系统\第6章商品列表模块实现
1商品列表组件拆分.wmv
商品列表基础组件拆分
Header组件
Footer 件
面包屑组件
new Vue({
//1.el:'#app',
router,
//2.template:'<App/>',
//2.components:{App}
render:h=>h(App) //2 ==
}).$mount('#app') //1 ==
assets 组件静态资源 图片64bit
static 公共资源 图片原 大图片
2商品列表数据渲染.wmv
商品列表数据渲染实现
模拟mock数据，加载商品列表信息
express.Router
var express=require('express')
var app=express()
var goodsData = require('../mock/goods.json')
var router = express.Router()
router.get("/goods", function (req,res,next) {
res.json(goodsData) //json-json end()-string
})
app.use(router)
3实现图片懒加载.wmv
cnpm i vue-lazyload --save
F:\Vue教程\Vue2.0+Node.js+MongoDB全栈打造商城系统\第7章Node
1linux环境搭建.wmv
Node.js在Linux下安装和环境搭建
wget https://npm.taobao.org/mirrors/node/v6.10.3/node-v6.10.3-linux-x64.tar.xz
xz-d node-v6.10.3-linux-x64.tar.xz / tar-xzvf node-v6.10.3-linux-x64.tar.gz
tar-xvf node-v6.10.3-linux-x64.tar
In-s /node-v6.10.3-linux-x64/bin/node /usr/local/bin/node
In-s /node-v6.10.3-linux-x64/bin/npm /usr/local/bin/npm
sudo apt-get install nodejs
sudo apt-get install npm
2创建httpserver.wmv
Node基础编程
1基于Chrome V8引擎
2.单线程
3.使用JavaScript开发后端代码
4.非阻塞的IO
演示Common规范
创建一个Http Server
创建一个Web容器，可以访问到HTML内容
Http模块客户端演示
commonjs规范module.exports={} require()加载
module.exports={
username:'koo',
say(){
return 'hello'
}
}
===
exports.username='koo'
exports.say=function(){}
const http=require('http')
const url=require('url')
const util=require('util')
let server=http.createServer((req,res)=>{
res.statusCode=200
res.setHeader('Content-Type','text/plain;charset=utf-8')
// res.end('helloworld')
//req.url(获得url/index.html?id=1) parse转换成对象 inspect工具把对象展开
res.end(util.inspect(url.parse(req.url)))
})
server.listen(3000,'127.0.0.1',()=>{
console.log('输入：http://127.0.0.1:3000/')
})
http://coding.imooc.com/lesson/113.html#mid=4905
3通过node加载静态资源.wmv
let http = require('http');
let url = require('url');
let util = require('util');
let fs = require('fs');
let server = http.createServer((req,res)=>{
//res.statusCode = 200;
//res.setHeader("Content-Type","text/plain; charset=utf-8");
var pathname = url.parse(req.url).pathname;
console.log("file:"+pathname.substring(1))
fs.readFile(pathname.substring(1), function (err,data) {
if(err){
res.writeHead(404,{
'Content-Type':'text/html'
});
}else{
res.writeHead(200,{
'Content-Type':'text/html'
});
res.write(data.toString());
}
res.end();
});
});
server.listen(3000,'127.0.0.1', ()=>{
console.log("服务器已经运行，请打开浏览,输入:http://127.0.0.1:3000/ 来进行访问.")
});
fs node 读取文件
4搭建基于expres框架的运行环境.wmv
搭建基于Express框架运行环境
安装express generator生成器
通过生成器自动创建项目
配置分析
cnpm i -g express-generator
express --version
express projectname
xxx.jade 编程式 html https://www.cnblogs.com/trotyl/p/3888383.html
serverdemo>node bin/www
cnpm i ejs --save
F:\Vue教程\Vue2.0+Node.js+MongoDB全栈打造商城系统\第8章MongoDB介绍
1window下mongodb环境搭建2.wmv
window下mongodb环境搭建1.wmv
windows平台下MongoDB安装和环境搭建
高可扩展性
分布式存储
低成本
结构灵活
下载安装包或者压缩包
添加db存储和日志存储文件夹
添加服务、配置环境变量、启动Mongo
https://www.mongodb.com/download-center?jmp=nav#community
https://pan.baidu.com/s/1mhPejwo
http://www.cnblogs.com/jacksoft/p/6910709.html 作者博客
https://blog.csdn.net/muguli2008/article/details/80591256 mongodb官网下载不了， MongoDB下载、安装、配置、使用，如何下载MongoDB数据库，MongoDB入门
https://www.mongodb.com/try/download
www.imooc.com/article/18438
mongod -version
mongo
show dbs 查看当前服务（127.0.0.1：27017）下的所有MongoDB数据库
use test 切换到test数据库
db 当前所在数据库 pwd作用
use imoocmall
db.goods.insert({id:101,"name":"mi6","salePrice":2499})
db.goods.find() 查看
MongoVUE
默认没有用户和密码
2linux平台下的搭建.wmv
Linux平台下MongoDB安装和环境搭建
下载安装包或者压缩包
上传服务器，解压缩
添加db存储和日志存储文件夹
https://pan.baidu.com/s/1mhPejwo http://www.imooc.com/article/18438
Mac MongoHub.app
3给mogodb创建用户.wmv
MongoDB创建用户
安全提升 只允许一个ip访问 或者 设置帐号密码
1创建管理员
2.授权认证
3.给使用的数据库添加用户
mongod --auth授权模式
use admin
db.createUser({user:"admin",pwd:"admin",roles:["root"]})设置帐号密码
db.auth("admin","admin") 验证帐号密码
use test
db.createUser({user:"root",pwd:"123456",roles:[{role:"dbOwner",db:"test"}]})
帐号密码admin
4mogodb基本语法.wmv
插入文档
更新文档
删除文档
查询文档
show dbs
use demo
db.createCollection("user") 创建user表
===
db.users.insert({id:123,name:"hello"})
show collections 查询多少表
db.users.find() 查询表内容
db.user.drop() 删除表
use demo
db.dropDatabase()删除数据库
class里面又是一个集合
db.user.find().pretty() 格式化输出
db.user.findOne()差第一条数据
db.user.update({userName:"jack"},{$set:{userAge:30}}) 更新条件 更新内容
更新子集合
> db.user.find({"class.name":"baidu"})查找条件
db.user.find({userAge:{$gt:20}}) 查找年龄大于20的 $gt
$lt小于 $gt大于 $eq等于
$gte大于等于 $lte小于等于
db.user.remove({userId:101})删除字段
5表数据设计和插入.wmv
use db_demo
db.goods.insert({"productId":"10001","productName":"aaa","salePrice":249,"productImage":"1.jpg"})
import file 导入文件
mongoimport -d db_demo -c users dumall-users
https://blog.csdn.net/weixin_42294060/article/details/113252948 mongodb使用mongoimport导入数据时找不到mongoimport出错（‘mongoimport‘ 不是内部或外部命令，也不是可运行的程序）
F:\Vue教程\Vue2.0+Node.js+MongoDB全栈打造商城系统\第9章基于Node.js开发商品列表接口
9-1 node的启动和调试.wmv
Node.js启动调试方式
通过node命令启动
webstorm配置启动入口
pm2
二级路由
webstore run 编辑 添加 wwwjs 运行debug
最下面切换 run debug 终端
pm2 -v
>pm2 start bin/www
pm2 list
>pm2 stop bin/www
pm2 stop all
进程方式 后台
pm2 log 查看日志
9-2 基于Express实现商品列表查询接口.mov
基于Express开发商品列表查询接口
安装Mongoose
创建model
创建路由
基于mongoose，实现商品列表的查询功能
cnpm i mongoose -S
不外面run 先找node_modules
supervisor插件
good goods 模糊查看 sql
9-3 商品列表分页和排序功能实现(上).mov
9-4 商品列表分页和排序功能实现（下）.mov
vue-infinite-scroll 滚动加载
9-5 价格过滤功能实现.mov
{salePrice:{$gte:500,$ite:1000}} 大于等于500----小于等于1000
https://github.com/search?utf8-/&q=loading&type=
https://github.com/jxnblk/loading loading
9-6 加入购物车功能实现.wmv
F:\Vue教程\Vue2.0+Node.js+MongoDB全栈打造商城系统\第10章 登录模块实现
10-1 登录功能实现.wmv
10-2 登出功能实现.wmv
10-3 登录拦截.mp4
indexOf -1 location.pathname
cnpm i express-session
10-4 全局模态框组件实现.mp4
F:\Vue教程\Vue2.0+Node.js+MongoDB全栈打造商城系统\第11章购物车模块实现
11-1 购物车列表功能实现.wmv
11-2 商品删除功能实现.wmv
11-3商品修改功能.wmv
11-4 购物车全选和商品实时计算功能实现.mov
F:\Vue教程\Vue2.0+Node.js+MongoDB全栈打造商城系统\第12章地址模块实现
12-1 地址列表渲染实现（上）.wmv
12-2 地址列表渲染功能实现（下）.wmv
箭头函数指向外面
12-3 地址列表切换和展开功能实现.wmv
数组.slice(start,end)截取
箭头变化 用transform transtion
12-4 地址设置默认功能实现.wmv
12-5 地址删除功能实现.wmv
F:\Vue教程\Vue2.0+Node.js+MongoDB全栈打造商城系统\第13章 订单确认模块实现
13-1 订单确认列表渲染功能实现.wmv
13-2 创建订单功能实现.wmv
F:\Vue教程\Vue2.0+Node.js+MongoDB全栈打造商城系统\第14章 订单成功模块实现
14-1 订单成功页面功能实现.mp4
F:\Vue教程\Vue2.0+Node.js+MongoDB全栈打造商城系统\第15章 基于Vuex改造登录和购物车数量功能
15-1 Vuex基本介绍.mp4
什么是Vuex？ Vuex是一个专为 Vue.js应用程序开发的状态管理模式。
为什么要用Vuex？当我们构建一个中大型的单页面应用程序时，Vuex可以更好的帮助我们在组件外部统一管理状态。
Vuex的核心概念
State State是唯一的数据源。单一状态树。
Getters 通过Getters可以派生出一些新的状态
Mutations 更改Vuex的store中的状态的唯一方法是提交mutation
Actions Action提交的是mutation，而不是直接变更状态 Action可以包含任意异步操作
Modules 面对复杂的应用程序，当管理的状态比较多时，我们需要将Vuex的store对象分割成模块（modules），
15-2 Vuex的语法讲解.mp4
15-3 通过Vuex实现登录和购物车数量（上）.mp4
cnpm i vuex -S
15-4 通过Vuex实现登录和购物车数量（下）.mp4
F:\Vue教程\Vue2.0+Node.js+MongoDB全栈打造商城系统\第16章 Webpack使用
16-1 webpack基础介绍.mp4
vue-toast-m 插件
16-2 插件静态部分实现.mp4
Webpack基础介绍
html-webpack-plugin
extract-text-webpack-plugin css从js抽离
www.imooc.com/learn/802
UglifyJsPlugin/new webpack. optimize. UglifyJsPlugin()
CommonsChunkPlugin/new webpack. optimize. CommonsChunkPlugin()
clean-webpack-plugin
copy-webpack-plugin
解析js文件，并输出
解析css文件css-loader
解析sass，less，scss，stylus文件 sass-loaderless-loader/node-sass
解析图片（png.jpg，svg、gif）file-loader/url-loader
给css添加前缀postcss-loader，autoprefixer
16-3 插件功能实现.mp4
npm init
16-4 webpack打包功能实现（上）.mp4
path.join绝对路径 ./相对路径
16-5 webpack打包功能实现（下）.mp4
webpack.config.js
module.exports={
output:{
path:xxx,
filename:xxx,
libraryTarget:'umd',//输出amd规范 umd完整的规范
library:'VueToastDemo'
}
}
16-6 npm插件发布.mp4
npm adduser
npm whoami 查看是谁
npm publish 发布
sunnyboysoft@163.com
www.npmjs.com kooteam iosmm
16-7 webpack多页面构建(上).mp4
define('common',function(){
return {
initIndex:function(){}
}
})
Amd规范
require(['./common.js','jquery'],function(common,$){
common.initIndex()
})
先官网文档再博客
webpack.config.js
var path=require('path')
var HtmlWebpackPlugin=require('html-webpack-plugin')
var ExtractTextPlugin=require('extract-text-webpack-plugin')
module.exports={
entry:{
vendor:['jquery','./src/js/common.js'],//单独打包出来
index:'./src/js/index.js',
cart:'./src/js/cart.js'
},
output:{
path:path.join(__dirname,'./dist'),
filename:'js/[name].js',
publicPath:''
},
module:{
rules:[
{
test:/\.js$/,
include:path:join(__dirname,'src'),
exclude:/node_modules/,
loader:'babel-loader'
},
{
test:/\.css$/,
include:path:join(__dirname,'src'),
exclude:/node_modules/,
use:ExtractTextPlugin.extract({
fallback:"style-loader",
use:'css-loader'
})
}
]
},
plugins:[
new webpack.optimmize.CommonsChunkPlugin({
//优化插件 抽取公共内容-文件
name:'vendor',
chunks:['index','cart','vendor'],
mikChunks:3,//最小分割
}),
new webpack.optimize.UglifyJsPlugin({
//压缩js
compress:{
warnings:true
}
})
new HtmlWebpackPlugin({
filename:'index.html',
template:'./src/index.html',//source
chunks:['index','vendor'], //加入script.src的内容
minify:{
removeComments:true,//移除注释
collapseWhitespace:true,//移除空格
}
}),
new HtmlWebpackPlugin({
filename:'cart.html',
template:'./src/cart.html',
chunks:['cart','vendor']
}),
new ExtractTextPlugin('index.css')
],
devtool:'#source-map'
}
path.join(__dirname,'./dist') __dirname当前系统所在路径
.babelrc文件{
{
"presets":['env']
}
}
16-8 webpack多页面构建（下）.mp4
删除dist插件 clean-webpack-plugin
css-loader style-loader extract-text-webpack-plugin(抽取js的css为单独文件并插入html)
16-9 webpack多页面构建-第三方库.mp4
用es6转es5插件 babel-core babel-loader babel-preset-env
16-10 webpack多页面构建-抽取公共模块.mp4
不会的插件 www.npmjs.com查看文档
文档注释保留
@^ 2.0以上版本 @~2.7.0.小于等于2.7
F:\Vue教程\Vue2.0+Node.js+MongoDB全栈打造商城系统\第17章 线上部署
17-1 线上部署（上）.mp4
pm2 delete bin/www
17-2 线上部署（中）.mp4
17-3 线上部署（下）.mp4
nginx代理解结跨域
一级二级域名 /demo文件夹名字
F:\Vue教程\Vue2.0+Node.js+MongoDB全栈打造商城系统\第18章 课程总结
浙公网安备 33010602011771号