first commit

src/App.vue

@@ -0,0 +1,11 @@
+<template>
+  <div id="app">
+    <router-view />
+  </div>
+</template>
+
+<script>
+export default {
+  name: "App",
+};
+</script>

src/api/user.js

@@ -0,0 +1,32 @@
+import service from "@/utils/request";
+
+export function getAllUser(pageNum = 1, pageSize = 10) {
+  return service({
+    url: "/users/getAllUser",
+    method: "get",
+    params: { pageNum, pageSize },
+  });
+}
+
+export function getUserById(userId) {
+  return service({
+    url: `/users/${userId}`,
+    method: "get",
+  });
+}
+
+export function updateUser(data) {
+  return service({
+    url: "/users/updateUser",
+    method: "post",
+    data: { data },
+  });
+}
+
+export function insertUser(data) {
+  return service({
+    url: "/users/insertUser",
+    method: "post",
+    data: { data },
+  });
+}

src/main.js

@@ -0,0 +1,15 @@
+import Vue from "vue";
+import App from "./App.vue";
+import router from "./router";
+import store from "./store";
+import ElementUI from "element-ui";
+import "element-ui/lib/theme-chalk/index.css";
+
+Vue.use(ElementUI);
+Vue.config.productionTip = false;
+
+new Vue({
+  router,
+  store,
+  render: (h) => h(App),
+}).$mount("#app");

src/router/index.js

@@ -0,0 +1,20 @@
+import Vue from "vue";
+import VueRouter from "vue-router";
+import UserInfoView from "../views/UserInfoView.vue";
+
+Vue.use(VueRouter);
+
+const routes = [
+  {
+    path: "/",
+    name: "user-info",
+    component: UserInfoView, // 设置组件
+  },
+];
+
+const router = new VueRouter({
+  mode: "hash",
+  routes,
+});
+
+export default router;

src/store/index.js

@@ -0,0 +1,17 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+
+Vue.use(Vuex)
+
+export default new Vuex.Store({
+  state: {
+  },
+  getters: {
+  },
+  mutations: {
+  },
+  actions: {
+  },
+  modules: {
+  }
+})

src/utils/request.js

@@ -0,0 +1,18 @@
+import axios from "axios";
+
+const service = axios.create({
+  baseURL: "/api",
+  timeout: 5000,
+});
+
+//请求拦截器
+service.interceptors.request.use(
+  (config) => {
+    return config;
+  },
+  (error) => {
+    console.error("请求错误：", error);
+    return Promise.reject(error);
+  }
+);
+export default service;

src/utils/requestApi.js

@@ -0,0 +1,64 @@
+import axios from "axios";
+import store from "@/store";
+import router from "@/router";
+import { Message } from "element-ui";
+
+const apiService = axios.create({
+  baseURL: "/api",
+  timeout: 5000,
+});
+
+//请求拦截器
+apiService.interceptors.request.use(
+  (config) => {
+    if (store.state.user.token !== null) {
+      config.headers.token = store.state.user.token;
+    }
+    return config;
+  },
+  (error) => {
+    console.error("请求错误：", error);
+    return Promise.reject(error);
+  }
+);
+
+//响应拦截器
+apiService.interceptors.response.use(
+  (success) => {
+    if (success.status && success.status === 200) {
+      const { code } = success.data;
+      if (code === 500 || code === 403 || code === 401 || code === 400) {
+        if (code === 401) {
+          Message.error("未登录或登录已过期，请重新登录");
+          router.replace("/login");
+        } else {
+          if (success.data.msg) {
+            Message.error(success.data.msg);
+          }
+        }
+      } else if (code === 200 && success.data.msg) {
+        Message.success(success.data.msg);
+      }
+    }
+    return success.data;
+  },
+  (error) => {
+    const { code } = error.response;
+    if (code === 504 || code === 404) {
+      Message.error("服务器被吃了⊙﹏⊙∥");
+    } else if (code === 403) {
+      Message.error("权限不足,请联系管理员");
+    } else if (code === 401) {
+      Message.error("未登录或登录已过期，请重新登录");
+      router.replace("/login");
+    } else {
+      if (error.response.data.msg) {
+        Message.error(error.response.data.msg);
+      } else {
+        Message.error("未知错误");
+      }
+    }
+  }
+);
+
+export default apiService;

src/views/UserInfoView.vue

@@ -0,0 +1,40 @@
+<template>
+  <el-card>
+    <div style="margin-bottom: 16px">
+      <el-input v-model="userId" placeholder="请输入用户 ID" style="width: 200px; margin-right: 10px" />
+      <el-button type="primary" @click="fetchUserById">查询用户</el-button>
+    </div>
+
+    <el-table :data="users" border style="width: 100%">
+      <el-table-column prop="id" label="ID" width="80" />
+      <el-table-column prop="username" label="用户名" />
+      <el-table-column prop="password" label="密码" />
+    </el-table>
+  </el-card>
+</template>
+
+<script>
+import { getAllUser, getUserById } from "@/api/user";
+
+export default {
+  name: "UserInfoView",
+  data() {
+    return {
+      users: [], // 用户列表
+      userId: "", // 输入的 ID
+    };
+  },
+  mounted() {
+    getAllUser().then((res) => {
+      this.users = res.data.data.data || [];
+    });
+  },
+  methods: {
+    fetchUserById() {
+      getUserById(this.userId).then((res) => {
+        this.users = [res.data.data];
+      });
+    },
+  },
+};
+</script>