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 ...
随机推荐
- GmSSL3.0密码算法库
GmSSL3.0密码算法库 一.开发背景 GmSSL 3.0版本具有更快.更小.更安全的特点,相比于GmSSL 2.0我们主要从以下方向进行改进: 采用CMake替代目前基于Perl的构建系统 支持L ...
- es 6中for in与for of适用对象
在 ES6 中提供了 for-of,可以很方便的遍历数组和类数组,但是却不能遍历对象,这是为什么,与 for-in 仅仅相差一个单词,用途也是遍历,为什么却不能使用在对象上? 查资料后得知,原来 ES ...
- promethues【centos7】时间同步
Promethues和Grafana展示的监控突然消失了,服务器检查发现没什么异常. 当打开promethus网页后,发现有一个错误提示: Warning! Detected 60.44 second ...
- 【面试必备】 【ES6】学Vue前必须掌握的内容（上）
变量声明 采用 let 和 const 分别声明变量和常量. 不用var所以不存在变量提升. 解构 ① 数组解构[ ] 等号左边允许存在默认值.变量的取值按照顺序. //之前的写法 var arr=[ ...
- redis底层数据结构之快速列表(quicklist)
快速列表(quicklist) redis3 .2版本之前,List类型数据使用的底层数据结构是压缩列表(ziplist)或双向链表(linkedlist),当列表元素个数比较少并且每个元素占用空间比 ...
- uni小程序保存base64图片
使用uni.getFileSystemManager().writeFile去下载base64图片<view class="share-btn" @click="s ...
- 092_Schema获取表字段的方式
Map<String, Schema.SObjectField> objectFields = Schema.getGlobalDescribe().get('ObjectName').g ...
- css你所不知道技巧
利用属性选择器来选择空链接 当 <a> 元素没有文本内容,但有 href 属性的时候,显示它的 href 属性: a[href^="http"]:empty::befo ...
- pip 下载换源
命令:[pip config set global.index-url https://pypi.tuna.tsinghua.edu.cn/simple]
- 谷歌浏览器上elementUI的按钮文字消失了
解决方案:有个谷歌浏览器插件,好像是什么淘宝的,删掉即可