vue+node.js+mongodb
vue+node.js+mongodb:书城系统的项目的构建概述1、课程主要讲什么:基于全栈开发一个简易的商城系统2、课程涵盖了哪些内容:商品列表、购物车、地址、结算、订单、登录模块3、课程使用了哪些技术栈:前端使用功能vue全家桶以及ES6语法;后端使用Express框架,DB使用Mongo非关系型数据库 项目整体架构如下图所示 Webpack:代码模块化构建打包...
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}`)
})
更多推荐
所有评论(0)