/*

  路由模块

*/

const express = require('express');

const router = express.Router();

const service = require('./service.js');

// 查询图书列表

router.get('/books',service.getAllBooks);

// 添加图书(提交表单)

router.post('/books',service.addBook);

// 跳转到编辑图书信息页面

router.get('/books/:id',service.toEditBook);

// router.get('/toEditBook',service.toEditBook);

// 编辑图书提交表单

router.put('/books/:id',service.editBook);

// 删除图书信息

router.delete('/books/:id',service.deleteBook);

// 验证图书名称是否存在

router.get('/books/book/:name',service.checkName);

module.exports = router;


<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Document</title>

  <link rel="stylesheet" type="text/css" href="css/index.css">

</head>

<body>

  <div id="app">

    <div class="grid">

      <div>

        <h1>图书管理</h1>

        <div class="book">

          <div>

            <label for="id">

              编号：

            </label>

            <input type="text" id="id" v-model='id' disabled="false" v-focus>

            <label for="name">

              名称：

            </label>

            <input type="text" id="name" v-model='name'>

            <button @click='handle' :disabled="submitFlag">提交</button>

          </div>

        </div>

      </div>

      <div class="total">

        <span>图书总数：</span>

        <span>{{total}}</span>

      </div>

      <table>

        <thead>

          <tr>

            <th>编号</th>

            <th>名称</th>

            <th>时间</th>

            <th>操作</th>

          </tr>

        </thead>

        <tbody>

          <tr :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="" @click.prevent='toEdit(item.id)'>修改</a>

              <span>|</span>

              <a href="" @click.prevent='deleteBook(item.id)'>删除</a>

            </td>

          </tr>

        </tbody>

      </table>

    </div>

  </div>

  <script type="text/javascript" src="js/vue.js"></script>

  <script type="text/javascript" src="js/axios.js"></script>

  <script type="text/javascript">

    /*

      图书管理-添加图书

    */

    axios.defaults.baseURL = 'http://localhost:3000/';

    axios.interceptors.response.use(function(res){

      return res.data;

    }, function(error){

      console.log(error)

    });

    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: async function(){

          if(this.flag) {

            // 编辑图书

            var ret = await axios.put('books/' + this.id, {

              name: this.name

            });

            if(ret.status == 200){

              // 重新加载列表数据

              this.queryData();

            }

            this.flag = false;

          }else{

            // 添加图书

            var ret = await axios.post('books', {

              name: this.name

            })

            if(ret.status == 200) {

              // 重新加载列表数据

              this.queryData();

            }

          }

          // 清空表单

          this.id = '';

          this.name = '';

        },

        toEdit: async function(id){

          // flag状态位用于区分编辑和添加操作

          this.flag = true;

          // 根据id查询出对应的图书信息

          var ret = await axios.get('books/' + id);

          this.id = ret.id;

          this.name = ret.name;

        },

        deleteBook: async function(id){

          // 删除图书

          var ret = await axios.delete('books/' + id);

          if(ret.status == 200) {

            // 重新加载列表数据

            this.queryData();

          }

        },

        queryData: async function(){

          // 调用后台接口获取图书列表数据

          // var ret = await axios.get('books');

          // this.books = ret.data;

          this.books = await axios.get('books');

        }

      },

      computed: {

        total: function(){

          // 计算图书的总数

          return this.books.length;

        }

      },

      watch: {

        name: async function(val) {

          // 验证图书名称是否已经存在

          // var flag = this.books.some(function(item){

          //   return item.name == val;

          // });

          var ret = await axios.get('/books/book/' + this.name);

          if(ret.status == 1) {

            // 图书名称存在

            this.submitFlag = true;

          }else{

            // 图书名称不存在

            this.submitFlag = false;

          }

        }

      },

      mounted: function(){

        // var that = this;

        // axios.get('books').then(function(data){

        //   console.log(data.data)

        //   that.books = data.data;

        // })

        // axios.get('books').then((data)=>{

        //   console.log(data.data)

        //   this.books = data.data;

        // })

        this.queryData();

      }

    });

  </script>

</body>

</html>

vue-图书管理系统的更多相关文章

  1. Vue.js—实现图书管理系统

      前  言 今天我们主要一起来学习一个新框架的使用--Vue.js,之前我们也讲过AngularJS是如何使用的,而今天要讲的Vue.js的语法和AngularJS很相似,因为 AngularJS ...

  2. Django学习——分组查询、图书管理系统项目、wsgi, uwsgi, cgi, fastcgi

    1 分组查询 # 分组查询 # 查询每一个出版社id,以及图书平均价格(单表) # 原生sql # select publish_id,avg(price) from app01_book group ...

  3. 基于jsp+servlet图书管理系统之后台万能模板

    前奏: 刚开始接触博客园写博客,就是写写平时学的基础知识,慢慢发现大神写的博客思路很清晰,知识很丰富,非常又价值,反思自己写的,顿时感觉非常low,有相当长一段时间没有分享自己的知识.于是静下心来钻研 ...

  4. [入门级] 基于 visual studio 2010 mvc4 的图书管理系统开发初步 （二）

    [入门级] 基于 visual studio 2010 mvc4 的图书管理系统开发初步 (二) Date  周六 10 一月 2015 By 钟谢伟 Category website develop ...

  5. 基于TXT文本的简单图书管理系统

    1 ////////////////////////////////////////////////////////////////////////////////////// //SqList.h ...

  6. struts2+hibernate 项目实战：图书管理系统

    经典项目,练手必备. 图书管理系统 需求分析(大致,并不专业):1.需要有用户管理: 1.1 用户注册: 1.2 用户登录: 1.3 用户信息修改: 1.4 用户修改密码: 2.需要有书本管理: 2. ...

  7. 图书管理系统——APP平台开发

    http://www.w3school.com.cn/php/ 初步计划采用PHP 开发网站. 一定要独立建立一套图书管理系统, 尤其唯一性质的概念,整合,甚至中英文图书概念的而整合.一本书一个页. ...

  8. Java swing项目-图书管理系统(swing+mysql+jdbc)

    (一)项目功能分析 该项目是设计一个图书管理系统,主要包含的内容有: (1)管理员登陆界面 ->信息录入 ->登录 ->重置 (2)图书管理系统总界面 ->子界面菜单: 1)图 ...

  9. 作业六—图书管理系统(SPEC)系统性能评估测试

    一.图书管理系统的典型用户和场景: 该系统是为各类学校图书馆和社会各大图书馆和书店管理者使用的图书管理系统.但是我们还是已北京工业大学耿丹学院图书馆为典型用户进行主要设计的! 二.SPEC测试的目标: ...

  10. 基于jsp+servlet图书管理系统之后台用户信息查询操作

    上一篇的博客写的是插入操作,且附有源码和数据库,这篇博客写的是查询操作,附有从头至尾写的代码(详细的注释)和数据库! 此次查询操作的源码和数据库:http://download.csdn.net/de ...

随机推荐

  1. RadioGroup 自动换行且保留点击事件

    转:(22条消息) RadioGroup 自动换行且保留点击事件_再见孙悟空_的博客-CSDN博客 public class MyRadioGroup extends RadioGroup { pri ...

  2. elasticsearch-8.6.1集群安装部署

    elk官方下载地址:https://www.elastic.co/cn/downloads/ 1.创建普通用户及用户组 groupadd elasticsearch useradd elasticse ...

  3. aop切面记日志

    package com.netauth.utils.component; import java.lang.annotation.ElementType; import java.lang.annot ...

  4. 狂神--Docker

    官网地址 官网 https://www.docker.com/ 官方文档Docker文档是超详细的 https://docs.docker.com/ 仓库地址 https://hub.docker.c ...

  5. python 获取docker容器内存使用率

    # -*- encoding: utf-8 -*- from subprocess import Popen, PIPE, STDOUTimport time def Run_Cmd(cmd): # ...

  6. python怎么实现正确的浮点数四舍五入

    round 以下示例展示对于结构相同的两组数据(1.03575000和1.03425000)保留小数后4位,使用内置函数round方法的输出结果,并不是需要的结果 print(round(1.0357 ...

  7. Java——IO框架

    IO框架 流:内存与存储设备之间传输数据的通道 分类 流向 输入流:从硬盘等外设到内存的流 输出流:从内存到硬盘等外设的流 传输单位 字节流(抽象类InputStream,OutputStream): ...

  8. OI常见缩写

    AC = Apareciym 显形咒 CE = Crucio 钻心咒 PE = Petrificus 石化咒 RE = Reducto 粉碎咒 WA = Wingardium Leviosa 悬浮咒 ...

  9. 【易语言】exui超级列表框使用方法

    优秀例程1 黑鸟 https://jiucaiwl.lanzoum.com/iLq8B0oswkuf

  10. Linux Conda 使用activate无法进入环境，但list中有环境的路径

    安装OpenFace时装了个miniconda,之后就进不去anaconda的其它环境了: (pfld) .....$ conda env list # conda environments: # / ...