使用vue怎么开发一个图书管理系统

使用vue怎么开发一个图书管理系统？很多新手对此不是很清楚，为了帮助大家解决这个难题，下面小编将为大家详细讲解，有这方面需求的人可以来学习下，希望你能有所收获。

组件代码

<template>
 <div id="app">
  <div class="grid">
   <div>
    <h2>图书管理</h2>
    <div class="book">
     <div>
      <label for="id" v-focus>
       编号：
      </label>
      <input type="text" id="id" v-model="id" :disabled="flag">
      <label for="name">
       名称：
      </label>
      <input type="text" id="name" v-model="name">
      <button @click="add(addOrUpdate)" :disabled="subFlag">提交</button>
     </div>
    </div>
   </div>
   <div class="total">
    <span>图书总数：</span>
    <span>{{ totalNum }}</span>
   </div>
   <table>
    <thead>
    <tr>
     <th>编号</th>
     <th>名称</th>
     <th>时间</th>
     <th>操作</th>
    </tr>
    </thead>
    <tbody>
    <tr v-for="book in books">
     <td> {{ book.id }} </td>
     <td> {{ book.name }} </td>
     <td> {{ book.date | date-format }} </td>
     <td>
      <a href="" @click.prevent=" rel="external nofollow" updateBook(book.id)">修改</a>
      <span>|</span>
      <a href="" @click.prevent = 'deleteBook(book.id)'>删除</a>
     </td>
    </tr>
    </tbody>
   </table>
  </div>
 </div>


</template>

<script>
  export default {
   data(){
     return{
       books:[
         {
           id: 1,
           name: '三国演义',
           date: 2525609975000
         },
         {
           id: 2,
           name: '水浒传',
           date: 2525609975000
         },
         {
           id: 3,
           name: '红楼梦',
           date: 2525609975000
         },
         {
           id: 4,
           name: '西游记',
           date: 2525609975000
         }
          ],
       id:'',
       name:'',
       flag:false, // id输入框是否可修改标识
       addOrUpdate: 0, // 0代表添加 1代表修改
       subFlag:false, // 提交按钮是否禁用（图书存在时禁用）

     }
   },

    methods:{
     // 添加图书的方法
     add() {
       if(this.addOrUpdate===0){
         // 添加图书
         this.books.push({
           id: this.id,
           name: this.name,
           date: new Date()
         });
       }else{
         const book = this.books.filter((book)=>{
           return book.id === this.id;
         });
         book[0].name = this.name
       }

      // 添加之后清空input框
       this.id = '';
       this.name = '';
       this.flag = false

     },
      // 更新图书的方法
      updateBook(id){
        this.addOrUpdate = 1;
       // 需要修改的当前图书信息
       const book = this.books.filter((book)=>{
         return book.id === id;
       });

       // 让input框显示相应内容
       this.id = book[0].id;
       this.name = book[0].name;
       this.flag = true;

      },
      deleteBook(id){
       // 获取当前图书的索引
       const index = this.books.findIndex((book)=>{
         return book.id === id
       });

       this.books.splice(index, 1)

      }
    },
    computed:{
      totalNum(){
        return this.books.length
      }
    },
    // 自定义局部指令
    directives:{
     focus:{
       inserted(el){
         // 自动聚焦
         el.focus()
       }
     }
    },

    // 监视图书是否存在
    watch:{
     name:{
       deep:true,
       handler(val){
         const book = this.books.find((book)=>{
           return book.name === val
         });
         if(book){
           this.subFlag = true
         }else{
           this.subFlag = false
         }
       }
     }
    }

  }
</script>


<style type="text/css">
 .grid {
  margin: auto;
  width: 530px;
  text-align: center;
 }
 .grid table {
  border-top: 1px solid #C2D89A;
  width: 100%;
  border-collapse: collapse;
 }
 .grid th,td {
  padding: 10px;
  border: 1px dashed #F3DCAB;
  height: 35px;
  line-height: 35px;
 }
 .grid th {
  background-color: #F3DCAB;
 }
 .grid .book {
  padding-bottom: 10px;
  padding-top: 5px;
  background-color: #F3DCAB;
 }
 .grid .total {
  height: 30px;
  line-height: 30px;
  background-color: #F3DCAB;
  border-top: 1px solid #C2D89A;
 }
</style>

过滤器文件index.js

import Vue from 'vue'
import format from 'date-fns/format'

// 自定义过滤器
Vue.filter('date-format', function (value, formatStr='yyyy-MM-dd HH:mm:ss') {
 return format(value, formatStr)
});

main.js引入

import './filters'

看完上述内容是否对您有帮助呢？如果还想对相关知识有进一步的了解或阅读更多相关文章，请关注亿速云行业资讯频道，感谢您对亿速云的支持。