# node-vue-moba

**Repository Path**: zoneaurora/node-vue-moba

## Basic Information

- **Project Name**: node-vue-moba
- **Description**: 学习express和vue
- **Primary Language**: NodeJS
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2020-04-06
- **Last Updated**: 2023-04-12

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

### (一) 介绍

本项目是一个仿王者荣耀移动端和一个后台管理系统的全栈开源项目, 基于 vue + ElementUI + node(Express) + mongodb 实现, 前端使用的技术有 Vue + Vue-Router + Axios + SASS, 后端数据使用 Express + mongoose 搭建

### (二) 环境部署

环境配置:需在系统上安装 nodejs + npm + mongodb

### (三) 项目启动

#### 1.克隆项目到本地

```
git clone git@gitee.com:zoneaurora/node-vue-moba.git
```

#### 2.安装项目依赖

分别进入项目的 `admin` `server` `web` 目录, 各执行下述命令一次

```
npm install
```

#### 3.项目启动

进入项目的 `server` 目录, 执行下述命令, `server` 会监听 `server` 下的 `admin` `web` 页面

```
npm run serve
```

若需要调试页面,请分别进入 `admin` `web` , 各执行下述命令一次, 以动态监听修改页面

```
npm run serve
```

完成修改后, 在 `admin` `web` 下, 执行下述命令编译页面到 `server` 目录

```
npm run build
```

### (四) 后台功能

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

1. 分类管理（无限级数）
2. 装备管理
3. 英雄管理
4. 文章管理（其中编辑器使用的是富文本编辑器 (vue2-editor)）
5. 广告管理
6. 管理员账号管理 (bcrypt)
7. 本地图片上传 (multer)
8. 列表分页功能及模糊查询
9. 登录模块使用接口 (jwt,jsonwebtoken)进行服务端登录校验
10. 客户端路由限制 (beforeEach, meta)
11. 上传文件的登录校验 (el-upload, headers)

### (五) 移动端网站

1. 使用 SASS (SCSS)进行 base 样式预定义（网站常用色彩、字体和边距定义 (colors, font,margin,padding)；
2. 页面整体框架使用 flex 布局
3. 首页顶部轮播图使用的是‘vue swiper’插件
4. 项目中图标大都使用字体图标 (阿里巴巴 iconfont)
5. 为了组件复用性，实现了通用列表卡片组件 (list-card)

#### 总体实现了一下功能:

1. 首页主体布局, 滚动广告图等
2. 新闻详细页, 展示文章详情等
3. 英雄详情页, 展示英雄数据等

### 免责声明

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

[MIT](https://gitee.com/zoneaurora/node-vue-moba/blob/master/LICENSE)

Copyright© 2020 zone