vue框架api接口管理(vue项目中api的配置使用)

网友投稿 910 2023-02-12


本篇文章给大家谈谈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小时内删除侵权内容。

上一篇:微信测试接口配置(微信测试接口配置要求)
下一篇:解决在Bootstrap模糊框中使用WebUploader的问题
相关文章

 发表评论

暂时没有评论,来抢沙发吧~