本项目是一个移动端的仿王者荣耀手机端官网和后台管理系统（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) }) 复制代码 四、移动端网站使用SASS (SCSS)进行base样式预定义（网站常用色彩、字体和边距定义 (colors, font,margin,padding)；
页面整体框架使用flex布局，新增媒体查询；
轮播图使用的是vue-awesome-swiper插件；
项目中一部分图标是扣取官方精灵图片 (sprite)，剩余部分使用字体图标 (阿里巴巴iconfont)；