图书管理练习

src/api/book.js

@@ -0,0 +1,60 @@
+import request from '@/utils/axios'
+
+// 获取图书
+export function getBook(id) {
+    if (id == null) {
+        return request({
+            url: '/api/book/',
+            method: 'get'
+        })
+    }
+    else {
+        return request({
+            url: `/api/book/${id}`,
+            method: 'get'
+        })
+    }
+}
+
+// 新增图书
+export function postBook(data) {
+    return request({
+        url: '/api/book/',
+        method: 'post',
+        data
+    })
+}
+
+// 更新图书内容
+export function putBook(id, data) {
+    return request({
+        url: `/api/book/${id}/`,
+        method: 'put',
+        data
+    })
+}
+
+// 删除图书
+export function deleteBook(id) {
+    return request({
+        url: `/api/book/${id}/`,
+        method: 'delete',
+    })
+}
+
+// 获取图书类型
+export function getType() {
+    return request({
+        url: '/api/type',
+        method: 'get'
+    })
+}
+
+// 获取作者信息
+export function getAuthor(params) {
+    return request({
+        url: '/api/author/',
+        method: 'get',
+        params
+    })
+}

src/router/index.js

@@ -10,6 +10,12 @@ export const constantRoutes = [
         title: '首页',
         component: () => import('@/views/home/home')
     },
+    {
+        path: '/book-create',
+        name: 'bookc',
+        title: '图书',
+        component: () => import('@/views/book/create'),
+    }
     // ,{
     //     path: '/work',
     //     name: 'work',

src/utils/axios.js

@@ -7,7 +7,7 @@ import { Message } from 'element-ui'
 // axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
 
 let config = {
-  baseURL: "/report",
+  baseURL: "/",
   timeout: 60 * 1000, // Timeout
 };
 

src/views/book/create.vue

@@ -0,0 +1,233 @@
+<template>
+  <div>
+    <vxe-toolbar perfect>
+      <template v-slot:buttons>
+        <vxe-button icon="el-icon-delete" status="perfect" @click="deleteData">删除</vxe-button>
+        <vxe-button icon="el-icon-position" status="perfect" @click="updateData">编辑</vxe-button>
+        <vxe-button icon="el-icon-plus" status="perfect" @click="addData">新增</vxe-button>
+      </template>
+    </vxe-toolbar>
+    <vxe-table
+      border
+      show-overflow
+      row-id="id"
+      size="medium"
+      :data="tableData"
+      @radio-change="radioChangeEvent"
+    >
+      <vxe-table-column type="radio" width="60" />
+      <vxe-table-column type="seq" field="序号" width="60" />
+      <vxe-table-column field="name" title="书名" />
+      <vxe-table-column field="ISBN" title="编码" />
+      <vxe-table-column field="type" title="类型"></vxe-table-column>
+      <vxe-table-column field="author" title="作者">
+        <template v-slot="{row}">
+          <el-tag v-for="author in row.author" :key="author.id">{{author.author__name}}</el-tag>
+        </template>
+      </vxe-table-column>
+      <vxe-table-column field="price" title="价格" />
+      <vxe-table-column field="release_time" title="出版日期" />
+    </vxe-table>
+
+    <vxe-modal
+      v-model="modelVisi"
+      width="600"
+      :title="modelTitle"
+      show-footer
+      @close="close"
+      resize
+      @confirm="submitEvent"
+    >
+      <vxe-form ref="xForm" title-align="right" title-width="100" :data="formData">
+        <vxe-form-item title="书名" field="name" span="24">
+          <template v-slot="scope">
+            <vxe-input
+              v-model="formData.name"
+              placeholder="请输入书名"
+              clearable
+              @input="$refs.xForm.updateStatus(scope)"
+            ></vxe-input>
+          </template>
+        </vxe-form-item>
+        <vxe-form-item title="ISBN" field="ISBN" span="24">
+          <template v-slot="scope">
+            <vxe-input
+              v-model="formData.ISBN"
+              placeholder="请输入ISBN"
+              clearable
+              @input="$refs.xForm.updateStatus(scope)"
+            ></vxe-input>
+          </template>
+        </vxe-form-item>
+        <vxe-form-item title="类型" field="type" span="24">
+          <template v-slot>
+            <vxe-select v-model="formData.type" clearable>
+              <vxe-option v-for="t in types" :key="t.id" :value="t.id" :label="t.name"></vxe-option>
+            </vxe-select>
+          </template>
+        </vxe-form-item>
+        <vxe-form-item title="作者" field="type" span="24">
+          <template v-slot>
+            <vxe-select v-model="formData.author" multiple clearable>
+              <vxe-option
+                v-for="user in authors"
+                :key="user.id"
+                :value="user.id"
+                :label="user.name"
+              ></vxe-option>
+            </vxe-select>
+          </template>
+        </vxe-form-item>
+        <vxe-form-item title="价格" field="type" span="24">
+          <template v-slot>
+            <vxe-input v-model="formData.price" placeholder="请输入价格" type="number"></vxe-input>
+          </template>
+        </vxe-form-item>
+        <vxe-form-item title="出版日期" field="type" span="24">
+          <template v-slot>
+            <vxe-input v-model="formData.release_time" placeholder="日期类型" type="date" />
+          </template>
+        </vxe-form-item>
+      </vxe-form>
+    </vxe-modal>
+
+    <!-- <vxe-pager
+      border
+      size="medium"
+      :loading="loading2"
+      :current-page="tablePage2.currentPage"
+      :page-size="tablePage2.pageSize"
+      :total="tablePage2.totalResult"
+      :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'FullJump', 'Sizes', 'Total']"
+      @page-change="handlePageChange2"
+    ></vxe-pager>-->
+  </div>
+</template>
+
+<script>
+import {
+  getBook,
+  postBook,
+  getAuthor,
+  deleteBook,
+  putBook,
+  getType,
+} from "@/api/book";
+
+export default {
+  name: "book-c",
+  data() {
+    return {
+      tableData: [],
+      radioId: null,
+      modelVisi: false,
+      modelTitle: "",
+      formData: {
+        ISBN: "",
+        author: [],
+        name: "",
+        price: 0,
+        release_time: "",
+        type: [],
+      },
+      authors: [],
+      types: [],
+    };
+  },
+  components: {},
+  created() {
+    this.init();
+  },
+  methods: {
+    init() {
+      this.getBookDate();
+      getAuthor().then((res) => {
+        console.log("获取作者信息");
+        console.log(res.data);
+        if (res.data.length > 0) {
+          console.log("getAuthor");
+          console.log(res.data);
+          this.authors = res.data;
+        }
+      });
+      getType().then((res) => {
+        this.types = res.data;
+      });
+    },
+    getBookDate() {
+      getBook(null).then((res) => {
+        console.log(res.data);
+        if (res.data.length > 0) {
+          console.log("getBook");
+          console.log(res.data);
+          this.tableData = res.data;
+        }
+      });
+    },
+    radioChangeEvent(row) {
+      console.log("单击事件");
+      console.log(row.rowid);
+      this.radioId = row.rowid;
+    },
+    addData() {
+      console.log("新增按钮");
+      this.modelVisi = true;
+      this.modelTitle = "新增";
+    },
+    submitEvent() {
+      console.log("模态框的按钮");
+      console.log(this.formData);
+      if (this.radioId == null) {
+        postBook(this.formData).then((res) => {
+          if (res.status === 200) {
+            this.$message.success("新增图书成功");
+            this.getBookDate();
+          }
+        });
+      } else {
+        putBook(this.radioId, this.formData).then((res) => {
+          if (res.status === 200) {
+            this.getBookDate();
+          }
+        });
+      }
+      this.close();
+    },
+    deleteData() {
+      deleteBook(this.radioId).then((res) => {
+        if (res.status === 204) {
+          this.$message.success("删除图书成功");
+          this.getBookDate();
+        }
+      });
+    },
+    updateData() {
+      getBook(this.radioId).then((res) => {
+        if (res.status === 200) {
+          this.modelVisi = true;
+          console.log("获取一个图书信息");
+          console.log(res);
+          let au = [];
+          for (let v of res.data.author) {
+            au.push(v.author_id);
+          }
+          res.data.author = au;
+          this.formData = res.data;
+        }
+      });
+    },
+    close() {
+      console.log("关闭");
+      this.radioId = null;
+      this.formData = {
+        ISBN: "",
+        author: [],
+        name: "",
+        price: 0,
+        release_time: "",
+        type: 1,
+      };
+    },
+  },
+};
+</script>