时间戳

首页 > 技术文章 > 基于Vue的图书管理系统 Vue的常用使用特性

基于Vue的图书管理系统 Vue的常用使用特性

SharkJiao 2020-09-04 15:48 原文

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
    <script src='./js/jquery.js'></script>
    <style type="text/css">
        .grid {
          margin: auto;
          width: 500px;
          text-align: center;
        }
        .grid table {
          border-top: 1px solid #C2D89A;  
          width: 100%;
          border-collapse: collapse;
        }
        .grid th,td {
          padding: 10;
          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 #F3DCAB;
        }
      </style>
<body>
<section id='app'>
    <div class='grid'>
        <div>
            <h1>图书管理</h1>
            <div class="book">
                <div>
                    <label for="id">
                        编号：
                    </label>
                    <input type="text" id='id' v-model='id' v-bind:disabled='flag' v-focus>
                    <label for="name">
                        名称：
                    </label>
                    <input type="text" id='name' v-model='name'>
                    <button v-on:click='handle' v-bind:disabled='submitFlag'>提交</button>
                </div>
            </div>
        </div>
        <div class="total">
            <span>图书总数：</span>
            <span>{{ total }}</span>
        </div>
        <table cellpadding="0" cellspacing="0">
            <thead>
                <tr>
                    <th>编号</th>
                    <th>名称</th>
                    <th>时间</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-bind:key='item.id' v-for='item in books'>
                    <td>{{ item.id }}</td>
                    <td>{{ item.name }}</td>
                    <td>{{item.date | format('yyyy-MM-dd hh:mm:ss')}}</td>
                    <td>
                        <a href="" v-on:click.prevent='toEdit(item.id)'>修改</a>
                        <span> | </span>
                        <a href="" v-on:click.prevent='deleteBook(item.id)'>删除</a>
                    </td>
                </tr>
                
            </tbody>
        </table>
    </div>
</section>
</body>
<script src='./js/vue.js'></script>
<script>
    Vue.directive('focus', {
        inserted: function(el){
            el.focus();
        }
    });
    Vue.filter('format', function(value, arg) {
      function dateFormat(date, format) {
        if (typeof date === "string") {
          var mts = date.match(/(\/Date\((\d+)\)\/)/);
          if (mts && mts.length >= 3) {
            date = parseInt(mts[2]);
          }
        }
        date = new Date(date);
        if (!date || date.toUTCString() == "Invalid Date") {
          return "";
        }
        var map = {
          "M": date.getMonth() + 1, //月份 
          "d": date.getDate(), //日 
          "h": date.getHours(), //小时 
          "m": date.getMinutes(), //分 
          "s": date.getSeconds(), //秒 
          "q": Math.floor((date.getMonth() + 3) / 3), //季度 
          "S": date.getMilliseconds() //毫秒 
        };
        format = format.replace(/([yMdhmsqS])+/g, function(all, t) {
          var v = map[t];
          if (v !== undefined) {
            if (all.length > 1) {
              v = '0' + v;
              v = v.substr(v.length - 2);
            }
            return v;
          } else if (t === 'y') {
            return (date.getFullYear() + '').substr(4 - all.length);
          }
          return all;
        });
        return format;
      }
      return dateFormat(value, arg);
    })
　　// 此处的坑：过滤器中的日期数值是字符型，若是字符串，则出错
    var vm= new Vue({
        el: '#app',
        data: {
            flag: false,
            submitFlag: false,
            id: '',
            name: '',
            books: []
        },
        methods: {
            handle: function(){
                if(this.flag){
                    // 根据当前的ID去更新数组中对应的数据

                    // var that= this;
                    // var book= this.books.filter(function(item){
                    //     return item.id == that.id;
                    // })
                    // book[0].name= this.name;

                    this.books.some((item)=> {
                        if(item.id== this.id){
                            item.name = this.name;
                            // 更新操作之后，终止循环
                            return true;
                        }
                    });
                    this.flag= false;
                }else{
                    // 添加图书
                    var book= {};
                    book.id= this.id;
                    book.name= this.name;
                    book.date= new Date();
                    this.books.push(book);
                }
                // 清空表单
                this.id= '';
                this.name= '';
            },
            toEdit: function(id){
                // 禁止修改ID
                this.flag= true;
                // console.log(id);
                // 根据ID查询出要编辑的数据
                // console.log(typeof(id));
                var book= this.books.filter(function(item){
                    return item.id == id;
                });
                console.log(book);
                // 将获取到的信息填充到表单
                this.id= book[0].id;
                this.name= book[0].name;
            },
            deleteBook: function(id){
                // 删除图书
                // 根据id从数组中查找元素的索引
                // var index= this.books.findIndex(function(item){
                //     return item.id == id;
                // });
                // // 根据索引，删除数组元素
                // this.books.splice(index, 1);
                // --------------------
                // 方法二：通过filter实现
                this.books= this.books.filter(function(item){
                    return item.id!= id;
                });
            }
        },
        computed: {
　　　　// 计算属性：对象方法
            total: function(){
                // 计算图书的总数
                return this.books.length;
            }
        },
        watch: {
　　　　// 监听：监听的对象为data中的键名，即监听响应式数据
            name: function(val){
                // 验证图书名称是否存在
                var flag= this.books.some(function(item){
                    return item.name== val
                });
                if(flag){   // 图书名称存在
                    this.submitFlag= true;
                }else{
                    this.submitFlag= false;
                }
            }
        },
        mounted: function(){
            // 该生命周期钩子函数被触发的时候，模板已经可以使用
            // 一般此时用于获取后台数据，然后把数据填充到模板
            var data= [{
                id: 1,
                name: '三国演义',
                date: 1599202362443
            },{
                id: 2,
                name: '水浒传',
                date: 1599202407342
            },{
                id: 3,
                name: '红楼梦',
                date: 1599202421574
            },{
                id: 4,
                name: '西游记',
                date: 1599202433516
            }];
            this.books= data;
        }
    })

    // 方法（增删改操作）
    // 过滤器（格式化日期）
    // 自定义指令（获取表单焦点）
    // 计算属性（统计图书数量）
    // 侦听器（验证图书存在性）
    // 生命周期（图书数据处理）


</script>
</html>

 

推荐阅读