您的位置: 梦妆时尚网 > 商讯 > 正文

Vue实战12—Api接口封装引入代理数据与Element-ui库

2020-03-23 09:49:12来源:阅读:1

承接前文,本文介绍将api的接口封装抽离,进一步模块化axios。同时引入Element-ui样式库,进行对导航栏的重构。本系列文章目录:Vue实战目录——vue+router+vuex+axios从零实现新闻详情页

本项目代码地址:

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

引入代理数据

一般前后端开发,接口定义好,数据结构定义好后。就开始分头行动了,这时候是没有写好的api接口的,这就需要我们前端先定义一个测试用的代理数据,代理数据的结构与正式的后端返回的是一样的,不同的是,它是临时的,我们自己测试用的。接下来,我就来介绍,如何添加代理数据。

首先,在项目的public文件夹里,我们新建文件夹:api。这个目录api,就是将来我们放代理数据的总目录。

然后,我们新建json文件:newsList.json。用来放新闻列表的代理数据。我们将获取新闻列表的接口返回的数据(json数组形式的数据),复制到newsList.json里,这样就成了一个代理数据了。那怎么访问呢?很简单,我们启动项目,浏览器地址栏里输入:

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

我们看到了之前保存的新闻列表数据

这样,我们在接下来的api接口里,就可以写上面的地址为接口了。

抽离API接口

在util文件里,我们新建一个js文件:api.js文件,将来我们的 接口都放在这里,统一管理。代码中只需要引用这里的接口接口,这样就做到了代码与接口的分离。

这样做的好处是解耦合,前后端分离式开发时,我们与后端进行联调,接口可能会变化,统一管理,会方便我们对接口的管控,修改起来会很方便。后期恢复迭代更轻松。

首先我们先创建基础路径,这个使我们项目所有的接口的基础前缀。具体的语句为:

const baseUrl = 'http://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实战系列的文章,喜欢的朋友欢迎关注。

推荐阅读:女生适合vivo还是oppo

滚动推荐
49:12Vue实战12—Api接口封装引入
承接前文,本文介绍将api的接口封装抽离,进一步模块化axios。同时[详细]
32:003分钟看懂:供应链金融与贸易金融、
这些资金包括各种存款、贷款、投资、信托、租赁、抵押、贴现、保险、证券的[详细]
15:09「EMUI小技巧」WiFi和流量如
今天为大家介绍Mate 30系列的一项黑科技功能——Link Turb[详细]
58:33VS 2019教程:创建ASP.N
启动Visual Studio 2019并创建一个新项目启动Visua[详细]
42:28edx-LFS158x Kuber
Chapter8. Kubernetes Building Block[详细]
27:13支付平台Finix获得3500万美
日前,支付平台“Finix”获得3500万美元B轮融资,由红杉资本领投[详细]
12:19爱屋吉屋倒闭后,房产中介的创新营销
爱屋吉屋倒闭,来的不声不响?爱屋吉屋的光环:3亿美金,不收佣金,去除门[详细]