全栈案例
purple_lumpy
先,找一个方向,然后,收拾收拾好,一步一步来
展开
-
全栈案例 之一 初始准备 step1
从这儿开始,来试着做一个全栈项目。前端,使用vue 全家桶,ES6后端使用node 的 Express框架,DB使用Mongo.当然,项目需使用vue-cli ,它能快速搭建一个项目,生成一个项目模版。 vue.js 本身并不是一个框架,Vue 结合周边生态构成了一个灵活的、渐进式的框架。如下图。 Vue 核心思想: 数据驱动 组件化...原创 2018-12-18 15:47:34 · 176 阅读 · 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 · 220 阅读 · 0 评论 -
全栈案例 之二 开发环境搭建 vue 配置
我们首先看看,项目目录下的package.json它首先包含了一些名称、版本等信息。script 是shell 命令。dependencies 是项目自始至终的依赖。devDependencies 是开发过程中需要的依赖。engines 是引擎。browserslist 是浏览器。然后我们去看看,项目根目录下的build 文件夹与 config 文件夹。build 文件夹里面比较重...原创 2018-12-18 19:54:20 · 295 阅读 · 0 评论 -
之三 Vue-router 前端路由 与 “#”
前端路由,将本来根据地址请求后端返回页面,变为了前端直接重新渲染页面。优点:用户体验好,不需要每次都从服务器全部获取,快速展现给用户缺点:不利于SEO;使用浏览器的前进、后退键会重新发送请求,没有合理地利用缓存;单页面无法记住之前滚动的位置,无法在前进、后退的时候记住滚动的位置。vue-router 是构建vue SPA的关键通常,我们使用<router-link>&l...原创 2019-01-06 15:56:27 · 7947 阅读 · 0 评论 -
之三 嵌套路由
嵌套路由,即路由中嵌套路由。下面的例子,举例商品列表页面中,通过一个路由查看商品的标题,再通过一个路由查看商品的图片。我们先定义两个组件,Title.vue , Image.vue。下面是Title.vue <template> <div> 商品名称 </div></template><script>...原创 2019-01-06 16:23:53 · 185 阅读 · 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 · 1080 阅读 · 0 评论 -
之三 命名路由和命名视图
命名路由和命名视图 给路由定义不同的名字,根据名字进行匹配 给不同的router-view 定义名字,通过名字进行对应组件的渲染我们举例如下。首先,命名路由。如下是GoodList.vue<template> <div> 这是商品列表页 <span>{{$route.params.goodsId}}<...原创 2019-01-06 17:10:05 · 438 阅读 · 1 评论 -
之四 axios
axios 是目前vue 官方推荐的ajax 请求的使用方式。我们在项目中使用,首先在项目中安装axios 插件。使用命令 npm install asios --saveaxios 提供的API 如下 先占坑......原创 2019-01-06 17:57:35 · 146 阅读 · 0 评论