03-我的博客筆記-後臺管理系統加載用戶列表

前面已經實現了登陸和註冊功能，那如今先作後臺管理這部分，這部分作好了之後再作前臺的展現。

後臺管理系統（blogadmin）登陸和展現用戶列表的實現

1. 登陸：後臺的登陸功能作的就簡單些，只要用戶名是123，密碼123均可以登陸。咱們新建一個admin路由，實現的demo以下：

// 登陸
router.post('/login', function (req, res, next) {
    var userName = req.body.userName
    var password = req.body.passWord

    if (userName === '123' && password === '123') {
        responseData.success = true
        responseData.message = '登陸成功'
        responseData.data = {
            userName: '123',
        }
        responseData.data.token = jwt.sign({data: {_id:'123456789',username:'123'},exp: Math.floor(Date.now() / 1000) + (60 * 60 * 12)}, 'jwt-secret')
        res.json(responseData)
        return
    } else {
        responseData.success = false
        responseData.message = '您還不是管理員'
        res.json(responseData)
    }
});

2.展現用戶列表的功能：展現全部用戶、展現近一週用戶、搜索、建立、分頁

// 獲取用戶列表（類型：all全部用戶，week近一週的用戶)
router.post('/user/userList', (req, res, next) => {

    let page = parseInt(req.query.page)
    let limit = parseInt(req.query.pageSize)
    let queryType = req.body.type
    let skip = limit*page
    let orderkey = req.query.orderkey  // 排序的字段
    let sequence = req.query.sequence  // true 順序， false倒序
    let searchKey = req.query.searchKey

    var sort = {}  // 升序
    sort[orderkey] = 1
    if (sequence === 'false') {
        // 根據日期將數據庫倒序排列,最新註冊的排列在最前
        sort[orderkey] = -1
    }
    if (queryType === 'all') {  // 所有用戶

        let totalCount = 0
        let search = {}
        if (searchKey.length > 0) {
            search = {userName: searchKey}
        }

        User.find(search).count().then((count) => {
            totalCount = count

            User.find(search).sort(sort).limit(limit).skip(skip).then((users) => {
                responseData.success = true
                responseData.message = ''
                responseData.data = users
                responseData.total = totalCount
                responseData.totalPage = totalCount%limit === 0 ? parseInt(totalCount/limit):parseInt(totalCount/limit)+1
                res.json(responseData)

            }).catch((err) => {
                responseData.success = false
                responseData.message = err.message
                responseData.total = 0
                responseData.totalPage = 0
                res.json(responseData)
            })
        })

    }
    if (queryType === 'week') {  // 近一週
        let oldDay = moment().add(-7, 'days').calendar()

        let totalCount = 0
        let search = {}
        let conditions = {creatDate: {$gte: new Date(oldDay)}}
        if (searchKey.length > 0) {
            search = {userName: searchKey}
            conditions = {
                $and: [
                    {creatDate: {$gte: new Date(oldDay)}},
                    search
                ]
            }
        }

        User.find(conditions).count().then((count) => {
            totalCount = count
            User.find(conditions).sort(sort).limit(limit).skip(skip).then((users) => {
                responseData.success = true
                responseData.message = ''
                responseData.data = users
                responseData.total = totalCount
                responseData.totalPage = totalCount%limit === 0 ? parseInt(totalCount/limit):parseInt(totalCount/limit)+1
                res.json(responseData)

            }).catch((err) => {
                responseData.success = false
                responseData.message = err.message
                responseData.total = 0
                responseData.totalPage = 0
                res.json(responseData)
            })
        })
    }
})

3.關於blogadmin的佈局部分可參考具體的demo。效果展現

項目上傳  github 每次提交都是一個分支

線上地址