Node.js + Vue.js 全栈开发王者荣耀手机端官网和管理后台
前言
最近在跟着Johnny的全栈之巅系列视频教程学习使用NodeJS+Express+Element-UI+MongoDB等开发王者荣耀，服务端server，移动端web，admin，学到了不少东西。总体来说，他讲的视频思路蛮清晰的，跟着做基本上都能快速上手。
Element-UI，网站快速成型工具,一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库 Element-UI中文官网地址
Express是基于 Node.js 平台，快速、开放、极简的 Web 开发框架，Express 是一个保持最小规模的灵活的 Node.js Web 应用程序开发框架，为 Web 和移动应用程序提供一组强大的功能。其中文官网地址是：http://www.expressjs.com.cn
Node.js (Express.js) + Vue.js (Element UI) 全栈开发王者荣耀手机端官网和管理后台，目前的Github项目地址是：https://github.com/topfullstack/node-vue-moba
全栈之巅TopFullStack
全栈之巅官方账号
下面的内容转载自Johnny老师的关于该项目的Github的README.md文件，感兴趣的小伙伴可以跟着B站上的视频相关视频学些一下，可以结合Github上面源代码参考学习，不过有一点就是B站上的视频的代码没有Github上面新。
【全栈之巅】Node.js + Vue.js 全栈开发王者荣耀手机端官网和管理后台
本项目是 Bilibili 全栈之巅 视频教程相关源码
https://github.com/wxs77577/node-vue-moba
持续更新中… 敬请关注
一、 入门
- 项目介绍
- 工具安装和环境搭建(nodejs,npm,mongodb)
- 初始化项目
二、 管理后台
-
基于Element UI的后台管理基础界面搭建
-
创建分类
-
分类列表
-
修改分类
-
删除分类
-
子分类
-
通用 CRUD 接口
-
装备管理
-
图片上传 (multer)
-
英雄管理
-
编辑英雄 (关联,多选,el-select, multiple)
-
技能编辑
-
文章管理
-
富文本编辑器 (quill)
-
首页广告管理
-
管理员账号管理 (bcrypt)
-
登录页面
-
登录接口 (jwt,jsonwebtoken)
-
服务端登录校验
-
客户端路由限制 (beforeEach, meta)
-
上传文件的登录校验 (el-upload, headers)
三、移动端网站
- "工具样式"概念和 SASS (SCSS)
- 样式重置
- 网站色彩和字体定义 (colors, text)
- 通用flex布局样式定义 (flex)
- 常用边距定义 (margin, padding)
- 主页框架和顶部菜单
- 首页顶部轮播图片 (vue swiper)
- 使用精灵图片 (sprite)
- 使用字体图标 (iconfont)
- 卡片组件 (card)
- 列表卡片组件 (list-card, nav, swiper)
- 首页新闻资讯-数据录入(+后台bug修复)
- 首页新闻资讯-数据接口
- 首页新闻资讯-界面展示
- 首页英雄列表-提取官网数据
- 首页英雄列表-录入数据
- 首页英雄列表-界面展示
- 新闻详情页
- 新闻详情页-完善
- 英雄详情页-1-前端准备
- 英雄详情页-2-后台编辑
- 英雄详情页-3-前端顶部
- 英雄详情页-4-完善
四、发布和部署 (阿里云)
- 生产环境编译
- 购买域名和服务器
- 域名解析
- Nginx 安装和配置
- MongoDB数据库的安装和配置
- git 安装、配置ssh-key
- Node.js 安装、配置淘宝镜像
- 拉取代码，安装pm2并启动项目
- 配置 Nginx 的反向代理
- 迁移本地数据到服务器 (mongodump)
五、进阶
- 使用免费SSL证书启用HTTPS安全连接
- 使用阿里云OSS云存储存放上传文件
相关B站视频
1、NodeJs+VueJs全栈开发王者荣耀官网(Express+ElementUI)
- [第一章 + 第二章] NodeJs + VueJs (Express + ElementUI) 全栈开发王者荣耀手机端官网和管理后台
- [第三章]NodeJs + VueJs (Express + ElementUI) 全栈开发王者荣耀手机端官网和管理后台 - 第三章
- [第四章]NodeJs+VueJs全栈开发王者荣耀官网(Express+ElementUI)
- [第五章]NodeJs+VueJs全栈开发王者荣耀官网(Express+ElementUI)