第1章 发贴功能之自定义编辑器开发

1-1 node版本升级至12.14.0

1-2 发贴页面需求分析

1-3 完成发贴页面样式&自定义select交互 d s

1-4 使用mixin混入优化图片验证码功能

1-6 自定义表情&transition过渡、父子通信

assets里有css/img/js文件夹
js文件夹内有face.js

  1. import Face from './Face' // 这里的Face可以是vue或js

transition
v-leave、v-leave-to:是最终态
v-enter-active:中间态

1-8 编辑器图片上传功能

1-9 编辑器添加链接功能(作业:自行完成引用、代码块插入样式)

1-10 优化编辑器组件间事件传递

1-11 指定光标位置插入自定义内容格式

  1. methods: {
  2. // 计算光标的当前位置
  3. getPos() {
  4. let cursorPos = 0
  5. let elem = document.getElementById('edit')
  6. if (elem.selectionStart || elem.selectionStart === 0) {
  7. cursorPos = elem.selectionStart
  8. }
  9. }
  10. }

1-12 完成编辑器预览之表情、链接、引用处理

1-13 完成代码块&预览功能,调试自定义编辑器

([\/?pre(.+?)[^]]])|[[^]]]

1-15 发贴请求表单检验

1-16 发贴内容使用localStorage本地缓存

1-17 发贴后端接口开发&前后端联调

1-18 dayjs使用扩展插件(国际化、取时间差)

第2章 帖子详情页面开发—需求、样式与自定义组件

2-1 帖子详情页面需求分析

2-2 帖子详情数据库及接口定义

2-3 完成帖子详情样式

2-4 自定义分页组件

2-5 分页组件添加统计页数&分页限制选项

2-6 分页组件逻辑分析&lodash进阶使用

2-7 控制按钮样式与列表index绑定

2-8 完成分页组件&调试页面点击事件

2-9 文章详情&评论列表接口定义

2-10 文章详情前端页面调试

第3章 帖子详情页面开发—评论点赞、回复

3-1 Mock数据调试前端评论列表样式

3-2 文章详情后台接口开发&前后端调试

3-3 评论列表接口开发

3-4 新增评论接口开发

3-5 新增richtext自定义指令&完善翻页组件(小作业)

3-7 评论编辑交互开发&自定义滚动

3-8 评论编辑接口开发

3-9 评论采纳功能开发

3-10 评论点赞前后端联调

3-11 评论点赞&回复特定的用户

第4章 帖子详情页面开发—发贴编辑、收藏

4-1 阅读记数&评论记数功能

4-2 开发编辑帖子功能

4-3 文章详情&评论点赞联调(完成发贴业务)

4-4 设置收藏&取消收藏功能开发

第5章 个人中心之发帖、收藏、获取信息与联调

5-1 个人中心-发贴记录功能开发

5-2 个人中心-收藏帖子列表

5-3 个人中心-获取用户的基本信息

5-4 完成用户中心&页面联调