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的模式等，中間有許多實用的插件，也給以後的開發有很大的幫助。