node学习十八：基于后端接口的前端渲染的应用（图书管理系统）

因为使用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. (sql,null,(result)=>{
        res.json(result);
    });
};

添加数据：

exports.addBook = (req,res) => {
    let info = req.body;
    let sql = \'insert into book set ?\';
    db. (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. (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=?,de ion=? where id=?\';
    let data = [info.name,info.author,info.category,info.de ion,info.id];
    db. (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需要通过模板引擎渲染：

<  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.de ion}}</td>
        <td><a href=\" :;\">修改</a>|<a href=\" :;\">删除</a></td>
    </tr>
    {{/each}}
</ >

添加图书（弹窗）：

<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=\"de ion\"><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=\"de ion\"><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=de ion]\').val(data.de ion);
            // 对表单提交按钮重新绑定单击事件
            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();
                    }
                }
            });
        });
    });
}