Express构建crud项目

1.配置路由

var usersRouter = require('./routes/users');

app.use('/users', usersRouter);

router.get('/list',function(req,res){
    res.render('user/userlist.art');
});

2.使用art-template模板

• 安装命令

npm i -p art-template

npm i -p express-art-template

• app.js配置使用art-template

const art_template = require('express-art-template');

app.engine('art',art_template);

 

3.使用mockjs创建随机数据模拟数据库

• 安装mockjs

npm i mockjs

 initUserDB.js:用mockjs创建随机数据并把其添加进userDB.json模拟数据

const path = require('path');
const fs = require('fs');

const MOCK = require('mockjs');
const userDB = require('./userDB.json');

//初始化userDB
userDB.users||(userDB.users = []);

var data = MOCK.mock({
      //生成一个list变量，以及为其生成100条数据
     'list|100':[{
        'id|+1':100000,
        'name':'@cname',
        'phone':'@phone',
        'address':'@address',
        'email':'@email'
    }]
        
});

userDB.users.push(...data.list);

fs.writeFileSync(path.join(__dirname,'userDB.json'),JSON.stringify(userDB),{
    encoding:'utf-8'
})

4.把数据渲染到模板页面

在路由中设定页面跳转到模板页面以及传递参数

const userDB = require("../userDB.json");

router.get('/list', function(req, res, next) {
    res.render('user/userlist.art',userDB);
});

//引入bulma样式表
...

    <h1>用户列表</h1>
    <table class="table is-hoverable is-bordered is-fullwidth">
            <tr>
                <td>编号</td>
                <td>姓名</td>
                <td>地址</td>
                <td>邮箱</td>
                <td>电话</td>
            </tr>
            <!--遍历传递的数据-->
            {{each users as user}}
                <tr>
                    <td>{{user.id}}</td>
                    <td>{{user.name}}</td>
                    <td>{{user.address}}</td>
                    <td>{{user.email}}</td>
                    <td>{{user.phone}}</td>
                </tr>
            {{/each}}
    </table>

---

使用ajax请求数据并实现分页

• 用一个userService.js文件写入操作数据的所有方法，方便路由调用

exports.getPageUser = function(page,size){
    if(typeof(page)!== "number"||page<=0){
        return{
            code:0,
            msg:'page的数据类型不符合要求'
        }
    }
    if(typeof(size) !== "number" || size<=0){
        return{
            code:0,
            msg:'size的数据类型不符合要求'
        }
    }

    userDB.users.sort((a, b) => b.id - a.id);

    return{
        user:userDB.users.slice((page - 1)*size,page*size),
        count:userDB.users.length,
        code:1,
        msg:'获取成功',
    }
};

users.js路由调用方法并且传递参数到页面

router.get('/pageUser',function(req,res){
    let pageIndex = parseInt(req.query.page) ;
    pageIndex = (isNaN(pageIndex)||pageIndex<=0?1:pageIndex);
    let sizeIndex = parseInt(req.query.size);
    sizeIndex =(isNaN(sizeIndex)||sizeIndex<=0?10:sizeIndex);

    const data = userService.getPageUser(pageIndex,sizeIndex);
    res.json({
        page:pageIndex,
        size:sizeIndex,
        users:data.user,
        count:data.count
    });
});

 

页面遍历参数并且初始化表格

var initTableData = function(page,size){
    page = page||currrentPage||1;
    size = size||10;
    $.getJSON('pageUser',{page:page,size:size},function(retData){
               
         let newTemp = "";
         for(var i=0;i<retData.users.length;i++){
             newTemp += "<tr>";
             newTemp += "<td>"+ retData.users[i].id +"</td>";
             newTemp += "<td>"+ retData.users[i].name +"</td>";
             newTemp += "<td>"+retData.users[i].address+"</td>";
             newTemp += "<td>"+retData.users[i].email+"</td>";
             newTemp += "<td>"+retData.users[i].phone+"</td>";
             newTemp += "</tr>";
         }

         $("#tbData").html(newTemp);
         
        //调用simplePagination插件实现翻页效果
         $("#page").pagination({
             items: retData.count,
             itemsOnPage: retData.size,
             currentPage:retData.page,
             cssStyle: 'light-theme',
             prevText:"上一页",
             nextText:"下一页",
             onPageClick:function(pageNum){
                 currentPage = pageNum;
                 initTableData(currentPage,size);
             }
         });

    });
}

 

5.实现添加用户功能

• userService.js实现添加用户功能

exports.addUser = function(user){
    if(!user.name){
        return{
            code:0,
            msg:'用户名不能为空'
        }
    }
    const newUser = Object.assign({'id':Date.now()},user);

    userDB.users.push(newUser);
    __saveJson(userDB);
    return{
        code:1,
        msg:'添加成功'
    }
};
function __saveJson(jsonData){
    const strJson=JSON.stringify(jsonData);
    fs.writeFileSync(path.join(__dirname,'../../userDB.json'),strJson,{
        encoding:'utf8'
    });
}

• user.js路由调用方法以及向页面返回数据 

router.post('/addUser',function(req,res){
    res.json(userService.addUser(req.body));
});

• 模板文件实现添加弹窗

  <a href="#FormAdd" id="addUser" class="button is-middle is-primary" >添加用户</a>

  <form id="FormAdd" class="mfp-hide">
        <h1 class="title">添加用户</h1>
        <table class="table">
            <tr>
                <td>用户名</td>
                <td><input type="text" name="name"></td>
            </tr>
            <tr>
                <td>地址</td>
                <td><input type="text" name="address"></td>
            </tr>
            <tr>
                <td>邮箱</td>
                <td><input type="text" name="email"></td>
            </tr>
            <tr>
                <td>电话</td>
                <td><input type="text" name="phone"></td>
            </tr>
        </table>

        <button type="reset" class="button is-light">重置</button>
        <a type="submit" id="subAdd" class="button is-primary">提交</a>
  </form>


   function  AddDialogEvent(){
      $("#addUser").magnificPopup({
         type:'inline',
         closeBtnInside:true,
         closeOnBgClick:true
      });
   }

• 把表单数据用ajax提交到路由进行添加处理

 function BindAddEvent(){
    $("#subAdd").on('click',function(){
          $.ajax({
            url:'addUser',
            type:'POST',
            data:$("#FormAdd").serialize(),
            success:function(sucMsg){
                if(sucMsg.code == 1){
                   alert("添加成功");
                   initTableData();
                }else{
                   alert("添加失败");
                }
            }
         });
   });
 }

6.实现删除操作

userService.js删除操作

exports.delUser = function(id){
    const index = userDB.users.findIndex(u => u.id = id);

    userDB.users.splice(index,1);

    __saveJson(userDB);

    return{
        code:1,
        msg:'删除成功'
    }

}

user.js

router.post('/delUser',function(req,res){
    res.json(userService.delUser(req.body));
});

userlist.art

function BindDelEvent(){
   $("#tbData").on('click','.btnDel',function(){
         var id = parseInt($(this).attr("uid"));

         $.ajax({
            url:'delUser',
            type:'post',
            data:id,
            success:function(retData){
               if(retData.code == 1){
                   alert("删除成功");
                   initTableData(1,10);
               }
            }
         });
   });
}

7.实现修改操作

userService.js

exports.editUser = function(user){
    if(user && typeof (user.id) == "number"&&user.id >0){
        const index = userDB.users.findIndex(u => u.id = user.id);
        userDB.users.splice(index,user);
        __saveJson(userDB);
        return{
            user:user.id,
            index:index,
            code:1,
            msg:'修改成功'
        }
    }
    return{
        user:user,
        msg:'修改失败',
        code:0
    }

}

user.js

router.post('/editUser',function(req,res){
    var user = Object.assign({},req.body,{id:parseInt(req.body.id)});
    res.json(userService.editUser(user));
});

userlist.art

function BindEditEvent(){
    $("#tbData").on('click','.btnEdit',function(){
        let $Tr = $(this).parent().parent();

        $("#EditId").attr('value',$Tr.children('td').eq(0).html());
        $("#EditName").attr('value',$Tr.children('td').eq(1).html());
        $("#EditAddress").attr('value',$Tr.children('td').eq(2).html());
        $("#EditEmail").attr('value',$Tr.children('td').eq(3).html());
        $("#EditPhone").attr('value',$Tr.children('td').eq(4).html());

     });

     $("#subEditInfo").on('click',function(){
        $.ajax({
           url:'editUser',
           type:'POST',
           data:$("#FormEdit").serialize(),
           success:function(retData){
             if(retData.code == 1){
                alert("修改成功");
                initTableData();
             }
           }
        });
     });
}

---

总结：第一个express框架项目，项目比较简单但是方便理解路由的作用、MVVM的模式等，中间有许多实用的插件，也给以后的开发有很大的帮助。