feat: 由 Apifox 提供在线 Mock

Author: pany-ang

src/common/apis/table/index.ts

@@ -11,7 +11,7 @@ export function createTableDataApi(data: Table.CreateOrUpdateTableRequestData) {
 }
 
 /** 删 */
-export function deleteTableDataApi(id: string) {
+export function deleteTableDataApi(id: number) {
   return request({
     url: `table/${id}`,
     method: "delete"

src/common/apis/table/type.ts

@@ -1,5 +1,5 @@
 export interface CreateOrUpdateTableRequestData {
-  id?: string
+  id?: number
   username: string
   password?: string
 }
@@ -18,7 +18,7 @@ export interface TableRequestData {
 export interface TableData {
   createTime: string
   email: string
-  id: string
+  id: number
   phone: string
   roles: string
   status: boolean

src/pages/demo/element-plus/index.vue

@@ -84,8 +84,8 @@ function getTableData() {
   getTableDataApi({
     currentPage: paginationData.currentPage,
     size: paginationData.pageSize,
-    username: searchData.username || undefined,
-    phone: searchData.phone || undefined
+    username: searchData.username,
+    phone: searchData.phone
   }).then(({ data }) => {
     paginationData.total = data.total
     tableData.value = data.list
@@ -110,6 +110,12 @@ watch([() => paginationData.currentPage, () => paginationData.pageSize], getTabl
 
 <template>
   <div class="app-container">
+    <el-alert
+      title="数据来源"
+      type="success"
+      description="由 Apifox 提供在线 Mock，数据不具备真实性，仅供简单的 CRUD 操作演示。"
+      show-icon
+    />
     <el-card v-loading="loading" shadow="never" class="search-wrapper">
       <el-form ref="searchFormRef" :inline="true" :model="searchData">
         <el-form-item prop="username" label="用户名">
@@ -227,6 +233,10 @@ watch([() => paginationData.currentPage, () => paginationData.pageSize], getTabl
 </template>
 
 <style lang="scss" scoped>
+.el-alert {
+  margin-bottom: 20px;
+}
+
 .search-wrapper {
   margin-bottom: 20px;
   :deep(.el-card__body) {

src/pages/demo/vxe-table/index.vue

@@ -13,7 +13,7 @@ defineOptions({
 
 // #region vxe-grid
 interface RowMeta {
-  id: string
+  id: number
   username: string
   roles: string
   phone: string
@@ -164,8 +164,8 @@ const xGridOpt: VxeGridProps = reactive({
           }
           // 接口需要的参数
           const params = {
-            username: form.username || undefined,
-            phone: form.phone || undefined,
+            username: form.username || "",
+            phone: form.phone || "",
             size: page.pageSize,
             currentPage: page.currentPage
           }
@@ -382,6 +382,12 @@ const crudStore = reactive({
 
 <template>
   <div class="app-container">
+    <el-alert
+      title="数据来源"
+      type="success"
+      description="由 Apifox 提供在线 Mock，数据不具备真实性，仅供简单的 CRUD 操作演示。"
+      show-icon
+    />
     <!-- 表格 -->
     <vxe-grid ref="xGridDom" v-bind="xGridOpt">
       <!-- 左侧按钮列表 -->
@@ -410,3 +416,9 @@ const crudStore = reactive({
     </vxe-modal>
   </div>
 </template>
+
+<style lang="scss" scoped>
+.el-alert {
+  margin-bottom: 20px;
+}
+</style>

types/auto/components.d.ts

@@ -7,6 +7,7 @@ export {}
 /* prettier-ignore */
 declare module 'vue' {
   export interface GlobalComponents {
+    ElAlert: typeof import('element-plus/es')['ElAlert']
     ElAside: typeof import('element-plus/es')['ElAside']
     ElAvatar: typeof import('element-plus/es')['ElAvatar']
     ElBacktop: typeof import('element-plus/es')['ElBacktop']

vite.config.ts

@@ -38,7 +38,7 @@ export default defineConfig(({ mode }) => {
       // 反向代理
       proxy: {
         "/api/v1": {
-          target: "https://mock.mengxuegu.com/mock/63218b5fb4c53348ed2bc212",
+          target: "https://apifoxmock.com/m1/2930465-2145633-default",
           // 是否为 WebSocket
           ws: false,
           // 是否允许跨域