摘自 Bilibili 全栈之巅 视频教程 原作者 github 链接
- 项目介绍
- 工具安装和环境搭建(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云存储存放上传文件
- 截取王者荣耀官网中的新闻标题:
$$('.news_list .title').map(el => el.innerHTML)
- 截取英雄列表:
JSON.stringify($$('.hero-nav > li').map((li, i) => {
return {
name: li.innerText,
heroes: $$('li', $$('.hero-list')[i]).map(el => {
return {
name: $$('h3',el)[0].innerHTML,
avatar:$$('img',el)[0].src
}
})
}
}))