好几个月没有更新博客了，最近一直在学习开发相关的知识，现在来做一篇项目简介。
目录
一、项目简介
按照下面的项目顺序来进行开发，可以循序渐进的掌握开发流程和技术架构，更有利于小白进行开发技术总结和归纳。
1、Web 端个人博客
（1）体验网址
（2）截图
2、微信小程序
（1）体验二维码：
（2）截图
3、Online Judge（在线刷题网站）
（1）体验网址
（2）截图
二、项目技术栈
这里的技术栈专门针对希望从事后端开发的小伙伴，我们作为个人开发者，磨时间的地方并不是在后端，大多数时候反而是写前端。
因此，未来工作希望从事后端开发的小伙伴就不要浪费时间剖析前端的底层了，直接用上前端框架是更为便捷、高效的。
因此，项目的前后端是分离的，这一点尤为重要。
1、前端
结论：前端主要依靠 Vue、React 等框架，以及各类组件库（Element、ant design vue、vant）等完成。
（1）Web 端个人博客
Web 端个人博客主要作为一个前端的入门项目。
- 小白首先了解 HTML、CSS、JavaScript，只需要知道他们怎么写即可，不需要深入学习。
- 接着学习 Vue3 框架，这是一个 JS 框架，可以让我们写前端效率更高。其他与后端相关的东西（比如前后端通信的 axios），在学习 Vue 的时候都能学到。
（2）微信小程序
微信小程序属于移动端开发。
移动端开发包含 APP、小程序，区别在于他们依托的环境不同。APP 依托于 Android 或者 IOS，小程序依托微信、支付宝等APP。
因此对小白来说的主要问题就是，有没有新学习几门移动端框架的需求。因此，这里有 2 种选择：
- 需要开发 Android 的 APP，就学习 Android Studio。需要开发微信小程序，就学习微信开发者工具。开发支付宝、抖音等等小程序同理。
- 不管开发哪种，都选择 Uniapp，Uniapp 基于 Vue 实现，只需要新学习 Uniapp 的 API 即可实现多端开发。
秉承着能少学就少学的原则，我这里选择了 Uniapp 开发微信小程序。
（3）Online Judge（在线刷题网站）
这个项目的前端，相比于前面的个人博客，代码量肯定是大了很多的。
个人博客仅是为了熟悉前端的 Vue、React 等框架。而 OJ 项目的前端目标，还需要我们能够做到移动端浏览器适配、页面通信、UI 美化等等。
2、后端
后端也需要一个循序渐进的过程。这里以使用 Java 的 SpringBoot 为例。
当然你也可以不使用 Java，像 Go、NodeJS、Python 对于小白来说都是不错的后端开发语言，都有很好用的框架。
（1）Web 端个人博客
Web 端个人博客，我们可以使用 SpringBoot 做一个单体架构，前端的请求只会被发送到一个端口进行处理。项目架构大致如下：
这个项目的后端技术栈大致为：SpringBoot、MyBatis。
（2）微信小程序
我的微信小程序的主要功能，是一个打牌记分的小程序，多名用户可以加入同一个房间，然后相互转移积分，最后可以结算积分。
相比于 Web 端个人博客，主要特点是，引入了 WebSocket 这种通信方式，使得房间内的用户感知数据实时性更强。
同样的，我们在刚才 Web 端个人博客的基础上，添加处理 WebSocket 的功能即可。
（3）Online Judge（在线刷题网站）
到了这一个项目，我们就要进行一次大升级了。
这次我们可以把后端做成微服务模式。所谓微服务，就是将原本集中在一个单体架构中的多种功能做区分，然后进行拆分，分成多个更小的服务。对于团队开发，有利于划分工作；对于个体开发，有利于理清思路。当然这只是微服务最基本的好处。
项目架构大致如下：
后端技术栈大致为：SpringBoot、MyBatis-Plus、Redis、Nacos、Canal、RabbitMQ。
三、项目难点
1、Web 端个人博客
它的难点主要在于前端：
- 如何渲染 Markdown、如何编辑 Markdown
- 关于 Vue 的使用，比如 store、router 等等
2、微信小程序
它的难点主要在于后端：
- WebSocket 连接如何建立
- WebSocket 数据如何发送
3、Online Judge（在线刷题网站）
这个项目涉及到的东西还是挺多的，最难的几个地方是：
- 数据缓存一致性
- 判题机判题
（1）数据缓存一致性的解决方案
- 使用 Canal 监听主库的 binlog 变化，然后由 MQ 发送消息去删除缓存。
（2）判题机判题的解决方案（2 种）
- 后端向判题机发送提交：每提交一道题，就通过 MQ 发送一个消息（包含源代码等信息）给判题鸡，由判题鸡返回判题结果。
- 判题机向后端查询提交：每隔几秒钟，判题机就主动向后端询问，是否有未处理的提交，如果有就拿来处理。
扫一扫
8048
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
