承接前文，本文介紹將api的接口封裝抽離，進(jìn)一步模塊化axios。同時(shí)引入Element-ui樣式庫，進(jìn)行對(duì)導(dǎo)航欄的重構(gòu)。本系列文章目錄：Vue實(shí)戰(zhàn)目錄——vue+router+vuex+axios從零實(shí)現(xiàn)新聞詳情頁

本項(xiàng)目代碼地址：

https://gitee.com/vuejslearn/news-list.git

引入代理數(shù)據(jù)

一般前后端開發(fā)，接口定義好，數(shù)據(jù)結(jié)構(gòu)定義好后。就開始分頭行動(dòng)了，這時(shí)候是沒有寫好的api接口的，這就需要我們前端先定義一個(gè)測試用的代理數(shù)據(jù)，代理數(shù)據(jù)的結(jié)構(gòu)與正式的后端返回的是一樣的，不同的是，它是臨時(shí)的，我們自己測試用的。接下來，我就來介紹，如何添加代理數(shù)據(jù)。

首先，在項(xiàng)目的public文件夾里，我們新建文件夾：api。這個(gè)目錄api，就是將來我們放代理數(shù)據(jù)的總目錄。

然后，我們新建json文件：newsList.json。用來放新聞列表的代理數(shù)據(jù)。我們將獲取新聞列表的接口返回的數(shù)據(jù)(json數(shù)組形式的數(shù)據(jù))，復(fù)制到newsList.json里，這樣就成了一個(gè)代理數(shù)據(jù)了。那怎么訪問呢？很簡單，我們啟動(dòng)項(xiàng)目，瀏覽器地址欄里輸入：

http://localhost:8001/dev/api/newsList.json

我們看到了之前保存的新聞列表數(shù)據(jù)

這樣，我們?cè)诮酉聛淼腶pi接口里，就可以寫上面的地址為接口了。

抽離API接口

在util文件里，我們新建一個(gè)js文件：api.js文件，將來我們的 接口都放在這里，統(tǒng)一管理。代碼中只需要引用這里的接口接口，這樣就做到了代碼與接口的分離。

這樣做的好處是解耦合，前后端分離式開發(fā)時(shí)，我們與后端進(jìn)行聯(lián)調(diào)，接口可能會(huì)變化，統(tǒng)一管理，會(huì)方便我們對(duì)接口的管控，修改起來會(huì)很方便。后期恢復(fù)迭代更輕松。

首先我們先創(chuàng)建基礎(chǔ)路徑，這個(gè)使我們項(xiàng)目所有的接口的基礎(chǔ)前綴。具體的語句為：

const baseUrl = 'http://localhost:' + process.env.VUE_APP_PORT + process.env.VUE_APP_BASEURL

還記得之前說過的關(guān)于環(huán)境變量的文章嗎？在這里就用到了。當(dāng)然，這里還可以繼續(xù)優(yōu)化，可以把localhost放到環(huán)境變量里，這里就不闡述了。

之后，我們將api.js文件注入到main.js中，供全局使用。

import api from './util/api.js'
Vue.prototype.$api = api

然后，我們開始動(dòng)手抽離新聞列表頁的接口了。

首先，api.js里添加新聞列表代理數(shù)據(jù)的接口：

const newsList = baseUrl + '/api/newsList.json'

然后導(dǎo)出：

export default {
 newsList
}

這樣，全局就可以通過

this.$api.newsList

來進(jìn)行引用了。修改我們的新聞列表頁，獲取數(shù)據(jù)的方法：

getData () {
 this.$get(this.$api.newsList).then((resp) => {
 this.newsArray = resp
 })
 }

同理，我們?cè)僮鲆粋€(gè)詳情頁的代理數(shù)據(jù)，用來測試。

首先，還是在public目錄下，創(chuàng)建名稱為1的文件夾，然后在里面創(chuàng)建一個(gè)名稱detail的json文件，用來放我們的詳情頁數(shù)據(jù)。完成后，啟動(dòng)項(xiàng)目：

可以看到訪問路徑是restful風(fēng)格的。這樣就是我們常見的前后端分離開發(fā)的基本套路了。

然后我們?cè)赼pi.js里添加詳情頁的接口并導(dǎo)出。

const newsDetail = baseUrl + '/api/1/detail.json'

export default {
 newsList,
 newsDetail
}

之后，我們修改新聞列表頁跳轉(zhuǎn)到詳情頁的方法：

ok，這樣我們的api接口抽離就算完成了，之后再添加數(shù)據(jù)，接口，就按照這個(gè)套路進(jìn)行添加。

引入Element-ui

接下來，我們引入Element-UI庫來對(duì)我們丑陋的導(dǎo)航欄進(jìn)行重構(gòu)，讓它更漂亮一點(diǎn)。

引入方法很簡單。首先是安裝：

npm install element-ui --save

然后引入到代碼中，在main.js中，我們引入：

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

這樣，就算引入的Element-ui庫了。下篇文章我們介紹如使用Element-UI重構(gòu)導(dǎo)航欄，放個(gè)圖片先睹為快吧：

原創(chuàng)不容易，鑒于本人水平有限，文中如有錯(cuò)誤之處歡迎大家指正。以后我會(huì)持續(xù)發(fā)布vue實(shí)戰(zhàn)系列的文章，喜歡的朋友歡迎關(guān)注。