承接前文,本文介绍将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接口里,就可以写上面的地址为接口了。
在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库来对我们丑陋的导航栏进行重构,让它更漂亮一点。
引入方法很简单。首先是安装:
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实战系列的文章,喜欢的朋友欢迎关注。
意见反馈
×