Vue实现图书管理案例的增删改查

最新推荐文章于 2024-11-15 11:28:14 发布

小辉在线

最新推荐文章于 2024-11-15 11:28:14 发布

阅读量2.7k

点赞数 2

分类专栏： Vue.js 文章标签： vue.js

本文链接：https://blog.youkuaiyun.com/m0_63845261/article/details/123855687

版权

Vue.js 专栏收录该内容

7 篇文章

订阅专栏

内容简介

通过学习一段时间Vue基础后，使用Vue的一些基本指令来实现图书管理案例的增删改查操作，便于熟练掌握Vue基本指令。

基本需求

1.通过书名进行增加操作，书名不允许重复。
2.能够根据书名的索引进行删除操作。
3.能够根据书名中的关键字进行模糊搜索。
4.进行修改时，找到书名对应的索引进行修改。

页面展示

在这里插入图片描述

代码实现

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>图书管理</title>
    <style>
      .grid {
        margin: auto;
        width: 800px;
        text-align: center;
      }
      .grid table {
        border-top: 1px solid #ced888;
        width: 100%;
        border-collapse: collapse;
      }
      .grid th,
      .grid td {
        border: 1px dashed #ced888;
        height: 40px;
        line-height: 40px;
        padding: 10px;
      }
      .grid th {
        background-color: #ced888;
      }
      .grid .inputLine {
        padding-top: 5px;
        padding-bottom: 10px;
        background-color: #ced888;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <div class="grid">
        <h2>图书管理</h2>
        <div class="inputLine">
          书名：<input type="text" name="" id="" v-model="bookInfo.name" />
          <input
            type="button"
            value="提交"
            @click="submit"
            :disabled="isDisable"
          />
          搜索书名：
          <input type="text" name="" id="" v-model="searchName" v-focus/>
        </div>
        <table>
          <thead>
            <tr>
              <th>ID</th>
              <th>书名</th>
              <th>创建时间</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item,index) in searchBook(searchName)" :key="item.id">
              <td>{{item.id}}</td>
              <td>{{item.name}}</td>
              <td>{{item.cDate | dateFormat}}</td>
              <td>
                <a href="" @click.prevent="delBook(item.id)">删除</a>|<a href="" @click.prevent="toEditBook(index)">修改</a>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
      //自定义指令
      Vue.directive("focus", {
        inserted: function (el) {
          el.focus();
        },
      });
      //定义一个全局的过滤器
      Vue.filter('dateFormat',function(val,args=""){
            var dt=new Date(val);
            var y=dt.getFullYear();
            var m=(dt.getMonth() + 1).toString().padStart(2,"0");
            var d=dt.getDate().toString().padStart(2,"0");
            if(args=== "yyyy-MM-dd"){
                return `${y}-${m}-${d}`;
            }else{
                var h=dt.getHours().toString().padStart(2,"0");
                var mm=dt.getMinutes().toString().padStart(2,"0");
                var s=dt.getSeconds().toString().padStart(2,"0");
                return `${y}-${m}-${d} ${h}:${mm}:${s}`;
            }
        });
      var vm = new Vue({
        el: "#app",
        data: {
          books: [
            {
              id: 1,
              name: "三国演义",
              cDate: 1000609975000,
            },
            {
              id: 2,
              name: "水浒传",
              cDate: 1000609975000,
            },
            {
              id: 3,
              name: "红楼梦",
              cDate: 1000609975000,
            },
            {
              id: 4,
              name: "西游记",
              cDate: 1000609975000,
            },
          ],
          bookInfo: {
            name: "",
          },
          searchName: "",
          currentId: 0,
          isDisable: true,
        },
        watch: {
          "bookInfo.name": function (val) {
            // 是否重名
            this.isDisable = this.books.some((item) => item.name === val);
          },
        },
        methods: {
          // 图书检索
          searchBook(searchName) {
            return this.books.filter(
              (item) => item.name.indexOf(searchName) != -1
            );
          },
          // 最大的ID
          getId() {
            var ids = this.books.map((item) => item.id);
            return Math.max(...ids);
          },
          //添加图书
          addBook() {
            if (this.bookInfo.name) {
              //获取ID
              var id = this.getId() + 1;
              var book = {
                id: id,
                name: this.bookInfo.name,
                cDate: new Date(),
              };
              this.books.push(book);
            }
          },
          //编辑图书
          modifyBook(){
            //找到这个图书,遍历数组，有一项符合条件就行
            this.books.some(item=>{
              if(item.id===this.currentId){
                item.name=this.bookInfo.name;
                return true;
              }
            });
          },
          toEditBook(index){
            console.log("进行修改");
            this.bookInfo.name=this.books[index].name;
            this.currentId=this.books[index].id;
          },
          delBook(id){
            //把满足条件的数组过滤出来，达到删除的效果
            this.books=this.books.filter(item=>item.id!==id);
          },
          // 提交
          submit() {
            if (this.currentId === 0) {
              //添加
              this.addBook();
            } else {
              //编辑
              this.modifyBook();
              this.currentId=0;
            }
            this.bookInfo.name="";
          },
        },
      });
    </script>
  </body>
</html>