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

一、SPA

single page web application

url

http://www.fengcms.com/index.html?name=fungleo&old=32#mylove/is/world/peace

url

http://

www.fengcms.com

index.html

?name=fungleo&old=32

GET

#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：

　　4、put

/api/v1/love/1：

　　5、delete

/api/v1/love/1：

/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)
})
}
}

// 配置API接口地址
var root = '/api/v1'

var v = this
v.$api.get('topics', null, function (r) {
v.list = r.data
})

五、公用工具函数

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 文件

.map

/config/index.js

productionSourceMap: true,
//修改为：
productionSourceMap: false,

map