Geeker-Admin 开发教程

大家好，欢迎来到IT知识分享网。

一、修改基础模版

1、配置文件  .env.development

# 开发环境接口地址 VITE_API_URL = /dev-api VITE_APP_BASE_API = http://192.168.2.140:8888 # 开发环境跨域代理，支持配置多个 VITE_PROXY = [["/api","http://192.168.2.140:8888"]]

2、配置字段  /src/typings/global.d.ts

VITE_API_URL: string; // 已有 VITE_APP_BASE_API: string;

3、vite.config.ts

替换：proxy: createProxy(viteEnv.VITE_PROXY) 为： proxy: { // 本地开发环境通过代理实现跨域，生产环境使用 nginx 转发 [viteEnv.VITE_API_URL]: { target: viteEnv.VITE_APP_BASE_API, // 后端服务实际地址 changeOrigin: true, rewrite: path => path.replace( new RegExp(`^${viteEnv.VITE_API_URL}`), ""), }, },

4、src/api/index.ts

替换：config.headers.set("x-access-token", userStore.token); 为：config.headers["Authorization"] = "Bearer " + userStore.token;

5、src/api/interface/index.ts

添加：user、token // 请求响应参数（包含data） export interface ResultData<T = any> extends Result { data: T; user: object; token: string; }

6、src/api/modules/login.ts

删除接口前的：PORT1 + 修改：/login、/getInfo、/getRouters、/logout // 获取用户信息 export const getInfo = () => { return http.get<Menu.MenuOptions[]>(`/getInfo`, {}, { loading: false }); };

7、动态路由  src/routers/modules/dynamicRouter.ts

await userStore.getUserInfo(); await authStore.getAuthMenuList(); // await authStore.getAuthButtonList();

8、用户信息 src/stores/modules/user.ts

// import { getInfo } from "@/api/modules/login"; async getUserInfo() { // const { user } = await getInfo(); }

9、src/views/login/components/LoginForm

const loginForm = reactive<Login.ReqLoginForm>({ username: "admin", password: "admin123" }); // 1.执行登录接口 const { token } = await loginApi({ ...loginForm, password: loginForm.password }); userStore.setToken(token);