- 本项目仅做本人练手和学习使用,非官方App,不用于商业目的。
- Vue+Node+mongodb英雄联盟项目断断续续经过两个月完成,是一个移动端的仿王者荣耀手机端官网和后台管理系统的英雄联盟移动端项目。
- 管理后台部分使用的技术栈为Node.js+Express框架+ElementUI框架+Mongodb数据库。
- 移动端网站部分使用技术栈Vue.js+SASS等
- 移动端官网:http://www.k-vuelol.top/
- 后台管理系统:http://www.k-vuelol.top/admin (测试账号:)
- 工具安装和环境搭建(nodejs,npm,mongodb),并做好相关配置
- star本项目 并克隆项目到本地
- 分别在admin,web,server文件夹下安装依赖
npm install
- 分别在admin,web,server(须确保数据库已连接)文件夹下启动
npm run serve
- 分别在admin和web目录下运行上面的命令,打包后的静态文件分别存放于server目录下的admin和web文件夹下
npm run build
- server(服务端,后台管理界面/web端的接口)
- admin(后台管理界面)
- web(移动端网站界面)
- 使用SASS (SCSS)进行base样式预定义(网站常用色彩、字体和边距定义 (colors, font,margin,padding);
- 页面整体框架使用flex布局
- 首页顶部轮播图使用的是‘vue swiper’插件
- 项目中一部分图标是扣取官方精灵图片 (sprite),剩余部分使用字体图标 (阿里巴巴iconfont)
- 考虑到组件复用性,将首页卡片组件(Card)列表卡片组件 (List-Card)、进行了封装,可以用于其他页面外的所有布局,方便快捷
- 基于Element UI的后台管理基础界面搭建
- 后台管理系统主要有以下功能: - 英雄管理 - 物品管理 - 文章管理 - 广告管理 - 管理员账号管理 (bcrypt散列加密) - 本地图片上传 (multer) - 客户端路由限制 (beforeEach, meta) - 上传文件的登录校验 (el-upload, headers) - 登录模块使用接口 (jwt,jsonwebtoken)进行服务端登录校验 - 文章管理(其中编辑器使用的是富文本编辑器 (vue2-editor))