現在是:
廣告熱線:  |  設為首頁 | 加入收藏
登陸用戶名:
密碼:
您現在的位置北京足球指数 > 家居 > >正文內容

足球指数163:Vue實戰12—Api接口封裝引入代理數據與Element-ui庫

來源: 發布時間:2020-03-28 06:26:51 閱讀:-

北京足球指数 www.zwtnp.com.cn 承接前文,本文介紹將api的接口封裝抽離,進一步??榛痑xios。同時引入Element-ui樣式庫,進行對導航欄的重構。本系列文章目錄:Vue實戰目錄——vue+router+vuex+axios從零實現新聞詳情頁

本項目代碼地址:

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

引入代理數據

一般前后端開發,接口定義好,數據結構定義好后。就開始分頭行動了,這時候是沒有寫好的api接口的,這就需要我們前端先定義一個測試用的代理數據,代理數據的結構與正式的后端返回的是一樣的,不同的是,它是臨時的,我們自己測試用的。接下來,我就來介紹,如何添加代理數據。

首先,在項目的public文件夾里,我們新建文件夾:api。這個目錄api,就是將來我們放代理數據的總目錄。

然后,我們新建json文件:newsList.json。用來放新聞列表的代理數據。我們將獲取新聞列表的接口返回的數據(json數組形式的數據),復制到newsList.json里,這樣就成了一個代理數據了。那怎么訪問呢?很簡單,我們啟動項目,瀏覽器地址欄里輸入:

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

我們看到了之前保存的新聞列表數據

這樣,我們在接下來的api接口里,就可以寫上面的地址為接口了。

抽離API接口

在util文件里,我們新建一個js文件:api.js文件,將來我們的 接口都放在這里,統一管理。代碼中只需要引用這里的接口接口,這樣就做到了代碼與接口的分離。

這樣做的好處是解耦合,前后端分離式開發時,我們與后端進行聯調,接口可能會變化,統一管理,會方便我們對接口的管控,修改起來會很方便。后期恢復迭代更輕松。

首先我們先創建基礎路徑,這個使我們項目所有的接口的基礎前綴。具體的語句為:

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

還記得之前說過的關于環境變量的文章嗎?在這里就用到了。當然,這里還可以繼續優化,可以把localhost放到環境變量里,這里就不闡述了。

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

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

然后,我們開始動手抽離新聞列表頁的接口了。

首先,api.js里添加新聞列表代理數據的接口:

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

然后導出:

export default {
newsList
}

這樣,全局就可以通過

this.$api.newsList

來進行引用了。修改我們的新聞列表頁,獲取數據的方法:

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

同理,我們再做一個詳情頁的代理數據,用來測試。

首先,還是在public目錄下,創建名稱為1的文件夾,然后在里面創建一個名稱detail的json文件,用來放我們的詳情頁數據。完成后,啟動項目:

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

然后我們在api.js里添加詳情頁的接口并導出。

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

export default {
newsList,
newsDetail
}

之后,我們修改新聞列表頁跳轉到詳情頁的方法:

ok,這樣我們的api接口抽離就算完成了,之后再添加數據,接口,就按照這個套路進行添加。

引入Element-ui

接下來,我們引入Element-UI庫來對我們丑陋的導航欄進行重構,讓它更漂亮一點。

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

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重構導航欄,放個圖片先睹為快吧:


原創不容易,鑒于本人水平有限,文中如有錯誤之處歡迎大家指正。以后我會持續發布vue實戰系列的文章,喜歡的朋友歡迎關注。

(正文已結束)

推薦閱讀:蘋果7p和8的區別

免責聲明及提醒:此文內容為本網所轉載企業宣傳資訊,該相關信息僅為宣傳及傳遞更多信息之目的,不代表本網站觀點,文章真實性請瀏覽者慎重核實!任何投資加盟均有風險,提醒廣大民眾投資需謹慎!

網站簡介 - 聯系我們 - 營銷服務 - 老版地圖 - 版權聲明 - 北京足球指数
Copyright.2002-2019 北京足球指数 版權所有 本網拒絕一切非法行為 歡迎監督舉報 如有錯誤信息 歡迎糾正
{ganrao} 澳洲幸运8计划 河北新快3走势图 体彩老十一选五 全天幸运pk10计划 体育nba比分儿吃不到 武汉按摩休闲会所 股票低位放量下跌 四海龙王捕鱼游戏下 下载急速赛车 闲来广东麻将* 四人麻将单机下载 贵州快三开奖号是多少 河北排列五开奖日期 体育比分软件 太原按摩会所一百多能做什么 东方财富网