![](https://img-blog.csdnimg.cn/20201014180756930.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
全栈案例
purple_lumpy
先,找一个方向,然后,收拾收拾好,一步一步来
展开
-
全栈案例 之一 初始准备 step1
从这儿开始,来试着做一个全栈项目。 前端,使用vue 全家桶,ES6 后端使用node 的 Express框架,DB使用Mongo. 当然,项目需使用vue-cli ,它能快速搭建一个项目,生成一个项目模版。 vue.js 本身并不是一个框架,Vue 结合周边生态构成了一个灵活的、渐进式的框架。如下图。 Vue 核心思想: 数据驱动 组件化...原创 2018-12-18 15:47:34 · 149 阅读 · 0 评论 -
全栈案例 之二 开发环境搭建
之前已经安装了 node 和vue-cli (全局) 。 Vue 多页面应用文件引用: - 官方拷贝: <script src="https://unpkg.com/vue/dist/vue.js"></script> 像下面 <!DOCTYPE html> <html> <head> <title>d原创 2018-12-18 16:43:27 · 209 阅读 · 0 评论 -
全栈案例 之二 开发环境搭建 vue 配置
我们首先看看,项目目录下的package.json 它首先包含了一些名称、版本等信息。script 是shell 命令。dependencies 是项目自始至终的依赖。devDependencies 是开发过程中需要的依赖。engines 是引擎。browserslist 是浏览器。 然后我们去看看,项目根目录下的build 文件夹与 config 文件夹。 build 文件夹里面比较重...原创 2018-12-18 19:54:20 · 272 阅读 · 0 评论 -
之三 Vue-router 前端路由 与 “#”
前端路由,将本来根据地址请求后端返回页面,变为了前端直接重新渲染页面。 优点:用户体验好,不需要每次都从服务器全部获取,快速展现给用户 缺点:不利于SEO;使用浏览器的前进、后退键会重新发送请求,没有合理地利用缓存;单页面无法记住之前滚动的位置,无法在前进、后退的时候记住滚动的位置。 vue-router 是构建vue SPA的关键 通常,我们使用<router-link>&l...原创 2019-01-06 15:56:27 · 7800 阅读 · 0 评论 -
之三 嵌套路由
嵌套路由,即路由中嵌套路由。 下面的例子,举例商品列表页面中,通过一个路由查看商品的标题,再通过一个路由查看商品的图片。 我们先定义两个组件,Title.vue , Image.vue。 下面是Title.vue <template> <div> 商品名称 </div> </template> <script>...原创 2019-01-06 16:23:53 · 179 阅读 · 0 评论 -
之三 编程式路由
编程式路由,即通过写js 函数,实现路由的跳转。之前路由跳转是通过router-link实现,本篇,我们通过函数来实现router-link 的跳转功能。 举例。 首先是router/index.js 代码,如下。 import Vue from 'vue' import Router from 'vue-router' import GoodList from '@/views/Go...原创 2019-01-06 16:49:44 · 1073 阅读 · 0 评论 -
之三 命名路由和命名视图
命名路由和命名视图 给路由定义不同的名字,根据名字进行匹配 给不同的router-view 定义名字,通过名字进行对应组件的渲染 我们举例如下。 首先,命名路由。 如下是GoodList.vue <template> <div> 这是商品列表页 <span>{{$route.params.goodsId}}<...原创 2019-01-06 17:10:05 · 411 阅读 · 1 评论 -
之四 axios
axios 是目前vue 官方推荐的ajax 请求的使用方式。 我们在项目中使用,首先在项目中安装axios 插件。 使用命令 npm install asios --save axios 提供的API 如下 先占坑......原创 2019-01-06 17:57:35 · 139 阅读 · 0 评论