图书的年月日和区间api实现

src/api/book.js

@@ -2,10 +2,11 @@ import request from '@/utils/axios'
 
 // 获取图书
 export function getBook(id) {
-    if (id == null) {
+    if (id.constructor === Object) {
         return request({
             url: '/api/book/',
-            method: 'get'
+            method: 'get',
+            params: id
         })
     }
     else {

src/views/book/create.vue

@@ -1,5 +1,10 @@
 <template>
   <div>
+    <vxe-input v-model="searchV" placeholder="模糊搜索名称" type="search" @search-click="search"></vxe-input>
+    <vxe-input v-model="searchDate" placeholder="日期类型" type="date"></vxe-input>
+    <vxe-input v-model="searchGte" placeholder="日期类型" type="date"></vxe-input>
+    <vxe-input v-model="searchLte" placeholder="日期类型" type="date"></vxe-input>
+    <vxe-button type="text" status="primary" @click="qjSera">区间搜索</vxe-button>
     <vxe-toolbar perfect>
       <template v-slot:buttons>
         <vxe-button icon="el-icon-delete" status="perfect" @click="deleteData">删除</vxe-button>
@@ -132,6 +137,10 @@ export default {
       },
       authors: [],
       types: [],
+      searchV: "",
+      searchDate: "",
+      searchGte: "",
+      searchLte: "",
     };
   },
   components: {},
@@ -140,7 +149,7 @@ export default {
   },
   methods: {
     init() {
-      this.getBookDate();
+      this.getBookDate({});
       getAuthor().then((res) => {
         console.log("获取作者信息");
         console.log(res.data);
@@ -154,8 +163,8 @@ export default {
         this.types = res.data;
       });
     },
-    getBookDate() {
-      getBook(null).then((res) => {
+    getBookDate(par) {
+      getBook(par).then((res) => {
         console.log(res.data);
         if (res.data.length > 0) {
           console.log("getBook");
@@ -228,6 +237,27 @@ export default {
         type: 1,
       };
     },
+    search() {
+      this.getBookDate({
+        name__contains: this.searchV,
+      });
+    },
+    qjSera() {
+      this.getBookDate({
+        release_time__gte: this.searchGte,
+        release_time__lte: this.searchLte,
+      });
+    },
+  },
+  watch: {
+    searchDate(vd) {
+      let d = vd.split("-");
+      this.getBookDate({
+        release_time__year: d[0],
+        release_time__month: d[1],
+        release_time__day: d[2],
+      });
+    },
   },
 };
 </script>

vue.config.js

@@ -6,7 +6,7 @@ function resolve(dir) {
 }
 
 const port = 8080 // dev port
-const proxy_port = 8000
+const proxy_port = 8989
 
 // All configuration item explanations can be find in https://cli.vuejs.org/config/
 module.exports = {
@@ -33,8 +33,8 @@ module.exports = {
       // change xxx-api/login => mock/login
       // detail: https://cli.vuejs.org/config/#devserver-proxy
       // process.env.VUE_APP_BASE_API
-      ['/report']: {
-        target: `http://localhost:${proxy_port}`,
+      ['/']: {
+        target: `http://47.111.250.197:${proxy_port}`,
         changeOrigin: true
       }
     }