绥化做网站四川聚顺成网络科技有限公司
功能21：使用axios发送请求
功能20：使用分页插件
功能19：集成MyBatis-Plus
功能18：创建后端工程
功能17：菜单管理
功能16：角色管理
功能15：用户管理
功能14：使用本地SVG图标库
功能13：侧边栏加入Logo
功能12：折叠/展开侧边栏
功能11：实现面包屑功能
功能10：添加首页菜单项
功能9：退出登录功能
功能8：页面权限控制
功能7：路由全局前置守卫
功能6：动态添加路由记录
功能5：侧边栏菜单动态显示
功能4：首页使用Layout布局
功能3：点击登录按钮实现页面跳转
功能2：静态登录界面
功能1：创建前端项目
前言
Axios 是一个基于 Promise 的现代化 HTTP 客户端库，广泛应用于浏览器和 Node.js 环境。它简化了前端与后端的数据交互，具备拦截器、自动 JSON 转换、请求取消等强大功能，成为替代原生 fetch 的热门选择。
一.操作步骤
1.安装
pnpm add axios
2.axios自定义实例
新建文件：src\utils\request.js
import axios from 'axios'// 创建axios实例
const service = axios.create({// axios中请求配置有baseURL选项，表示请求URL公共部分baseURL: import.meta.env.VITE_APP_BASE_API,// 超时timeout: 10000,headers: {'Content-Type': 'application/json;charset=utf-8'}
})// 响应拦截器
service.interceptors.response.use(res => {return Promise.resolve(res.data)
},error => {return Promise.reject(error)}
)export default service
3.修改user.js
将原来模拟的数据，替换成使用axios发送GET请求。
import request from '@/utils/request'// 查询用户列表
export function listUser(query) {return request({url: '/system/user/list',method: 'get',params: query})
}
4.修改工具类ruoyi.js
增加一个工具函数。
/*** 将日期范围添加到查询参数对象中，支持自定义属性名前缀* @function addDateRange* @param {Object} queryParams - 原始查询参数对象* @param {Array} dateRange - 日期范围数组，包含起始和结束时间* @param {string} [propName] - 自定义日期范围的属性名前缀（可选）* @returns {Object} 处理后的查询参数对象，包含添加的日期范围参数* @example* // 基本用法：添加beginTime和endTime* const params = { params: {} };* addDateRange(params, ['2023-01-01', '2023-01-31']);* // 返回: { params: { beginTime: '2023-01-01', endTime: '2023-01-31' } }* * @example* // 带前缀用法：添加beginOrder和endOrder* const params = { params: { page: 1 } };* addDateRange(params, ['2023-01-01', '2023-01-31'], 'Order');* // 返回: { params: { page:1, beginOrder: '2023-01-01', endOrder: '2023-01-31' } }*/
export function addDateRange(queryParams, dateRange, propName) {let search = queryParams;search.params = typeof (search.params) === 'object' && search.params !== null && !Array.isArray(search.params) ? search.params : {};dateRange = Array.isArray(dateRange) ? dateRange : [];if (typeof (propName) === 'undefined') {search.params['beginTime'] = dateRange[0];search.params['endTime'] = dateRange[1];} else {search.params['begin' + propName] = dateRange[0];search.params['end' + propName] = dateRange[1];}return search;
}
5.修改用户管理模板
查询时带上分页信息。
import { parseTime, addDateRange } from '@/utils/ruoyi'/** 查询用户列表 */
function getList() {loading.value = true;listUser(addDateRange(queryParams.value, dateRange.value)).then(res => {loading.value = false;userList.value = res.rows;total.value = res.total;});
};
6.vite.config.js
配置代理proxy
作用：配置反向代理，解决跨域问题或转发 API 请求。
详解：将特定请求转发到后端服务器，避免浏览器直接请求不同源的 API。
代理配置项：/dev-api
target: ‘http://localhost:8080’
目标服务器地址，所有匹配的请求会被转发到此 URL。
此处后端服务运行在本地 8080 端口。
changeOrigin: true
修改请求头中的 Origin 为目标 URL 的域名。
绕过某些后端服务器的同源策略检查，避免被拒绝。
示例：前端请求 Origin: http://localhost:80 → 代理后变为 Origin: http://localhost:8080。
rewrite: § => p.replace(/^/dev-api/, ‘’)
重写请求路径，移除 /dev-api 前缀。
示例：/dev-api/user → /user。
目的：前端代码统一使用 /dev-api 前缀发起请求，代理转发时去掉该前缀，适配后端实际路径。
// vite 相关配置server: {host: true,open: true,proxy: {'/dev-api': {target: 'http://localhost:8080',changeOrigin: true,rewrite: (p) => p.replace(/^\/dev-api/, '')}}},
二.功能验证
运行项目，浏览器访问http://localhost:5173/system/user
列表显示的数据跟数据库一致。