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）组件，几乎能够用于除详情页外的全部布局，方便快捷