第1章 首页：需求分析

1-1 章导读（教学内容、目标、建议）image.png

image.png｜ image.png

image.png

image.png第2章 首页：数据库设计image.png

image.png | image.png

1-2 功能拆解&原型设计说明

第2章 首页：数据库设计

2-1 数据库-业务功能分析

2-2 数据库设计-用户信息

项目文档

2-3 数据库设计-发贴、签到、友链

第3章 首页：接口定义&组件拆分

3-1 接口设计&组件拆分

image.png image.png

image.png image.png

3-2 首页接口定义-文章列表

3-3 首页接口定义-侧栏接口定义

第4章 首页样式开发

4-1 git仓库初始

4-2 vue-cli升级到v4版本

  1. vue upgrade #升级vue-cli

4-4 初始响应式原理

layui

4-7 完成首页静态页面结构

组件写name方便调试打印日志可追踪

4-8 优化温馨通道样式

第5章 首页筛选交互及接口开发

5-1 首页交互及接口分析&最终效果展示

5-3 首页Panel部分路由交互

  1. linkActiveClass: 'layui-this' // 了解linkActiveClass

5-4 前台首页接口开发

qs

  1. import qs from 'qs' // 用户请求接口可能出现不同参数的情况
  2. export getList(options){
  3.     return axios.get(`/public/list?${qs.stringify(options)}`
  4. }

5-5 首页列表筛选部分交互逻辑

5-6 拆分首页ListItem组件1

5-6 拆分首页ListItem组件2

第6章 首页长列表内容配合Mock数据开发

6-1 长列表加载注意的三个基本面

测试api
Mock数据监听端口：

  1. node net.js http://www.toimc.com:10040/mock/5d0666bebaa920000bb519b1 http://localhost:8081

6-2 axios拦截器取消用户重复请求

6-3 首页列表监听筛选数据

6-4 首页路由监听加载分类数据

6-5 首页侧边栏：温馨通道、友链接口开发

第7章 首页后端开发

7-1 后台项目初始化：项目依赖升级

  1. "rules": {
  2.     "no-console    ": process.env.NODE_ENV === 'production' ? 'error' : 'off',
  3.   "no-debugger": process.env.NODE_ENV === 'production' ? 'error' : 'off'
  4. }
  5. // production模式禁止出现console、debuggerß

仓库地址：toimc-api （git -reset hard查看历史版本)

7-2 ESLint规则扩展：使用Standard规则

7-3 定义文章接口的Model（学习Pre、Statics方法）

mongoose文档

7-4 （插播技巧）效率开发-vscode编辑进阶

7-5 后台文章接口测试&联合查询介绍

7-7 升级Dayjs库（用法与Moment一致）

7-8 完善用户信息Model（与Post进行联合查询）

7-10 首页请示真实接口数据，前后端项目联调

7-11 首页侧栏（温馨提醒、本周热议）接口联调

第8章 周总结

8-1 周总结

image.pngimage.png