vue项目构建实战基础知识:SPA理解/RESTful接口介绍/static目录配置/axios封装/打包时map文件去除...
一、SPA
不是指水療。是 single page web application 的縮寫。中文翻譯為 單頁應(yīng)用程序 或 單頁Web應(yīng)用,更多解釋請自行搜索。
所有的前端人員都應(yīng)該明白我們的頁面的 url 構(gòu)成:http://www.fengcms.com/index.html?name=fungleo&old=32#mylove/is/world/peace
如上的 url 由以下部分組成:協(xié)議、域名、文件名稱、get參數(shù)、錨點
1、http:// 規(guī)定了頁面采用的協(xié)議。
2、www.fengcms.com 為頁面所屬的域名。
3、index.html 為讀取的文件名稱。
4、?name=fungleo&old=32 給頁面通過 GET 方式傳送的參數(shù)
5、#mylove/is/world/peace 為頁面的錨點區(qū)域
前面四個發(fā)生改變的時候,會觸發(fā)瀏覽器的跳轉(zhuǎn)亦或是刷新行為,而更改 url 中的錨點,并不會出現(xiàn)這種行為,因此,幾乎所有的 spa 應(yīng)用都是利用錨點的這個特性來實現(xiàn)路由的轉(zhuǎn)換。以我們的 vue 項目為例,它的本地 url 結(jié)構(gòu)一般為以下格式:http://localhost:8080/#/setting/task,可以明顯的看到我們所謂的路由地址是在 # 號后面的,也就是利用了錨點的特性。(個人理解)
二、RESTful 風格接口
實際情況是,我們在前后端在約定接口的時候,可以約定各種風格的接口,但是,RESTful 接口是目前來說比較流行的,并且在運用中比較方便和常見的接口。雖然它有一些缺陷,目前 github 也在主推 GraphQL 這種新的接口風格,但目前國內(nèi)來說還是 RESTful 接口風格比較普遍。并且在掌握了 RESTful 接口風格之后,會深入的理解這種接口的優(yōu)缺點,到時候,你自然會去想解決方案,并且在項目中實行新的更好的理念。了解程序開發(fā)的都應(yīng)該知道,我們所做的大多數(shù)操作都是對數(shù)據(jù)庫的四格操作 “增刪改查” 對應(yīng)到我們的接口操作分別是:
post 插入新數(shù)據(jù)
delete 刪除數(shù)據(jù)
put 修改數(shù)據(jù)
get 查詢數(shù)據(jù)
注意:這里是我們約定,并非這些動作只能干這件事情。從表層來說,除get外的其他方法,沒有什么區(qū)別,都是一樣的。從深層來說包括 get 在內(nèi)的所有方法都是一模一樣的,沒有任何區(qū)別。但是,我們約定,每種動作對應(yīng)不同的操作,這樣方便我們統(tǒng)一規(guī)范我們的所有操作。
假設(shè),我們的接口是 /api/v1/love 這樣的接口,采用 RESTful 接口風格對應(yīng)操作是如下的:
1、get 操作 /api/v1/love:獲取 /api/v1/love 的分頁列表數(shù)據(jù),得到的主體,將是一個數(shù)組,我們可以用數(shù)據(jù)來遍歷循環(huán)列表
2、post 操作 /api/v1/love:我們會往 /api/v1/love 插入一條新的數(shù)據(jù),我們插入的數(shù)據(jù),將是JOSN利用對象傳輸?shù)摹?/span>
3、get 操作 /api/v1/love/1:我們獲取到一個 ID 為 1 的的數(shù)據(jù),數(shù)據(jù)一般為一個對象,里面包含了 1 的各項字段信息。
4、put 操作 /api/v1/love/1:我們向接口提交了一個新的信息,來修改 ID 為 1 的這條信息
5、delete 操作 /api/v1/love/1:我們向接口請求,刪除 ID 為 1 的這一條數(shù)據(jù)
由上述例子可知,我們實現(xiàn)了5種操作,但只用了兩個接口地址, /api/v1/love 和 /api/v1/love/1 。所以,采用這種接口風格,可以大幅的簡化我們的接口設(shè)計。
三、配置 static 目錄
這個目錄比較簡單,一般搞成下面這個樣子:
├── css // 放一些第三方的樣式文件
├── font // 放字體圖標文件
├── image // 放圖片文件,如果是復雜項目,可以在這里面再分門別類
└── js // 放一些第三方的JS文件,如 jquery 你可能很奇怪,我們不是把樣式和 JS 都寫到里面去么,為什么還要在這邊放呢?
因為,如果是放在 src 目錄里面,則每次打包的時候,都需要打包的。這會增加我們打包項目的時間長度。而且,一些第三方的文件,我們一般是不會去修改的,也沒必要 npm 安裝,直接引用就好了。你可以根據(jù)自己的情況,對這些可以不進行打包而直接引用的文件提煉出來,放在資源目錄里面直接調(diào)用,這樣會大大的提高我們的項目的打包效率。
四、封裝 axios 工具,編輯 src/api/index.js 文件
首先,我們要使用 axios 工具,就必須先安裝 axios 工具。執(zhí)行下面的命令進行安裝
npm install axios -D 從之前整理的系統(tǒng)結(jié)構(gòu)里,我們新建了一個 src/api/index.js 這個空文本文件,這里,我們給它填寫上內(nèi)容。
// 配置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()
}
// 參數(shù)過濾函數(shù)
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
}
/*接口處理函數(shù)這個函數(shù)每個項目都是不一樣的,我現(xiàn)在調(diào)整的是適用于https://cnodejs.org/api/v1 的接口,如果是其他接口需要根據(jù)接口的參數(shù)進行調(diào)整。參考說明文檔地址: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模板中的調(diào)用接口
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 模板文件中使用這個工具,還需要調(diào)整一下 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 接口調(diào)用文件了。
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
}) 五、公用工具函數(shù)
我們可以獨立出來寫一個方法,然后在所有的地方都可以使用,這樣就比較方便了。我們建立了一個 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 = '發(fā)表于 ' + ~~(_year) + ' 年前'} else if (_month >= 1) {result = '發(fā)表于 ' + ~~(_month) + ' 個月前'} else if (_week >= 1) {result = '發(fā)表于 ' + ~~(_week) + ' 周前'} else if (_day >= 1) {result = '發(fā)表于 ' + ~~(_day) + ' 天前'} else if (_hour >= 1) {result = '發(fā)表于 ' + ~~(_hour) + ' 個小時前'} else if (_min >= 1) {result = '發(fā)表于 ' + ~~(_min) + ' 分鐘前'} else {result = '剛剛'}return result}
} 寫好代碼之后,我們保存文件。但是此時,我們還不能使用我們的這個方法函數(shù)。我們必須在 main.js 中將我們的方法函數(shù)給綁定上。如下代碼:
// 引用工具文件
import utils from './utils/index.js'
// 將工具方法綁定到全局
Vue.prototype.$utils = utils 還記得我們先前是如何將我們的接口請求函數(shù)給綁定上的嗎?這里其實是采用了同樣的方法。這樣,我們寫的這個函數(shù),就可以隨便被我們調(diào)用了。我們再來修改一下我們的 index.vue 中的代碼,將 time 調(diào)整為:<time v-text="$utils.goodTime(i.create_at)"></time>
我們在 script 區(qū)域,引用一個函數(shù)是使用 this.getData 或者 this.list 這樣的代碼引用的。但是在 template 中,我們是不加 this 的。
六、去掉 map 文件
當我們npm run build的時候,會生成了一些 .map 的文件,當我們的項目變得比較大的時候,這些文件第一個是非常大,第二個編譯時間非常長。所以,我們要把這個文件給去掉。
我們編輯 /config/index.js 文件,找到其中的
productionSourceMap: true,
//修改為:
productionSourceMap: false, 重新運行打包命令,沒用的 map 文件已經(jīng)沒有了。
轉(zhuǎn)載于:https://www.cnblogs.com/goloving/p/8904042.html
總結(jié)
以上是生活随笔為你收集整理的vue项目构建实战基础知识:SPA理解/RESTful接口介绍/static目录配置/axios封装/打包时map文件去除...的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 你们会怎样做?
- 下一篇: 米勒罗宾素性测试(Miller–Rabi