正向代理:
首先在vue项目根目录下,找到vue.config.js(vite框架下是vite.config.js)文件,找到server:{},
如果项目地址为http://medical.kuxia.top/api/Admin/del_area
内部添加以下代码:
proxy: { '/api': { target: 'http://medical.kuxia.top/api',//项目路径 changeOrigin: true, //支持跨域 rewrite: (path) => path.replace(/^\/api/, ''), //重写路径 },
其中地址名各自为
http://medical.kuxia.top/api/Admin/del_area
协议-域名/模块名/控制器/操作函数
代理目录:/api
代理地址:http://medical.kuxia.top/api
替换路径:/api
反向代理:
一般在项目运行服务器内配置:
配置项与配置正向代理相同
promise:
异步编程,解决向外部传参
普通函数可以通过return返回值,但return只会返回给上层,如果多层时拿不到值;
promise不论多少层,都可以将值传递给then,只需要在then函数内写接下来的操作
let del = new Promise((resolve) => { axios({ url: '/api/Admin/del_area', method: 'GET', params: { } }).then(res => { resolve(res) }) }) del.then(res => { console.log(res); })
接口封装:
- 新建一个api文件夹
- 按功能、模块等新建对应的js文件
- 在内部写对应的封装接口,并导出
import axios from 'axios' /** * 接口名称: * 接收参数: * 返回参数: * */ export const del = (data) => { return new Promise((resolve) => { axios({ url: '/api/Admin/del_area', method: 'GET', params: data }).then(res => { resolve(res) }) }) }
4.在需要使用的页面导入调用即可
import { del } from '../api/admin' del({ id: 0 }).then(res => { console.log(res); })