阅读 11940

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

免责声明

本项目为仿做项目,仅做自己练手和学习使用,非官方App,禁止用于一切商业目的,产生的一切侵权著作法律后果,与本作者无关。
复制代码

简介

本项目是一个移动端的仿王者荣耀手机端官网和后台管理系统(pc端)的全栈开源项目,基于 vue + node (Express + ElementUI) +mongodb实现。部署在阿里云服务器,本项目使用了最新的Vue全家桶技术栈,后台数据通过node+mongodb搭建。

本次更新主要有以下三点:

  • 客户端加入better-scrollmedia媒体查询,提升体验;
  • 后台管理新增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账户的密码,请加微信:856321zjk 主要是怕乱改东西

一、 环境准备

  1. 工具安装和环境搭建(nodejs,npm,mongodb),并做好相关配置。

二、 项目启动

1、star本项目 并克隆项目到本地

git clone git@github.com:JakeZhangZJK/vue--node-mongodb-wzry.git
复制代码

2、进入项目目录

cd vue-node-mongodb-wzry
复制代码

3、安装依赖

分别在adminwebserver文件夹下安装依赖

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文件夹下,

三、 管理后台

  1. 基于Element UI的后台管理基础界面搭建

后台管理系统主要有以下功能:

  1. 分类管理(无限级数),新增vue-table-with-tree-grid美化管理分类
  2. 装备管理
  3. 英雄管理
  4. 文章管理(其中编辑器使用的是富文本编辑器 (vue2-editor))
  5. 广告管理
  6. 管理员账号管理 (bcrypt散列加密)
  7. 本地图片上传 (multer)和视频上传
  8. 列表分页功能及模糊查询
  9. 登录模块使用接口 (jwt,jsonwebtoken)进行服务端登录校验
  10. 客户端路由限制 (beforeEach, meta)
  11. 简单的权限(新增)
  12. 上传文件的登录校验 (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)
  })

复制代码

四、移动端网站

  1. 使用SASS (SCSS)进行base样式预定义(网站常用色彩、字体和边距定义 (colors, font,margin,padding);
  2. 页面整体框架使用flex布局,新增媒体查询;
  3. 轮播图使用的是vue-awesome-swiper插件;
  4. 项目中一部分图标是扣取官方精灵图片 (sprite),剩余部分使用字体图标 (阿里巴巴iconfont);
  5. 实现通用列表卡片组件card,几乎可以用于除详情页外的所有tab展示,有良好的的复用性及拓展性,方便快捷。

总体实现了三大模块:

首页

  1. 首页新闻资讯及详情页展示
  2. 首页英雄列表及详情页展示
  3. 首页图文攻略列表及详情页展示
  4. 首页精彩视频列表及视频播放

攻略中心

  1. 攻略中心(英雄攻略、精品栏目、赛事精品、精彩视频和图文攻略5个小模块)及详情页展示和视频播放

赛事中心

  1. 赛事列表及详情页图文展示

五、页面GIF和部分截图

后台管理

web端

源码地址:github.com/JakeZhangZJ…

记得star哦~😁

免责声明

本项目为仿做项目,仅做练手和学习使用,非官方App,禁止用于商业目的,产生的一切侵权著作法律后果,与本作者无关。

文章分类
前端
文章标签