vue-图书管理系统
/*
路由模块
*/
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-图书管理系统的更多相关文章
- Vue.js—实现图书管理系统
前 言 今天我们主要一起来学习一个新框架的使用--Vue.js,之前我们也讲过AngularJS是如何使用的,而今天要讲的Vue.js的语法和AngularJS很相似,因为 AngularJS ...
- Django学习——分组查询、图书管理系统项目、wsgi, uwsgi, cgi, fastcgi
1 分组查询 # 分组查询 # 查询每一个出版社id,以及图书平均价格(单表) # 原生sql # select publish_id,avg(price) from app01_book group ...
- 基于jsp+servlet图书管理系统之后台万能模板
前奏: 刚开始接触博客园写博客,就是写写平时学的基础知识,慢慢发现大神写的博客思路很清晰,知识很丰富,非常又价值,反思自己写的,顿时感觉非常low,有相当长一段时间没有分享自己的知识.于是静下心来钻研 ...
- [入门级] 基于 visual studio 2010 mvc4 的图书管理系统开发初步 （二）
[入门级] 基于 visual studio 2010 mvc4 的图书管理系统开发初步 (二) Date 周六 10 一月 2015 By 钟谢伟 Category website develop ...
- 基于TXT文本的简单图书管理系统
1 ////////////////////////////////////////////////////////////////////////////////////// //SqList.h ...
- struts2+hibernate 项目实战：图书管理系统
经典项目,练手必备. 图书管理系统 需求分析(大致,并不专业):1.需要有用户管理: 1.1 用户注册: 1.2 用户登录: 1.3 用户信息修改: 1.4 用户修改密码: 2.需要有书本管理: 2. ...
- 图书管理系统——APP平台开发
http://www.w3school.com.cn/php/ 初步计划采用PHP 开发网站. 一定要独立建立一套图书管理系统, 尤其唯一性质的概念,整合,甚至中英文图书概念的而整合.一本书一个页. ...
- Java swing项目-图书管理系统(swing+mysql+jdbc)
(一)项目功能分析 该项目是设计一个图书管理系统,主要包含的内容有: (1)管理员登陆界面 ->信息录入 ->登录 ->重置 (2)图书管理系统总界面 ->子界面菜单: 1)图 ...
- 作业六—图书管理系统(SPEC)系统性能评估测试
一.图书管理系统的典型用户和场景: 该系统是为各类学校图书馆和社会各大图书馆和书店管理者使用的图书管理系统.但是我们还是已北京工业大学耿丹学院图书馆为典型用户进行主要设计的! 二.SPEC测试的目标: ...
- 基于jsp+servlet图书管理系统之后台用户信息查询操作
上一篇的博客写的是插入操作,且附有源码和数据库,这篇博客写的是查询操作,附有从头至尾写的代码(详细的注释)和数据库! 此次查询操作的源码和数据库:http://download.csdn.net/de ...
随机推荐
- observObservableCollection改变model属性UI不更新
使模型类实现INotifyPropertyChanged即可 public class ResDepartmentData : INotifyPropertyChanged { //需要更新UI的属性 ...
- ucloud 签名算法
# Python version:3.6.5 import hashlib import urllib from urllib.parse import urlparse params = { &qu ...
- springbooot 序列化对象配置
RbpsemsConfig: @Bean @Primary @ConditionalOnMissingBean(ObjectMapper.class) public Objec ...
- Word13 《经费联审结算单》模板office真题
1.根据题目一的要求,打开素材文件,点击[文件]-[另存为],选择[当前文件夹],命名为Word. 2.根据题目二的要求,在[布局]里点击[页面设置]的右下角,打开页面设置窗口,选择[纸张],根据题目 ...
- vscode的python开发环境搭建，环境变量支持终端命令行(执行当前
vscode的python开发环境设置 安装vscode,这里不介绍了 安装插件 在${workspaceFolder}的目录下,新建.vscode文件夹(或者修改一下配置,也可以自动生成该文件夹) ...
- C++实现顺序栈相关操作代码
#include<iostream>#include<cstdlib>using namespace std;#define MAXSIZE 100#define OK 1#d ...
- WDA学习（28）：Drag &Drop使用
1.21 Drag Drop使用 本实例测试Drag Drop; 运行结果: Drag图标Drop到添加Icon,会将一条记录添加到Table; Drag Table记录Drop到垃圾桶Icon,会将 ...
- idea快捷的输出常用语句
sout:System.out.println(); psvm:public static void main(String[] args) {}
- Nginx njs模块注入js
如实现表单代填或者webvpn模式,后续待研究
- uniapp使用百度地图
要使用第三方百度地图,首先要去百度地图官方申请一个密钥,之后引入百度地图的API文件,参考使用文档即可开发使用.而在uniapp中是没法直接引入百度地图API文件的,我们要结合uniapp中的web- ...