vue+node.js+mongodb 素颜马尾好姑娘i 2022-05-18 22:35 99阅读 0赞 **vue+node.js+mongodb：书城系统的项目的构建概述** **1、课程主要讲什么**：基于全栈开发一个简易的商城系统 **2、课程涵盖了哪些内容**：商品列表、购物车、地址、结算、订单、登录模块 **3、课程使用了哪些技术栈**：前端使用功能vue全家桶以及ES6语法；后端使用Express框架，DB使用Mongo非关系型数据库 **项目整体架构如下图所示** ![图片][70] 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][] 单个参数 ![70 1][] **2）嵌套路由** ![cc][] ![ff][ff 1] **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\]) ![70 2][] ![70 3][] **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}`) }) [70]: /images/20220519/7a9babb087414698b25a3a8b7f108ef2.png [ff]: /images/20220519/cf5896e1c00d4065be50682ddf2f833b.png [dd]: /images/20220519/cc56b2fb1ba34b29a346bfae9f902739.png [70 1]: /images/20220519/d3fbf1eb8da54ce1b37b5bdbc1c29fe9.png [cc]: /images/20220519/0fbf4e30956d4f6dbe7a2be3f472fadd.png [ff 1]: /images/20220519/9e94411691c74b45b3bbcf8125c3d123.png [70 2]: /images/20220519/71c92685dd3e40cf9228b5bf01910854.png [70 3]: /images/20220519/a71209ca7b964abaa4dfa67ebf8bb643.png
还没有评论，来说两句吧...