灏天阁

vue3.2/Vite/Ts14: mock接口

· Yin灏

安装依赖

pnpm install -D vite-plugin-mock mockjs

在 vite.config.ts 中配置 mock

//...
import { viteMockServe } from "vite-plugin-mock";
//...
// command 用于获取当前开发的环境的,在正式环境不能使用 mock
export default defineConfig(({ command }) => {
  return {
    //...
    plugins: [
      //...
      viteMockServe({
        localEnabled: command === "serve",
      }),
    ],
  };
});
//...

创建 mock 数据存储文件夹

  • 新建 根目录 / mock / user.ts
// user.ts
// 用户信息数据
function createUserList() {
	return [
	   {
	   	  userId: 1,
	   	  avatar: 'http:xxxx.com/yyy.png',
	   	  username: 'admin',
	   	  password: '111111',
	   	  desc: '平台管理员',
	   	  roles: ['平台管理员'],
	   	  buttons: ['cuser.detail'],
	   	  routes: ['home'],
	   	  token: 'Admin Token'
	   },
	   //...
	]
}
// 暴露接口
export default [
	// 用户登录接口
	{
		url: '/api/user/login',
		method: 'post',
		response: ({body}) => {
			const { username, password } = body;
			const checkUser = createUserList().find(item => item.username === username && item.password === password);
			if(!checkUser) {
				return {
					code: 201,
					data: {
						message: '账号或密码不正确';
					}
				}
			}
			const { token } = checkUser;
			return {
				code: 200,
				data: {
					token
				}
			}
		}
	},
	// 获取用户信息
	{
		url: '/api/user/info',
		method: 'get',
		response: (request) => {
			const token = request.headers.token;
			const checkUser = createUserList().find(item => item.token === token);
			if(!checkUser) {
				return {
					code: 201,
					data: {
						message: '获取用户信息失败'
					}
				}
			}
			return {
				code: 200,
				data: {
					checkUser
				}
			}
		}
	}
];

测试 mock 接口

// main.ts
import axios from "axios";

axios({
  url: "/api/user/login",
  method: "post",
  data: {
    username: "admin",
    password: "111111",
  },
});

- Book Lists -