因为使用express提供的后台接口,可以使服务器端处理完数据后交给前端渲染到页面,而不是让服务器端完整的提供一个页面,涉及到前后端交互,将会使用到ajax
后台的数据处理:
router.js:
导入需要使用的模块:
const express = require('express');
const service = require('./service.js');
const router = express.Router();
处理路由:
// 提供所有的图书信息
router.get('/books',service.allBooks);
// 添加图书信息时提交数据
router.post('/books/book',service.addBook);
// 编辑图书时根据id查询相应信息
router.get('/books/book/:id',service.getBookById);
// 提交编辑的数据
router.put('/books/book',service.editBook);
// 删除图书信息
router.delete('/books/book/:id',service.deleteBook);
导出模块:
module.exports = router;
service.js:
导入模块(db.js):
const db = require('./db.js');
处理数据:
查询数据:
exports.allBooks = (req,res) => {
let sql = 'select * from book';
db.base(sql,null,(result)=>{
res.json(result);
});
};
添加数据:
exports.addBook = (req,res) => {
let info = req.body;
let sql = 'insert into book set ?';
db.base(sql,info,(result)=>{
if(result.affectedRows == 1){
res.json({flag : 1});
}else{
res.json({flag : 2});
}
});
};
删除数据:
exports.deleteBook = (req,res) => {
let id = req.params.id;
let sql = 'delete from book where id=?';
let data = [id];
db.base(sql,data,(result)=>{
if(result.affectedRows == 1){
res.json({flag : 1});
}else{
res.json({flag : 2});
}
});
};
修改数据:
exports.editBook = (req,res) => {
let info = req.body;
let sql = 'update book set name=?,author=?,category=?,description=? where id=?';
let data = [info.name,info.author,info.category,info.description,info.id];
db.base(sql,data,(result)=>{
if(result.affectedRows == 1){
res.json({flag : 1});
}else{
res.json({flag : 2});
}
});
};
前端数据渲染:
index.html:
主体模块:
<div class="content">
<table cellpadding="0" cellspacing="0">
<thead>
<tr>
<th>编号</th>
<th>名称</th>
<th>作者</th>
<th>分类</th>
<th>描述</th>
<th>操作</th>
</tr>
</thead>
<tbody id="dataList">
</tbody>
</table>
</div>
主体模块的dataList需要通过模板引擎渲染:
<script type="text/template" id="indexTpl">
{{each list}}
<tr>
<td>{{$value.id}}</td>
<td>{{$value.name}}</td>
<td>{{$value.author}}</td>
<td>{{$value.category}}</td>
<td>{{$value.description}}</td>
<td><a href="javascript:;">修改</a>|<a href="javascript:;">删除</a></td>
</tr>
{{/each}}
</script>
添加图书(弹窗):
<form class="form" id="addBookForm">
<!-- <input type="hidden" name="id"> -->
名称:<input type="text" name="name"><br>
作者:<input type="text" name="author"><br>
分类:<input type="text" name="category"><br>
描述:<input type="text" name="description"><br>
<input type="button" value="提交">
</form>
因为是弹窗,所以需要注意在css文件里面设置.form {display: none;}
编辑图书信息(弹窗):
<form class="form" id="editBookForm">
<input type="hidden" name="id">
名称:<input type="text" name="name"><br>
作者:<input type="text" name="author"><br>
分类:<input type="text" name="category"><br>
描述:<input type="text" name="description"><br>
<input type="button" value="提交">
</form>
index.js(需要引入jquery.js、template-web.js、dialog.js文件):
将下面所有方法放在:
$(function(){
});
初始化数据列表:
// 初始化数据列表
function initList(){
$.ajax({
type : 'get',
url : '/books',
dataType : 'json',
success : function(data){
// 渲染数据列表
var html = template('indexTpl',{list : data});
$('#dataList').html(html);
// 必须在渲染完成内容之后才可以操作DOM标签
$('#dataList').find('tr').each(function(index,element){
var td = $(element).find('td:eq(5)');
var id = $(element).find('td:eq(0)').text();
// 绑定编辑图书的单击事件
td.find('a:eq(0)').click(function(){
editBook(id);
});
// 绑定删除图书的单击事件
td.find('a:eq(1)').click(function(){
deleteBook(id);
});
// 绑定添加图书信息的单击事件
addBook();
// 重置表单
var form = $('#addBookForm');
form.get(0).reset();
form.find('input[type=hidden]').val('');
});
}
});
}
加载initList,是index.html能展示从后台获取到的数据:
initList();
删除图书信息:
function deleteBook(id){
$.ajax({
type : 'delete',
url : '/books/book/' + id,
dataType : 'json',
success : function(data){
// 删除图书信息之后重新渲染数据列表
if(data.flag == '1'){
initList();
}
}
});
}
编辑图书信息:
// 编辑图书信息
function editBook(id){
var form = $('#editBookForm');
// 先根据数据id查询最新的数据
$.ajax({
type : 'get',
url : '/books/book/' + id,
dataType : 'json',
success : function(data){
// 初始化弹窗
var mark = new MarkBox(600,400,'编辑图书',form.get(0));
mark.init();
// 填充表单数据
form.find('input[name=id]').val(data.id);
form.find('input[name=name]').val(data.name);
form.find('input[name=author]').val(data.author);
form.find('input[name=category]').val(data.category);
form.find('input[name=description]').val(data.description);
// 对表单提交按钮重新绑定单击事件
form.find('input[type=button]').unbind('click').click(function(){
// 编辑完成数据之后重新提交表单
$.ajax({
type : 'put',
url : '/books/book',
data : form.serialize(),
dataType : 'json',
success : function(data){
if(data.flag == '1'){
// 隐藏弹窗
mark.close();
// 重新渲染数据列表
initList();
}
}
});
});
}
});
}
添加图书信息:
// 添加图书信息
function addBook(){
$('#addBookId').click(function(){
var form = $('#addBookForm');
// 实例化弹窗对象
var mark = new MarkBox(600,400,'添加图书',form.get(0));
mark.init();
form.find('input[type=button]').unbind('click').click(function(){
$.ajax({
type : 'post',
url : '/books/book',
data : form.serialize(),
dataType : 'json',
success : function(data){
if(data.flag == '1'){
// 关闭弹窗
mark.close();
// 添加图书成功之后重新渲染数据列表
initList();
}
}
});
});
});
}