feat 添加vxe-table,后端接口联调

.env

@@ -1,8 +1,8 @@
 # port
-VITE_PORT = 3100
+VITE_PORT=3100
 
 # spa-title
-VITE_GLOB_APP_TITLE = Vben Admin
+VITE_GLOB_APP_TITLE=Vben Admin
 
 # spa shortname
-VITE_GLOB_APP_SHORT_NAME = vue_vben_admin
+VITE_GLOB_APP_SHORT_NAME=vue_vben_admin

.env.development

@@ -1,22 +1,23 @@
-# Whether to open mock
+# 是否打开mock
 VITE_USE_MOCK = true
 
-# public path
+# 发布路径
 VITE_PUBLIC_PATH = /
 
-# Cross-domain proxy, you can configure multiple
-# Please note that no line breaks
-VITE_PROXY = [["/basic-api","http://localhost:3000"],["/upload","http://localhost:3300/upload"]]
-# VITE_PROXY=[["/api","https://vvbin.cn/test"]]
+# 跨域代理，您可以配置多个 ,请注意，没有换行符
+VITE_PROXY = [["/api","http://localhost:9999"],["/upload","http://localhost:3300/upload"]]
+#VITE_PROXY = [["/api","http://localhost:9999"],["/upload","http://localhost:3300/upload"]]
+# VITE_PROXY=[["/api","http://localhost:9999"]]
 
-# Delete console
+# 控制台不输出console
 VITE_DROP_CONSOLE = false
 
-# Basic interface address SPA
-VITE_GLOB_API_URL=/basic-api
+# 接口地址
+VITE_GLOB_API_URL=/api
+#VITE_GLOB_API_URL=/basic-api
 
-# File upload address， optional
+# 文件上传地址
 VITE_GLOB_UPLOAD_URL=/upload
 
-# Interface prefix
+# 接口前缀
 VITE_GLOB_API_URL_PREFIX=

mock/_util.ts

@@ -1,10 +1,10 @@
 // Interface data format used to return a unified format
 import { ResultEnum } from '/@/enums/httpEnum';
 
-export function resultSuccess<T = Recordable>(result: T, { message = 'ok' } = {}) {
+export function resultSuccess<T = Recordable>(data: T, { message = 'ok' } = {}) {
   return {
     code: ResultEnum.SUCCESS,
-    result,
+    data,
     message,
     type: 'success',
   };

mock/sys/user.ts

@@ -46,7 +46,7 @@ const fakeCodeList: any = {
 export default [
   // mock user login
   {
-    url: '/basic-api/login',
+    url: '/api/login',
     timeout: 200,
     method: 'post',
     response: ({ body }) => {
@@ -69,7 +69,7 @@ export default [
     },
   },
   {
-    url: '/basic-api/getUserInfo',
+    url: '/api/getUserInfo',
     method: 'get',
     response: (request: requestParams) => {
       const token = getRequestToken(request);

package.json

@@ -1,10 +1,8 @@
 {
-  "name": "vben-admin",
-  "version": "2.8.0",
+  "name": "bootx-platform-vue3",
+  "version": "1.1.3",
   "author": {
-    "name": "vben",
-    "email": "anncwb@126.com",
-    "url": "https://github.com/anncwb"
+    "name": "xxm"
   },
   "scripts": {
     "commit": "czg",
@@ -69,6 +67,8 @@
     "vue-json-pretty": "^2.0.6",
     "vue-router": "^4.0.14",
     "vue-types": "^4.1.1",
+    "vxe-table": "^4.3.5",
+    "xe-utils": "^3.5.6",
     "xlsx": "^0.18.5"
   },
   "devDependencies": {

src/components/VxeTable/index.ts

@@ -0,0 +1,18 @@
+import { App } from 'vue';
+import 'xe-utils';
+import VXETable from 'vxe-table';
+import 'vxe-table/lib/style.css';
+
+/**
+ * 加载vxe-table
+ * @param app
+ */
+export function useTable(app: App) {
+  app.use(VXETable);
+
+  // 给 vue 实例挂载内部对象，例如：
+  // app.config.globalProperties.$XModal = VXETable.modal
+  // app.config.globalProperties.$XPrint = VXETable.print
+  // app.config.globalProperties.$XSaveFile = VXETable.saveFile
+  // app.config.globalProperties.$XReadFile = VXETable.readFile
+}

src/main.ts

@@ -14,6 +14,7 @@ import { setupStore } from '/@/store';
 import { setupGlobDirectives } from '/@/directives';
 import { setupI18n } from '/@/locales/setupI18n';
 import { registerGlobComp } from '/@/components/registerGlobComp';
+import { useTable } from '/@/components/VxeTable';
 
 async function bootstrap() {
   const app = createApp(App);
@@ -52,6 +53,9 @@ async function bootstrap() {
   // 配置全局错误处理
   setupErrorHandle(app);
 
+  // add vxe-table
+  useTable(app);
+
   // https://next.router.vuejs.org/api/#isready
   // await router.isReady();
 

src/router/routes/modules/system.ts

@@ -0,0 +1,25 @@
+import type { AppRouteModule } from '/@/router/types';
+import { LAYOUT } from '/@/router/constant';
+
+const system: AppRouteModule = {
+  path: '/system1',
+  name: 'System1',
+  component: LAYOUT,
+  redirect: '/system1/client',
+  meta: {
+    icon: 'simple-icons:about-dot-me',
+    title: '系统管理1',
+  },
+  children: [
+    {
+      path: 'client',
+      name: 'Client',
+      component: () => import('/@/views/modules/system/client/ClientList.vue'),
+      meta: {
+        title: '终端管理',
+      },
+    },
+  ],
+};
+
+export default system;

src/utils/http/axios/index.ts

@@ -43,19 +43,19 @@ const transform: AxiosTransform = {
       return res.data;
     }
     // 错误的时候返回
-
-    const { data } = res;
-    if (!data) {
+    // 获取请求头重的数据
+    const rawData = res.data;
+    if (!rawData) {
       // return '[HTTP] Request has no return value';
       throw new Error(t('sys.api.apiRequestFailed'));
     }
-    //  这里 code，result，message为 后台统一的字段，需要在 types.ts内修改为项目自己的接口返回格式
-    const { code, result, message } = data;
+    //  这里 code，data，message为 后台统一的字段，需要在 types.ts内修改为项目自己的接口返回格式
+    const { code, data, message } = rawData;
 
     // 这里逻辑可以根据项目进行修改
-    const hasSuccess = data && Reflect.has(data, 'code') && code === ResultEnum.SUCCESS;
+    const hasSuccess = rawData && Reflect.has(rawData, 'code') && code === ResultEnum.SUCCESS;
     if (hasSuccess) {
-      return result;
+      return data;
     }
 
     // 在此处根据自己项目的实际情况对不同的code执行不同的操作

src/views/modules/system/client/Client.api.ts

@@ -0,0 +1,11 @@
+import { defHttp } from '/@/utils/http/axios';
+
+/**
+ * 分页
+ */
+export const page = (params) => {
+  return defHttp.get({
+    url: "/client/page",
+    params
+  })
+}

src/views/modules/system/client/ClientList.vue

@@ -0,0 +1,53 @@
+<template>
+  <div class="m-5 p-3 bg-white">
+    <vxe-toolbar>
+      <template #buttons>
+        <vxe-button @click="getPage">查询</vxe-button>
+      </template>
+    </vxe-toolbar>
+    <vxe-table
+      :data="model.tableData"
+    >
+      <vxe-column type="seq" width="60" />
+      <vxe-column field="code" title="编码"/>
+      <vxe-column field="name" title="名称"/>
+      <vxe-column field="captcha" title="系统内置" >
+        <template v-slot="{row}">
+          <a-tag v-if="row.system" color="green">是</a-tag>
+          <a-tag v-else color="red">否</a-tag>
+        </template>
+      </vxe-column>
+      <vxe-column field="enable" title="启用状态" >
+        <template v-slot="{row}">
+          <a-tag v-if="row.enable" color="green">启用</a-tag>
+          <a-tag v-else color="red">停用</a-tag>
+        </template>
+      </vxe-column>
+      <vxe-column field="description" title="描述"/>
+      <vxe-column field="createTime" title="创建时间" />
+    </vxe-table>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {onMounted, reactive} from 'vue';
+import {page} from "/@/views/modules/system/client/Client.api";
+
+onMounted(() => {
+  getPage()
+})
+
+const model = reactive({
+  loading: false,
+  tableData: [] as any[],
+})
+
+async function getPage(){
+  page({}).then(res => {
+    model.tableData = res.records
+  })
+}
+
+</script>
+
+<style scoped></style>

types/axios.d.ts

@@ -36,7 +36,7 @@ export interface Result<T = any> {
   code: number;
   type: 'success' | 'error' | 'warning';
   message: string;
-  result: T;
+  data: T;
 }
 
 // multipart/form-data: upload file

yarn.lock

@@ -9291,6 +9291,11 @@ vue@^3.2.33:
     "@vue/server-renderer" "3.2.37"
     "@vue/shared" "3.2.37"
 
+vxe-table@^4.3.5:
+  version "4.3.5"
+  resolved "https://registry.npmmirror.com/vxe-table/-/vxe-table-4.3.5.tgz#023a5e3833dde341ccd035320f10aef61176aa23"
+  integrity sha512-JEvGAs7SBN1rWn5f2tkoRiXd/rAT7RfnDTTlFsHsTtASiUTKNTISI2WBsVeLkkNRTs0SXh6FgrYsIPO2soSBXA==
+
 warning@^4.0.0:
   version "4.0.3"
   resolved "https://registry.npmmirror.com/warning/-/warning-4.0.3.tgz#16e9e077eb8a86d6af7d64aa1e05fd85b4678ca3"
@@ -9576,6 +9581,11 @@ write-file-atomic@^4.0.1:
     imurmurhash "^0.1.4"
     signal-exit "^3.0.7"
 
+xe-utils@^3.5.6:
+  version "3.5.6"
+  resolved "https://registry.npmmirror.com/xe-utils/-/xe-utils-3.5.6.tgz#1d8cf03d635bc2ede3f34bfdf39ce6051b6fcaaa"
+  integrity sha512-oFZWxtTqxR6a2FtTQ1vSD10ab+XUXSz6jWaTaK+CsfbpIWH79jU6DipJJPgw9zxfYigcnJvb98aaT188kqhqcA==
+
 xlsx@^0.18.5:
   version "0.18.5"
   resolved "https://registry.npmmirror.com/xlsx/-/xlsx-0.18.5.tgz#16711b9113c848076b8a177022799ad356eba7d0"