vue+node.js+mongodb：书城系统的项目的构建概述

1、课程主要讲什么：基于全栈开发一个简易的商城系统

2、课程涵盖了哪些内容：商品列表、购物车、地址、结算、订单、登录模块

3、课程使用了哪些技术栈：前端使用功能vue全家桶以及ES6语法；后端使用Express框架，DB使用Mongo非关系型数据库

 

项目整体架构如下图所示

 

Webpack：代码模块化构建打包工具

Gulp：基于流的自动化构建工具

Grunt：JavaScript世界的构建工具

Babel：使用最新的规范来编写js

Vue：构建数据驱动的web界面的渐进式框架

Express：基于Node.js平台，快速、开放、极简web开发框架

 

使用vue构建多页应用：npm install  vue --save (--save表示安装

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

到开发依赖里面去)  (或者直接在<script>中引入vuede CDN)   

使用vue-cli构建SPA：vue   inti  webpack  store 

 

路由基础的介绍

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

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

 

什么时候使用前端路由？

在SPA应用中，大部分页面结构不变，只改变部分内容的时候使用

 

前端路由有什么优缺点？

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

缺点：

1）不利于SEO   

2）使用浏览器的前进、后退键的时候会重新发送请求，没有合理的利用缓存

3）单页面无法记住之前的滚动位置，无法再前进和后退的时候记住滚动的位置

 

使用vue-router构建SPA-----vue-router就是对history的封装

<router-link to=''>（实现跳转，实际上就是<a>标签）    (this.$router.push({path:''})---编程式路由

<router-view>（实现页面的显示）

 

路由的种类

动态路由匹配

嵌套路由

编程式路由

命名路由和命名视图

1）动态路由匹配

单个参数

 

2）嵌套路由

3）编程式路由---通过js来实现页面跳转，

$router.push('name')

$rouer.push({path:'name'})

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

$router.go(1)

 

注意：$router.push()---页面之间的切换和$route.params----动态路由的查询字符变量

//动态路由
//单个路由，所有用$route
<span>{{$route.params.userId}}</span>
new Router({
	routes:[{
		path:'/goods/:userId',
		name:'GoodsList',
		component:GoodsList
	}]
})



//页面之间切换，直接通过?拼接的方式
methods:{
	jump(){
		// this.$router.push({path:'/cart?goodsId=123'});
	    this.$router.go(-2);
	}
}

4）命名路由和命名视图

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

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

<router-link v-bind:to='{name:'cart'}'>

new Router({
	routes:[
		{
			path:'/cart',
			name:'cart',
			component:Cart
		}
	]
})

//动态式路由
//params---是路由参数
<router-link v-bind:to="{name:'cart',params:{cartId:123}}">

new Router({
	routes:[
		{
			path:'/cart/:cartId',
			name:'cart',
			component:Cart
		}
	]
})

vue-resource相当于jQuery中的ajax方法：提供了7种请求方法：

1）get(url,[options])----就是从服务器拿到数据

2）post(url,[options])----提交数据到服务器

3）jsonp(url,[options])

4）put(url,[body],[options])

5）patch(url,[body],[options])

6）delete(url,[options])

7）head(url,[options])

 

package.json文件中一些选项的介绍：

dependencies:就是项目上线以后还要用到的依赖

devDependencies:就是开发的时候要用到的依赖

 

Promise.all([promise1,promise2,...])----将多个promise对象合并成一个Promise对象，实际上是用于处理多个请求

Promise.all([checkLogin(),getUserInfo()]).then(([res1,res2])=>{
	console.log(`result1:${res1.result},result2:${res2.result}`)
})