Vue+ Node全栈开发仿王者荣耀手机端官网/后台管理「更新」

本项目为仿做项目,仅做自己练手和学习使用,非官方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 git@github.com: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)
  })

复制代码