【《基于BS模式的新闻发布系统设计》14000字】

基于BS模式的新闻发布系统设计目录TOC\o"1-3"\h\u192121绪论 231241.1课题研究背景 2307061.2新闻发布系统的意义 2151151.3主要研究内容 3253332课题相关技术简介 4192042.1B/S结构 464312.2SpringBoot和MyBatis框架 5273682.3Vue.js框架 552283系统需求分析 54363.1可行性分析 5268973.2需求分析 680113.2.1系统非功能性需求 625293.2.2系统功能性需求 7275883.2.3系统用例图 8176263.2.4系统用例描述 10210624系统设计 12248724.1系统功能模块设计 12193324.1.1用户模块 13210144.1.2管理员模块 1334194.2系统流程设计 14201754.2.1用户注册登录流程设计 14205114.2.2用户评论新闻流程设计 15237694.2.3管理员发布新闻流程设计 1680914.2.4管理员添加新闻分类流程设计 1729914.2.5管理员管理新闻流程设计 1873834.3系统数据库设计 18209664.3.1数据库概念设计 18325284.3.2数据库表设计 19165775编码与实现 21219065.1网站首页模块 21105305.2登录注册模块 22228735.3新闻详情查看模块 24259075.4新闻发布管理模块 26216545.5新闻分类管理模块 29215765.6用户管理模块 3060366测试 31170836.1测试环境 31280496.2测试实现 3115016.3测试总结 3422913结束语 355164参考文献 36绪论课题研究背景进入二十一世纪以来，随着互联网的飞速发展，全世界已经步入了一个信息化时代，各行各业的信息化程度也得到了很大的改变，每天的信息铺天盖地的向人们涌来，新闻作为信息的一大主流，有着多种样式、不同类型、超大信息量的特征，这也就使得管理和发布新闻的系统应运而生[1]。以往，人们都是通过报纸、电视机或广播电台等传统的方式去了解新闻资讯，但随着时代的变迁，人们生活方式发生了巨大的变化，生活需求也越来越高，而传统的新闻传播方式，传播速度慢，不能实时更新，对人力物力也造成一种浪费，这种方式并不能满足人们的对美好生活的追求。为了顺应时代潮流，新闻网站也加快了建设的步伐，在最开始的新闻发布系统只是一些静态的HTML页面，这种设计在进行新闻的更新过程中，需要管理人员对页面进行重新制作，等制作完成之后，将页面上传到网站上，这种静态性的HTML页面管理新闻的方式不需要和数据库交互，数据库负担小，但是这种设计使得新闻管理变得更加复杂，需要大量的维护人员对新闻进行更新管理，开发费用大，渐渐的这种的方式就被人们淘汰了。本文研究的系统是在采用的是B/S结构，将动态的页面与数据库连接在一起，通过对新闻与内容进行高效管理，并将杂乱无章的文字、图片等信息进行有效的编写重组之后，使新闻资讯以最标准的格式呈现在阅读者的眼前[2]。该系统能够满足人们对新闻资讯的基本需求，干净简洁的界面和实时更新的新闻可以带给用户更好的体验，而且它的成本相对较低，比较容易，具有一定的开发价值和实用价值。新闻发布系统的意义随着我国移动终端硬件技术的发展和移动网络的提高，计算机与智能设备在人类社会生活中发挥着不可替代的作用，互联网也成为了现实社会的重要组成[3]。如今的人们通过笔记本、手机、平板等设备便可以对新闻信息获取和分享，导致越来越少的人不再使用看报纸和听广播等传统的方式去获得新闻信息，人们对网络媒体的要求也越来也高。互联网的快速发展改变了传统媒体所受到的地域和篇幅的限制，让新闻信息以一种新的方式进行传播和分享[4]。目前的一些新闻网站大多数是不能快速更新的静态HTML页面，以这样方式的新闻发布网站不利于对新闻进行管理，查询、修改、更新和维护都比较难以实现。本文研究的系统不但可以实时更新新闻，也可以减少新闻工作者的工作量，同时，该系统能够加快新闻信息的传播速度，这也是网络新闻传播速度快特点的体现，对新闻类别进行了分类整理，更便于人们可以按照自己的喜好查看新闻，同时在新闻查询方面也做了完善工作，确保新闻查询的高效性和安全性[5]。除此之外，随着网络的普及，新闻发布系统的被越来越多的领域所引用，它适用于各行各业。比如应用于学校，学校可以利用该系统向在校师生发送一些校内要闻和教务通知，设置一些链接作为学生获得信息、知识的重要途径，还可以进行学校宣传，提高学校的知名度等等；应用于一些公司，可以发布一些消息，比如，员工培训、人员奖惩、招聘信息等等。所以综上所述，该系统的设计与实现具有其自身实用的价值。主要研究内容本课题主要研究的是在网络环境下的新闻发布系统的设计实现，通过对相关的市场调查，发现以往的新闻发布系统不成熟，费时费力，既不能带给用户良好的体验，管理员在管理维护方面也压力很大，而该系统采用了集中管理，优化办公的理念，对数据进行集中管理，提高了管理员对新闻数据维护方面的工作效率[6]。本论文研究的该新闻发布系统采用的是B/S结构，基于Node环境，利用Webpack进行项目搭建，前台使用Vue框架完成页面设计，利用SpringBoot和Mybits框架进行后台的程序设计，MySQL数据库进行数据储存，实现数据的统一管理。新闻管理人员将新闻信息进行编辑、分类、整理并提交到数据库中，经审核后发布到网站上供用户阅读，旨在打造一个功能丰富、简单易用、界面简洁大方的新闻发布系统。主要研究内容如下：（1）实现的主要功能系统设计实现的主要功能包含了对实时新闻信息的展示，用户的登录注册，用户个人中心管理，新闻分布流程的管理及新闻类别的管理等，针对新闻发布的特点进行了功能性的设计与实现。（2）系统的管理该新闻发布系是需要管理员对其进行相关数据的管理和维护的，管理员可以对系统的基本功能进行操作，完成相应的增删改查数据的行为。（3）系统构架设计本课题主要研究的是在网络环境下的新闻发布系统的设计实现，采用的是B/S结构，根据软件工程设计的特点，将系统中的数据保存在MySQL当中，并采用了MVC编程模式实现系统的用户界面、业务模型和控制器。本论文会对此进行相关的介绍。课题相关技术简介通过对国内外的新闻发布系统的调查和研究，确定了本文的需求分析，本系统是基于B/S结构的，使用了SpringBoot和MyBatis框架，前端使用Vue.js进行页面设计，实现了前后端的分离式开发，后台数据库数据的存储使用了MySQL，以此实现对新闻的统一管理。B/S结构B/S结构（Browser/Server,浏览器/服务器模式），是全球广域网兴起后的一种软件开发的结构模式，它统一了客户端，并将系统核心功能的实现全部集中在服务器[7]。这种模式使系统的开发、维护和使用变得简单轻松，在服务器连接上数据库后，用户通过浏览器就可以完成数据交互。本系统采用了模块化的设计，以此降低系统的耦合性，但从研发的技术上，便可知道基础的B/S结构是以Web技术为核心的三层架构模式[8]。第一层是浏览器，即客户端。该层是一个数据显示界面，只有简单的输入输出，需要处理的业务逻辑非常少，用户通过浏览器就可以查看文本、图片和视频等信息，所以该层界面设计以简洁实用为主。其次是第二层是Web服务器，这一层主要是是接收来自客户端的数据和请求，经过处理后，Web服务器会调用第三层数据库服务器层，将浏览器传来的数据和请求进行解释执行，将执行后的结果返回给Web服务器，由Web服务器返回给用户，用户就可以在浏览器上看到自己想要看到的内容，所以该层主要起到一个承前启后的作用。最后一层就是数据库服务器了，它扮演着重要的角色，在它里面存有大量的数据，大部分事物逻辑需要在该层解决，Web服务器将请求发送给数据库服务器后，它会对这些请求进行数据处理，并将返回的结果发送给Web服务器，Web服务器将接收到的数据结果以HTML文件的形式呈现在用户的眼前，也就是我们在浏览器看到的界面，B/S结构原理图如图2-1所示。图2-1B/S结构原理图本系统采用B/S模式就是因为它的操作简单，只需一个可以上网的电脑便可，同时，B/S模式面向不同的用户群体，具有分布广、交互性强、维护轻松和实时传输效率强等优势，所以本系统采用B/S模式[9]。SpringBoot和MyBatis框架SpringBoot是由pivotal团队开发的开源轻量级框架，继承了Spring框架的原有特性，项目的搭建和开发过程经过它特有的简化配置变得快捷简单[10]。SpringBoot打破了传统的开发模式，开发人员使用了它特定的方式进行配置，在开发程序内部自带的有一个Tomcat服务器，所有的项目文件打包成一个JAR包，并使用特定的配置方式使Maven配置大幅度简化[11]，它使得编码、配置和部署变得简单，让开发变得简单且快速。MyBatis框架一款支持所有数据库功能，存储过程和高级映射的持久层框架[12]。在进行项目开发时，常常会遇到Java对象和数据库表中的数据类型匹配不成功的情况，使用MyBatis框架的XML配置文件和Mapper映射文件可以很好地解决这一问题，简单的XML可以进行相关参数配置，存有Java对象与数据库表字段之间的映射关系[13]，并将SQL语句在Mapper文件中写上，这样避免了开发者在进行参数的设置和提取结果集的麻烦,实现对数据库内容增删改查的操作[14]。Vue.js框架Vue.js（以下简称Vue）是一套用于构建用户界面的前端渐进式框架，与其他大型框架不同的是，Vue被设计成可以自底向上的逐层应用[15]，它的核心库关注的是用户可以看到的系统界面，也就是MVC模式中的视图层，容易入手，也方便与第三方库或已有项目的整合。Vue和其他重量级框架React、Angular相比更为轻量，采用了双向数据绑定机制，当视图和数据中的一方发生变化时，另外一方都可以同步更新，自身带有许多基于HTML元素的组件。Vue可以通过驱动单文件组件和Vue系统所支持的库去进行复杂页面的开发[16]，开发人员可以进行独立开发，而且Vue自身提供的组件和内容都是基于响应式的设计，这也是它的一大特点，可以打造出更简单易操作的页面，带给用户很好的体验。系统需求分析在进行项开发之前，需要先进行需求分析，通过对用户需求的分析和市场调查，设计出满足用户的网站，本章将对该系统的需求分析做详细介绍。可行性分析（1）技术可行性本文所研究的新闻发布系统选取了B/S结构，数据库逻辑相对简单，采用前后端分离的方式进行开发。前端的页面使用了当下最流行的Vue框架，相比较传统的开发模式，Vue更加的轻量易上手，也可以和驱动复杂的单页应用，提高代码的利用率，设计出一个符合人们审美的前端界面。后端使用SpringBoot+MyBatis框架进行开发，MyBatis框架连接数据库，实现对数据的存取操作，因此本系统无论是前端页面的设计还是后台开发，都能很好地完成，在技术方面没有问题，是可行的。（2）经济可行性本系统的开发过程中用到的相关技术都是开源免费的，通过查阅书籍和网上的资料就可以进行项目的搭建，采用B/S构架的管理软件都是安装在服务器端，所有的事物逻辑在服务器端实现，这就需要考虑到服务器的压力，不过就目前来说，可以在阿里云租借服务器，价格也是相对实惠的，这样就可以提升系统的响应速度来吸引很多的使用者。而且该系统投入使用之后会有很多的用户，相信很快就会带来可观的经济效益，同时该系统对于语言文字建设贡献是不可用金钱来衡量的。因此在经济上是可行的。（3）社会可行性从社会需求上看，随着互联网的日新月异，网络媒体在人们的日常生活中占有越来越高的地位，而本文研究的新闻发布系统便是网络媒体的核心系统，由此可见新闻发布系统的社会地位是无可比拟的。对于用户来说，传统的新闻传播方式已经不能满足人们的需求，据此对该新闻发布系统进行研究，该系统具有成本低，覆盖地域广、实时更新新闻的优势，用户拥有一台可以联网的电脑就可以访问我们的网站，进行新闻的查看、点赞和收藏等操作，未来新闻发布和管理系统也会更加完善、先进，所以社会层面是可行的。需求分析系统非功能性需求为了使系统更好的实现和运行，通常需要对系统的非功能性需求进行分析。（1）软件性能描述首先对该新闻发布系统的性能进行分析。系统的性能包含了用户信息请求的平均响应时间，数据库的存储容量大小，服务器的压力等，对于该网站采用了MVC三层构架开发模式，这种开发模式可以降低代码的冗余，提高代码的利用率，同时该系统支持多种数据库的内容管理，全面优化的程序性能使得查询速度更快更迅速。（2）软件运行环境需求本系统在Windows环境下进行开发的，使用JDK8.0和IDEA2021.1.1开发工具，基于Node环境，使用Webpack进行项目的构建，数据库使用的是MySQL5.5版本，使用的数据库工具是Navicat，使用Maven作为项目管理工具，Tomcat8.0作为系统的服务器。系统功能性需求通过市场调查，本文研究的新闻发布系统将分成前台页面和后台相关信息的管理。下文将对该系统的功能性需求进行分析。（1）用户的功能需求为了使更多的用户去使用该系统，针对不同的用户提供了不同的浏览模式，用户可以通过网站进入游客浏览模式，可以进行新闻的分类查看，浏览实时新闻等，如果用户评论留言就需要注册登入，用户登录之后除了可以浏览新闻之外，还能进行新闻的评论、点赞和收藏操作。该系统的首页自上而下是由导航栏、轮播图、每日要闻、评论点赞收藏新闻排行榜和热点精选。用户进入网站之后可以根据自己兴趣爱好在导航栏的新闻分类中选择自己喜欢的新闻类型，或者根据轮播图、每日要闻的推荐查看热点新闻，该系统在导航栏下面显示出不同类型的新闻条目，用户可以快速的找到自己喜欢和感兴趣的新闻所在之处。注册登录功能，为了区分每一个用户和保证用户的信息安全，那么注册登录就显得至关重要。该系统给每个用户提供了一个这样的注册登录功能，用户根据提示输入自己的信息进行注册后，就可以输入账号和密码完成登录操作。个人中心功能，个人中心主要是用户的一些信息，该系统的首页导航栏中有用户头像选项，在进行注册时用户可以选择自己的头像，点击头像即可查看自己的个人信息，然后可以进行信息的修改，为了保证账户的安全问题还进行登录密码的更改，根据个人爱好修改个性化头像，更换样式或颜色等。除了个人信息的查看和修改之外，还可以在查看自己收藏过的新闻，用户不再浏览该系统时，也可点击退出登录按钮即可退出该网站。用户查看新闻功能，用户可以在首页自由浏览阅读新闻。用户可以根据个人爱好在导航栏上面的新闻分类选择自己喜欢的新闻类型，每个新闻都显示出了新闻标题，新闻标题是以一个超链接存在的，当用户点击新闻标题时就可以跳转到一个新的页面进行新闻阅读，新闻的详细内容和图片等将会一一列出。用户检索新闻功能，当用户想看查看某一类新闻的时候，可以通过具体分类去查找相关新闻，或者在搜索框输入相关内容的形式查找。用户评论功能，为了让用户有更好的体验，该系统添加了评论功能。当用户阅读完某一篇新闻时，想要表达自己的看法或读后感时，就可以发表评论。用户点赞收藏新闻功能，遇到喜欢的新闻，用户可以进行点赞来增加新闻的热度，遇到好的内容也可以进行收藏，后续用户也可以在个人中心查看自己收藏过的新闻。（2）管理员的功能需求管理员对于一个系统而言是必不可少的，对系统的日常维护和管理都是由管理员来完成的。该系统的管理员可以对新闻分类管理，编辑并上传新闻，对用户进行管理，同时也可以查看监控中心，对新闻浏览人数进行监控。新闻分类功能，管理员可以按新闻类比进行分类，这样会使得新闻管理更简单快捷，管理员可以添加、修改和删除新闻类别。新闻发布功能，管理员可以添加新闻，选择新闻应该属于的哪个类别，输入新闻标题和新闻简介，然后进行新闻文字编辑和选择图片的插入方式，这样就可以实现新闻的发布。管理新闻功能，管理员对于发布的新闻进行管理，可以将新闻设置为轮播图热点新闻，完成修改新闻、删除新闻等操作。用户管理功能，管理员可以管理不用的用户，并为其授予不同的操作权限，可以将普通用户升级为管理员或删除管理员。监控中心，管理员可以查看新闻的浏览情况，实时监控新闻的浏览量，以此推荐受大众关注和喜爱的新闻资讯。系统用例图系统用例图是为了明确用户和各个模块之间的关系，可以用来描述系统功能的视图，能够帮助开发人员简单明了的了解系统所实现的功能。在对该新闻发布系统进行分析之后，系统中进行充当浏览角色的主要有游客、用户以及管理员。第一种角色游客，主要可以登录到该系统进行新闻的浏览，同时也可以实现身份的转变，通过注册登录变成用户，游客用例图如图3-1所示。图3-1游客用例图第二种角色用户，用户进入系统后需要注册登录，登录后用户可以在首页查看最近的热点新闻和每日要闻，以及新闻的点赞评论收藏榜，也可以按照新闻分类选择自己想看的新闻类型。用户可以在个人中心查看自己的个人信息，查看自己收藏过的新闻，同时也能完成个人信息的修改，在个人中心页面可以退出登录。用户用例图如图3-2所示。图3-1用户用例图管理员主要进行系统的一些管理操作，主要是可以对用户模块、新闻发布模块、新闻管理模块、新闻分类模块和监控中心做管理，以此维护系统的正常运转，管理员用例图如图3-3所示。图3-3管理员用例图系统用例描述（1）用例描述-1用例名称：浏览新闻首页用例描述。参与者：所有进入网站的用户。简要说明：用户进入系统浏览新闻。前置条件：用户进入首页基本事件流：eq\o\ac(○,1)用户输入网站进入网站首页eq\o\ac(○,2)用户点击新闻标题eq\o\ac(○,3)用户进入新闻详情页面阅读新闻。eq\o\ac(○,4)用例终止。异常事件流：无。（2）用例描述-2用例名称：用户评论新闻参与者：用户简要说明：用户对新闻进行评价前置条件：已经登录到系统的用户基本事件流：eq\o\ac(○,1)用户点击新闻标题，进入新闻详情页面。eq\o\ac(○,2)用户点击评论按钮，并输入规定长度范围内的新闻评论。eq\o\ac(○,3)用户点击确认评论。eq\o\ac(○,4)评论成功，用例终止。异常事件流：无（3）用例描述-3用例名称：添加新闻参与者：管理员简要说明：管理员添加新闻前置条件：管理员登录到系统基本事件流：eq\o\ac(○,1)管理员进入新闻发布管理页面。eq\o\ac(○,2)管理员点击添加新闻标识，进入新闻编辑页面。eq\o\ac(○,3)管理员输入新闻的标题，选择新闻的分类，输入内容和图片。eq\o\ac(○,4)管理员点击确认添加，新闻添加成功。eq\o\ac(○,5)用例终止。异常事件流：管理员添加新闻时，如标题为空或信息格式不正确都会导致新闻添加失败。（4）用例描述-4用例名称：管理新闻参与者：管理员简要说明：管理员对新闻是否上架、是否设置新闻为轮播图做操作。前置条件：管理员登录到系统。基本事件流：eq\o\ac(○,1)管理员点击新闻管理页面。eq\o\ac(○,2)管理员点击新闻浏览操作，审核新闻是否发布。eq\o\ac(○,3)管理员点击新闻上架标识，发布新闻。eq\o\ac(○,4)管理员选择作为轮播图的新闻，点击添加导航图片。eq\o\ac(○,5)管理员点击提交，导航新闻设置成功。eq\o\ac(○,6)用例结束。异常事件流：无。（5）用例描述-5用例名称：管理新闻分类参与者：管理员简要说明：管理员对新闻分类进行添加或删除。前置条件：管理员登录到系统。基本事件流：eq\o\ac(○,1)管理员进入新闻分类管理页面。eq\o\ac(○,2)管理员输入新闻分类名称和分类图标。eq\o\ac(○,3)点击新增分类，添加成功。eq\o\ac(○,4)管理员点击新闻分类删除标识，删除成功。eq\o\ac(○,5)用例结束。异常事件流：当新增的新闻分类已经存在，则会添加失败。系统设计系统功能模块设计通过对该新闻发布系统的需求分析之后，可以针对该系统的不同角色对系统进行功能模块划分，该系统将分成前台和后台管理，其中前台是针对普通用户的，后台是对于新闻管理者而言的。系统功能结构图如图4-1所示。图4-1系统功能结构图用户模块为了使更多的用户投入使用，将用户的需求分成的以下几个模块：用户注册登录模块、新闻浏览模块、新闻评价模块、新闻收藏模块，个人中心等，以下对各个模块进行介绍。（1）注册登录模块在该模块，用户进入网站之后点击登录图标，跳转到登录页面，用户可以输入账号密码完成登录操作，在该页面还有注册和找回密码链接，游客想要进行新闻评论时，就需要进行注册，点击注册会弹出的小框，根据提示填写相对应的信息完成注册成为网站用户。（2）新闻浏览模块用户登录到系统首页，可以点击新闻分类模块、热点新闻模块、最新新闻模块中的新闻链接，进行新闻的阅读。（3）新闻评论模块为了提高用户使用该系统的舒适感，用户观看新闻后，对于新闻的一些看法可以发变自己的意见，点击评论图标，在弹出的文字输入框中写下自己的看法，点击提交即可。（4）新闻收藏模块对于有些网站，由于实时更新导致用户想要看之前的新闻变得十分麻烦，该新闻发布系统提供了收藏功能，用户浏览新闻之后点击收藏图标，后续可以在个人中心的收藏栏看到收藏的新闻。（5）个人中心模块用户点击头像进入个人中心模块，除了可以查看个人信息和新闻收藏以外，也可以对昵称、密码等进行修改。管理员模块从管理员对该系统日常管理的需求出发，讲管理员的管理划分成的以下几个模块：用户管理模块、新闻发布模块、新闻管理模块、新闻类别管理模块等，以下对各个模块进行介绍。（1）管理用户模块该模块被分成了查找用户和用户列表两个部分，在用户查找栏可以搜索用户，相应的用户列表会列出符合条件的用户信息，管理员就可以对用户进行管理，可以对问题用户进行账户锁定或将用户升级为管理员。（2）新闻发布模块管理员点击添加新闻图标，进入新闻编辑页面，编辑页面需要填写文章的所有相关内容，包括新闻的标题、副标题、正文内容、图片等，点击提交完成新闻的编辑，返回新闻发布页面，点击编辑好的新闻进行审核预览，确认无误点击上架图标完成新闻发布。（3）新闻管理模块：管理员查看新闻内容，确认新闻上架或下架，也可以将热点新闻以轮播图的形式上架呈现在用户眼前。（4）新闻类别管理管理员点击新闻分类管理页面，可以删除某一新闻类别，也可以点击添加新闻类别，填写相应的类别名称和图标。（5）监控中心管理员可以实时监控新闻的浏览情况，给用户推荐感兴趣的新闻资讯。系统流程设计用户注册登录流程设计为了网站的管理和用户个人信息的安全，该新闻发布系统设计了用户登录注册功能，游客进入系统后进行注册登录，输入格式正确的个人信息完成注册，并在输入框填写相对应的账号和密码，完成注册登录进入网站首页，在完成这一系列的操作之前，用户只能进行游客浏览新闻的模式。用户注册登录流程图如图4-2所示。图4-2用户注册登录流程图用户评论新闻流程设计用户进入网站首页，点击新闻进入新闻的详情页面，用户如果要对新闻进行评论，没有登录的用户则会被提示请先进行登录，登录之后用户在评论框输入合理的评论文字，则评论成功。用户评论新闻流程图如图4-3所示。图4-3用户评论新闻流程图管理员发布新闻流程设计管理员登录进入新闻发布系统后台的新闻发布页面，点击添加新闻，在新闻的编辑页面，管理员输入新闻标题、新闻简介和新闻内容，选择新闻的类属，新闻图片以及图片的位置进入插入，完成这些内容则可以新闻提交成功，然后进行新闻审核，查看新闻是否正确，确认没有错误后点击提交，新闻发布成功。管理员发布新闻流程图如图4-4所示。图4-4管理员发布新闻流程图管理员添加新闻分类流程设计管理员登录进入网站的新闻分类管理页面，输入新闻的分类名称和所代表的图标，点击新增分类即可添加成功。管理员添加新闻分类流程图如图4-5所示。图4-5管理员添加新闻分类流程图管理员管理新闻流程设计管理员登录进入系统后台的新闻管理页面，可以对编辑好没有审核的新闻进行审核，审核后发布，如果需要设置新闻为轮播图（导航图片）的形式，点击图标并上传图片，点击提交即可完成操作。管理员管理新闻流程图如图4-6所示。图4-6管理员管理新闻流程图系统数据库设计数据库概念设计数据库的概念设计是将现实世界存在的具体事物抽象化，并将它转化成数据库系统支持的一种数据模型。根据以上的需求分析得到该系统的实体主要有游客、用户、管理员和新闻，它们有以下的联系：游客和用户是一对一，用户和评论是一对多，用户和收藏是一对多，管理员和新闻发布是一对多，管理员和新闻分类是一对多，管理员和用户是一对多，用户和浏览新闻是多对多。该新闻发布系统的E-R图如图4-7所示。图4-7系统E-R图数据库表设计通过对该系统的需求进行分析，该新闻发布系统主要有八个数据表，各个数据表的用途如表4-1所示。表4-1数据表用途表表名用途user系统的用户信息表，存放管理员和普通用户的所有信息news新闻信息表，存储新闻相关信息，包括新闻标题、简介、所属类别等等menu管理员权限表，主要是管理员具有的权限category新闻分类表，主要描述新闻的分类名称、地址、图标content新闻内容表，储存新闻的内容，图片comment评论表，主要存放评论的新闻地址、评论内容、评论时间、评论用户thumbs点赞表，主要存放点赞的新闻地址、点赞用户、点赞时间collection收藏表，主要存放收藏的新闻地址、收藏用户、收藏时间用户信息表是用来存放用户的个人信息的，主要存储的有用户ID、账号、昵称、手机号、头像、头像颜色和是否为管理员等信息，用户信息表结构如表4-2所示。表4-2user（用户信息表）字段数据类型长度可否空说明user_idint11N主键自增user_namevarchar50Y用户昵称user_accountvarchar50Y用户账号iphonevarchar20Y用户手机号user_passwordvarchar70Y密码stateint2Y账号状态create_timedatetime0Y创建时间is_adminint2Y是否为管理员iconvarchar20Y用户头像colorvarchar30Y头像颜色新闻信息表是用来存放新闻的内容和状态等信息，主要储存的有新闻ID、新闻标题、新闻简介、新闻所属类别、是否否导航新闻等等，新闻管理表结构如表4-3所示。表4-3news（新闻信息表）字段数据类型长度可否空说明news_idint10N主键自增news_titlevarchar300Y新闻标题news_descvarchar500Y新闻简介news_categoryint11Y新闻分类stateint11Y新闻状态is_carouseint11Y是否为导航新闻carouse_imagevarchar200Y导航图片create_timedatetime0Y创建时间管理员权限表存放了管理员可以管理系统的一些权限，有新闻管理权限、新闻管理名称、新闻管理图标，管理员权限表结构如表4-4所示。表4-4menu（管理员权限表）字段数据类型长度可否空说明idint5N主键自增textvarchar50Y新闻管理名称iconvarchar50Y图标namevarchar50Y新闻管理权限新闻分类表主要是用来存储新闻类别的相关信息，有新闻的分类名称、分类图标等，新闻分类表结构如表4-5所示。表4-5category（新闻分类表）字段数据类型长度可否空说明idint11N主键自增namevarchar50Y类别名称orderint5Y分类顺序iconvarchar50Y类别图标新闻内容表主要存放的有新闻的内容、新闻的图片以及图片的摆放位置等内容，新闻内容表结构如表4-6所示。表4-6content（新闻内容表）字段数据类型长度可否空说明news_idint11Y新闻idcontentvarchar2000Y新闻内容layout_typeint11Y图片位置imagevarchar300Y图片idint10N主键自增新闻评论表是用来放评论内容的，该数据库表主要描述了用户ID、新闻ID、评论的内容和评论时间等内容，新闻评价表结构如表4-7所示。表4-7comment（新闻评论表）字段数据类型长度可否空说明idint11N主键自增textvarchar1000Y评论内容create_timedatetime0Y评价时间user_idint11Y用户idnews_idint11Y新闻id新闻点赞表该数据库表的字段有用户ID、新闻ID和点赞时间，新闻点赞表结构如表4-8所示。表4-8thumbs（新闻点赞表）字段数据类型长度可否空说明idint11N主键自增news_idint11Y新闻iduser_idint11Y用户idcreate_timedatetime0Y点赞时间新闻收藏表该数据库表的字段有用户ID、新闻ID和收藏时间，新闻收藏表结构如表4-9所示。表4-9collection（新闻收藏表）字段数据类型长度可否空说明idint11N主键自增user_idint11Y用户idnews_idint11Y新闻idcreate_timedatetime0Y收藏时间编码与实现该新闻发布系统的前台是面向广大普通用户的，可以进行登录的有游客、用户、管理员三种角色，不同的角色对应的功能模块也有所不同。大致可以分成以下两个模块：前台用户的浏览、评论新闻和后台管理员对该系统的管理。本章将对这两个模块的实现界面和代码进行分析和介绍。网站首页模块作为用户进入系统后看到的第一个页面，新闻首页的页面风格被设计成以白色为基本色调，简洁又大方。同时它也是是进入其他页面的前提，在这一小节将要对系统的首页进行设计。该模块包括了以下部分：右上角的用户登录入口、新闻分类导航、新闻搜索框、轮播图新闻、每日要闻、最多评论收藏新闻的展示，网站首页页面效果图如图5-1所示。图5-1网站首页页面该页面就通过componentHead、HomePage、CategoryPage这几个重要Vue文件构成，代码如下：<div><ComponentHead@menuSelect="menuSelect"></ComponentHead><div><div:style="leftHeight"></div><divstyle="position:relative;padding-left:200px;padding-right:200px"><HomePagev-if="pageSwitch"></HomePage><CategoryPage:menuId="menuId":show="categoryPageShow"ref="categoryPage"v-else></CategoryPage></div><div:style="rightHeight"></div></div></div>登录注册模块注册登录页面是用于游客注册登录和用户管理员登录的，游客进入系统，如果希望更好的体验，需要进行注册成用户，注册页面效果图如图5-2所示。图5-2注册页面游客进行注册时，可以输入相应的个人信息点击提交，前台传来请求，首先根据传来的用户账号user_account进行判断该账号是否已经被注册，如果没有，则将用户个人信息插入数据库user表中，并将注册成功的信息返回给前台用户。代码如下：publicHashMapregister(Map<String,Object>map){

//判断该账号是否已被注册

Stringuser_account=map.get("user_account").toString();

Integerexit=mapper.selectUserAccountExit(user_account);

System.out.println(exit);

if(exit!=null){//说明该账号已经被注册

returnRespUtil.buildError("该账号已被注册！");

}else{

//用户信息插入用户表

mapper.addUser(map);

returnRespUtil.buildSuccess("注册成功，请登录！");

}

}用户进入登录页面，登录界面会根据账号的类型，分别进入普通用户和系统管理员的界面，用户相对应的账户信息完成登录，如果密码错误则会被提示登录失败，登录页面效果图如图5-3所示。图5-3登录页面进入登录页面后，用户在登陆页面后填写上相应的登录认证信息后，点击登录按钮，系统后台数据库根据前台传来的user_account、user_password进行信息匹配查找，如果账号密码正确则登录成功，否则登录失败；如果存在问题用户，则该账号会被管理员锁定，返回账号被锁定的信息。代码如下：publicHashMapcheckLogin(HttpSessionsession,Map<String,Object>map){

HashMapuserInfo=mapper.checkLogin(map);

if(userInfo!=null){

if(Integer.parseInt(userInfo.get("state").toString())==1){

session.setAttribute("userInfo",userInfo);

returnRespUtil.buildSuccessData(userInfo);

}else{

returnRespUtil.buildError("账号被锁定，请联系管理员");

}

}else{

returnRespUtil.buildError("登录失败，请检查账号密码！");

}

}为了使用户有更好的体验，登录页面使用了渐变色的页面设计，详细代码如下：changeAvatar(){constindex=iconList.indexOf(this.icon);this.icon=index<iconList.length-1?iconList[index+1]:iconList[0];},changeColor(){constindex=colorList.indexOf(this.color);this.color=index<colorList.length-1?colorList[index+1]:colorList[0]},新闻详情查看模块该系统的首页显示的每条新闻都被做成了一个链接的形式，在首页点击新闻图片、新闻标题或详情信息，完成跳转进入新闻的展示页面，该页面除了新闻的详细内容的展示外，还可以进行新闻的评论、点赞、收藏操作，新闻详情页面效果图如图5-4所示。图5-4新闻详情页面在该新闻详情页面的实现过程中，后台根据数据存储的图片文件名称去对应路径下获取图片，并将获取到的图片以二进制的方式返回给前端。主要代码如下：//获取上传的图片将图片以二进制的方式返回给前端@RequestMapping(value="/getImage.action",produces=MediaType.IMAGE_JPEG_VALUE)publicbyte[]getImage(@RequestBodyMap<String,Object>map)throwsIOException{StringfileName=map.get("fileName").toString();System.out.println();Filefile=newFile("C://work//work//news/"+fileName);FileInputStreaminputStream=newFileInputStream(file);byte[]bytes=newbyte[inputStream.available()];inputStream.read(bytes,0,inputStream.available());returnbytes;}前端再根据bolb属性接受二进制文件，并将src属性重新赋值，完成新闻的展示。主要代码如下：getImage(item,index){this.$axios.post("/news/getImage.action",{fileName:item.image},{responseType:'blob',}).then(resp=>{vardata=resp.data;this.content[index]['src']=window.URL.createObjectURL(data);this.$set(this.content,index,this.content[index]);})},在新闻的详情页面可以进行新闻评论，点击评论便可以在输入框输入用户想要评论的内容，同时也可以查看别人的评论，新闻评论页面效果图如图5-5所示。图5-5新闻评论页面用户登录后，输入评论内容，后台接收到前端传来的用户评论请求，将评论的用户ID、新闻ID、评论内容添加到评论数据表comment中，后台再将执行的结果返回给前端，则评论发布成功，主要代码如下：publicHashMapnewsCommentList(Map<String,Object>map){

List<HashMap>result=mapper.newsCommentList(map);

Integercount=mapper.queryNewsCommentCount(map);

returnRespUtil.buildSuccessPageData(result,count);

}

publicHashMapaddComment(Map<String,Object>map){

mapper.addComment(map);

returnRespUtil.buildSuccess("评论发布成功！");

}新闻发布管理模块在新闻管理页面管理员对新闻的搜索、审核、发布管理做一系列操作，也能将热点新闻以轮播图的形式呈现在首页上，新闻管理页面效果图如图5-6所示。图5-6新闻管理页面同时，在该页面也能进行新闻的发布，点击新闻添加按钮，跳转到新闻添加页面，需要完成新闻标题、简介、分类和内容的编辑，添加新闻页面效果图如图5-7所示。图5-7添加新闻页面新闻发布时，管理员输入新闻标题，简介等，并对新闻内容进行分段，穿插各种图片文字，并可以对图片进行排版，保存后发送给后台，后台接收到前台传来的新闻对象后，根据传来的新闻标题、新闻简介等内容去创建一个新闻对象，将该新闻信息插入到数据库表news中，然后获取插入的数据库表的主键，并把新闻的内容和新闻图片保存到新闻内容表content中。主要代码如下：publicIntegernewsRelease(Map<String,Object>map,MultipartFile[]file){

intflag=0;

String[]contents=StringUtil.getData(map.get("content")).split("-");

String[]layoutTypes=StringUtil.getData(map.get("layoutType")).split(",");

String[]fileIndex=StringUtil.getData(map.get("fileIndex")).split(",");

//创建新闻对象

Newsnews=newNews(StringUtil.getData(map.get("newsTitle")),StringUtil.getData(map.get("newsDesc")),(int)StringUtil.getData(map.get("newsCategory"),"int"));

//插入新闻到表中

intresult=mapper.addNewsInfo(news);

//获取刚插入的新闻ID

intnews_id=news.getNews_id();

//插入新闻内容,创建参数

List<HashMap>params=newArrayList<>();

for(inti=0;i<contents.length;i++){

HashMapm=newHashMap();

m.put("content",contents[i]);

m.put("newsId",news_id);

m.put("image","");

intlayoutType=Integer.parseInt(layoutTypes[i].toString());

m.put("layoutType",layoutType);

params.add(m);

}

//处理图片

for(inti=0;i<file.length;i++){

//该图片属于哪个段落下的

intindex=Integer.parseInt(fileIndex[i]);

MultipartFilef=file[i];

StringfileName=f.getOriginalFilename();//文件名

StringsuffixName=fileName.substring(fileName.lastIndexOf("."));//后缀名

StringfilePath="C://work//work//news//newsImg-";//上传后的路径toolImg会被当做文件名

Dated=newDate();

SimpleDateFormatsdf=newSimpleDateFormat("yyyy-MM-dd");

fileName=RandomUtil.generateAssignLengthRandomCode(8)+"("+sdf.format(d)+")"+suffixName;

//新的文件名

StringnewFileName="newsImg-"+fileName;

//将该文件名存到对呀的段落中去

HashMapmap1=params.get(index);

map1.put("image",newFileName);

Filedest=newFile(filePath+fileName);

try{

f.transferTo(dest);

}catch(IOExceptione){

e.printStackTrace();

flag=1;

}

}

//将新闻内容保存到新闻内容表中

mapper.addNewsContent(params);

returnflag;

}新闻分类管理模块进入新闻分类管理页面后，管理员可以查看所有的新闻分类，也可以对新闻分类完成添加、删除操作，新闻分类管理页面效果图如图5-8所示。图5-8新闻分类管理页面前端发送来增加或删除的新闻分类的请求，首先找到后台控制层的对应接口，调用对应的函数方法，对数据库进行增删操作，完成新闻分类的增加或删除，代码如下：publicHashMapdeleteNewsCategory(@RequestBodyMap<String,Object>map){

returnservices.deleteNewsCategory(map);

}publicHashMapaddNewsCategory(Map<String,Object>map){

IntegermaxOrder=mapper.queryCategoryMaxOrder();

map.put("maxOrder",maxOrder+1);

Integerresult=mapper.addNewsCategory(map);

if(result==1){

returnRespUtil.buildSuccess();

}else{

returnRespUtil.buildError();

}

}

publicHashMapdeleteNewsCategory(Map<String,Object>map){

Integerresult=mapper.deleteNewsCategory(map);

if(result==1){

returnRespUtil.buildSuccess();

}else{

returnRespUtil.buildError();

}

}用户管理模块后台管理员拥有管理用户的权限，其中包括锁定管理员和修改管理员权限，锁定问题用户账号和修改用户权限等操作，用户管理页面效果图如图5-9所示。图5-9用户管理页面管理员可以人员的状态或者用户的账号进行用户信息的查找，后台接收到请求在数据库进行查找，将符合查找条件的用户总数以一个新的列表返回给前台，同时管理员可以根据用户是否符合该系统的使用规范行为，将不良用户账号锁定，或将用户设置为系统管理员。代码如下：publicHashMapqueryUserInfoList(Map<String,Object>map){

List<HashMap>result=mapper.queryUserInfoList(map);

Integertotal=mapper.queryUserInfoCount(map);

returnRespUtil.buildSuccessPageData(result,total);

}

publicHashMapupdateUserState(Map<String,Object>map){

mapper.updateUserState(map);

returnRespUtil.buildSuccess();

}

publicHashMapsetUserForAdmin(Map<String,Object>map){

mapper.setUserForAdmin(map);

returnRespUtil.buildSuccess();

}测试测试环境该新闻发布系统的的客户端为PC、平板等，服务端需要Web服务器和数据库服务器。它的开发环境如表6-1所示：表6-1开发环境服务器Tomcat8.0数据库MySQL5.5操作系统Windows10开发语言Java