vue项目封装api接口事项

vue项目封装api准备

vue项目
- vue项目目录对应的src文件夹

vue项目

本项目只提及一些修改的细节，如有错误，可在评论区指出交流。

vue项目目录对应的src文件夹

本章节针对src文件夹下操作：
封装api,需要先创建请求的request.js文件，其次再创建api文件夹，故
第一步：
在src文件夹下创建utils文件夹，这个文件夹放的文件很重要，可以说是封装的关键文件，就是request,js文件
这个request.js文件也是自定义创建的。【csdn上面有很多request.js文件里面的内容，可以参考】。

在这里插入图片描述
本人的request文件，也是在csdn上参考的：
详细内容如下：

javascript">import axios from 'axios';axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8';
// 创建axios实例
const service = axios.create({// axios中请求配置有baseURL选项，表示请求URL公共部分baseURL: '/dev-api',// 超时timeout: 10000,
});// request拦截器
service.interceptors.request.use((config) => {return config;},(error) => {console.log('Request error: ', error);Promise.reject(error);}
);// 响应拦截器
service.interceptors.response.use((res) => {// 未设置状态码则默认成功状态const code = res.status || 200;// 二进制数据则直接返回if (res.status === code) {return res;} else {console.error('Request error: ', res);return Promise.reject(new Error('Error with status code ' + res.status));}},(error) => {console.log('err' + error);let { message } = error;if (message == 'Network Error') {message = '后端接口连接异常';} else if (message.includes('timeout')) {message = '系统接口请求超时';} else if (message.includes('Request failed with status code')) {message = '系统接口' + message.substr(message.length - 3) + '异常';}return Promise.reject(error);}
);
export default service;

第二步：
在src文件夹下创建api文件夹，并在api文件夹下创建你用到的api文件，
我们前端vue项目的接口api文件，都是js文件，所以公共接口应该是js文件
在这里插入图片描述
如图所示，api名字你自己随便取，后面我会以我取的这个名字为例。

javascript">import request from '@/utils/request';export function findByLikes(data) {return request({url: '/findByLikes',method: 'get',data: data,});
}export function findByTime(data) {return request({url: '/findByTime',method: 'get',data: data,});
}export function findByRand(data) {return request({url: '/findByRand',method: 'get',data: data,});
}

api导入request.js文件，两者建立联系：【不要掉任何符号，尤其是：@】

javascript">import request from '@/utils/request';

第三步：
在根目录下创建两个文件（注意是根目录）

.env.development
.env.production
如图：

这两个似乎是分辨开发环境与生产环境的，具体怎么调用我们应该也用不着：
两个文件内容很相似：

.env.development文件内容：

# 页面标题
VUE_APP_TITLE = '测试环境项目'#环境信息
ENV = 'development'#配置代理info
VUE_APP_BASE_API = '/dev-api'# 路由懒加载
VUE_CLI_BABEL_TRANSPILE_MODULES = true

.env.production文件内容：

# 页面标题
VUE_APP_TITLE = '测试环境项目'#环境信息
ENV = 'production'#配置代理info
VUE_APP_BASE_API = '/prod-api'# 路由懒加载
VUE_CLI_BABEL_TRANSPILE_MODULES = true

VUE_APP_BASE_API 似有不同，都在vue.config.js文件里面调用

第四步：
最后再看vue.config.js文件，
我网上找了好多博客，没找到一个完整的vue.config.js文件跟request.js以及api联系的，大佬都懒得整合，可能他们是觉得太简单了。

javascript">const { defineConfig } = require('@vue/cli-service');const port = process.env.port || process.env.npm_config_port || 8084; // 端口module.exports = defineConfig({transpileDependencies: true,devServer: {host: '0.0.0.0',port: port, // 此处修改你想要的端口号open: true,proxy: {// detail: https://cli.vuejs.org/config/#devserver-proxy[process.env.VUE_APP_BASE_API]: {target: `http://localhost:8087`,changeOrigin: true,pathRewrite: {['^' + process.env.VUE_APP_BASE_API]: '',},},},// disableHostCheck: true,},
});

先说8084 ，devServer里面的这个port你随便写任意，你写多少，浏览器的地址栏就会展示这个数字。相当于代理ip
在这里插入图片描述
代理的就是下面proxy 里面的那个target，8087才是后端项目，如下图：
下图是后端项目的连接数据库的文件，

里面的那个server.port 8087 ，就是上面vue.config.js文件里面的 target: http://localhost:8087,
这两个端口才是对应的，
至于那个8084，就是一个暴露的浏览器端口，后端请求，默认还是使用的8087这个端口。
这些改完之后，应该就没问题了

还有一个点就是：

javascript">  devServer: {host: '0.0.0.0',port: port, // 此处修改你想要的端口号open: true,proxy: {// detail: https://cli.vuejs.org/config/#devserver-proxy[process.env.VUE_APP_BASE_API]: {target: `http://localhost:8087`,changeOrigin: true,pathRewrite: {['^' + process.env.VUE_APP_BASE_API]: '',},},},

process.env.VUE_APP_BASE_API的VUE_APP_BASE_API是如何根据生产环境或者开发环境切换的？有大佬知道的可以评论区说一下，如果有对这个属性详细讲解生产与开发切换的博文，也可以在评论区发链接告知一下。大家互相学习，互相进步