Vue2.0+Node.js+MongoDB全栈打造商城系统 之一

第一章 课程介绍

vue框架对比

 Vue和react对比

• angular提供的更多是一整套解决方案,后者更像是一个生态
• Vue和react目前都使用了virtual DOM

Vue

• 模板和渲染函数的弹性选择
• 简单的语法及项目创建
• 更快的渲染速度和更小的体积

react

• 更适用于大型应用和更好的可测试性
• 同时适用于web端和原生APP
• 更大的生态圈带来更多支持和工具

Vue和react相同点

• 利用虚拟DOM实现快速渲染
• 轻量级
• 响应式组件
• 服务器渲染
• 易于集成路由,打包工具以及状态管理工具

项目整体架构

前置知识

HTML/css/js     Vue    ES6     node  npm  webpack

第二章 Vue基础

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

• 官网或淘宝镜像,傻瓜式安装,这里不多介绍

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

Vue多页面应用文件引用

• 官网拷贝,引入script标签
• npm 安装

npm install vue --save-dev,安装好后script标签可直接引用

vue-cli构建SPA应用

• npm install -g vue-cli
• vue init webpack-simple demo
• vue init webpack demo2

2-3 vue配置

2-5 vue基础语法

模板语法

• mustache语法:{{msg}}
• HTML赋值:v-html=""
• 绑定属性:v-bind:id=""
• 使用表达式:{{OK:'YES':'NO'}}
• 文本赋值:v-text=""
• 指令:v-if=""
• 过滤器{{message||capitalize}}和v-bind:id="rowId|formatId"

class和style绑定

• 对象语法 v-bind:class="{active:isActive,'text-danger':hasError}"
• 数组语法

条件渲染

• v-if
• v-else
• v-else-if
• v-show
• v-cloak

Vue事件处理器

• v-on:click="great" 或@click="great"
• v-on:click.stop,v-on:click.stop,prevent,v-on:click.self,v-on:click.once
• v-on:keyup.enter

Vue组件

• 全局组件和局部组件
• 父子组件通讯--数据传递
• slot

第3章Vue-router

3-1路由基础介绍

• 什么是前端路由

​​​​​​​路由是根据不同的url地址展示不同的内容或页面

前端路由就是把不同路由对应不同的内容或页面的任务交给前端来做,之前是通过服务端根据url的不同返回不同的页面实现的

• 什么时候使用前端路由

​​​​​​​在单页面应用,大部分页面结构不变,只改变部分内容时使用

• 前端路由有什么优点和缺点

​​​​​​​优点:用户体验好,不需要每次都从服务器全部获取,快速展现给用户

缺点:不利于SEO;使用浏览器的前进,后退键的时候回重新发布请求,没有合理的利用缓存;单页面无法记住之前滚动的位置,无法再前进,后退的时候记住滚动的位置

• vue-router用来构建SPA
• 或者this.$router.push({path:''})

3-2动态路由配置

• 什么是动态路由

模式	匹配路径	$router.params
/user/:username	/user/evan	{username:'evan'}
/user/:username/post/:post_id	/user/evan/post/123	{username:'evan',post_id:123}

路由模式:mode:'hash'或mode:'history'

3-3嵌套路由

路由嵌套路由

3-4编程式路由

• 什么是编程式路由

​​​​​​​通过js来实现页面的跳转

$router.push("name")

$router.push({path:"name"})

$router.push({path:"name?a=123"})或者$router.push({path:"name",query:{a:123}})

$router.go(1)

3-5命名路由和命名视图

• 什么是命名路由和命名视图

​​​​​​​给路由定义不同的名字,根据名字进行匹配

给不同的router-view定义名字,通过名字进行对应组件的渲染

跳转到购物车页面
//通过命名路由跳转,要用v-bind绑定
跳转到购物车页面

 

//params是路由参数,不是页面之间跳转的参数
跳转到购物车页面

{
      path:'/cart/:cartId',
      name:'cart',
      component:Cart
    }

第4章Vue-resource和Axios

4-1 vue-resourse使用

• 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])

参数	类型	描述
url	string	请求的URL
method	string	请求的HTTP方法,例如:'GET','POST'或其他HTTP方法
body	Object,FormDatestring	request body
params	Object	请求的URL参数对象
headers	Object	request header
timeout	number	单位为毫秒的请求超时时间(0表示无超时时间)
before	function(request)	请求发送前的处理函数,类似于jQuery的beforeSend函数
progress	function(events)	ProgressEvent回调处理函数
credientials	boolean	表示跨域请求时是否需要使用凭证
emulateHTTP	boolean	发送PUT,PATCH,DELETE,请求时以HTTP POST的方式发送,并设置请求头的x-HTTP-Method-Override
emulateJson	boolean	将request body以application/x-www-form-urlencoded content类型,让服务器端识别

 

• 全局拦截器interceptors

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

jsonp跨域

• jsonp发送的不是ajax请求
• 通过动态创建一个script标签实现跨域,因为script标签是没有同源策略限制的
• 把这个script标签的src指向我们请求的服务端地址,这个地址会携带一个参数:callback,一个回调函数.服务端会把数据通过这个回调函数返回给客户端.但客户端没有这个函数怎么接收呢?所以在发送请求钱,要在全局(window)注册这样的一个方法,利用这个方法来获得数据

• 
  
  
    
    
    
    
    
  
  
  
    
  vue-resource插件
    GET请求
    POST请求
    JSON请求
    http请求
    
  
    {{msg}}
  
  
  
  
  

   

4-2 axios介绍

• ​​​​​​​
• npm install axis --save
• axios.request(config)
• axios.get(url[,config])
• axios.delete(url[,config])
• axios.head(url[,config])
• axios.options(url[,config])
• axios.post(url[,data[,config]])
• axios.put(url[,data[,config]])
• axios.natch(url[,data[,config]])

function getUserAccount(){
    return axios.get('/user/12345');
}
function getUserPermissions(){
    return axios.get('/user/12345/peimissions')
}
axios.all([getUserAccount(),getUserPeimissions()])
    .then(axios.spread(function(accept,perms){
    }));

  
  
  
  
  



  
axios插件
  GET请求
  POST请求
  http请求

  

  {{msg}}

​​​​​​​第5章ES6常用语法

5-1 ES6简介

• 1995:JavaScript诞生
• 1997:ECAMScript标准确立
• 1999:ES3出现,与此同时IE5风靡一时
• 2009:ES5出现,例如foreach,Object.keys,Object.create和JSON标准
• 2015:ES6/ECMAScript2015出现
• 目标:JavaScript语言可以用来编写复杂的大型应用程序,成为企业其开发语言

5-2 ES6常用命令

• 函数的Rest参数和扩展
• Promise使用
• module.exports和ES6 import/export的使用

•  

5-3 拓展参数讲解

5-4 Promise讲解

5-5 ES6模块化开发讲解

5-6 AMD、CMD、CommonJS和ES6差异