Dev

admin-ui/mocks/product.ts

@@ -0,0 +1,22 @@
+import Mock from "mockjs";
+import webpackMockServer from "webpack-mock-server";
+
+export default webpackMockServer.add((app, helper) => {
+    app.get('/api/products', (req, res) => {
+        const products = Mock.mock({
+            'list|100': [{
+                'id|+1': 1,
+                'name': '@name',
+                'price|100-1000': 1,
+            }]
+        }).list;
+
+        res.json({
+            success: true,
+            data:{
+                list:products,
+                total: products.length
+            },
+        });
+    });
+});

admin-ui/mocks/tsconfig.json

@@ -0,0 +1,12 @@
+{
+  "extends": "../tsconfig.json",
+  "include": [
+    "../mocks/*",
+    "*.mock.ts",
+    "**/global.d.ts"
+  ],
+  "files": [],
+  "exclude": [
+    "*test.mock.ts"
+  ]
+}

admin-ui/mocks/user.js → admin-ui/mocks/user.ts

@@ -1,7 +1,8 @@
-module.exports = (app, helper) => {
+import webpackMockServer from "webpack-mock-server";
+
+export default webpackMockServer.add((app, helper) => {
     app.post('/user/login', (req, res) => {
         const username = req.body.username;
-
         if(username==='admin'){
             res.json({
                 success:true,
@@ -25,4 +26,4 @@ module.exports = (app, helper) => {
             }
         });
     });
-};
+});

admin-ui/package.json

@@ -1,11 +1,10 @@
 {
-  "name": "admin-pro-ui",
+  "name": "admin-ui",
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@ag-grid-community/locale": "^33.0.3",
     "@ant-design/icons": "^5.4.0",
-    "@ant-design/pro-components": "^2.8.2",
+    "@ant-design/pro-components": "^2.8.7",
     "@babel/standalone": "^7.25.6",
     "@codingapi/flow-pc": "^0.0.8",
     "@codingapi/form-pc": "^0.0.16",
@@ -20,7 +19,6 @@
     "@types/node": "^16.18.108",
     "@types/react": "^18.3.5",
     "@types/react-dom": "^18.3.0",
-    "ag-grid-react": "^33.0.3",
     "antd": "^5.20.6",
     "axios": "^1.7.7",
     "base64-js": "^1.5.1",
@@ -72,6 +70,7 @@
     "@types/jest": "^29.5.14",
     "@types/lodash": "^4.17.7",
     "@types/lodash-es": "^4.17.12",
+    "@types/mockjs": "^1.0.10",
     "babel-jest": "^29.7.0",
     "clean-webpack-plugin": "^4.0.0",
     "copy-webpack-plugin": "^12.0.2",
@@ -93,6 +92,6 @@
     "webpack-cli": "^5.1.4",
     "webpack-dev-server": "^5.1.0",
     "webpack-merge": "^6.0.1",
-    "webpack-mock-server": "^1.0.21"
+    "webpack-mock-server": "^1.0.23"
   }
 }

admin-ui/src/api/product.ts

@@ -0,0 +1,7 @@
+import {get} from "@/api/index";
+
+
+export async function products() {
+    return get('/api/products');
+}
+

admin-ui/webpack.config.mock.js

@@ -1,8 +1,6 @@
 const {merge} = require('webpack-merge');
 const common = require('./webpack.common.js');
 const webpackMockServer = require('webpack-mock-server');
-const mockFunction = require('./mocks/index.js');
-const express = require('express');
 
 module.exports = merge(common, {
     mode: 'development',
@@ -13,12 +11,16 @@ module.exports = merge(common, {
             if (!devServer) {
                 throw new Error('webpack-dev-server is not defined');
             }
-            // 使用 express.json() 来解析请求体
-            devServer.app.use(express.json());
 
             // 使用 webpackMockServer 来添加 mock 功能
-            webpackMockServer.use(devServer.app);
-            webpackMockServer.add(mockFunction)(devServer.app);
+            webpackMockServer.use(devServer.app,{
+                port: 8090,
+                entry:[
+                    './mocks/user.ts',
+                    './mocks/product.ts',
+                ],
+                tsConfigFileName: "mocks/tsconfig.json"
+            });
 
             console.log('mock server is running');
             return middlewares; // 返回 middlewares

admin-ui/mocks/product.js → mobile-ui/mocks/product.ts

@@ -1,8 +1,8 @@
-const Mock = require('mockjs');
+import Mock from "mockjs";
+import webpackMockServer from "webpack-mock-server";
 
-module.exports = (app, helper) => {
+export default webpackMockServer.add((app, helper) => {
     app.get('/api/products', (req, res) => {
-
         const products = Mock.mock({
             'list|100': [{
                 'id|+1': 1,
@@ -13,4 +13,4 @@ module.exports = (app, helper) => {
 
         res.json(products);
     });
-};
+});

mobile-ui/mocks/tsconfig.json

@@ -0,0 +1,12 @@
+{
+  "extends": "../tsconfig.json",
+  "include": [
+    "../mocks/*",
+    "*.mock.ts",
+    "**/global.d.ts"
+  ],
+  "files": [],
+  "exclude": [
+    "*test.mock.ts"
+  ]
+}

mobile-ui/mocks/user.ts

@@ -0,0 +1,29 @@
+import webpackMockServer from "webpack-mock-server";
+
+export default webpackMockServer.add((app, helper) => {
+    app.post('/user/login', (req, res) => {
+        const username = req.body.username;
+        if(username==='admin'){
+            res.json({
+                success:true,
+                data:{
+                    'username': username,
+                    'token':'test token',
+                    'avatar':'/logo.png',
+                    'authorities': ['ROLE_ADMIN','ROLE_DEVELOPER'],
+                }
+            });
+            return;
+        }
+
+        res.json({
+            success:true,
+            data:{
+                'username': username,
+                'token':'test token',
+                'avatar':'/logo.png',
+                'authorities': ['ROLE_USER'],
+            }
+        });
+    });
+});

mobile-ui/package.json

@@ -74,6 +74,6 @@
     "webpack-cli": "^5.1.4",
     "webpack-dev-server": "^5.1.0",
     "webpack-merge": "^6.0.1",
-    "webpack-mock-server": "^1.0.21"
+    "webpack-mock-server": "^1.0.23"
   }
 }

mobile-ui/webpack.config.mock.js

@@ -1,8 +1,6 @@
 const {merge} = require('webpack-merge');
 const common = require('./webpack.common.js');
 const webpackMockServer = require('webpack-mock-server');
-const mockFunction = require('./mocks/index.js');
-const express = require('express');
 
 module.exports = merge(common, {
     mode: 'development',
@@ -13,12 +11,15 @@ module.exports = merge(common, {
             if (!devServer) {
                 throw new Error('webpack-dev-server is not defined');
             }
-            // 使用 express.json() 来解析请求体
-            devServer.app.use(express.json());
-
             // 使用 webpackMockServer 来添加 mock 功能
-            webpackMockServer.use(devServer.app);
-            webpackMockServer.add(mockFunction)(devServer.app);
+            webpackMockServer.use(devServer.app,{
+                port: 8090,
+                entry:[
+                    './mocks/user.ts',
+                    './mocks/product.ts',
+                ],
+                tsConfigFileName: "mocks/tsconfig.json"
+            });
 
             console.log('mock server is running');
             return middlewares; // 返回 middlewares