Feat: Support mock server

cwandev · cwandev · commit 0a933bb1557b · 2022-06-04T15:07:46.000+08:00
diff --git a/.env b/.env
@@ -0,0 +1,3 @@
+VITE_APP_PUBLIC_PATH=/
+VITE_APP_PREVIEW=true
+VITE_APP_API_BASE_URL=/api
diff --git a/.env.development b/.env.development
@@ -0,0 +1,4 @@
+VITE_APP_PREVIEW=true
+VITE_APP_API_BASE_URL=/api
+VITE_MOCK=true
+VITE_HTTP_MOCK=true
diff --git a/.env.production b/.env.production
@@ -0,0 +1,3 @@
+NODE_ENV=production
+VITE_APP_PREVIEW=false
+VITE_APP_API_URL=/api
diff --git a/.umirc.mock.js b/.umirc.mock.js
@@ -0,0 +1,4 @@
+module.exports = {
+  ...require('./mock/index'),
+  // 这里可以引入任意的mock文件，位置也随意。
+}
diff --git a/build/mockServer.ts b/build/mockServer.ts
@@ -0,0 +1,13 @@
+import { createMockMiddleware } from 'umi-mock-middleware'
+import express from 'express'
+const createMockServer = () => {
+  const mockTarget = `http://127.0.0.1:${process.env.MOCK_SERVER_PORT}`
+  const app = express()
+  app.use(createMockMiddleware())
+  app.listen(process.env.MOCK_SERVER_PORT, () => {
+    console.log(`Mock Server listening at ${mockTarget}`)
+  })
+  return mockTarget
+}
+
+export default createMockServer
diff --git a/mock/dashboard/workplace.js b/mock/dashboard/workplace.js
@@ -0,0 +1,7 @@
+
+
+const getNotice = { name: 'Hello world' }
+
+module.exports = {
+  'GET /api/project/notice': getNotice
+}
diff --git a/mock/index.js b/mock/index.js
@@ -0,0 +1,5 @@
+const dashboardWorkplace = require('./dashboard/workplace.js')
+
+module.exports = {
+  ...dashboardWorkplace
+}
diff --git a/package.json b/package.json
@@ -1,28 +1,37 @@
 {
   "name": "vue3-vant-mobile",
-  "private": true,
   "version": "0.2.0",
   "scripts": {
-    "dev": "vite",
+    "dev": "cross-env MOCK_SERVER_PORT=8086 vite",
     "build": "vue-tsc --noEmit && vite build",
     "preview": "vite preview"
   },
   "dependencies": {
     "@vant/touch-emulator": "^1.3.2",
+    "axios": "^0.27.2",
     "nprogress": "^0.2.0",
     "pinia": "^2.0.14",
+    "store": "^2.0.12",
     "vant": "^3.4.9",
     "vconsole": "^3.14.6",
     "vue": "^3.2.25",
     "vue-router": "^4.0.15"
   },
   "devDependencies": {
+    "@types/express": "^4.17.13",
+    "@types/node": "^17.0.36",
     "@types/nprogress": "^0.2.0",
+    "@types/store": "^2.0.2",
     "@vitejs/plugin-vue": "^2.3.3",
+    "chokidar": "^3.5.3",
+    "cross-env": "^7.0.3",
+    "express": "4.17.3",
+    "glob": "^8.0.3",
     "less": "^4.1.2",
-    "postcss-preset-env": "^7.6.0",
+    "mockjs": "^1.1.0",
     "postcss-px-to-viewport": "^1.1.1",
     "typescript": "^4.5.4",
+    "umi-mock-middleware": "^1.0.0",
     "vite": "^2.9.9",
     "vite-plugin-style-import": "1.4.1",
     "vue-tsc": "^0.34.7"
diff --git a/postcss.config.js b/postcss.config.js
@@ -1,7 +1,6 @@
 // postcss.config.js
 module.exports = {
   plugins: {
-    'postcss-preset-env': {},
     'postcss-px-to-viewport': {
       viewportWidth: 375
     }
diff --git a/src/api/dashboard/workplace.ts b/src/api/dashboard/workplace.ts
@@ -0,0 +1,5 @@
+import request from '@/utils/request'
+
+export async function queryProjectNotice(): Promise<any> {
+  return request('/project/notice')
+}
diff --git a/src/api/typing.ts b/src/api/typing.ts
@@ -0,0 +1,20 @@
+export interface ResponseBody<T = any> {
+  message: string;
+  code: number;
+  data?: T | T[];
+}
+
+//统一返回结构体
+export interface PageResult<T = any> {
+  data: T[];
+  current?: number;
+  pageSize?: number;
+  total?: number;
+  success: boolean;
+}
+
+export interface RequestResult<T = any> {
+  data: T;
+  success: boolean;
+  errorMessage: string;
+}
diff --git a/src/main.ts b/src/main.ts
@@ -9,7 +9,7 @@ import { Button } from 'vant'
 
 // debugger board
 import VConsole from 'vconsole'
-const vConsole = new VConsole({ theme: 'dark' })
+new VConsole({ theme: 'light' })
 
 // 结束调试后，可移除掉
 // vConsole.destroy()
diff --git a/src/store/mutation-type.ts b/src/store/mutation-type.ts
@@ -0,0 +1,2 @@
+export const STORAGE_TOKEN_KEY = 'access_token'
+export const STORAGE_LANG_KEY = 'app_lang'
diff --git a/src/typing.ts b/src/typing.ts
@@ -0,0 +1,2 @@
+import type { Ref } from 'vue'
+export type MaybeRef<T> = T | Ref<T>
diff --git a/src/utils/hooks/useFetchData.ts b/src/utils/hooks/useFetchData.ts
@@ -0,0 +1,187 @@
+import type { UnwrapRef } from 'vue'
+import { isReactive, isRef, ref, watch, unref, reactive } from 'vue'
+import type { MaybeRef } from '@/typing'
+
+export interface PageInfo {
+  current: number;
+  pageSize: number;
+  total: number;
+  [key: string]: any;
+}
+
+export interface ReponseData<T> {
+  data: T[];
+  success?: boolean;
+  total?: number;
+  [key: string]: any;
+}
+
+export type RequestParams =
+  | {
+      pageSize: number;
+      current: number;
+      [key: string]: any;
+    }
+  | undefined;
+
+export interface UseFetchDataAction<T extends ReponseData<any>> {
+  cancel: () => void;
+  reload: () => Promise<void>;
+  resetPageIndex: () => void;
+  reset: () => void;
+  context: Context<T>;
+  setPageInfo: (pageInfo: Partial<PageInfo>) => void;
+}
+
+export interface Context<T extends ReponseData<any>> {
+  current: number;
+  pageSize: number;
+  dataSource: T['data'];
+  loading: boolean;
+  total: number;
+  requestParams?: MaybeRef<{
+    [key: string]: any;
+  }>;
+  [key: string]: any;
+}
+
+export const defaultContext: Context<any> = {
+  loading: false,
+  current: 1,
+  pageSize: 20,
+  total: 0,
+  dataSource: [],
+};
+
+// 如果请求数据中，没有分页，仅单列表数据，可以使用该方法进行包装，免去重复写请求方法
+export const wrap = (req: () => Promise<any[]>): (() => Promise<ReponseData<any>>) => {
+  return () =>
+    req().then(res => {
+      const data = res;
+      return {
+        data,
+        total: data.length,
+        success: data !== null && data !== undefined,
+      };
+    });
+};
+
+const filterNoValidValue = (obj: Record<string, any> = {}) => {
+  const newObj = {};
+  Object.keys(obj).forEach(k => {
+    if (obj[k] !== undefined && obj[k] !== '' && obj[k] !== null) {
+      newObj[k] = obj[k];
+    }
+  });
+
+  return newObj;
+};
+
+export const useFetchData = <T extends ReponseData<any>>(
+  getData: (params?: RequestParams) => Promise<T>,
+  context: MaybeRef<{
+    current?: number;
+    pageSize?: number;
+    dataSource?: T['data'];
+    loading?: boolean;
+    requestParams?: MaybeRef<{
+      [key: string]: any;
+    }>;
+    [key: string]: any;
+  }> = reactive(defaultContext),
+  options?: {
+    current?: number;
+    pageSize?: number;
+    onLoad?: (dataSource: T['data']) => void;
+    onRequestError?: (e: Error) => void;
+    pagination?: boolean;
+  },
+): UseFetchDataAction<T> => {
+  const state = reactive({} as Context<T>);
+  const mergeContext = isReactive(context) || isRef(context) ? context : ref(context);
+  watch(
+    mergeContext,
+    () => {
+      Object.assign(state, defaultContext, unref(context));
+    },
+    { immediate: true },
+  );
+
+  const fetchList = async () => {
+    // 请求中禁止重复请求
+    if (state.loading) {
+      return;
+    }
+    state.loading = true;
+    const { pageSize = 20, current = 1 } = state;
+    try {
+      const params: RequestParams =
+        options?.pagination !== false
+          ? {
+              current,
+              pageSize,
+              ...filterNoValidValue(unref(mergeContext).requestParams),
+            }
+          : undefined;
+      const { data, success, total: dataTotal = 0 } = await getData(params);
+      state.loading = false;
+      if (success !== false) {
+        state.dataSource = data as UnwrapRef<T['data']>;
+        state.total = dataTotal;
+      }
+    } catch (e) {
+      state.loading = false;
+      // 如果没有传递这个方法的话，需要把错误抛出去，以免吞掉错误
+      if (options?.onRequestError === undefined) {
+        throw new Error(e);
+      } else {
+        options.onRequestError(e);
+      }
+    }
+  };
+
+  const cancel = () => {};
+
+  const reset = () => {};
+
+  const reload = (): Promise<void> => {
+    return new Promise(resolve => {
+      resolve(fetchList());
+    });
+  };
+
+  const setPageInfo = (pageInfo: Partial<PageInfo>) => {
+    console.warn('setPageInfo 废弃，请直接使用响应式 context');
+    pageInfo.current && (state.current = pageInfo.current);
+    pageInfo.pageSize && (state.pageSize = pageInfo.pageSize);
+  };
+
+  const resetPageIndex = (): void => {
+    console.warn('resetPageIndex 废弃，请直接使用响应式 context');
+    // state.current = 1;
+  };
+  watch(
+    [() => state.current, () => state.pageSize, () => unref(mergeContext).requestParams],
+    () => {
+      fetchList().catch(e => {
+        throw new Error(e);
+      });
+    },
+    { immediate: true, deep: true },
+  );
+
+  return {
+    cancel,
+    reset,
+    reload,
+    resetPageIndex,
+    setPageInfo: info => {
+      setPageInfo({
+        current: state.current,
+        pageSize: state.pageSize,
+        ...info,
+      });
+    },
+    context: state,
+  };
+};
diff --git a/src/utils/local-storage.ts b/src/utils/local-storage.ts
@@ -0,0 +1,9 @@
+import store from 'store'
+import expirePlugin from 'store/plugins/expire'
+
+// plugin usage:
+store.addPlugin(expirePlugin)
+
+export { store as localStorage }
+
+export default store
diff --git a/src/utils/request.ts b/src/utils/request.ts
diff --git a/src/views/dashboard/analysis/index.vue b/src/views/dashboard/analysis/index.vue
diff --git a/src/views/dashboard/workplace/index.vue b/src/views/dashboard/workplace/index.vue
diff --git a/tsconfig.json b/tsconfig.json
diff --git a/vite.config.ts b/vite.config.ts
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+VITE_APP_PUBLIC_PATH=/`
	`2`	`+VITE_APP_PREVIEW=true`
	`3`	`+VITE_APP_API_BASE_URL=/api`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+NODE_ENV=production`
	`2`	`+VITE_APP_PREVIEW=false`
	`3`	`+VITE_APP_API_URL=/api`
Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,6 @@`
`1`	`1`	`// postcss.config.js`
`2`	`2`	`module.exports = {`
`3`	`3`	`plugins: {`
`4`		`- 'postcss-preset-env': {},`
`5`	`4`	`'postcss-px-to-viewport': {`
`6`	`5`	`viewportWidth: 375`
`7`	`6`	`}`