本篇文章给大家谈谈vue框架api接口管理,以及vue项目中api的配置使用对应的知识点,希望对各位有所帮助,不要忘了收藏本站喔。
今天给各位分享vue框架api接口管理的知识,其中也会对vue项目中api的配置使用进行解释,如果能碰巧解决你现在面临的问题,别忘了关注本站,现在开始吧!
本文目录一览:
vue入门:对vue项目中api接口的封装管理
在以前的文档中,我们构建了vue项目的整体架构,详见 vue入门:vue项目架构设计起步 ,现在我们主要对其中的api接口封装进行完善,并将过程做个记录,与之分享。
很多朋友在开发过程中,习惯性直接将api的调用写在单个组件之中,就直接调用请求。例如:
在前端项目开发中,从整体架构出发,我们可以将项目中所有api进行封装,从而便于我们进行统一管理。
在src目录下,新建api文件夹,在api文件夹下创建index.js和api.js。
1、api.js。主要用来统一管理项目所有api请求。 如下:
import axios from 'axios'
let host = window.g.ApiUrl
// 获取主页信息
export const getindex = params = { return axios.get(`${host}/api/index/`, { params: params }) }
// 获取城市信息
export const getcity = params = { return axios.get(`${host}/api/city/`) }
// 获取详细信息
export const getdetail = params = { return axios.get(`${host}/api/detail/`, { params: params }) }
// 注册
export const postRegister = params = { return axios.post(`${host}/api/register/`, { params: params }) }
2、index.js。主要用来输出api,供外部引入。 如下:
import * as api from './api'
export default api
3、在组件中调用api接口 。例如:
这样,我们就可以在api.js中查阅到项目中所有api接口的调用,便于接口的管理。
vue项目开发api层架构
什么是axios?
官方解释 :Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。
axios 为了方便使用也提供了很多请求方法的别名:
axios.request(config)
axios.get(url[, config])
axios.delete(url[, config])
axios.head(url[, config])
axios.options(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])
而对于使用也有多种方式
1、有部分人喜欢在页面中直接使用
这样是很不好的方式,不利于维护,如果哪天需要修改url,那么修改涉及到的页面可能会很多。
2、我们可以对axios进行封装,将axios封装,配置、响应拦截、请求方法都在一个request.js文件中
在api.js中调用request.js请求设置URL
在到页面中调用
getUsers({data:''}).then((res)={
//处理返回结果
})
这样封装了axios,基本就满足了我们的需求,目前一些应用框架都是这样写的,比如vue-admin。 之前,我也是使用这种方式。
3、上一种方式如果要定义一个接口,需要在api.js 去调用request.js的方法。
而接下来说的只需要按模块配置URL和请求方式就可以了。
定义一个server.js文件,用来创建axios实例,配置和响应拦截。
定义一个getRequest.js 文件,将传过来的模块对象生成对应的api接口,可默认处理返回结果,如需要特殊处理可传success回调函数,也可使用promise的方式。
api.js文件,只需要配置url和type就可以。
页面调用 需要引入api.js文件,或者将api.js挂载到Vue.prototype.$api上
this.$api.vueCase(this)
this.$api.system.login(data);
vue项目nginx必备配置-----API 接口代理
API 接口代理
我们一般做vue的项目都会配置接口代理,比如以 /API 径开头的请求都代理到本机的3000端口
那么问题来了这里的配置只有在本机没打包的时候才有效的,打包之后/API 径开头的请求就不会代理了,上传到服务器后
如何解决呢?
办法来了!!!
我的后台服务是node的,也部署在同一个服务器,开启的是3000端口
看如下nginx配置
好了看上面配置后面的注释吧,就这样配置绝逼没问题
关于vue框架api接口管理和vue项目中api的配置使用的介绍到此就结束了,不知道你从中找到你需要的信息了吗 ?如果你还想了解更多这方面的信息,记得收藏关注本站。
vue框架api接口管理的介绍就聊到这里吧,感谢你花时间阅读本站内容,更多关于vue项目中api的配置使用、vue框架api接口管理的信息别忘了在本站进行查找喔。
版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。
暂时没有评论,来抢沙发吧~