Vue.js2.0多页项目脚手架设计

发表于 | 分类于 | 评论数： | 阅读次数：

基于vue-cli脚手架修改而成的多页面项目脚手架，每一个页面是一个独立的SPA应用，可用于复杂的项目开发或多项目开发中。

必备知识点

ES6常用特性

点此查看

Vuex基础介绍

点此查看

项目结构

项目目录

状态管理目录

主要目录说明

  • api 目录：集中管理整个应用的api数据请求
  • filters 目录：注册Vue全局的filter，便于在所有页面中使用
  • components 目录：存放多个页面共用的Vue组件
  • modules 目录：管理每个独立的页面（频道）
  • store 目录：管理应用的全局状态

页面划分

modules 下每一个目录是一个独立的SPA页面的相关资源，把项目划分为多个频道，一个SPA页面为一个频道，每个频道下的相关子页面放置于views目录中

好处是不同的频道可由不同的人开发，互不干扰，技术方案也可以不同，比如可不用vue-router、vuex等相关插件，结合jQuery或者其它路由管理模块使用，只把vue做为页面资源模块加载和容器也是可以的。

路由配置

使用懒加载的方式加载路由对应的组件

const SupplierData = resolve => require(['./views/supplier-data.vue'], resolve)
const SupplierList = resolve => require(['./views/supplier-list.vue'], resolve)
const SupplierSetup = resolve => require(['./views/supplier-setup.vue'], resolve)

export default [
  {
   path: '/',
   meta:'首页',
   redirect: '/data',
  }{
    path: '/data',
    meta:'商户数据',
    component: SupplierData,
  },{
    path: '/list',
    meta: '商户列表',
    component: SupplierList,
  },{
    path: '/setup',
    meta: '商户设置',
    component: SupplierSetup,
  }
];

给路由注册全局的钩子，用于显示loading指示页面的切换状态

router.beforeEach((to, from , next) => {
  store.commit('UPDATE_LOADING', {loading: true })
  next()
})

router.afterEach(route => {
  store.commit('UPDATE_LOADING', {loading: false })
})

Vuex数据流转

使用Vuex集中管理页面组件的状态，在编写组件时，将 store 中的 Getters/State/Mutaions/Actions 映射至组件，组件的事件操作触发Actions或Mutations来更新所绑定的状态数据，从而触发UI的更新。

  • getters 返回 store 中computed 属性
  • state 返回 store 中状态属性 data
  • mutations 返回唯一同步改变state的方法
  • actions 返回异步获取数据提交commit更新state的方法

RESTful API设计

REST(Representational State Transfer) 的名称”表现层状态转化”中，省略了主语。”表现层”其实指的是”资源”（Resources）的”表现层”。

特点

  1. 每一个URI代表一种资源；
  2. 客户端和服务器之间，传递这种资源的某种表现层；
  3. 客户端通过四个HTTP动词，对服务器端资源进行操作，实现”表现层状态转化”。

HTTP动词

使用 HTTP动词 来区别对数据的操作：

  • GET（SELECT）：从服务器取出资源（一项或多项）。
  • POST（CREATE）：在服务器新建一个资源。
  • PUT（UPDATE）：在服务器更新资源（客户端提供改变后的 完整资源）。
  • PATCH（UPDATE）：在服务器更新资源（客户端提供改变的 属性）。
  • DELETE（DELETE）：从服务器删除资源。

示例

一级API
GET /users - 获取用户列表
GET /users/1 - 获取 Id 为 1 的用户
POST /users - 创建一个用户
PUT /users/1 - 替换 Id 为 1 的用户
PATCH /users/1 - 修改 Id 为 1 的用户
DELETE /users/1 - 删除 Id 为 1 的用户

多级API
GET /users/1/products - 获取 Id 为 1 用户下的产品列表
GET /users/1/products/2 - 获取 Id 为 1 用户下 Id 为 2 的产品
POST /users/1/products - 在 Id 为 1 用户下，创建一个产品
PUT /users/1/products/2 - 在 Id 为 1 用户下，替换 Id 为 2 的产品
PATCH /users/1/products/2 - 修改 Id 为 1 的用户下 Id 为 2 的产品
DELETE /users/1/products/2 - 删除 Id 为 1 的用户下 Id 为 2 的产品

注册与登录的API设计

登录/登出对应的服务端资源应该是session操作，所以相关api应该如下：

  • GET /session 获取会话信息
  • PUT /session 更新会话信息 (心跳)
  • POST /session 创建新的会话（登入）
  • DELETE /session 销毁当前会话（登出）

注册对应的资源是user

  • GET /user/:id 获取id用户的信息
  • PUT /user/:id 更新id用户的信息
  • POST /user 创建新的用户（注册）
  • DELETE /user/:id 删除id用户（注销）

结合Vue-resource

使用 vue-resource 对API进行集中式管理

vue-resource 对应restful的操作

get: {method: 'GET'},
save: {method: 'POST'},
query: {method: 'GET'},
update: {method: 'PUT'},
remove: {method: 'DELETE'},
delete: {method: 'DELETE'}

//api.js

import Vue from 'vue'
import VueResource from 'vue-resource'

Vue.use(VueResource)
Vue.http.options.emulateJSON = true;

export const apiMenus = Vue.resource('/api/menus')
export const apiSession = Vue.resource('/api/session{/id}')
export const apiUser = Vue.resource('/api/user{/id}')

在actions中导入api模块进行异步请求操作

import { apiSession, apiMenus } from '../../../api/'

apiSession.save({uName:'', password: ''}).then().catch()
apiSession.get().then().catch()
apiSession.put({state: 1}).then().catch()
apiSession.delete().then().catch()