使用Vue编写一个图书管理系统-创新互联

这期内容当中小编将会给大家带来有关使用Vue编写一个图书管理系统，文章内容丰富且以专业的角度为大家分析和叙述，阅读完这篇文章希望大家可以有所收获。

创新互联建站主要从事成都网站设计、成都网站建设、网页设计、企业做网站、公司建网站等业务。立足成都服务阜南,10多年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:18982081108

案例思路

1、图书列表

实现静态列表效果
基于数据实现模板效果
处理每行的操作按钮

2、添加图书

实现表单的静态效果
添加图书表单域数据绑定
添加按钮事件绑定
实现添加业务逻辑

3、修改图书

修改信息填充到表单
修改后重新提交到表单
重用添加和修改方法

4、删除图书

删除按钮绑定时间处理方法
实现删除业务逻辑

5、常用特性应用场景

过滤器（格式化日期）
自定义指令（获取表单焦点）
计算属性（统计图书数量）
侦听器（验证图书和编号的存在性）
生命周期（图书数据处理）

代码

基本样式


    .grid {
      margin: auto;
      width: 550px;
      text-align: center;
    }

    .grid table {
      width: 100%;
      border-collapse: collapse;
    }

    .grid th,
    td {
      padding: 10;
      border: 1px dashed orange;
      height: 35px;
    }

    .grid th {
      background-color: orange;
    }

    .grid .book {
      width: 550px;
      padding-bottom: 10px;
      padding-top: 5px;
      background-color: lawngreen;
    }

    .grid .total {
      height: 30px;
      line-height: 30px;
      background-color: lawngreen;
      border-top: 1px solid orange;
    }

静态布局

图书总数：{{total}}

编号	名称	时间	操作
{{item.id}}	{{item.name}}	{{item.date \| format('yyyy-MM-dd hh:MM:ss')}}	修改 \| 删除

编号

名称

时间

操作

修改 | 删除

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去更新数组中对应的数据 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; this.data = ''; this.books.push(book); } // 清空表单 this.id = ''; this.name = ''; }, toEdit: function (id) { // 禁止修改id this.flag = true; // 根据id查询出要编辑的数据 var book = this.books.filter(function (item) { return item.id == id; }); console.log(book) // 把获取到的id提交到表单 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) // ----------------- // 方法2 通过filter方法进行删除 this.books = this.books.filter(function (item) { return item.id != id; }) } }, computed: { total: function () { // 计算图书的总数 return this.books.length; } }, watch: { 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: 252597867777 }, { id: 2, name: '水浒传', date: 564634563453 }, { id: 3, name: '红楼梦', date: 345435345343 }, { id: 4, name: '西游记', date: 345345346533 }] this.books = data } });

新网创想网站建设，新征程启航

使用Vue编写一个图书管理系统-创新互联

图书管理

其他资讯