vue+node.js+mongodb

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)动态路由匹配

ff

dd

单个参数

 

2)嵌套路由

cc

ff

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',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,[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}`)
})

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

相关文章

https://segmentfault.com/a/1190000022018995 https://www....
ES6 (ECMAScript 6)中的模块是一个包含 JavaScript 代码的...
from https://mp.weixin.qq.com/s/-rc1lYYlsfx-wR4mQmIIQQ V...
D:\Temp&gt;npm init vite@latest vue3study --temp...
文章浏览阅读1.2k次。最近自己从零撸起的甘特图组件需要子组...
文章浏览阅读3.3k次,点赞3次,收藏16次。静默打印是什么?简...