【《基于Spring Boot的文章浏览发布系统的设计与实现》16000字（论文）】

[4]。我们所熟知的淘宝、天猫、飞猪等产品都是采用Weex框架来开发的。Weex框架支持热部署式动态开发，即在开发过程中，可以动态替换页面，来保证系统的实时更新，同时，Weex支持一次开发，三端使用，可以同时支持安卓、iOS、web三个平台的运行，并且保证了页面的响应速度快速的特点。2.2.5Element-UI框架技术Element-UI框架是饿了么开发的基于Vue2.0的组件库，为各类研发人员提供了丰富的功能组件，简化开发者在开发过程中对于每一个组件都需要自己编写模板、样式等过程，极大缩短了开发周期，提高了开发效率。2.3本章小结本课题系统采用SpringBoot框架设计并构建后端服务框架，使用Vue+Weex框架进行前台页面的设计与实现，使用MySQL数据库存储系统各类数据，使用Redis进行用户登录等相关状态的存储，用于保证之后用户正常使用相关功能。需求分析3.1可行性分析3.1.1实用性分析目前，如今日头条、趣头条等可以给人们带来各种信息的软件层出不穷，且拥有完整的开发体系，但现在使用该类系统的人群还处于一小部分，而且基本上所有的此类软件都有广告过多、界面复杂、响应速度慢等缺点，所以一些用户对此的体验不是很好，所以导致用户不去使用这些信息软件。本课题系统使用Vue+Weex来设计和实现用户交互页面，使用组件化开发的方式，避免用户本地缓存数据量过大，提高界面的反应速度，同时，界面设计简单，降低用户的操作难度，大大增强用户的体验感。之后，各类电子产品普及后，用户将会越来越多，人们对于信息的需求度将会达到极高的地步，以此来看，系统的实用性强。3.1.2技术可行性分析能否通过现有技术实现课题系统至关重要。在课题系统的实现过程中，无论是SpringBoot框架、MySQL数据库数据存储技术、Vue等相关技术，在现代社会互联网的发展中随处可见，拥有一整套稳定成熟的体系。SpringBoot框架能够为各类系统提供服务框架搭建，且仅仅需要配置方式就可以集成大部分的技术，同时Vue组件化开发屡见不鲜，遇到一些问题都可以在网上寻找解决方案，以此来看，在技术上支持系统的开发。3.1.3经济可行性分析在课题系统的实现过程中，开发所需的各种开发软件、技术都无需自己提供资金的支出，在课题开发完成后，可以将系统打包放置于本地服务器上，并为外部提供访问地址即可。此外，系统的受众用户宽广，可以通过扫描二维码的方式互相推广即可，不需要使用广告、宣传页等需要大量资金的方式推广，因此，系统开发成本低廉，横纵向扩展性较强。3.2性能分析3.2.1速度需求在此类软件的开发与使用时，对于用户的体验性有着非常高的要求，如何确保用户在使用时有一个高速度运行状态，是此类系统的关键。速度高，性能好，用户的体验性会增强，但是于此同时，可能在后期开发过程中需要高成本，所以需要综合考虑。3.2.2内存需求文章发布浏览系统要求具有数据获取高效率的特点。在使用过程中，系统中的各类数据文件都放置在服务器数据库中，但会在本地缓存用户登录状态，在进行文章查看时，会实时查询文章信息，不会产生多余的数据缓存。本系统在使用结束退出系统之后，会对此次操作的数据缓存进行清空，时刻保证用户手机上不会有过多的残留数据信息，保证系统不出现卡顿现象。3.3系统用例分析3.3.1普通用户用例分析用户登录模块用例分析:用户进入登录页面后，输入个人系统账号和密码，前端界面首先进行校验，校验账号密码是否不为空，然后使用Vue中的axios方式将数据提交给后端服务接口，后端服务获取信息后访问数据库，在数据库中进行数据匹配，匹配成功，页面跳转入系统首页，否则，返回错误信息；若登录时发现数据库中没有该账号的存在，则提示用户先进行注册，用户填写正确的账号密码后，注册页面将通过axios方式将数据封装后发送给服务接口，系统首先对数据库中的数据进行账号查询，如果存在已有账号数据，提示用户当前账号已存在，否则，将数据保存到用户信息表中，系统跳转到首页。个人中心用例分析:用户在个人中心界面可点击头像框，然后选择一张图片，前端将图片封装成base64格式的图片数据，以axios方式发送给服务接口，后端服务将base64格式的图片进行解析后，通过文件数据输出流的方式，将图片保存到用户文件夹下，并将保存地址存入数据库中，最后前端将新头像显示；用户点击个人资料，系统是由路由方式进入个人资料信息界面，然后修改个人资料，前端使用axios方式将数据发送给服务接口，服务接口更新数据库中的用户数据，最后将执行结果返回给前台。文章用例分析:用户浏览文章过程中，可以点击文章页面中的收藏按钮，前端会将当前文章和用户数据使用axios方式发送给服务接口，服务会将数据存入收藏关注表中；用户可以在文章下方输入框输入内容，然后点击留言或回复按钮，前端使用axios方式将相关数据封装后发送给服务接口，服务会将数据保存入留言回复表中，然后进行界面回显；用户可以点击文章界面的举报图标，通过界面路由跳转到举报详情页面，用户输入举报内容后，点击举报按钮，前端使用axios方式将数据封装后发送给后端服务接口，服务会将数据保存到举报表中，然后给出提示信息；用户在搜索框中输入关键词后，点击搜索，前端使用axios方式将数据发送给服务接口，服务接口会使用关键词对文章数据表进行模糊搜索，然后将获取到的数据封装成集合数据返回，前端将获取的数据进行回显。普通用户用例图如图3-1所示。图3-1普通用户用例图3.3.2自媒体人用例分析登录模块用例分析:自媒体用户进入登录界面后，输入个人系统账号和密码，前端界面首先进行校验，校验账号密码是否不为空，然后使用Vue中的axios方式将数据提交给后端服务接口，后端服务获取信息后访问数据库，在数据库中进行数据匹配，匹配成功，页面跳转入系统首页，否则，返回错误信息；若登录时发现数据库中没有该账号的存在，则提示用户先进行注册，用户填写正确的账号密码后，注册页面将通过axios方式将数据封装后发送给服务接口，系统首先对数据库中的数据进行账号查询，如果存在已有账号数据，提示用户当前账号已存在，否则，将数据保存到用户信息表中，系统跳转到首页。粉丝信息管理用例分析:用户成功进入系统后，可以点击粉丝管理导航栏，页面路由到粉丝管理界面，后端服务会查询该自媒体的所有粉丝信息并返回给前端，前端将信息通过表格显示，自媒体用户可以查看自己所有的粉丝信息;自媒体用户可以点击界面的搜索框，输入粉丝的名字，前端将信息使用axios方式传递给后端接口服务，后端服务查询数据库，然后将查询结果返回给前端，前端将粉丝数据进行回显。个人中心用例分析:用户在个人中心界面可点击头像框，然后选择一张图片，前端将图片封装成base64格式的图片数据，以axios方式发送给服务接口，后端服务将base64格式的图片进行解析后，通过文件数据输出流的方式，将图片保存到用户文件夹下，并将保存地址存入数据库中，最后前端将新头像显示；用户点击个人资料，系统是由路由方式进入个人资料信息界面，然后修改个人资料，前端使用axios方式将数据发送给服务接口，服务接口更新数据库中的用户数据，最后将执行结果返回给前台。文章管理用例分析:自媒体用户进入文章列表界面时，后端服务接口会查询数据库，查询当前自媒体人员发布的各类文章数据，然后将数据返回给前端，前端通过表格方式对文章进行回显;自媒体用户可以进入发布文章界面，输入文章的相关内容，然后点击提交，前端使用Vue中的axios方式，将数据打包发送给后端服务接口，后端服务接口将数据保存入数据库中，等待管理员的审核，然后根据管理员的审核结果决定文章最后是否可以发布;用户可以点击修改文章按钮，然后对此前自己提交的文章将进行修改，在修改之后，前端使用axios方式将数据打包发送给后端服务接口，后端服务接收到数据后，根据传递的文章数据id进行数据库数据更新，然后给前端返回信息;自媒体用户可以点击页面中的搜索栏，输入文章题目然后点击搜索，后端服务接口获取数据之后，会在数据库中根据条件进行查询，然后返回查询结果，前端根据结果进行呈现。自媒体用户用例图如3-2所示。图3-2自媒体用户用例图3.3.3管理员用例分析登录模块用例分析:用户进入登录界面后，输入个人系统账号和密码，前端界面首先进行校验，校验账号密码是否不为空，然后使用Vue中的axios方式将数据提交给后端服务接口，后端服务获取信息后访问数据库，在数据库中进行数据匹配，匹配成功，页面跳转入系统首页，否则，返回错误信息。用户信息管理用例分析:用户登录进入系统之后，可以进入用户管理界面，后端服务会查询系统中所有用户信息并返回给前端，前端将信息通过表格显示，用户可以查看所有的用户信息;用户可以点击界面的搜索框，输入用户的名字，前端将信息使用axios方式传递给后端接口服务，后端服务查询数据库，然后将查询结果返回给前端，前端将用户信息进行回显。个人中心用例分析:用户点击个人资料，进入个人资料信息界面，然后修改个人资料，前端使用axios方式将数据发送给服务接口，服务根据信息将数据库中适配的数据进行更新，最后将执行结果返回给前台。文章管理用户分析:用户登录系统后，进入文章管理界面，后端服务接口会将系统中所有的文章信息根据发布时间进行降序排列，然后一起打包发送给前端，前端使用列表进行显示;用户进入审核文章页面，后端服务接口将所有带审核发布的文章一起返回，前端呈现之后，用户对文章可以进行在线观看，然后根据文章内容进行审核操作，接着，前端将审核的操作信息发送给后端服务，后端服务根据信息对数据库中的文章数据进行操作;用户可以在搜索栏中输入文章关键词，然后点击搜索，服务接口获取数据之后，会在数据库中根据条件进行查询，然后返回查询结果，前端根据结果进行呈现。管理员用户用例图如3-3所示。图3-3管理员用例图3.5本章小结本章分别从可行性、系统性能方面对系统进行分析，然后阐述了系统中各类用户功能进行用例分析，确保系统开发在经济、技术方面可行的同时，系统各角色功能的完善性。系统设计4.1概要设计4.1.1系统架构图普通用户端主要用于用户使用，自媒体端主要用于自媒体人员进行操作使用，管理员端主要用于管理员的使用，三个端共同使用一个数据库进行数据管理。本系统架构图如4-1所示。图4-1系统架构图4.1.2功能模块概要设计文章浏览发布系统由三个子段组成，用户端包含个人信息管理模块、关注收藏模块、登录注册模块等模块，自媒体端包含了文章管理模块、登录注册模块、粉丝管理模块等模块，管理端包含了文章管理模块、登录模块、用户管理模块等模块。系统功能模块如图4-2所示。图4-2系统功能模块图4.1.3功能模块概述（1） 登录注册模块用户进入系统后，在登陆界面输入自己的手机号和密码，点击登录，如果数据库中没有匹配的数据项，则提示用户进行注册，否则，进入系统首页。用户如果没有账号，可以在注册页面，输入个人手机号和密码后，点击注册，数据库成功保存数据后，前端页面进入系统首页。（2） 个人信息管理模块用户登录进入系统之后，点击个人中心，可以点击头像，然后选择一张图片上传成为新头像，用户点击个人资料，页面跳转到用户详细信息界面，然后输入个人的新信息，然后点击修改按钮，系统将数据进行全局更新。（3） 收藏关注模块用户在浏览文章的过程中，可以点击界面中的收藏和关注按钮，页面将文章的数据、文章作者的数据和当前用户的数据一同保存到收藏关注表中，然后用户在个人中心可以点击个人关注和个人收藏栏目，可以查看自己收藏的文章和关注作者的信息。（4） 留言回复模块用户在浏览文章的过程中，可以在下方留言评论区输入留言内容，然后点击留言按钮，系统将留言内容和当前用户的数据保存到留言回复表中，然后用户可以点击某一条留言旁边的回复按钮，然后输入回复内容，点击回复，系统将回复内容和用户数据保存到数据库中，并进行页面回显。（5） 搜索模块普通用户、自媒体人员、管理员可以对系统中的资源进行搜索，在输入框输入关键词后，系统进行数据库模糊搜索，然后系统将数据返回并进入搜索结果页面，用户可查看搜索结果内容。（6） 举报模块普通用户在浏览文章的时候，如果出现一些含有敏感信息的文章或者触犯法律的文章时，用户可以通过点击右上方的举报图标，页面路由进入举报页面，输入举报内容并选择举报类型后，点击举报按钮，系统将数据保存到举报信息表中。（7） 文章管理模块自媒体人员可以对文章进行新增、修改、删除、查询等操作，管理员可以对文章进行删除、查询、审核等操作。（8） 粉丝管理模块自媒体人员登录系统之后，点击粉丝栏目，然后系统显示当前用户的粉丝列表和已取关粉丝的数据列表，自媒体用户可以看到用户的一些信息。（9） 用户管理模块管理员登录进入系统后，点击用户管理，系统将各类用户数据进行页面显示，管理员可以通过点击操作栏中的删除、增加、修改按钮，对用户进行相关操作，然后系统将数据保存到数据库表中4.2系统详细设计4.2.1登录注册模块用户在首次进行系统操作时，若无系统账号，则需要进入注册页面使用自己的手机号进行注册，系统会判断数据库中是否有已存在的手机号码，若存在，则给出用户相应的提示信息，再次注册，如果不存在该账号，则进入系统首页。如图4-3登录注册模块流程图所示。图4-3登录注册模块流程图4.2.2个人信息管理模块用户成功进入系统后，在个人中心页面可查看个人资料，然后用户可以对自己的部分信息进行修改，然后提交，同步数据到数据库中。如图4-4个人信息管理模块流程图所示。图4-4个人信息管理模块流程图4.2.3收藏关注模块用户在使用系统进行文章浏览时，如果喜欢文章或者作者，可以点击界面中的关注按钮，关注该作者，点击收藏，可以收藏当前文章。如图4-5收藏关注模块流程图所示。图4-5收藏关注模块流程图4.2.4留言回复模块用户在使用系统进行文章浏览时，用户在下方留言区可以查看当前文章的留言列表，用户自己可以点击留言，输入自己的留言内容，当其他用户查看时，也可以对该留言进行回复操作。如图4-6留言回复模块流程图所示。图4-6留言回复模块流程图4.2.5搜索模块搜索功能是每个系统中必备的功能，用户可使用搜索功能来查找自己想要获取的系统资源，系统会根据不同的页面去数据库不同表中进行模糊查询，并将搜索记录存入公共数据库中，最后系统将搜索结果在界面进行显示。如图4-7关键词搜索模块流程图所示。图4-7关键词搜索模块流程图4.2.6举报模块举报模块功能的设计是为了维护在系统使用过程中，用户拥有一个和谐美好的使用环境，防止触犯法律、危害用户的信息存在。用户在使用过程中，如果存在不和谐的文章存在，用户可以点击举报图标，通过页面路由方式进入举报界面，在填入举报信息之后，点击举报，系统将数据保存到举报表中，完成举报操作。如图4-8用户举报模块流程图所示。图4-8用户举报模块流程图4.2.7文章管理模块文章管理模块是自媒体人员和管理员的权限功能。自媒体人的文章管理模块功能主要是文章发布功能，管理员的文章管理模块功能主要是审核文章功能。发布文章功能是自媒体人员的核心功能之一，自媒体人员在系统中编写自己的文章后，可以选择文章是否可见，然后向管理员进行提交审核，带审核通过之后，普通用户就可以进行查看了。如图4-9文章发布流程图所示。图4-9文章发布流程图文章审核模块功能是管理员的重要功能之一，管理员可以在登录系统之后，可以查看所有待审核和被举报的文章列表，在查看完文章之后，管理员对当前文章进行判定，判定是否违规之后，再进行删除或者恢复文章操作。如下4-10文章审核流程图所示。图4-10文章审核流程图4.2.8粉丝管理模块粉丝管理模块可以让自媒体用户查看自己的粉丝数量等信息，自媒体用户登录系统之后，后端服务查询数据库，根据用户当前的关注状态返回不同的用户数据集合，然后前端使用Element-UI中的表格组件，将当前粉丝数据和取消关注粉丝数据进行页面显示。如下4-11粉丝管理流程图所示。图4-11粉丝管理流程图4.2.9用户管理模块用户管理模块是管理员管理整个系统所有用户的功能之一。管理员登录系统之后，后端服务查询数据库，根据角色不同返回不同的用户数据集合，然后前端使用Element-UI中的表格组件，将不同用户的数据进行显示。如下4-12用户管理流程图所示。图4-12用户管理流程图4.3数据库设计4.3.1概念模型设计概念模型是连通现实世界和机器世界的桥梁，常常采用E-R图的方式来进行宏观显示。在数据概念模型中，相比于系统详细的实现来说，系统中数据的流向和状态是核心之所在。如图4-13系统全局E-R图所示。图4-13系统全局E-R图4.3.2实体属性设计用户实体主要保存了在整个系统运行过程中，各类用户的相关信息，用户实体中主要包括用户id、用户名、用户号码等属性。用户实体-属性图如下4-14所示。图4-14用户实体-属性图搜索记录实体主要存储用户搜索内容的数据，搜索记录实体中主要包括用户id、搜索内容、搜索内容状态、搜索时间等属性。搜索记录实体属性如下4-15所示。图4-15搜索记录实体-属性图举报类型实体主要存储举报类型信息，举报类型实体主要包括主键id、举报类型、创建时间、当前状态属性。举报类型实体属性如下4-16所示。4-16举报类型实体-属性图举报信息实体保存系统用户对文章的举报信息，举报信息实体包含了举报类型id、举报内容、被举报人id、举报对象类型、等属性。举报信息实体属性如下4-17所示。4-17举报信息实体-属性图收藏关注实体主要用于存储用户对文章的收藏、对用户关注的信息。收藏关注实体包括了用户id、收藏文章id等属性。收藏关注实体属性如下4-18所示。4-18收藏关注实体-属性图评论回复实体存储了用户对文章的评论以及回复的数据。评论回复实体包括了文章id、文章作者id、评论人id、创建时间、评论内容等属性。评论回复实体属性如下4-19所示。4-19评论回复实体-属性图文章审核实体主要用于存储管理员对自媒体用户提交的文章进行处理的信息。文章审核实体主要包括主键id、文章id、文章作者id、作者名、文章名称、处理类型、处理时间、处理状态属性。文章审核实体属性如下4-20所示。4-20文章审核实体-属性图文章标签实体用于保存文章标签类型的数据。文章标签实体包括了主键id、标签名、创建时间、当前状态属性。文章标签实体属性如下4-21所示。4-21文章标签实体-属性图文章信息实体主要存储了自媒体用户发布的文章信息。文章信息实体主要包括主键id、用户id、用户名、收藏数、关注数量、文章频道id、文章id、文章类型、文章状态、发布时间、文章题目、文章阅读量属性。文章信息实体属性如下4-22所示。4-22文章信息实体-属性图文章内容实体存储了文章的主要内容信息。文章内容实体主要包括主键id、文章id、文章内容、文章图片属性。文章内容实体属性如下4-23所示。4-23文章内容实体-属性图4.3.3概念模型设计用户基本信息表user。用户信息表主要保存了在整个系统运行过程中，各类用户的相关信息，用户信息表中主要包括用户id、用户名、用户号码等属性。如表4-1所示用户信息表所含的十个属性。表4-1用户信息表字段名数据类型说明Idintiduser_idchar(20)用户唯一idnick_namechar(64)用户名phonechar(11)用户号码typechar(1)用户类型imagechar(255)用户头像sexchar(1)用户性别passwordchar(11)用户登录密码statuschar(1)用户状态create_timedatetime用户注册时间搜索记录表search_content。此表主要用户于存储用户在使用系统过程中搜索内容的信息。主要有主键id、用户id等属性。如表4-2所示搜索记录表所含的四个属性。表4-2搜索记录表字段名数据类型说明Idint主键iduser_idchar(20)用户idcontentchar(64)搜索内容statuschar(1)搜索内容状态search_timedatetime搜索时间举报类型表report_type。此表主要存储文章的举报类型数据。主要包括主键id、举报类型、创建时间、当前状态属性。如表4-3所示举报类型表所含的四个属性。表4-3举报类型表字段名数据类型说明Idint主键idcontentchar(20)举报类型名create_timedatetime创建时间statuschar(1)状态举报信息表report。主要用于存储用户对部分文章或者用户提交的的举报信息。主要包括主键id、举报类型id、举报内容、被举报人id、举报对象类型、被举报文章id等属性。如表4-4所示举报信息表所含的十个属性。表4-4举报信息表字段名数据类型说明Idint用户idr_idchar(20)举报类型idcntchar(255)举报内容r_u_idchar(20)被举报人idreport_typechar(20)举报对象类型report_article_idchar(20)被举报文章iduser_idchar(20)举报人idreport_timedatetime举报时间deal_timedatetime处理时间report_statuschar(1)处理状态收藏关注表like_msg。收藏关注表主要用于存储用户对文章的收藏、对用户关注的信息。主要包括主键id、用户id、收藏文章id、收藏状态、关注作者id等属性。如表4-5所示收藏关注表所含的七个属性。表4-5收藏关注表字段名数据类型说明Idint用户iduser_idchar(20)当前用户uidlike_article_idchar(64)收藏文章idlike_flagchar(255)收藏状态collect_user_idchar(255)关注作者idcollect_flagchar(255)关注状态create_timedatetime创建时间评论回复表command。主要保存用户对文章的评论以及回复信息，主要包括文章id、文章作者id、评论人id等属性。如表4-6所示评论回复表所含的八个属性。表4-6评论回复表字段名数据类型说明Idint用户idcommand_article_idchar(20)评论文章idpwcommand_user_idchar(64)评论文章用户iduser_idchar(255)评论人idparent_idchar(20)父idfnson_idchar(20)子idcncreate_timedatetime创建时间command_contentchar(20)评论内容文章审核表check_article。主要用于存储管理员对自媒体用户提交的文章进行管理的信息。主要包括了文章id、文章作者id、作者名、文章名称、处理类型、等属性。如表4-7所示文章审核表所含的八个属性。表4-7所示文章审核表字段名数据类型说明Idint用户idarticle_idchar(20)文章idarticle_user_idchar(64)文章作者idarticle_nick_namechar(255)文章作者名字article_namechar(20)文章名字fnarticle_namechar(255)处理类型cndeal_timedatetime处理时间glntypechar(255)处理状态文章标签表channel_msg。主要用于存储文章标签的类型信息，以方便对文章进行分类管理。主要包括主键id、标签名、创建时间、当前状态属性。表4-8所示文章标签表所含的四个属性。表4-8文章标签表字段名数据类型说明Idint用户idchannelnamechar(20)标签名pwcreatetimedatetime创建时间statuschar(1)状态文章信息表article_msg。主要存储了自媒体用户发布的文章信息。文章信息表主要包括了用户id、收藏数、关注数量、文章频道id、文章id、文章类型、文章状态、发布时间、文章题目、文章阅读量属性。表4-9所示文章信息表所含的十二个属性。表4-9文章信息表字段名数据类型说明Idint用户iduser_idchar(20)文章作者idnick_namechar(64)文章作者名字like_numint收藏数量collect_numint关注数量fnchannel_idInt(11)文章频道idread_numInt(11)文章阅读量articleidInt(11)文章唯一idtypechar(1)文章类型statuschar(1)文章状态create_timedatetime发布时间update_timedatetime更新时间article_namechar(255)文章名字文章内容表article_content_msg。主要存储文章的文章内容信息。文章内容表主要包括主键id、文章id、文章内容、文章图片属性。表4-10所示文章内容表所含的四个属性。表4-10文章内容表字段名数据类型说明Idint用户idarticle_idchar(20)文章idcontenttext文章内容h_imageschar(255)文章图片4.4本章小结本章对系统开发中的各个模块进行的设计进行介绍。介绍了系统的框架、功能模块的设计，在整体上对系统进行了一个认识，然后对每个子模块的详细设计过程进行了描述，并给出了设计流程图和设计思路。在最后，对系统数据库进行描述，说明了各个属性之间的关系。接下来就是具体编码的实现过程了。5系统主要模块编码与实现5.1登录注册模块编码及详细实现过程用户在首次使用系统时，如果没有本系统账号，需要点击页面中的去注册按钮，前端使用Vue中的<router-link>方式，进行页面的跳转，用户进入注册页面之后，需要在操作页面输入自己的手机号码和密码，然后点击注册，前端会先对输入的信息进行校验，若信息不满足系统约定条件，前端使用自动弹框给用户提示信息，如果满足条件，则会使用Vue中的axios方式将用户信息发送给后端服务接口，后端服务接口首先会使用获取的手机号码在数据库中进行适配，适配成功，则终止本次操作，将返回信息以Json格式返回前端，前端进行信息回显，若没有数据，则将用户提交的信息插入数据库中，然后返回信息，前端获取信息后，先给用户提示信息，然后使用Vue中的$router.push方式，进入系统;如果用户已经有账号，进入登录界面之后，输入账号密码，前端使用axios方式将数据传递后端服务接口，后端服务根据信息进行数据库数据适配，然后判断数据是否适配成功，然后将信息返回给前端，前端Vue界面根据信息进行页面路由跳转。登录注册模块实现图如图5-1所示。图5-1登录注册模块实现图登录注册模块核心代码如下:RSfindUserByUserId(UserEntityuserEntity){

Map<String,Object>map=newHashMap<>();

//通过userId获取用户信息

UserEntityuser=userEntityMapper.selectByPhone(userEntity.getPhone());

if(user==null){

//如果用户为空，则没有该用户，提示注册

map.put("user","");

map.put("code",CE.USER_NOT_HAVE.getCode());

map.put("message",CE.USER_NOT_HAVE.getErrorMessage());

returnRS.successResult(map);

}

if(!user.getPassword().equals(userEntity.getPassword())){

//判断密码是否正确

map.put("user","");

map.put("code",CE.LOGIN_PASSWORD_ERROR.getCode());

map.put("message",CE.LOGIN_PASSWORD_ERROR.getErrorMessage());

returnRS.successResult(map);

}

map.put("user",user);

map.put("code",200);

returnRS.successResult(map);}5.2个人信息管理模块编码及详细实现过程用户进入个人中心界面，点击个人资料按钮，前端Vue使用$router.push方式跳转到个人资料界面，前端页面会从$store中获取到用户的userId，然后将信息发送给后端服务接口，后端服务根据userId进行数据库查询，然后将数据库中的数据使用Json格式返回给前端，前端对用户个人资料进行回显，用户在查看自己的个人资料后，可以修改自己的部分信息，然后点击修改按钮，前端界面使用Vue中的axios方式将数据发送给后端服务，后端服务会对数据库中的用户信息进行更新操作，然后将结果返回给前端，前端获取到数据之后，前端首先将存储在$store中的用户信息进行更新，保证系统全局用户信息一致，然后给出提示信息，然后使用$router.push方式返回首页。个人信息管理模块实现图如图5-2所示。图5-2个人信息管理实现图个人信息管理模块核心代码如下:RSupdateUserMsg(UserEntityuserEntity){

intresult=userEntityMapper.updateUserById(userEntity);

Map<String,Object>map=newHashMap<>();

UserEntityuser=userEntityMapper.findByUserId(userEntity.getUserId());

map.put("user",user);

map.put("code",CE.SUCCESS.getCode());

map.put("message",CE.SUCCESS.getErrorMessage());

returnRS.successResult(map);}5.3收藏关注模块编码及详细实现过程用户在使用系统进行文章浏览时，点击一条文章，后端服务查询数据库后，将该条文章的作者信息、文章信息一并返回给前端界面，界面通过$router方式进行页面跳转，然后在界面上回显文章的相关信息，然后用户可点击右边的关注按钮，然后前端使用axios方式将当前用户信息和该文章作者相关信息一并发送给后端服务，后端服务将数据保存收藏关注表中，然后将处理结果返回给前端界面，界面根据返回结果进行数据回显。关注模块实现图如图5-3所示。图5-3关注模块实现图5.4留言回复模块编码及详细实现过程用户在浏览文章过程中，点击一条文章，后端服务查询数据库后，将该条文章的作者信息、文章信息一并返回给前端界面，界面通过$router方式进行页面跳转，然后在界面上回显文章的相关信息，用户可以点击留言框，然后输入留言内容，然后点击留言按钮，前端使用axios方式将数据发送给后端服务接口，然后后端服务将数据插入到留言回复表中，然后将结果发送给前端，前端判断结果，如果状态码正确，则将用户留言内容显示在界面上，如果状态码不正确，则给用户返回提示信息。留言回复实现图如图5-4所示。图5-4留言回复实现图5.5搜索模块编码及详细实现过程搜索功能是每个系统中必备的功能，不同角色的用户可以通过搜索来查找自己想要获取的系统资源。用户在搜索框中输入关键词后点击搜索，进入搜索界面，输入搜索内容后，点击搜索，前端使用Vue中的axios方式将数据提交后后端服务，后端服务根据搜索内容查询文章信息表，然后获取满足条件的数据，然后将数据放入一个ArrayList集合中，保证数据一次返回多条，然后将数据返回给前端，界面对返回的信息进行判断，如果数据为空，则使用$router.push进入错误信息提示页面，如果数据不为空，则对数据进行遍历回显，接着使用$router.push方式进入搜索结果页面，用户可以在结果页面点击某一条数据进入文章详情。文章搜索模块实现图如图5-5所示。图5-5文章搜索模块实现图文章搜索模块核心代码如下:@RequestMapping(value={"/search_article"},method=RequestMethod.GET)

RSsAC(@RequestParam("contentKey")StringcontentKey,@RequestParam("userId")StringuserId){

returnsCs.selectByContent(contentKey,userId);}5.6举报模块编码及详细实现过程举报模块功能的设计是为了维护在系统使用过程中，用户拥有一个和谐美好的使用环境，防止触犯法律、危害用户的信息存在。用户在浏览文章时，可以点击右上角的举报按钮，前端会使用$router.push方式将文章相关信息一并跳转到举报页面，然后举报页面会使用$route方式获取到路由中的文章信息，然后回显在页面上，用户选择举报类型，填入举报描述，点击提交按钮，前端使用Vue中的axios方式将数据发送给后端服务，后端服务会将获取到的信息存入到MySQL数据库中，然后将结果返回给前端界面，前端界面获取到成功信息后，使用$router.push方式返回到首页。文章举报模块实现图如图5-6所示。图5-6文章举报模块实现图文章举报模块核心代码如下:RSinsertReport(ReportEntityreportEntity){

intresult=reportMapper.insertReport(reportEntity);

Map<String,Object>map=newHashMap<>();

if(result<=0){

map.put("result",result);

map.put("code",CE.SERVER_ERROR.getCode());

map.put("message","举报失败，请重新尝试");

returnRS.successResult(map);

}

map.put("result",result);

map.put("code",CE.SUCCESS.getCode());

map.put("message",CE.SUCCESS.getErrorMessage());

returnRS.successResult(map);

}5.7文章管理模块编码及详细实现过程文章管理模块是自媒体人员和管理员的权限功能。自媒体人的文章管理模块功能主要是文章发布功能，管理员的文章管理模块功能主要是审核文章功能。发布文章功能是自媒体人员的核心功能之一，自媒体用户进入自媒体用户管理系统之后，进入发布文章界面，填入文章的相关信息，然后前端界面使用axios方式将文章信息发送给后端服务接口，后端服务接收到信息之后，判断文章类型，如果是私密文章，则不需要管理员进行审核操作，如果是公开文章，则将数据保存到数据库表中，然后将结果返回，前端获取到后端服务发送的信息之后，将信息回显在界面之上。发布文章模块实现图如图5-7所示。图5-7发布文章模块实现图发布文章模块核心代码如下:RSaddArticle(ArticleContentMsgEntityacsm,ArticleMsgEntityasm){

intrt=acsm.iAc(articleContentMsgEntity);

intrts=asm.iAM(articleMsgEntity);

HashMap<String,Object>map=newHashMap<>();

map.put("code",CE.SUCCESS.getCode());

map.put("message","提交成功，请等待管理员审核");

returnRS.successResult(map);}文章审核模块功能是管理员的重要功能之一，管理员可以在登录系统之后，进入审核文章页面，前端访问后端查询待审核文章接口，后端接口查询所有待审核的文章数据，然后将数据打包发送给前端页面，前端界面使用Element-UI框架，将数据放入数据表格中，管理员可以对文章点击查看、通过、删除按钮，对文章进行操作,然后前端界面利用axios方式将数据封装发送给后端服务，服务将数据解析后存入数据库表中，然后将结果返回给前端界面;管理员也可以点击页面上方的举报审核标签页，前端访问后端查询被举报文章接口，后端接口查询所有举报未处理的文章数据，然后将数据打包发送给前端页面，前端界面使用Element-UI框架，将数据放入数据表格中，管理员可以点击查看按钮，对文章进行查看，在查看完文章之后，管理员对当前文章进行判定，判定是否违规之后，再进行删除或者恢复文章操作。文章审核模块实现图如图5-8所示。图5-8文章审核模块实现图5.8粉丝管理模块编码及详细实现过程自媒体用户在登录系统之后，点击粉丝管理标签，页面使用Vue中的$router组件，将页面跳转到粉丝信息页面，前端页面采用Element-UI中的tabs组件，将页面分成了粉丝列表和取消关注粉丝列表两个页面，前端页面会将存储在$store系统全局变量中的userId发送给后端服务接口，后端服务会根据自媒体用户的id查询数据库，分别查询出当前关注粉丝数据和取消关注的粉丝数据，然后分别存储在一个集合中，然后将两个集合放入HashMap集合中，将数据一并返回给前端，做到一次查询，避免因多次查询造成页面缓存过多，导致页面反应缓慢的问题存在，接着前端根据页面进行不同数据的回显。粉丝管理模块实现图如图5-9所示。图5-9粉丝管理实现图5.9用户管理模块编码及详细实现过程管理员用户在登录系统之后，点击用户管理标签，页面使用Vue中的$router组件，将页面跳转到用户信息页面，前端页面采用Element-UI中的tabs组件，将页面分成了普通用户信息列表、自媒体用户列表和管理员用户列表三个页面，前端页面会访问后端服务接口，后端服务会查询数据库，分别查询出普通用户数据、自媒体用户和管理员用户数据，然后分别存储在一个集合中，然后将三个集合放入HashMap集合中，将数据一并返回给前端，做到一次查询，避免因多次查询造成页面缓存过多，导致页面反应缓慢的问题存在，接着前端根据页面进行不同角色用户数据的回显。用户管理实现图如图5-10所示。图5-10用户管理实现图6系统测试在当下，各类功能型软件或系统层出不穷，在各方各面予以人们便利。但是开发的软件良莠不齐，一些拥有功能少、界面简陋、低性能等缺点的软件在发布后，往往石沉大海，没有用户去使用，因此，为了避免这些问题，在系统完成后，进行大量的系统测试是不可或缺的一步。6.1测试目的软件测试是为了避免用户在使用系统过程中出现意料之外的漏洞，而导致用户体验性降低、个人信息泄露等问题出现。通过大量的测试，可以提前发现并去解决存在的问题，尽可能避免意外的存在，只有这样，才能拥有一个性能、功能完美的系统出现。6.2主要功能测试自媒体用户发布文章功能是系统中