fix: ensure that the post with parameters are matched,fix #29

vbenjs · Jun 15, 2021 · 4cb55f8 · 4cb55f8
1 parent 4625e59
commit 4cb55f8
Show file tree

Hide file tree

Showing 4 changed files with 137 additions and 129 deletions.
diff --git a/examples/ts-example/mock/user.ts b/examples/ts-example/mock/user.ts
@@ -3,8 +3,9 @@ export default [
   {
     url: '/api/createUser',
     method: 'post',
-    response: ({ body }) => {
+    response: ({ body, query }) => {
       console.log('body>>>>>>>>', body);
+      console.log('query>>>>>>>>', query);
       return {
         code: 0,
         message: 'ok',

diff --git a/examples/ts-example/src/App.vue b/examples/ts-example/src/App.vue
@@ -6,7 +6,8 @@
         href="https://github.com/anncwb/vite-plugin-mock/tree/main/examples/ts-example"
         target="_blank"
         class="_link"
-      >测试vite-plugin-mock（TS版本）</el-link>
+        >测试vite-plugin-mock（TS版本）</el-link
+      >
     </h1>
     <el-space wrap>
       <el-card class="box-card" v-for="(item, key) in requestLists" :key="key">
@@ -19,146 +20,147 @@
               type="primary"
               plain
               @click="sendRequest(key, item)"
-            >Send</el-button>
+              >Send</el-button
+            >
           </div>
         </template>
-        <div v-loading="item.show">{{item.info}}</div>
+        <div v-loading="item.show">{{ item.info }}</div>
       </el-card>
     </el-space>
   </div>
 </template>
 
 <script>
-import { defineComponent, ref } from 'vue';
-import axios from 'axios';
-export default defineComponent({
-  name: 'App',
-  setup() {
-    const requestLists = ref([
-      {
-        name: 'Get Request',
-        info: '暂无数据',
-        show: false,
-      },
-      {
-        name: 'Get Restful',
-        info: '暂无数据',
-        show: false,
-      },
-      {
-        name: 'Post Request',
-        info: '暂无数据',
-        show: false,
-      },
-      {
-        name: 'Post Restful',
-        info: '暂无数据',
-        show: false,
-      },
-      {
-        name: 'Post Form-data',
-        info: '暂无数据',
-        show: false,
-      },
-    ]);
+  import { defineComponent, ref } from 'vue';
+  import axios from 'axios';
+  export default defineComponent({
+    name: 'App',
+    setup() {
+      const requestLists = ref([
+        {
+          name: 'Get Request',
+          info: '暂无数据',
+          show: false,
+        },
+        {
+          name: 'Get Restful',
+          info: '暂无数据',
+          show: false,
+        },
+        {
+          name: 'Post Request',
+          info: '暂无数据',
+          show: false,
+        },
+        {
+          name: 'Post Restful',
+          info: '暂无数据',
+          show: false,
+        },
+        {
+          name: 'Post Form-data',
+          info: '暂无数据',
+          show: false,
+        },
+      ]);
 
-    const getRoleById = () => {
-      requestLists.value[0].show = true;
-      axios.get('/api/getRoleById', { params: { id: 2 } }).then(({ data }) => {
-        requestLists.value[0].info = data;
-        requestLists.value[0].show = false;
-      });
-    };
-
-    const testRestful = () => {
-      requestLists.value[1].show = true;
-      axios.get('/api/testRestful/1').then(({ data }) => {
-        requestLists.value[1].info = data;
-        requestLists.value[1].show = false;
-      });
-    };
-
-    const createUser = () => {
-      requestLists.value[2].show = true;
-      axios
-        .post('/api/createUser', {
-          name: 'vben',
-          gender: 'man',
-        })
-        .then(({ data }) => {
-          requestLists.value[2].info = data;
-          requestLists.value[2].show = false;
+      const getRoleById = () => {
+        requestLists.value[0].show = true;
+        axios.get('/api/getRoleById', { params: { id: 2 } }).then(({ data }) => {
+          requestLists.value[0].info = data;
+          requestLists.value[0].show = false;
         });
-    };
+      };
 
-    const testPostRestful = () => {
-      requestLists.value[3].show = true;
-      axios.post('/api/testRestful/1').then(({ data }) => {
-        requestLists.value[3].info = data;
-        requestLists.value[3].show = false;
-      });
-    };
+      const testRestful = () => {
+        requestLists.value[1].show = true;
+        axios.get('/api/testRestful/1').then(({ data }) => {
+          requestLists.value[1].info = data;
+          requestLists.value[1].show = false;
+        });
+      };
 
-    const testPostFormData = () => {
-      requestLists.value[4].show = true;
-      axios
-        .post(
-          '/api/createUser',
-          {
+      const createUser = () => {
+        requestLists.value[2].show = true;
+        axios
+          .post('/api/createUser', {
             name: 'vben',
             gender: 'man',
-          },
-          { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } }
-        )
-        .then(({ data }) => {
-          requestLists.value[4].info = data;
-          requestLists.value[4].show = false;
+          })
+          .then(({ data }) => {
+            requestLists.value[2].info = data;
+            requestLists.value[2].show = false;
+          });
+      };
+
+      const testPostRestful = () => {
+        requestLists.value[3].show = true;
+        axios.post('/api/testRestful/1').then(({ data }) => {
+          requestLists.value[3].info = data;
+          requestLists.value[3].show = false;
         });
-    };
+      };
+
+      const testPostFormData = () => {
+        requestLists.value[4].show = true;
+        axios
+          .post(
+            '/api/createUser?a=1',
+            {
+              name: 'vben',
+              gender: 'man',
+            },
+            { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } }
+          )
+          .then(({ data }) => {
+            requestLists.value[4].info = data;
+            requestLists.value[4].show = false;
+          });
+      };
 
-    const sendRequest = (key, item) => {
-      switch (key) {
-        case 0:
-          getRoleById();
-          break;
-        case 1:
-          testRestful();
-          break;
-        case 2:
-          createUser();
-          break;
-        case 3:
-          testPostRestful();
-          break;
-        case 4:
-          testPostFormData();
-          break;
-        default:
-          getRoleById();
-      }
-    };
+      const sendRequest = (key, item) => {
+        switch (key) {
+          case 0:
+            getRoleById();
+            break;
+          case 1:
+            testRestful();
+            break;
+          case 2:
+            createUser();
+            break;
+          case 3:
+            testPostRestful();
+            break;
+          case 4:
+            testPostFormData();
+            break;
+          default:
+            getRoleById();
+        }
+      };
 
-    return {
-      requestLists,
-      sendRequest,
-    };
-  },
-});
+      return {
+        requestLists,
+        sendRequest,
+      };
+    },
+  });
 </script>
 
 <style scoped>
-.card-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-._link {
-  font-size: 30px;
-}
-.box-card {
-  width: 360px;
-}
-.el-space {
-  align-items: flex-start !important;
-}
+  .card-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+  ._link {
+    font-size: 30px;
+  }
+  .box-card {
+    width: 360px;
+  }
+  .el-space {
+    align-items: flex-start !important;
+  }
 </style>
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vite-plugin-mock",
-  "version": "2.8.0-beta.1",
+  "version": "2.8.0-beta.6",
   "description": "A mock plugin for vite",
   "main": "dist/index.js",
   "files": [

diff --git a/src/createMockServer.ts b/src/createMockServer.ts
@@ -42,12 +42,11 @@ export async function requestMiddleware(opt: ViteMockOptions) {
       pathname?: string | null;
     } = {};
 
-    const isGet = req.method && req.method.toUpperCase() === 'GET';
-    if (isGet && req.url) {
+    if (req.url) {
       queryParams = url.parse(req.url, true);
     }
 
-    const reqUrl = isGet ? queryParams.pathname : req.url;
+    const reqUrl = queryParams.pathname;
 
     const matchRequest = mockData.find((item) => {
       if (!reqUrl || !item || !item.url) {
@@ -60,6 +59,7 @@ export async function requestMiddleware(opt: ViteMockOptions) {
     });
 
     if (matchRequest) {
+      const isGet = req.method && req.method.toUpperCase() === 'GET';
       const { response, rawResponse, timeout, statusCode, url } = matchRequest;
 
       if (timeout) {
@@ -71,7 +71,12 @@ export async function requestMiddleware(opt: ViteMockOptions) {
       let query = queryParams.query;
       if (reqUrl) {
         if ((isGet && JSON.stringify(query) === '{}') || !isGet) {
-          query = (urlMatch(reqUrl) as any).params || {};
+          const params = (urlMatch(reqUrl) as any).params;
+          if (JSON.stringify(params) !== '{}') {
+            query = (urlMatch(reqUrl) as any).params || {};
+          } else {
+            query = queryParams.query || {};
+          }
         }
       }