Geeker-Admin 开发教程

一、修改基础模版

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);