first commit

2025-07-08 17:47:58 +08:00
commit 5a63b86ec2
21 changed files with 12903 additions and 0 deletions
--- a/.env.development
+++ b/.env.development
@ -0,0 +1 @@
+VUE_APP_URL=http://localhost:8888
--- a/.env.production
+++ b/.env.production
@ -0,0 +1 @@
+VUE_APP_URL=http://prod.example.com:8888
--- a/.env.test
+++ b/.env.test
@ -0,0 +1 @@
+VUE_APP_URL=http://117.72.202.202:8888
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,23 @@
+.DS_Store
+node_modules
+/dist
+
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
--- a/README.md
+++ b/README.md
@ -0,0 +1,24 @@
+# alex-ui
+
+## Project setup
+```
+npm install
+```
+
+### Compiles and hot-reloads for development
+```
+npm run serve
+```
+
+### Compiles and minifies for production
+```
+npm run build
+```
+
+### Lints and fixes files
+```
+npm run lint
+```
+
+### Customize configuration
+See [Configuration Reference](https://cli.vuejs.org/config/).
--- a/babel.config.js
+++ b/babel.config.js
@ -0,0 +1,5 @@
+module.exports = {
+  presets: [
+    '@vue/cli-plugin-babel/preset'
+  ]
+}
--- a/jsconfig.json
+++ b/jsconfig.json
@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "module": "esnext",
+    "baseUrl": "./",
+    "moduleResolution": "node",
+    "paths": {
+      "@/*": [
+        "src/*"
+      ]
+    },
+    "lib": [
+      "esnext",
+      "dom",
+      "dom.iterable",
+      "scripthost"
+    ]
+  }
+}
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -0,0 +1,53 @@
+{
+  "name": "alex-ui",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "serve:dev": "vue-cli-service serve --mode development",
+    "serve:test": "vue-cli-service serve --mode test",
+    "serve:prod": "vue-cli-service serve --mode production",
+    "build": "vue-cli-service build",
+    "lint": "vue-cli-service lint"
+  },
+  "dependencies": {
+    "axios": "^1.10.0",
+    "core-js": "^3.8.3",
+    "element-ui": "^2.15.14",
+    "vue": "^2.6.14",
+    "vue-router": "^3.5.1",
+    "vuex": "^3.6.2"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.12.16",
+    "@babel/eslint-parser": "^7.12.16",
+    "@vue/cli-plugin-babel": "~5.0.0",
+    "@vue/cli-plugin-eslint": "~5.0.0",
+    "@vue/cli-plugin-router": "~5.0.0",
+    "@vue/cli-plugin-vuex": "~5.0.0",
+    "@vue/cli-service": "~5.0.0",
+    "eslint": "^7.32.0",
+    "eslint-plugin-vue": "^8.0.3",
+    "less": "^4.0.0",
+    "less-loader": "^8.0.0",
+    "vue-template-compiler": "^2.6.14"
+  },
+  "eslintConfig": {
+    "root": true,
+    "env": {
+      "node": true
+    },
+    "extends": [
+      "plugin:vue/essential",
+      "eslint:recommended"
+    ],
+    "parserOptions": {
+      "parser": "@babel/eslint-parser"
+    },
+    "rules": {}
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not dead"
+  ]
+}
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/public/index.html
+++ b/public/index.html
@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <title><%= htmlWebpackPlugin.options.title %></title>
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>
--- a/src/App.vue
+++ b/src/App.vue
@ -0,0 +1,11 @@
+<template>
+  <div id="app">
+    <router-view />
+  </div>
+</template>
+
+<script>
+export default {
+  name: "App",
+};
+</script>
--- a/src/api/user.js
+++ b/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 },
+  });
+}
--- a/src/assets/logo.png
+++ b/src/assets/logo.png
--- a/src/main.js
+++ b/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");
--- a/src/router/index.js
+++ b/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;
--- a/src/store/index.js
+++ b/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: {
+  }
+})
--- a/src/utils/request.js
+++ b/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;
--- a/src/utils/requestApi.js
+++ b/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;
--- a/src/views/UserInfoView.vue
+++ b/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>
--- a/vue.config.js
+++ b/vue.config.js
@ -0,0 +1,30 @@
+const { defineConfig } = require("@vue/cli-service");
+
+const appURL = process.env.VUE_APP_URL;
+
+console.log("当前 VUE_APP_URL", appURL);
+
+module.exports = defineConfig({
+  transpileDependencies: true,
+  lintOnSave: false,
+  devServer: {
+    port: 9527,
+    proxy: {
+      "/api": {
+        target: appURL,
+        changeOrigin: true,
+      },
+    },
+  },
+});
+
+/**
+ * 开发环境
+ * npm run serve
+ *
+ * 测试环境
+ * npm run serve -- --mode test
+ *
+ * 生产环境
+ * npm run serve -- --mode production
+ **/