一、SPA
不是指水疗。是 single page web application 的缩写。中文翻译为 单页应用程序 或 单页Web应用，更多解释请自行搜索。
所有的前端人员都应该明白我们的页面的 url 构成：http://www.fengcms.com/index.html?name=fungleo&old=32#mylove/is/world/peace
如上的 url 由以下部分组成：协议、域名、文件名称、get参数、锚点
1、http:// 规定了页面采用的协议。
2、www.fengcms.com 为页面所属的域名。
3、index.html 为读取的文件名称。
4、?name=fungleo&old=32 给页面通过 GET 方式传送的参数
5、#mylove/is/world/peace 为页面的锚点区域
前面四个发生改变的时候，会触发浏览器的跳转亦或是刷新行为，而更改 url 中的锚点，并不会出现这种行为，因此，几乎所有的 spa 应用都是利用锚点的这个特性来实现路由的转换。以我们的 vue 项目为例，它的本地 url 结构一般为以下格式：http://localhost:8080/#/setting/task，可以明显的看到我们所谓的路由地址是在 # 号后面的，也就是利用了锚点的特性。（个人理解）
二、RESTful 风格接口
实际情况是，我们在前后端在约定接口的时候，可以约定各种风格的接口，但是，RESTful 接口是目前来说比较流行的，并且在运用中比较方便和常见的接口。虽然它有一些缺陷，目前 github 也在主推 GraphQL 这种新的接口风格，但目前国内来说还是 RESTful 接口风格比较普遍。并且在掌握了 RESTful 接口风格之后，会深入的理解这种接口的优缺点，到时候，你自然会去想解决方案，并且在项目中实行新的更好的理念。了解程序开发的都应该知道，我们所做的大多数操作都是对数据库的四格操作 “增删改查” 对应到我们的接口操作分别是：
post 插入新数据
delete 删除数据
put 修改数据
get 查询数据
注意：这里是我们约定，并非这些动作只能干这件事情。从表层来说，除get外的其他方法，没有什么区别，都是一样的。从深层来说包括 get 在内的所有方法都是一模一样的，没有任何区别。但是，我们约定，每种动作对应不同的操作，这样方便我们统一规范我们的所有操作。
假设，我们的接口是 /api/v1/love 这样的接口，采用 RESTful 接口风格对应操作是如下的：
1、get 操作 /api/v1/love：获取 /api/v1/love 的分页列表数据，得到的主体，将是一个数组，我们可以用数据来遍历循环列表
2、post 操作 /api/v1/love：我们会往 /api/v1/love 插入一条新的数据，我们插入的数据，将是JOSN利用对象传输的。
3、get 操作 /api/v1/love/1：我们获取到一个 ID 为 1 的的数据，数据一般为一个对象，里面包含了 1 的各项字段信息。
4、put 操作 /api/v1/love/1：我们向接口提交了一个新的信息，来修改 ID 为 1 的这条信息
5、delete 操作 /api/v1/love/1：我们向接口请求，删除 ID 为 1 的这一条数据
由上述例子可知，我们实现了5种操作，但只用了两个接口地址， /api/v1/love 和 /api/v1/love/1 。所以，采用这种接口风格，可以大幅的简化我们的接口设计。
三、配置 static 目录
这个目录比较简单，一般搞成下面这个样子：
├── css // 放一些第三方的样式文件
├── font // 放字体图标文件
├── image // 放图片文件，如果是复杂项目，可以在这里面再分门别类
└── js // 放一些第三方的JS文件，如 jquery
你可能很奇怪，我们不是把样式和 JS 都写到里面去么，为什么还要在这边放呢？
因为，如果是放在 src 目录里面，则每次打包的时候，都需要打包的。这会增加我们打包项目的时间长度。而且，一些第三方的文件，我们一般是不会去修改的，也没必要 npm 安装，直接引用就好了。你可以根据自己的情况，对这些可以不进行打包而直接引用的文件提炼出来，放在资源目录里面直接调用，这样会大大的提高我们的项目的打包效率。
四、封装 axios 工具，编辑 src/api/index.js 文件
首先，我们要使用 axios 工具，就必须先安装 axios 工具。执行下面的命令进行安装
npm install axios -D
从之前整理的系统结构里，我们新建了一个 src/api/index.js 这个空文本文件，这里，我们给它填写上内容。
// 配置API接口地址
var root = 'https://cnodejs.org/api/v1'
// 引用axios
var axios = require('axios')
// 自定义判断元素类型JS
function toType (obj) {
return ({}).toString.call(obj).match(/s([a-zA-Z]+)/)[1].toLowerCase()
}
// 参数过滤函数
function filterNull (o) {
for (var key in o) {
if (o[key] === null) {
delete o[key]
}
if (toType(o[key]) === 'string') {
o[key] = o[key].trim()
} else if (toType(o[key]) === 'object') {
o[key] = filterNull(o[key])
} else if (toType(o[key]) === 'array') {
o[key] = filterNull(o[key])
}
}
return o
}
/*
接口处理函数
这个函数每个项目都是不一样的，我现在调整的是适用于
https://cnodejs.org/api/v1 的接口，如果是其他接口
需要根据接口的参数进行调整。参考说明文档地址：
https://cnodejs.org/topic/5378720ed6e2d16149fa16bd
主要是，不同的接口的成功标识和失败提示是不一致的。
另外，不同的项目的处理方法也是不一致的，这里出错就是简单的alert
*/
function apiAxios (method, url, params, success, failure) {
if (params) {
params = filterNull(params)
}
axios({
method: method,
url: url,
data: method === 'POST' || method === 'PUT' ? params : null,
params: method === 'GET' || method === 'DELETE' ? params : null,
baseURL: root,
withCredentials: false
})
.then(function (res) {
if (res.data.success === true) {
if (success) {
success(res.data)
}
} else {
if (failure) {
failure(res.data)
} else {
window.alert('error: ' + JSON.stringify(res.data))
}
}
})
.catch(function (err) {
let res = err.response
if (err) {
window.alert('api error, HTTP CODE: ' + res.status)
}
})
}
// 返回在vue模板中的调用接口
export default {
get: function (url, params, success, failure) {
return apiAxios('GET', url, params, success, failure)
},
post: function (url, params, success, failure) {
return apiAxios('POST', url, params, success, failure)
},
put: function (url, params, success, failure) {
return apiAxios('PUT', url, params, success, failure)
},
delete: function (url, params, success, failure) {
return apiAxios('DELETE', url, params, success, failure)
}
}
但就是这样，我们还不能再 vue 模板文件中使用这个工具，还需要调整一下 main.js 文件，我们插入标红的代码：
import Vue from 'vue'
import App from './App'
import router from './router'
// 引用API文件
import api from './api/index.js'
// 将API方法绑定到全局
Vue.prototype.$api = api
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
template: '<App/>',
components: { App }
})
这样，我们就可以在项目中使用我们封装的 api 接口调用文件了。
export default {
created () {
this.$api.get('topics', null, r => {
console.log(r)
})
}
}
注意：webpack代理之后，接口不需要定死，需要改成：（'/api/v1'代理里面的路径）
// 配置API接口地址
var root = '/api/v1'
此外，还要注意一点，就是this重定向的问题
var v = this
v.$api.get('topics', null, function (r) {
v.list = r.data
})
五、公用工具函数
我们可以独立出来写一个方法，然后在所有的地方都可以使用，这样就比较方便了。我们建立了一个 src/utils/index.js 的空文本文件，我们编写src/utils/index.js 文件
export default {
goodTime (str) {
let now = new Date().getTime()
let oldTime = new Date(str).getTime()
let difference = now - oldTime
let result = ''
let minute = 1000 * 60
let hour = minute * 60
let day = hour * 24
let month = day * 30
let year = month * 12
let _year = difference / year
let _month = difference / month
let _week = difference / (7 * day)
let _day = difference / day
let _hour = difference / hour
let _min = difference / minute
if (_year >= 1) {
result = '发表于 ' + ~~(_year) + ' 年前'
} else if (_month >= 1) {
result = '发表于 ' + ~~(_month) + ' 个月前'
} else if (_week >= 1) {
result = '发表于 ' + ~~(_week) + ' 周前'
} else if (_day >= 1) {
result = '发表于 ' + ~~(_day) + ' 天前'
} else if (_hour >= 1) {
result = '发表于 ' + ~~(_hour) + ' 个小时前'
} else if (_min >= 1) {
result = '发表于 ' + ~~(_min) + ' 分钟前'
} else {
result = '刚刚'
}
return result
}
}
写好代码之后，我们保存文件。但是此时，我们还不能使用我们的这个方法函数。我们必须在 main.js 中将我们的方法函数给绑定上。如下代码：
// 引用工具文件
import utils from './utils/index.js'
// 将工具方法绑定到全局
Vue.prototype.$utils = utils
还记得我们先前是如何将我们的接口请求函数给绑定上的吗？这里其实是采用了同样的方法。这样，我们写的这个函数，就可以随便被我们调用了。我们再来修改一下我们的 index.vue 中的代码，将 time 调整为：<time v-text="$utils.goodTime(i.create_at)"></time>
我们在 script 区域，引用一个函数是使用 this.getData 或者 this.list 这样的代码引用的。但是在 template 中，我们是不加 this 的。
六、去掉 map 文件
当我们npm run build的时候，会生成了一些 .map 的文件，当我们的项目变得比较大的时候，这些文件第一个是非常大，第二个编译时间非常长。所以，我们要把这个文件给去掉。
我们编辑 /config/index.js 文件，找到其中的
productionSourceMap: true,
//修改为：
productionSourceMap: false,
重新运行打包命令，没用的 map 文件已经没有了。