打通前后端全棧開發node+vue進階【課程學習系統項目實戰詳細講解】(3)：用戶添加/修改/刪除 vue表格組件 vue分頁組件

第三章 建議學習時間8小時      總項目預計10章

 

學習方式：詳細閱讀，並手動實現相關代碼（如果沒有node和vue基礎，請學習前面的vue和node基礎博客【共10章】

演示地址：后台：demoback.lalalaweb.com  前台：demo.lalalaweb.com

演示過程中可能會發現bug，希望即時留言反饋，謝謝

源碼下載：https://github.com/sutianbinde/classweb               //不是全部的代碼，每次更新博客才更新代碼

學習目標：此教程將教會大家 如何一步一步實現一個完整的課程學習系統（包括課程管理后台/Node服務器/學習門戶三個模塊）。

上次node基礎課程博客大家反響很好，時隔3個月，才更新項目部分，預計2~3天更新一章，我盡量20天更新完畢，學完這個項目Nodejs和vue就基本熟悉了，如發現教程有誤的地方，請及時留言反饋

視頻教程地址：www.lalalaweb.com，后期會上傳教學視頻，大家可前往視頻學習（暫時還沒有視頻）

 

用戶添加/修改/刪除  表格組件  分頁組件

---

 首先我們通過命令行啟動前面已經寫完的項目

 

由於要用到表格，我們這里就得封裝 表格和分頁組件

 先在componets中創建分頁組件 pagebar.vue，寫入以下代碼（功能是傳入分頁信息，然后展示分頁，點擊分頁的時候，會向上觸發goto()跳轉到第幾頁，具體參數的解釋在代碼中，對於組件不熟悉的，可以再去看看前面的基礎教程）

<template>
        <ul class="pagination">
            <li :class="{hideLi:current == 1}" @click="goto(current-1)">
                <a href="javascript:;" aria-label="Previous">
                    <span aria-hidden="true">&laquo;</span>
                </a>
            </li>
            <li v-for="index in pages" @click="goto(index)" :class="{'active':current == index}" :key="index">
              <a href="javascript:;" >{{index}}</a>
            </li>
            <!--<li><a href="javascript:;">10</a></li>-->
            <li :class="{hideLi:(allpage == current || allpage == 0)}" @click="goto(current+1)">
                <a href="javascript:;" aria-label="Next">
                    <span aria-hidden="true">&raquo;</span>
                </a>
            </li>
       </ul>
       
</template>

<script>
    /*
     分頁組件
     設置props
         current 當前頁    默認1
         showItem 顯示幾頁    默認5
         allpage    共多少頁     10
     
    **/
    export default {
        name: 'page',
        data () {
            return {}
        },
        props:{
            current:{
                type:Number,
                default:1
            },
            showItem:{
                type:Number,
                default:5
            },
            allpage:{
                type:Number,
                default:10
            }
        },
        computed:{
            pages:function(){
                var pag = [];
                   if( this.current < this.showItem ){ //如果當前的激活的項 小於要顯示的條數
                        //總頁數和要顯示的條數那個大就顯示多少條
                        var i = Math.min(this.showItem,this.allpage);
                        while(i){
                            pag.unshift(i--);
                        }
                    }else{ //當前頁數大於顯示頁數了
                        var middle = this.current - Math.floor(this.showItem / 2 ),//從哪里開始
                            i = this.showItem;
                        if( middle >  (this.allpage - this.showItem)  ){
                            middle = (this.allpage - this.showItem) + 1
                        }
                        while(i--){
                            pag.push( middle++ );
                        }
                    }
                return pag
            }
        },
        methods:{
            /*editHandler(item){
                this.$emit("on-edit",item);
            }*/
            goto:function(index){
                if(index == this.current) return;
                    //this.current = index;
                    //這里可以發送ajax請求
                    this.$emit("on-gopage",index);
            }
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
/*分頁*/
    .pagination{
        margin: 10px;
        display: inline-block;
    }
    .pagination >li{
        display: inline;
    }
    .pagination>li>a, .pagination>li>span{
        float: left;
        padding: 6px 12px;
        margin-left: -1px;
        line-height: 1.42857143;
        color: #4187db;
        text-decoration: none;
        background-color: #fff;
        border: 1px solid #f8f9fb;
    }

    .pagination>li>a:hover{
        background-color: #f8f9fb;
    }
    .pagination>.active>a{
        background-color: #4187db !important;
        color: #fff;
    }
    .hideLi a{
        visibility: hidden;
    }
</style>

 

然后在componets中創建 grid.vue ，表格組件，然后寫入以下代碼，我們在表格組件中，引入了分頁組件，這樣就不用在主頁面中兩次引入了，參數的注釋在代碼中，這里我們需要傳入表格數據的頭信息和列表信息

<template>
    <div class="">
        
        <table border="" cellspacing="" cellpadding="">
            <thead>
                <tr><th>序號</th>
                    <th v-for="(item, index) in theadData">{{item.title}}</th>
                </tr>
            </thead>
            <tbody>
                <tr v-if="!listData.length">
                    <td>1</td><td>沒有數據 . . .</td>
                    <td v-for="(item, index) in theadData" v-if="index<=theadData.length-2"></td>
                </tr>
                <tr v-for="(item, index) in listData">
                    <td>{{index+1}}</td>
                    <!--按照頭部的-->
                    <td  v-for="(item2, index2) in theadData">
                        <span v-if="index2 === 0" style="float: right;">
                            <i title="編輯" v-if="ifEdit" class="fa fa-edit" aria-hidden="true" @click="editHandler(item)"></i>
                            <i title="刪除" v-if="ifDelete" class="fa fa-trash" aria-hidden="true" @click="deleteHandler(item)"></i>
                            <i title="下移" v-if="ifDown" class="fa fa-arrow-circle-o-down" aria-hidden="true" @click="downHandler(item)"></i>
                            <i title="上移" v-if="ifUp" class="fa fa-arrow-circle-o-up" aria-hidden="true" @click="upHandler(item)"></i>
                            <i title="封號"v-if="ifReset" class="fa fa-unlock-alt" aria-hidden="true" @click="resetHandler(item)"></i>
                        </span>
                        {{item[item2.keyname]}}
                    </td>
                </tr>
                
            </tbody>
        </table>
        
        <pagebar v-if="ifpage" :current="pageInfo.current" :showItem="pageInfo.showItem" :allpage="pageInfo.allpage" @on-gopage="gopage"></pagebar>
    </div>
</template>

<script>
    /*
     表格組件
     設置props
         theadData 表頭數據    默認[]
         listData 表格數據    默認[]
         ifpage    是否分頁     默認true
         ifEdit/ifDelete/ifUp/ifDown    是否可編輯/刪除/上下移動  默認false
         
      定制模板
          slot為grid-thead 定制表格頭部
          slot為grid-handler 定制表格操作
          
      監聽狀態變化
          on-delete 刪除
          on-edit   編輯
          on-up     上移
          on-down   下移
          
      分頁
      pageInfo 分頁信息如下  默認{}   --  或者單獨使用 pagebar.vue
      {
          current:當前第幾頁     1
          showItem：顯示多少頁 5
          allpage:共多少頁        10
      }
     
    **/
    
    import pagebar from './pagebar.vue'
    export default {
        name: 'grid',
        data () {
            return {
    
            }
        },
        props:{
            listData:{
                type:Array,
                default:function(){
                    return [{
                        name:"沒有數據 . . ."
                    }]
                }
            },
            theadData:{
                type:Array,
                default:function(){
                    return [{
                        title:"名字",
                        keyname:"name"
                    }]
                }
            },
            ifpage:{
                type:Boolean,
                default:true
            },
            ifEdit:{
                type:Boolean,
                default:false
            },
            ifDelete:{
                type:Boolean,
                default:false
            },
            ifUp:{
                type:Boolean,
                default:false
            },
            ifDown:{
                type:Boolean,
                default:false
            },
            ifReset:{
                type:Boolean,
                default:false
            },
            pageInfo:{
                type:Object,
                default:function(){
                    return {}
                }
            }
        },
        methods:{
            editHandler(item){
                this.$emit("on-edit",item);
            },
            deleteHandler(item){
                this.$emit("on-delete",item);
            },
            downHandler(item){
                this.$emit("on-down",item);
            },
            upHandler(item){
                this.$emit("on-up",item);
            },
            resetHandler(item){
                this.$emit("on-reset",item);
            },
            gopage(index){
                this.$emit("on-gopage",index);
            }
        },
        components:{pagebar}
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

    table{
        border: none 0;
        border-collapse: collapse;
        color: #51555a;
        width: 100%;
        border-bottom: 1px solid #DFE3EA;
    }
    td, th{
        padding: 10px 20px;
        text-align: left;
        border-width:0;
    }
    thead tr, tr:nth-of-type(even){
        background: #f8f9fb;
    }
    /*tbody tr:hover{
        background: #f4f6fb;
    }*/
    td .fa{
        padding:0 5px;
        cursor: pointer;
        opacity: 0;
        transition: all 0.3s ease;
    }
    td .fa:first-child{
        margin-left: 10px;
    }
    tr:hover .fa{
        opacity: 1;
    }
    td .fa:hover{
        color: #4187db;
        transform: scale(1.2);
    }
    
    
</style>

表格頭信息和列表數據 需要傳入的數據格式 如下（這只是展示，幫助大家理解上面的代碼的，不用寫到頁面中）

    var listData = [
        {
            name:"css+html基礎",
            duration:"30h",
            teacher:"小豆子",
            videoNb:"20",
            sysId:1
        },{
            name:"javascript進階",
            duration:"20h",
            teacher:"小豆子",
            videoNb:"12",
            sysId:2
        },{
            name:"移動端全解析 ",
            duration:"10h",
            teacher:"小豆子",
            videoNb:"3",
            sysId:3
        },{
            name:"10分鍾系列 ",
            duration:"23h",
            teacher:"小豆子",
            videoNb:"2",
            sysId:4
        },{
            name:"移動端動態網頁編程",
            duration:"10h",
            teacher:"小豆子",
            videoNb:"10",
            sysId:5
        }
    ];
    var theadData = [
        {
            title:"課程名稱",
            keyname:"name"
        },{
            title:"時長",
            keyname:"duration"
        },{
            title:"視頻數量",
            keyname:"videoNb"
        },{
            title:"老師",
            keyname:"teacher"
        }
    ];

 

然后我們修改系統管理員列表組件（我們上一章中建立的 adminList.vue），修改其中的代碼如下，我們這里代碼比較多，包括了增刪該，分頁等功能，確實不好分步驟講解，這里就直接上代碼了，整體來說，方法都很明確，希望大家能看懂，中間的ajax接口我們下一步再去Node端寫。

注：這里我們沒有對輸入數據進行嚴格的正則驗證，是因為此后台功能設定為內部人員使用，所以不需要像前台用戶注冊頁面那樣寫非常復雜的驗證

<template>
  <div class="adminList main">
    <div class="input_box">
            <input v-model="Admin.name" class="myinput" type="text" placeholder="用戶名" />
            <input v-model="Admin.phone" class="myinput" type="text" placeholder="手機號" />
            <input v-if="!editAdminObj" v-model="Admin.password" class="myinput" type="password" placeholder="密碼" />
            <button v-if="!editAdminObj" class="btn" @click="addAdmin()"><i class="fa fa-plus" aria-hidden="true"></i>添加</button>
            <button v-if="editAdminObj" class="btn" @click="saveEditAdmin()"><i class="fa fa-save" aria-hidden="true"></i>保存</button>
            <button style="opacity: 0.8;" v-if="editAdminObj" class="btn" @click="cancelEditAdmin()"><i class="fa fa fa-times-circle-o" aria-hidden="true"></i>取消</button>
        </div>
        <grid 
            :listData="listData"
            :theadData="theadData"
            :ifEdit="true"
            :ifDelete="true"
            :ifpage="true"
            :pageInfo="pageInfo"
            @on-delete="deleteAdmin"
            @on-edit="editAdmin"
            @on-gopage="gopage"
        ></grid>
  </div>
</template>

<script>
    var theadData = [
        {
            title:"用戶名",
            keyname:"name"
        },{
            title:"手機號",
            keyname:"phone"
        }
    ];
    import grid from './grid.vue'
    export default {
        name: 'adminList',
        data () {
            return {
                listData:[],
                theadData:theadData,
                Admin:{ //用戶信息
                    name:"",
                    phone:"",
                    password:"",
                },
                editAdminObj:null,  //用於存放正在編輯的用戶
                pageInfo:{}
            }
        },
        mounted:function(){
            this.getAdminList(1);
        },
        methods:{
            getAdminList(page){
                var _this = this;
            
                this.$reqs.post('/users/AdminList',{
                    page:page
                }).then(function(result){ 
                    //成功
                    _this.listData = result.data.data;
                    _this.pageInfo.allpage = Math.ceil( result.data.total/5 );
                }).catch(function (error) {
                    //失敗
                    console.log(error)
                });
            },
            addAdmin(){ //添加用戶
                if(!this.Admin.name || !this.Admin.phone || !this.Admin.password){
                    alert("不能為空");
                    return false;
                }
                this.$reqs.post('/users/add',this.Admin)
                .then((result)=>{
                    //成功
                    this.getAdminList();
                    this.emptyAdmin();
                }).catch(function (error) {
                    //失敗
                console.log(error)
                });
                
            },
            editAdmin(item){ //編輯用戶
                this.editAdminObj = item;
                this.Admin = JSON.parse(JSON.stringify(item));
            },
            saveEditAdmin(){
                if(!this.Admin.name || !this.Admin.phone){
                    alert("不能為空");
                    return false;
                }
                this.$reqs.post('/users/update', this.Admin)
                .then((result)=>{
                    //成功
                    this.gopage(this.pageInfo.current);
                    
                    this.editAdminObj = null;
                    this.emptyAdmin();
                }).catch(function (error) {
                    //失敗
                console.log(error)
                });
                
                
                
            },
            cancelEditAdmin(){
                this.editAdminObj = null;
                this.emptyAdmin();
            },
            emptyAdmin(){ //清空輸入框（多次使用，所以封裝到這里）
                this.Admin.name = "";
                this.Admin.phone = "";
                this.Admin.password = "";
            },
            deleteAdmin(item){
                this.$reqs.post('/users/delete',item)
                .then((result)=>{
                    //成功
                    this.gopage(this.pageInfo.current);
                    this.emptyAdmin();
                }).catch(function (error) {
                    //失敗
                console.log(error)
                });
            },
            gopage(index){
                this.pageInfo.current = index;
                //查詢數據
                this.getAdminList(index)
                
            }
        },
        components:{grid}
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    .main{
        border-radius: 4px;
        background: #fff;
        margin-top: 10px;
    }
    
    
    .input_box{
        padding: 0 10px;
    }
    .input_box .myinput{
        width: 25%;
    }
</style>

 

 

vue部分我們就寫好了，然后我們編寫node接口

我們修改 routes中的 users.js，添加增刪改用戶的接口 ，由於需要對 _id進行轉化，我們還需要引入mongodb的ObjectId模塊，修改后的users.js如下

var express = require('express');
var router = express.Router();
var handler = require('./dbhandler.js');
var crypto = require('crypto');
var ObjectId = require('mongodb').ObjectId;

/* POST users listing. */
//登錄
router.post('/login', function(req, res, next) {
    var md5 = crypto.createHash('md5');
  var password = md5.update(req.body.password).digest('base64');

    handler(req, res, "user", {name: req.body.username},function(data){
        if(data.length===0){
            res.end('{"err":"抱歉，系統中並無該用戶，如有需要，請向管理員申請"}');
        }else if(data[0].password !== password){
            res.end('{"err":"密碼不正確"}');
        }else if(data.length!==0&&data[0].password===password){
            
            req.session.username = req.body.username; //存session
            req.session.password = password;
            
            res.end('{"success":"true"}');
        }
        
    });
    
});

//退出
router.post('/logout', function(req, res, next) {
    
    req.session.username = ""; //清除session中的用戶信息
    req.session.password = "";
    res.end('{"success":"true"}');
});


//管理員列表
router.post('/AdminList', function(req, res, next) {
    //console.log(req.body);
    req.route.path = "/page"; //修改path來設定 對 數據庫的操作
    var page = req.body.page || 1;
    var rows = req.body.rows || 5;
    handler(req, res, "user", [{},{limit: rows, skip:(page-1)*rows}] ,function(data,count){
        var obj = {
          data:data,
          total:count,
          success:"成功"
        };
        var str = JSON.stringify(obj);
        res.end(str);
    });
});


//添加管理員
router.post('/add', function(req, res, next) {
    //console.log(req.body);
    var md5 = crypto.createHash('md5');
    req.body.password = md5.update(req.body.password).digest('base64');
    handler(req, res, "user", req.body,function(data){
        
        //console.log(data);
        if(data.length==0){
            res.end('{"err":"抱歉，添加失敗"}');
        }else{
            res.end('{"success":"添加成功"}');
        }
    });
});


//刪除用戶
router.post('/delete', function(req, res, next) {
    
    handler(req, res, "user", {"_id" : ObjectId(req.body._id)},function(data){
        
        console.log(data);
        if(data.length==0){
            res.end('{"err":"抱歉，刪除失敗"}');
        }else{
            var obj = {
              success:"刪除成功"
            };
            var str = JSON.stringify(obj);
            res.end(str);
        }
        
    });
});


//編輯更新用戶
router.post('/update', function(req, res, next) {
    //console.log(req.body);
    
    var selectors = [
        {"_id":ObjectId(req.body._id)},
        {"$set":{
                name:req.body.name, //用戶名稱
                phone:req.body.phone //聯系電話
            }
        }
    ];
    handler(req, res, "user", selectors,function(data){
        
        //console.log(data);
        if(data.length==0){
            res.end('{"err":"抱歉，修改失敗"}');
        }else{
            res.end('{"success":"修改成功"}');
        }
        
    });
    
});



module.exports = router;

 

這里我們用的分頁查詢page方法，在原來的 dbhander.js中沒有，所以需要修改 dbhandler.js，修改后的如下，（添加的方法在63行 和  123行）

var mongo=require("mongodb");
var MongoClient = mongo.MongoClient;
var assert = require('assert');
var url = require('url');
var host="localhost";
var port="27017";
var Urls = 'mongodb://localhost:27017/classweb';
// classweb  ===> 自動創建一個


//add一條數據 
var add = function(db,collections,selector,fn){
  var collection = db.collection(collections);
  collection.insertMany([selector],function(err,result){
    try{
        assert.equal(err,null)
        }catch(e){
      console.log(e);
      result = [];
    };
    
    fn(result);
    db.close();
  });
}
//delete
var deletes = function(db,collections,selector,fn){
  var collection = db.collection(collections);
  collection.deleteOne(selector,function(err,result){
    try{
        assert.equal(err,null);
        assert.notStrictEqual(0,result.result.n);
        }catch(e){
      console.log(e);
      result.result = "";
    };
    
    fn( result.result ? [result.result] : []); //如果沒報錯且返回數據不是0，那么表示操作成功。
    db.close;
  });
};
//find
var find = function(db,collections,selector,fn){
  //collections="hashtable";
  var collection = db.collection(collections);
  
    collection.find(selector).toArray(function(err,result){
      //console.log(docs);
      try{
        assert.equal(err,null);
      }catch(e){
        console.log(e);
        result = [];
      }
      
      fn(result);
      db.close();
    });

}

//page
var page = function(db,collections,selector,fn){
  
  var collection = db.collection(collections);
  var count = 0;
  collection.count({},function(err1,count1){
      try{
        assert.equal(err1,null);
      }catch(e){
        console.log(e);
      }
      count = count1;
  });
    collection.find(selector[0],selector[1]).toArray(function(err,result){
      try{
        assert.equal(err,null);
      }catch(e){
        console.log(e);
        result = [];
      }
      
      fn(result,count); //回掉函數可接收兩個參數，查詢的數據 和 總數據條數
      db.close();
    });
    

}

//update
var updates = function(db,collections,selector,fn){
  var collection = db.collection(collections);
  
  collection.updateOne(selector[0],selector[1],function(err,result){
      try{
        assert.equal(err,null);
        assert.notStrictEqual(0,result.result.n);
        }catch(e){
      console.log(e);
      result.result = "";
    };
    
    fn( result.result ? [result.result] : []); //如果沒報錯且返回數據不是0，那么表示操作成功。
    db.close();
  });

}
var methodType = {
    // 項目所需
  login:find,
  //   type ---> 不放在服務器上面
  //  放入到服務器
  //  請求---> 根據傳入進來的請求 數據庫操作
  //  req.query    req.body
  show:find, //后台部分
  add:add,
  update:updates,
  delete:deletes,
  updatePwd:updates,
  //portal部分
  showCourse:find,
  register:add,
  page:page //分頁
};
//主邏輯    服務器  ， 請求    --》 
// req.route.path ==》 防止前端的請求 直接操作你的數據庫
module.exports = function(req,res,collections,selector,fn){
  MongoClient.connect(Urls, function(err, db) {
    assert.equal(null, err);
    console.log("Connected correctly to server");
    // 根據 請求的地址來確定是什么操作  （為了安全，避免前端直接通過請求url操作數據庫）
    methodType[req.route.path.substr(1)](db,collections,selector,fn);
    
    db.close();
  });

};

 

然后重啟node端服務，可以看到人員增刪改查功能已經實現，原來的admin顯示出來了，你也可以進行添加，修改，刪除

 

由於mongodb其實不太穩定，所以我們操作過程中，可能會出錯停止，如果出現下面報錯，就表示Mongodb數據庫停了

 報錯

只需要 重啟 mongodb  並重啟 node端  即可

 

等以后上線那一章，我們再講如何在服務器上讓 mongodb和node穩定運行，現階段運行出錯我們都手動重啟。

 

到這里，我們發現，貌似不登陸也能請求列表數據呀，這不科學，所以，我們需要對所有的請求進行攔截，只有當登錄了，才能請求數據

我們在vue端的 app.js中加入攔截代碼，在session設置的后面添加吧，位置和代碼如下

這里我們看到，只有當session中有username的時候，才表示已經登錄的（大家還記得嗎，這個我們在登錄的時候有設置session.username，就是用來這里作判斷的），判斷中，如果不是登錄/登出/已登錄三種狀態，就直接返回 redirect:true，來告訴瀏覽器端，需要重定位到登錄頁面

// 驗證用戶登錄
app.use(function(req, res, next){

    //后台請求
    if(req.session.username){ //表示已經登錄后台
        next();
    }else if( req.url.indexOf("login") >=0 || req.url.indexOf("logout") >= 0){
        //登入，登出不需要登錄
        next();
    }else{
        //next(); //TODO:這里是調試的時候打開的，以后需要刪掉
        res.end('{"redirect":"true"}');
        
    };
    
});

 

然后我們來在vue的main.js中 作redirect跳轉，還有當后台返回err的處理，代碼和位置如下

這里在axios中作響應前攔截，就是所有的響應到達$req.post的then(){}之前執行的代碼，具體的axios配置項大家可以查查axios官網

// 添加響應攔截器
axios.interceptors.response.use(function (response) {
    // 對響應數據做點什么
    if(response.data.err){
        alert(response.data.err);
        return Promise.reject(response);
    }else if(response.data.redirect){
        alert("請先登錄..");
        window.location.href = "#/"; //跳轉到登錄頁
        return Promise.reject(response);
    }else{
        //返回response繼續執行后面的操作
        return response;
    }
  }, function (error) {
    // 對響應錯誤做點什么
    return Promise.reject(error);
  });

 

 重啟node端，然后訪問列表數據，就會提示登錄並跳轉了，如果已登錄，就不會提示這個

 

 

 

好啦，今天就講到這里。下一篇將講解 學員列表，課程列表（暫時可能停更項目一段時間，基本的框架和操作都已經實現了，如果看到這里能弄懂的后面的功能應該都能自己寫出來了）

 

關注公眾號，博客更新即可收到推送