仿知乎专栏的软件系统设计方案


1. 项目介绍

仿知乎专栏主要包括了编写和查看两大模块。编写模块中,用户可以新增文章,更新文章。查看模块包含查看列表,查看文章,添加评论,赞同以及分享功能,下面是仿知乎专栏的软件系统设计。

2. 软件结构

2.1 B/S架构

本系统采取浏览器请求,服务器响应的工作模式。在 B/S 模式中,用户是通过浏览器针对许多分布于网络上的服务器进行请求访问的,浏览器的请求通过服务器进行处理,并将处理结果以及相应的信息返回给浏览器,其他的数据加工、请求全部都是由Web Server完成的。

此外,本系统采用前后端完全分离模式,前端和后端分别作为独立项目上线,互不干扰,前端与后端系统通过接口调用来获取数据。

2.2 MVC

本系统采用MVC的软件结构:MVC模式(Model–view–controller)是软件工程中的一种软件架构模式,把软件系统分为三个基本部分:模型(Model)、视图(View)和控制器(Controller)。其中M层处理数据,业务逻辑等;V层处理界面的显示结果;C层起到桥梁的作用,来控制V层和M层通信以此来达到分离视图显示和业务逻辑层。

3. 接口实现

接口描述 地址 请求方式 参数 响应
用户注册 user/register post 用户名,密码,邮箱,手机号 注册成功/失败
用户登录 user/login post 用户名,密码 登录成功/失败,token
用户注销 user/logout get 登出成功/失败
文章列表 article/list get 文章ids(可选),作者id(可选),页数,每页个数 文章id,标题,简介,发布时间,作者id
文章内容 article/detail get 文章id 文章id,标题,内容,发布时间,作者id
新增/编辑文章 article/save post 文章id,标题,内容 保存成功/失败
新增评论 comment/add post 评论id,文章id,回复评论id,评论内容 评论成功/失败
删除评论 comment/delete post 评论id 删除成功/失败
评论列表 comment/list get 文章id,页数,每页个数 评论人id,评论内容

上述接口中除了注册和登录接口外,默认带参数token,方便后端从token中解析当前登录的用户信息

4. 分解视图

5. 依赖视图

6. 执行视图

时序图:以用户新增文章为例

7. 实现视图

代码根据功能不同分在不同的包中

  • constant: 存放编程过程中涉及到的各种常量,枚举类等
  • controller:负责处理由DispatcherServlet分发的请求,它把用户请求的数据经过业务处理层Service处理之后封装成一个Model,然后再把该Model返回给对应的View进行(由于采用前后端分离的模式,view被独立成一个前端项目单独上线)
  • dao:数据访问层,用于对数据库的访问
  • exception:用于自定义异常类
  • model:保存开发过程中涉及到的各类数据模型,如PO(持久化对象,用于建立与数据库表一致的结构,一个PO对象可视为表中的一条记录),VO(view object 表现层对象,用于定义接口的数据返回格式,格式是跨进程的),BO(business object 业务对象,用于业务层之间的数据传递)
  • service: 实现业务处理,负责组装dao层的操作
  • util: 存放开发过程中使用到的各种工具类
  • resources: 负责保存配置文件和其他一些静态文件
  • test: 存放单元测试代码
  • target: 存放编译结果

8. 部署视图

如图用户请求通过客户端先发送到nginx服务器,经过负载均衡后再通过zuul网关进行鉴权,流量过大时,还可以限制一部分流量继续访问后端服务。当然我们的应用也是集群部署在docker上的,所以这里需要用到nacos配置中心,以便让所有的应用实例都具有相同的配置,并且配置易更改。并且应用依赖的redis缓存服务,mysql持久化服务,以及kafka消息队列服务也是需要集群部署的,这样应用才能满足高并发需求。

9. 工作分配视图

本系统分为前端子系统和后端子系统两个部分

9.1 后端子系统分配视图

9.2 前端子系统分配视图

10. 数据库设计

10.1 User表

列名 类型 长度 非空 唯一 注释
id bigint 20 用户ID
name varchar 20 用户名
passwd varchar 40 用户密码
email varchar 50 电子邮件地址
create_time date 创建时间
update_time date 修改时间

10.2 Article表

列名 类型 长度 非空 唯一 注释
id bigint 20 文章ID
title varchar 40 文章标题
body text 文章正文
create_time date 创建时间

10.3 OperateArticle表

列名 类型 长度 非空 唯一 注释
id bigint 20 关联表中记录的标识
userId bigint 20 用户Id
articleId bigint 20 文章ID
is_pub int 2 文章是否已经发布,0:未发布,1:已发布
is_delete int 2 文章是否被删除
create_time date 创建时间
update_time date 修改时间

10.4 Comment 表

列名 类型 长度 非空 唯一 注释
id bigint 20 评论Id
content text 评论内容
create_time date 创建时间

10.5 OperateComment表

列名 类型 长度 非空 唯一 注释
id bigint 20 用户与评论的关联Id
comment_id bigint 20 评论id
last_comment_id bigint 20 该条评论关联的上一条评论
article_id bigint 20 该评论对应的文章id
user_id bigint 20 该评论对应的用户
create_time date 创建时间
update_time date 修改时间

11. 运行环境及技术选型

开发语言:

  • 后端:Java
  • 前端:TypeScript

开发框架:

  • 后端:SpringBoot
  • 前端:Vue

IDE:

  • 后端:Intellij IDEA
  • 前端:Visual Studio Code

组件:

  • 后端: spring(控制反转和面向切面的编程框架),springMVC(构建 Web 应用程序的全功能 MVC 模块),Mybatis(持久层框架), redis(用于文章缓存),kafka(写入日志流),nacos(作为应用集群的配置中心),mysql(用于数据持久化存储),nginx(反向代理,负载均衡), zuul(用于鉴权和限流)
  • 前端:vue-cli(配置脚手架),vue-router(定义路由转发), bootstrap(定义页面所需小图标)

运行环境:

  • 操作系统:CentOS 7
  • 容器: K8s, docker

12. 概念原型核心工作机制

  • 注册: 用户输入账号,密码,邮箱信息,点击注册
  • 登录: 用户输入账号,密码,登录成功后跳转回首页
  • 保存草稿:用户在编辑一部分文章之后,可以先保存为草稿。当用户想再次编辑文章时,可以将文章恢复到上一次保存的状态
  • 发布文章:用户编辑好文章后,可以发布文章,这样所有用户便能看到发布后的文章,没有发布的文章处在草稿状态
  • 更新文章:用户发布文章后,如果需要对文章进行修改,包括修改标题和正文,则可继续进入编辑页面进行修改,并点击更新按钮对文章进行更新
  • 预览文章:用户可以在编辑之后,点击预览按钮,查看发布后的效果
  • 查看专栏作者列表:用户可以看到已经发布过文章的专栏作者列表,可以从中选中感兴趣的作者
  • 查看文章列表:用户可以在选中某位作者后,查看该作者已发布的文章列表
  • 查看文章:用户可以在文章列表中点击某一篇文章,进入该文章的展示页面,进行浏览
  • 评论文章:用户可以在查看文章页面的下方添加评论,同时也可以回复别的用户的评论

13. 总结

通过对仿知乎专栏的一系列分析过程,我学习并实操了软件工程中的一些很有用的建模方法,知道了在实现一个项目时,要使用各种图例来让整个项目的结构清晰明了,这样才能让我按部就班地执行下去。实际上,这些分析方法是非常有用的,不仅避免后期浪费时间去重构,而且对我以后的工作也产生了巨大帮助。我始终认为做程序员不能只是安分于做一个开发小模块的螺丝钉,而是要纵览全局,从整体上对系统进行把握。由此,学好软件工程变得尤为重要。

原文地址:https://www.cnblogs.com/--CYH--/p/14200496.html