耗时一周，我做了一个仿 “掘金” 微服务编程学习网站！

周三不Coding

于 2023-07-21 13:30:19 发布

阅读量225

点赞数

文章标签：微服务分布式 springboot springcloud 个人开发 react.js 后端

本文链接：https://blog.csdn.net/m0_51321469/article/details/131849849

版权

前言

大家好，我是「周三不Coding」。

今天给大家介绍一下我两个多月前做的一个微服务容器化项目 —— Kill Bug 编程学习 & 问答 & 接单网站！界面参照 “掘金” 设计而成～

开发这个项目大概耗费了大概一周左右的时间，基本功能已经开发完毕啦，现在分享给大家～

项目仓库地址：https://github.com/ltyzzzxxx/killbug

接下来，我会从如下几个维度为大家介绍项目！

项目展示
项目初衷
项目需求分析
项目技术栈
项目架构

项目展示

Kill Bug 项目的核心内容、界面样式、设计风格都是参照 “掘金” 进行设计，所以大家看起来会很熟悉哈哈哈哈～

界面首页如下图所示：

首页顶部是固定导航栏，用于选择「首页」、「问题页」、「悬赏页」。

具体什么是「悬赏」，留到「项目初衷」部分与大家详细分享

顶部右侧为「发布按钮」与「用户头像」
页面主体左侧为分类（标签）选择栏
页面主体中间为 Feed 流
页面主体右侧为广告位

当点击「发布按钮」后，会跳转到对应的编辑页面，如下图所示：

顶部有两个按钮，用于选择「问题」或「悬赏」。根据类型不同，对应显示的内容也不同
编辑器采用 Markdown 格式，左侧为原始 Markdown 文本，右侧为预览文本

具体编辑的是什么内容，也留到「项目初衷」部分与大家详细分享

当点击「用户头像」后，可以跳转到对应的「个人中心」界面，如下图所示：

界面包含了「个人信息」、「个人成就」、「个人余额」、「个人问题或悬赏列表」
用户可以在此界面充值帐户余额

当点击任一问题或悬赏时，可以跳转到对应的详情页面，如下图所示：

界面中间为主体内容部分，包含标题、用户基础信息、标签、Markdown 内容等
界面左侧为点赞、评论按钮，点击评论按钮会下滑到底部评论区
界面左侧为个人信息、Markdown 目录

底部评论区暂不展示，大家感兴趣可以到项目仓库查看详情～

当点击 Message 按钮时，也就是向该用户发送消息，可以进入到对应的聊天页面，如下图所示：

界面顶部为聊天选择框，用于选择聊天类型，一种为普通聊天，另一种为悬赏一对一私聊
界面主体左侧为聊天人列表，中间为聊天内容，左侧为「协同编辑」框

感兴趣的小伙伴请接着往下读，开始介绍项目的核心内容啦～

项目初衷

专业问答平台的短缺

在日常开发的过程中，我发现自己经常需要去 Stack Overflow 中寻找一些解决方案，原因是国内很难找到一个专业的问答平台，大部分的问题解决方案都是在一些博客网站如 CSDN、博客园或掘金的文章中，质量参差不齐，而且很多是转载翻译自 Stack Overflow。

为什么我们不能做一款国产的 Stack Overflow 呢？营造一种「我为人人，人人为我」的问答氛围，戾气少一些，大家互帮互助，共同解决问题。

如果国内有这样一个平台，我相信各大编程网站上的劣质文章、转载文章、灌水文章一定会少很多！

相信大家很多人都恨透了 CSDN 满天飞的广告和毫无营养的文章内容 🤣

这就是我想做 Kill Bug 项目的最大原因，尽管目前还只是 Toy Project 阶段，但我想大家可不可以齐心协力一同共建一个平台呢？

按需编程指导服务的需求

国内现在编程培训机构众多，B 站等各大网站上也有数不清的教学资源，这也意味着我们现在入门编程非常容易。

但是，有没有可能入门容易，但是自学还是会浪费很多没必要浪费的时间呢？

我觉得编程小白在入门的时候，很容易走弯路、踩坑。我当时转码自学编程时，就踩了很多坑。

其中最让我印象深刻的是，有一次我将 pom.xml 中 packaging 标签写成了 pom 而不是 jar，导致当时一直报错，始终找不到问题所在。最后，我花了 50 元子，在某宝找人帮我解决了。

大家先别忙着笑话我，当时我还没有学习 Maven、Spring 等，只学了 Java，直接上手 SpringBoot，并且没有视频教程，纯摸索 😭

在初学编程时，踩坑是经常发生的事。通过踩坑，我们可以加深印象。但是有些坑，却很影响我们学习编程的热情和进度。

尤其是热情，当时那个 Bug 差点让我崩溃，我现在还清晰记得自己熬到凌晨三点多还没有解决那个 Bug 时的精神状态

于是，我就想有没有这样一个平台，为广大程序员提供一对一服务，也就是「悬赏接单」功能。由平台作为担保交易人，发单的人提出需求，接单的人解决需求。这里的需求更偏向于短期需求，用于解决编程 Bug，这也就是项目名字由来 —— Kill Bug。

基于上述两个初衷，我便有了做这个项目的最初动力！

顺便解释一下，大家可以看到项目是英文页面，其实是因为这是我几个月前的国外课程项目～（原来这才是最大动力 🤡）

项目需求分析

带大家了解完「项目初衷」后，我们接着进入「需求设计」篇章！

在这一部分，我主要从用户需求出发，构造三个用户故事～

作为一个程序员，我经常遇到 Bug，但各大编程网站质量参差不齐，我想要一个能够快速解决我问题的中文编程问答网站，类似于 StackOverFlow。
作为一个编程小白，我的自学能力还凑合，没有到需要报班的程度。但是我经常踩坑，并且身边没有认识的大佬帮我，因此浪费了大量的时间。我需要找到一个大佬能够在我需要时帮助我一对一解决问题，有偿也 ok！
作为一个乐于帮助别人的开发者，我有时不是不想帮，可是问题需求太模糊，没有任何细节，实在无能为力。我需要问题的详细信息！

从这三个用户故事，我们可以将需求划分为两大模块：「问题模块」&「悬赏模块」

对于问题模块而言，用户的核心需求为：发布问题、回答问题、对回答内容质量进行评分
- 更细节的需求为：用户在发布问题时，需要遵守问题规范，尽可能完善补充问题的细节。
对于悬赏模块而言，用户的核心需求为：发布悬赏、接单人资质认证、接单、一对一私聊
- 更细节的需求为
  - 在发布悬赏时，需要给出详细的细节，并指定悬赏金额（控制最小值和最大值）
  - 接单人需要在平台进行认证，确保能力符合要求
  - 接单时，发布方和接单方需要做双向选择，以便在正式开始解决问题时达成初步的一致，避免后续分歧
  - 接单后，双方进入平台提供的一对一私聊界面，并协同编辑，提高效率。‘
    
    将一对一聊天放到平台，也可保障双方的权益，防止私下联系被骗

项目技术栈

具体如何启动项目，请参考项目 README 文档～

前端技术栈

本人前端菜坤🐔，而且写的时候比较急，请大家看的时候忍一下，后续会逐渐完善前端～

Technology	Feature
React	基本 Web 框架
Next.js	SSR 框架
Ant Design	UI 组件库
Mobx	全局状态管理库
Axios	HTTP 请求库
Router	路由组件
Mock	HTTP 请求 mock
Quill Editor	富文本编辑器
Socket	即时通信 / 协同编辑
Js-Cookie	Cookie 管理工具

后端技术栈

后端主要采用 SpringCloud 微服务架构，并结合 Docker 实现容器编排与快速部署。

如果大家对于后端实现方案感兴趣的话，可以看看项目源码，我后续也会根据具体的功能，分享一些实现方案～

Technology	Feature
Spring Boot	后端主体框架
Spring Cloud	微服务框架
Sentinel	流量控制组件
Dubbo	分布式 RPC 框架
MySQL	表数据存储
Redis	缓存数据库
Sa-Token	轻量级登录鉴权框架
Mybatis	ORM 框架
Redisson	封装 Redis 操作
Websocket	通信技术
Hutool	Java 工具库
Alibaba Cloud OSS	对象存储

项目架构

software architecture

前端向后端发送请求，请求抵达 Gateway 网关。网关主要负责请求断言、请求转发、负载均衡、流量控制以及安全防控等，除此之外，网关还需要进行相应的授权与鉴权。
请求经过网关转发到各个微服务模块，各个微服务之间可能存在互相调用，通过 RPC 框架 Dubbo 实现远程调用。
注册中心主要用于服务发现与服务注册
数据层主要采用 MySQL 与 Redis

对于 Kafka 和 ElasticSearch，分别用于异步消息与搜索服务，会在后续版本逐步引入完善～