vue项目构建实战基础知识：SPA理解/RESTful接口介绍/static目录配置/axios封装/打包时map文件去除...

一、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.responseif (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 = apiVue.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 - oldTimelet result = ''let minute = 1000 * 60let hour = minute * 60let day = hour * 24let month = day * 30let year = month * 12let _year = difference / yearlet _month = difference / monthlet _week = difference / (7 * day)let _day = difference / daylet _hour = difference / hourlet _min = difference / minuteif (_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 文件已经没有了。

转载于:https://www.cnblogs.com/goloving/p/8904042.html