Vue+ Node+mongodb全棧開發王者榮耀手機端官網和管理後臺

時間 2020-05-29

標籤 vue node+mongodb node mongodb 開發榮耀手機管理後臺欄目 MongoDB 简体版

原文原文鏈接

簡介

vue--node-mongodb-wzry是一個移動端的仿王者榮耀手機端官網和後臺管理系統的全棧開源項目，基於 vue + node (Express + ElementUI) +mongodb實現。本項目使用了最新的Vue全家桶技術棧，後臺數據經過node+mongodb搭建。前端

源碼地址：github.com/JakeZhangZJ…vue

學習地址：B站-全棧之巔node

ps：如需數據庫文件，可留言git

1、環境準備

工具安裝和環境搭建(nodejs,npm,mongodb)

2、項目啓動

一、star本倉庫並克隆項目到本地

git clone git@github.com:JakeZhangZJK/vue--node-mongodb-wzry.git
複製代碼

二、進入項目目錄

cd vue-node-mongodb-wzry
複製代碼

三、安裝依賴

npm install
複製代碼

四、啓動服務

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

npm run serve
複製代碼

（2）web 移動端

npm run serve
複製代碼

（3）server 服務端

npm run serve
複製代碼

（4）構建生產環境

npm run build
複製代碼

分別在admin和web目錄下運行上面的命令，打包後的靜態文件分別存放於server目錄下的admin和web文件夾下，github

3、管理後臺

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

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

分類管理（無限級數）
裝備管理
英雄管理
文章管理（其中編輯器使用的是富文本編輯器 (vue2-editor)）
視頻攻略管理
廣告管理
管理員帳號管理 (bcrypt)
本地圖片上傳 (multer)和視頻上傳
列表分頁功能及模糊查詢
登陸模塊使用接口 (jwt,jsonwebtoken)進行服務端登陸校驗
客戶端路由限制 (beforeEach, meta)
上傳文件的登陸校驗 (el-upload, headers)

ps：全部增刪改查均使用通用 CRUD 接口；經過中間件匹配前端傳過來路由進行相應的增刪改查web

路由匹配中間件mongodb

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)
  })

複製代碼

4、移動端網站

使用SASS (SCSS)進行base樣式預約義（網站經常使用色彩、字體和邊距定義 (colors, font,margin,padding)；
頁面總體框架使用flex佈局
首頁頂部輪播圖使用的是‘vue swiper’插件
項目中一部分圖標是扣取官方精靈圖片 (sprite)，剩餘部分使用字體圖標 (阿里巴巴iconfont)
考慮到組件複用性，實現了通用列表卡片組件 (list-card, swiper)、英雄攻略列表組件（guide-list-card）和賽事中心列表（mt-card）組件，幾乎能夠用於除詳情頁外的全部佈局，方便快捷