Vue+ Node全棧開發仿王者榮耀手機端官網/後臺管理「更新」

阿新 • • 發佈：2021-01-09

本專案為仿做專案,僅做自己練手和學習使用,非官方App,禁止用於一切商業目的,產生的一切侵權著作法律後果,與本作者無關。

簡介

本專案是一個移動端的仿王者榮耀手機端官網和後臺管理系統（pc端）的全棧開源專案，基於 vue + node (Express + ElementUI) +mongodb實現。部署在阿里雲伺服器，本專案使用了最新的Vue全家桶技術棧，後臺資料通過node+mongodb搭建。

本次更新主要有以下三點：

客戶端加入better-scroll和media媒體查詢，提升體驗；
後臺管理新增vue-table-with-tree-grid樹形表格美化分類管理；
nginx開啟gzip提高載入速度

原始碼地址：vue-wzry

體驗地址： 客戶端 後臺管理

ps：資料庫json檔案已上傳至根目錄下的server\dump資料夾中，克隆本專案後，將dump資料夾複製到你自己MongoDB\bin目錄下，執行以下命令匯入資料庫。

mongorestore -d node-vue-moba -directoryperdb dump\irectoryperdb
複製程式碼

後臺管理系統的使用者名稱可用：

使用者名稱	密碼	許可權	備註
admin	******	1	擁有所有許可權
test	123456	2	只有可讀許可權

如需admin賬戶的密碼，請加微信：T120315

一、環境準備

工具安裝和環境搭建(nodejs,npm,mongodb),並做好相關配置。

二、專案啟動

1、star本專案並克隆專案到本地

git clone [email protected]:JakeZhangZJK/vue--node-mongodb-wzry.git
複製程式碼

2、進入專案目錄

cd vue-node-mongodb-wzry
複製程式碼

3、安裝依賴

分別在admin，web，server資料夾下安裝依賴

npm/cnpm install
複製程式碼

4、啟動服務

（1）admin（後臺管理系統）

npm run serve
複製程式碼

（2）web 移動端

npm run serve
複製程式碼

（3）server 服務端(須確保資料庫已連線)

npm run serve
複製程式碼

（4）構建生產環境

npm run build
複製程式碼

分別在admin和web目錄下執行上面的命令，打包後的靜態檔案分別存放於server目錄下的admin和web資料夾下，

三、管理後臺

基於Element UI的後臺管理基礎介面搭建

後臺管理系統主要有以下功能：

分類管理（無限級數），新增vue-table-with-tree-grid美化管理分類
裝備管理
英雄管理
文章管理（其中編輯器使用的是富文字編輯器 (vue2-editor)）
廣告管理
管理員賬號管理 (bcrypt雜湊加密)
本地圖片上傳 (multer)和視訊上傳
列表分頁功能及模糊查詢
登入模組使用介面 (jwt,jsonwebtoken)進行服務端登入校驗
客戶端路由限制 (beforeEach, meta)
簡單的許可權（新增）
上傳檔案的登入校驗 (el-upload, headers)

ps：所有增刪改查均使用通用 CRUD 介面；通過中介軟體匹配前端傳過來路由進行相應的增刪改查

路由匹配中介軟體

module.exports = () => { 
    return async (req, res, next) => { // 模型匹配中介軟體  // “resource”為動態引數，用來匹配相應資源
        const modelName = require('inflection').classify(req.params.resource) // 請求動態資源  這裡需要安裝一個inflection依賴包，用於類名轉換
        req.Model = require(`../models/${modelName}`)
        next()
      }
}
複製程式碼

// 引入資源匹配中介軟體
  const resourceMiddleWare = require('../../middleware/resource.js')
 // 通用新增介面
  router.post('/', async (req, res) => {
    const model = await req.Model.create(req.body)
    res.send(model)
  })
  // 通用修改介面
  router.put('/:id', async (req, res) => {
    const model = await req.Model.findByIdAndUpdate(req.params.id, req.body)
    res.send(model)
  })
  // 通用刪除介面
  router.delete('/:id', async (req, res) => {
    await req.Model.findByIdAndDelete(req.params.id)
    res.send({
      success: true
    })
  })
  // 通用獲取列表介面
  router.get('/', async (req, res) => {
    const queryOptions = {}
    let pageNum = req.query.pageNum;
    let pageSize = req.query.pageSize;
    let count = await req.Model.find().count() // 總條數
    let items = ''
    let obj = ''
    // 為了通用性，這裡不單獨寫Category的介面，因為Category要特殊獲取上級分類，
    // 所以這裡將它設定為動態引數傳進去，以後類似的特殊請求都可以這樣處理
    if (req.Model.modelName === 'Category' || req.Model.modelName === 'Model') {
      queryOptions.populate = 'parent'
    }
    if (pageNum) {
      items = await req.Model.find()
        .setOptions(queryOptions)
        .skip(parseInt(pageSize) * parseInt(pageNum - 1))
        .limit(parseInt(pageSize));
      obj = {
        count,
        items
      }
    } else {
      obj = await req.Model.find().setOptions(queryOptions).limit(count)
    }
    res.send(obj)
  })
  // 通用獲取一條資料介面
  router.get('/:id', async (req, res) => {
    const model = await req.Model.findById(req.params.id)
    res.send(model)
  })

複製程式碼