利用Vue框架实现简单的图书管理系统(添加/删除/查询)

最新推荐文章于 2024-06-12 10:54:06 发布

指尖上的DEBUG

最新推荐文章于 2024-06-12 10:54:06 发布

阅读量8.1k

点赞数 10

分类专栏： Web前端文章标签： vue javascript vue.js html5

本文链接：https://blog.csdn.net/weixin_46284353/article/details/108014479

版权

Web前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

利用Vue框架实现简单的图书管理系统(添加/删除/查询)

完整代码如下：(代码中附有相关解释说明，方便解读）

<!DOCTYPE html>
<html lang='en'>

<head>
  <meta charset='UTF-8'>
  <meta name='viewport' content='width=device-width, initial-scale=1.0'>
  <meta http-equiv='X-UA-Compatible' content='ie=edge'>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
    integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <title>图书管理系统</title>
</head>

<body>
  <div id='app'>
    <div class="container">
      <h1>图书管理系统</h1>
      <form class="form-inline">
        <div class="form-group">
          <label for="name">名称：</label>
          <input type="text" class="form-control" id="name" placeholder="请输入图书名称" v-model="add_book.name">
        </div>
        <div class="form-group">
          <label for="author">作者：</label>
          <input type="text" class="form-control" id="author" placeholder="请输入作者" v-model="add_book.author">
        </div>
        <div class="form-group">
          <label for="price">价格：</label>
          <input type="number" class="form-control" id="price" placeholder="请输入价格" v-model="add_book.price">
        </div>
        <button type="submit" class="btn btn-primary" @click.prevent="add">添加</button>
      </form>
      <form class="form-inline">
        <div class="form-group">
          <label for="keywords">搜索关键字：</label>
          <input type="text" class="form-control" id="keywords" placeholder="请输入关键字" v-model="keywords">
        </div>
      </form>
      <table class="table">
        <thead>
          <tr>
            <th>序号</th>
            <th>名称</th>
            <th>作者</th>
            <th>价格</th>
            <th>时间</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(book,index) in books_result">
            <td>{{index+1}}</td>
            <td>{{book.name}}</td>
            <td>{{book.author}}</td>
            <td>{{book.price}}</td>
            <td>{{book.atime|timeFormat}}</td>
            <td><button class="btn btn-danger" @click="del(index)">删除</button></td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
  <script>
    new Vue({
      el: '#app',
      data: {
        books: [
          { "name": "三国演义", "author": "罗贯中", "price": 98, "atime": new Date() },
          { "name": "水浒传", "author": "施耐庵", "price": 100, "atime": new Date() }
        ],
        add_book: {
          name: '',
          author: '',
          price: 0,
        },
        keywords: "",

      },
      // 查询图书信息  采用计算属性computed来实现（思路：如果输入的关键字为空，就显示原有的所有图书记录，否则就显示包含关键字的一条或多条记录）
      computed: {
        books_result() {
          var _this = this;
          if (this.keywords) {
         //this的作用域到此结束，无法穿透进入filter函数,所以需要用一个变量（比如_this）来保存this的指向。

            // 下面的参数item指的是其中一条图书的搜索记录
            let newBooks = this.books.filter(function (item) {
              if (item.name.indexOf(_this.keywords) >= 0) {
                //找到输入的关键词对应的书名的索引，存在则>=0,不存在则返回-1
                return true
              } else {
                return false
              }
            })

            return newBooks
          } else {
            return this.books //没有关键词就显示所有的数据
          }
        }
      },
      methods: {

        // 添加图书记录
        add() {
          // let book = this.add_book
          //JSON.stringify() 方法用于将js对象转换为 JSON 字符串，JSON.parse()方法用于将一个 JSON 字符串转换为js对象。
          let book = JSON.parse(JSON.stringify(this.add_book));
          book.atime = new Date();//获取当前时间
          this.books.push(book);
        },
        // 删除指定的图书记录
        del(index) {
          this.books.splice(index, 1)
        }
      },
      // 过滤器filters就是数据在真正渲染到页面中的时候，可以使用这个过滤器进行一些处理，把最终处理的结果渲染到网页中。
      // 下面是通过过滤器（名字为timeFormat）将我们获取到的当前日期时间进行一定的处理变成我们希望的格式。
      filters: {
        timeFormat: function (value) {
          value = new Date(value);
          let year = value.getFullYear();
          let month = value.getMonth() + 1;
          let day = value.getDate();
          let hour = value.getHours();
          let minutes = value.getMinutes();
          return `${year}-${month}-${day} ${hour}:${minutes}`

        }
      }
    })
  </script>
</body>

</html>

实现的效果图如下：

在这里插入图片描述

指尖上的DEBUG

关注

10
点赞
踩
64

收藏

觉得还不错? 一键收藏
1
评论
利用Vue框架实现简单的图书管理系统(添加/删除/查询)

利用Vue框架实现简单的图书管理系统(添加/删除/查询)完整代码如下：(代码中附有相关解释说明，方便解读）<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <meta name='viewport' content='width=device-width, initial-scale=1.0'> <meta http-equiv='X-UA-Comp
复制链接

扫一扫