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]+)/)[].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 =  *
    let hour = minute *
    let day = hour *
    let month = day *
    let year = month *
    let _year = difference / year
    let _month = difference / month
    let _week = difference / ( * day)
    let _day = difference / day
    let _hour = difference / hour
    let _min = difference / minute

    if (_year >= ) {
      result = '发表于 ' + ~~(_year) + ' 年前'
    } else if (_month >= ) {
      result = '发表于 ' + ~~(_month) + ' 个月前'
    } else if (_week >= ) {
      result = '发表于 ' + ~~(_week) + ' 周前'
    } else if (_day >= ) {
      result = '发表于 ' + ~~(_day) + ' 天前'
    } else if (_hour >= ) {
      result = '发表于 ' + ~~(_hour) + ' 个小时前'
    } else if (_min >= ) {
      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 文件已经没有了。