基于Android的IT博客APP的设计与实现

保定理工学院本科毕业设计绪论1.1研究目的和意义随着时代的进步，人们的生活、学习方式都有了很大的改变，人们对网络的依赖性越来越强，对手机、电脑等电子产品的依赖性也越来越强。因此很有必要开发一个适合自己的IT博客APP，这不仅可以让学生在网络上学习任何想要学习的东西，还可以让学生们共同分享自己的学习心得，相互学习，不失为是一种有效的、科学的学习方式。学生们可以随时打开自己的手机和电脑进行记录与学习。在网络上，像是出版，发表和张贴文章这样的网络行为在迅速发展中，blog就成了支持这样的网络出版代表的载体。一个blog一般是由一些短小的、不断更新的帖子组成，并且按时间顺序排列。blog的内容与用途千差万别，从连接与其他IT站点的新闻与资讯，到链接与评论。许多blog，是指个体在发表自己的观点，或是一群人在针对一个特殊的议题或共同的目标而展开的协作，每一个人都能在任何时候，将自己的思想火花和灵感带到新的地方。在这个信息的时代，ITblog承担了一个传播的任务。总而言之，现在的现状需要一个IT博客应用程序来满足人们的需求。1.2国内外研究现状随着互联网的迅速发展，个人博客也逐渐成为一个展现个人资讯的平台。随着时代的发展，网络已经成为人们快速获取、发布和传播信息的一个重要途径。2021年，刘磊在其《基于SSH框架的博客用户分享平台的设计与实现》中，使用的是Java语言，在其后端，运用的主要框架技术以Struts2为核心，辅以Spring、Hibernate等其他框架技术，利用MySQL，利用Navicat的图形化界面对数据库进行视觉化操作，Bootstrap用于对UI页面进行搭建，对页面进行版式设计，并利用JSP技术实现数据的同步呈现，利用jQuery、Vue等进行异步加载。马杰川于2021年在其论文《基于JSP的企业Blog系统的设计js框架进行ajax请求和页面渲染,并使用Maven进行项目管理与实现》中，提出了“Blog、微博是新媒体时代信息发布与舆论引导的重要阵地”的观点。采用了B/S架构体系来进行系统的开发，通过对其进行结构化设计，把各个功能按照模块化的方式进行构建，使得整个系统的设计思路更为明确。在代码的设计上，使用了MVC架构的方式，它将传统的输入、处理、输出三个部分的功能独立出来，大大减少了系统的耦合性，方便了系统的管理。然后，以SQLServer2008数据库为核心，以Tomcat为核心，在前端，采用JSP开发技术，实现了前端网页的设计，在后台，使用Servlet实现了业务逻辑的处理，从而实现了整个系统的开发。与传统的系统相比较，开发完成的企业博客系统拥有更加出色的系统架构和处理效率，它为企业营销提供了一个前沿、便捷、大众化的接入平台，从而提升了企业营销的水平，为企业带来了更大的经济效益。在移动端应用程序日益普及的情况下，个体blog亦需开发符合其需求的blog应用程序。博客最早出现于国外，比如推特，以成为全球访问量最大的十大网站之一。2014年KaranGupta在《Bloginwebapplication：asoftwareengineeringperspective》中将博客集成到Web应用程序中并提供了一个用于量化选定需求的度量软件估计。其中使用的MVC模式开发有助于其他软件的应用和借鉴，通过数据库设计技术设计类图，建立模型分析数据。2020年，Vaezi、Reza;Torkzadeh等人在《UnderstandingtheInfluenceofBlogontheDevelopmentofSocialCapital》中指出博客在教育，市场营销，新闻和人力资源管理等各个领域的快速使用和应用突显了对这种新技术对社会资本的影响的更好的了解，博客有望通过提供新的人际网络手段来影响这种互动的程度和范围。2020年11月，GözdeKarabacak;MerveGenç在《TheUseofBlogsasanExampleofInternetEntrepreneurship:TurkishTravelBlogs》中提出博客已成为日常生活中不可思议的现实。博客实践最初是从业余时间开始的，现在已经成为许多人的职业。1.3论文组织架构本文将开发设计过程分为六个章节，全面向读者介绍了开发工具的选择，从课题选择到理论研究分析到最终实现，开发环境的搭建和编程代码的制作，让读者通过本文，您可以对相应开发的系统有一个初步的了解。第1章，绪论。绪论部分介绍了研究背景和意义、国内外研究现状以及论文框架的总体结构。第2章，相关理论与技术。在相关理论和技术章节中，将介绍开发中使用的相关理论和相关技术。第3章，系统分析。从操作可行性、经济可行性和技术可行性三个方面进行分析。第4章，系统设计。描述了具体的功能模块实现设计和具体的数据库表设计。第5章，系统的实现。在系统实现章节中，系统的主要功能以截图和文字说明的形式呈现。第6章，系统测试。在系统测试章节中，将介绍系统测试的方法和结果。第2章相关理论和技术2.1Java简介Java语言作为一种强大的面向对象语言，其主要优势有很多。常用的浏览平台基本都支持Java，此为外势。再看Java本身的技术也在不断进步，此为内力。内力外势相互作用下Java从此就一路顺风顺水，发展十分迅速，并迅速对其他编程语言形成强有力的冲击。在如今云计算和互联网遍布产业链的全球产业环境中，Java依旧是具有最重量级的优势和广阔光明的前景。2.2MySQL特点 MySQL也就是属于所谓的关系数据库。MySQL数据库可以在各类不同的操作系统上运行例如Mac，windows操作系统，Linux也都是一样的。关系型数据库的核心就是对数据进行存储管理和处理。数据库中的所有数据都会存储在数据表中，所以通常，数据库是通过改变表格和索引来实现存储的。MySQL数据库是一种一级模式，客户机只有通过请求服务机的确认，才能进行对数据库的操作。2.3B/S模式在APP与服务器数据库之间进行有效的交互时，服务器管理器可以很好地响应客户机应用与数据库的交互。实际上，B/S模式是一种新型的MIS平台，以网络关系为依托，以用户为依托，在不同层次上进行交叠。从理论上来说，B/S模式是一个三层系统管理平台，其中，我们刚刚介绍的B/S模式是一个较为单一的服务器管理层，它由一个或多个服务器、服务器和应用程序组成，从而构建出一个三层系统管理平台，在用户和服务器之间传递信息。B/S模式中第一层是用户对于服务器的请求，而第二层是用户在经过第一层到服务器，服务器接收到请求后，根据用户发送的请求前一层生成一系列对应的网页，该网页实际上就是服务器基于用户请求给予的反馈，之后再将生成的网页发送给用户的浏览器中，以利于用户获得交互后的反馈。第三层实际上就是数据库服务器，数据库服务器的管理与上文描述的B/S模型都具有基于并行任务协调的特点。第3章系统分析3.1可行性分析3.1.1技术可行性技术上可行性是指开发中实际使用的框架和技术，以及采用的何种设计模式类型，这些在文章章节已经有了相关的介绍，本次开发是以Android的IT博客APP的设计与实现为基础，所使用的编程语言为Java语言，在开发过程中，以SSM框架为基础围绕进行开发，整体开发采用MVC设计模式。这些技术经过广泛的被利用，已经由实践证明了其技术的可行性。3.1.2经济可行性在经济上，就是在最初的设计阶段，我们的研发程序要与设计阶段的预算相一致，并且要有清晰的书面记录。在此基础上，研发出一款具有良好前景和较高经济效益的IT博客APP，并将其纳入到我们的考量之中。开发的IT博客具有较好的前景。综上所述，我们觉得这款IT博客app的设计是在经济上是可行的。3.1.3操作可行性将本系统交给使用者后，使用者便可轻松地使用，并透过影像界面来达成大部分的功能，且资料的输入既有弹性又完整，且无模糊，让使用者与管理者可以随时查阅资料。整体系统要简单，有效，并且能对用户进行多层次的权限管理。根据以上几点，我们可以断定这项项目是可行的。3.2需求分析对系统功能进行需求分析可以帮助我们在开发软件功能要求的时候明白哪些功能是必要的，哪些功能是不必要的。一次良好的分析可以很明确地帮助进行开发，避免进行不必要的浪费进而提高开发效率，达到降低开发成本和提高开发软件质量的目的。3.2.1功能需求分析本系统为IT博客APP，它的使用角色要分为用户和管理员两个角色，用户可以使用该APP发布博客文章，发布学习线路，对博客进行收藏点赞点踩操作，发布帖子并在下方留言交流等。管理员具有系统中的大部分管理功能，管理员可以对用户信息进行管理，查询并管理博客的分类，查询并管理博客的标签，以及对系统首页公告信息等进行有效管理。用户用例图如图3.1所示，管理员用例图如图3.2所示。博客文章博客文章学习路线学习路线收藏管理收藏管理贴子管理贴子管理用户用户图3.1用户用例图用户管理用户管理博客分类管理博客分类管理标签管理标签管理博客文章管理博客文章管理系统管理系统管理学习线路管理管理员学习线路管理管理员论坛管理论坛管理图3.2管理员用例图3.2.2非功能需求分析本论文设计了一个IT博客APP，它为用户储存了大量的日志信息和基础信息。为保证系统数据的安全性，在系统的设计与开发过程中，对用户身份与权限管理模块进行了特殊的配置。在这个系统里，所有的用户身份都要经过系统的认证，按照这个用户的身份来设定他们的权限，并保证OS用户只在一定的权限之内运行，而且只有在一定的权限之内才能对OS数据进行存取。为了保证系统数据的安全性，在出现不正常要求时，可以根据对应的身份以及要求，及时终止该次不正常的要求。第4章系统设计4.1功能模块设计根据对系统的功能分析IT博客APP的主要功能模块包括以下模块：用户管理、博客信息管理、博客推送、论坛用户交流、学习线路展示、博客审核管理、博客热门管理等功能模块。系统功能模块图如图4.1所示：图4.1系统功能模块图4.2数据库设计4.2.1数据库需求分析在系统的实际设计和开发的过程中我们必须认真对待系统数据库的设计。必须绝对保证系统数据和用户数据的安全，必须对用户的权限进行限制，同时应该定时的管理和备份数据库，以免出现意外导致数据丢失，需要不定时检查分析数据库存储的状态，分析其响应速度。N1M1M1NMMN4.2.2数据库概念结构设计N1M1M1NMMN图4.2实体关系E-R图本系统为实现IT博客管理等功能，包含用户、博客、管理员、标签几个重要实体。用户实体和博客实体间存在发布、评论、收藏的联系。管理员和博客实体间存在审核的联系。博客和标签存在属于的联系，具体E-R图如上图4.2所示。博客文章博客文章文章内容账号用户id文章简介文章标题文章封面标签博客分类发布日期图4.3博客文章实体图用户性别用户性别手机号码头像id创建时间密码账号邮箱4.2.3数据库逻辑结构设计从实体上看，数据库的首要目的是为了数据访问。当然需要对数据库进行增加索引，以便对操作系统数据进行存取。按照存取方式的不同，将其存取方式划分为索引表和顺序表两种。在前面的部分，我们介绍了一种基于E-R图的、在各个数据实体间建立对应的数据库、对应的表的方法。本系统的详细表格设计如下：(1)用户表“用户表”用于记录用户的各类重要信息包括权限信息，账号密码等。用户表的结构如表4.1所示。表4.1用户表字段名称类型长度字段说明主键默认值idbigint主键主键usernamevarchar40用户名passwordvarchar20密码rolevarchar20角色管理员addtimetimestamp新增时间CURRENT_TIMESTAMP(2)关于我们systemintro关于我们的结构如表4.2所示表4.2关于我们表字段名称类型长度字段说明主键默认值idbigint主键主键addtimetimestamp创建时间CURRENT_TIMESTAMPtitlevarchar20标题subtitlevarchar20副标题contentlongtext4294967295内容picture1longtext4294967295图片1picture2longtext4294967295图片2picture3longtext4294967295图片3(3)公告信息news“公告信息”是用于管理员发布公告信息的，便于管理员传达公告信息。公告信息的结构如表4.3所示。表4.3公告信息表字段名称类型长度字段说明主键默认值idbigint主键主键addtimetimestamp创建时间titlevarchar20标题introductionlongtext4294967295简介picturelongtext4294967295图片contentlongtext4294967295内容(4)博客文章评论表discussbokewenzhang“博客文章评论表”是用来记录用户反馈博客文章好坏的评价信息。博客文章评论表的结构如表4.4所示。表4.4博客文章评论表字段名称类型长度字段说明主键默认值idbigint主键主键addtimetimestamp创建时间CURRENT_TIMESTAMPrefidbigint关联表iduseridbigint用户idavatarurllongtext4294967295头像nicknamevarchar25用户名contentlongtext4294967295评论内容replylongtext4294967295回复内容(5)配置文件表config“配置文件表”是用于记录与存储系统中的配置文件信息，这些配置文件信息参数主要存储在配置文件表内，配置文件表的结构如表4.5所示。表4.5配置文件表字段名称类型长度字段说明主键默认值idbigint主键主键namevarchar20配置参数名称valuevarchar100配置参数值(6)博客文章bokewenzhang“博客文章”是用来记录文章的信息。博客文章的结构如表4.6所示。表4.6博客文章表字段名称类型长度字段说明主键默认值idbigint主键主键addtimetimestamp创建时间wenzhangbiaotivarchar20文章标题wenzhangfengmianlongtext4294967295文章封面bokefenleivarchar20博客分类biaoqianvarchar20标签wenzhangjianjielongtext4294967295文章简介wenzhangneironglongtext4294967295文章内容zhanghaovarchar20账号xingmingvarchar10姓名faburiqidate发布日期thumbsupnumint赞0crazilynumint踩0clicktimedatetime最近点击时间useridbigint用户id(7)用户表yonghu“用户”记录请求登录后的用户的基本个人信息。用户表的结构如表4.7所示。表4.7用户表字段名称类型长度字段说明主键默认值idbigint主键主键addtimetimestamp创建时间CURRENT_TIMESTAMPzhanghaovarchar20账号mimavarchar20密码xingmingvarchar10姓名xingbievarchar2性别youxiangvarchar20邮箱shoujihaomavarchar20手机号码touxianglongtext4294967295头像(8)学习线路表xuexixianlu“学习线路表”是用来记录学习路线的信息。学习线路表的结构如表4.8所示。表4.8学习线路表字段名称类型长度字段说明主键默认值idbigint主键主键addtimetimestamp创建时间CURRENT_TIMESTAMPbiaotivarchar20标题fengmianlongtext4294967295封面yujiwanchengdatetime预计完成zhongdiannandianvarchar20重点难点xuexineironglongtext4294967295学习内容zhanghaovarchar20账号xingmingvarchar20姓名faqiriqidate发起日期useridbigint用户id(9)论坛表forum“论坛表”是用于记录论坛中发布的帖子的基本信息包括内容标题等。论坛表的结构如表4.9所示。表4.9论坛表字段名称类型长度字段说明主键默认值idbigint主键主键addtimetimestamp创建时间CURRENT_TIMESTAMPtitlevarchar20帖子标题contentlongtext4294967295帖子内容parentidbigint父节点iduseridbigint用户idusernamevarchar20用户名avatarurllongtext4294967295头像isdonevarchar10状态(10)博客分类表bokefenlei“博客分类表”是用来记录博客分类的信息。博客分类的结构如表4.10所示。表4.10博客分类表字段名称类型长度字段说明主键默认值idbigint主键主键addtimetimestamp创建时间CURRENT_TIMESTAMPbokefenleivarchar20博客分类(12)收藏表storeup“收藏表”是用于记录用户喜欢的博客文章类型信息。收藏表storeup的结构如表4.11所示。表4.11收藏表字段名称类型长度字段说明主键默认值idbigint主键主键addtimetimestamp创建时间CURRENT_TIMESTAMPuseridbigint用户idrefidbigint博客idtablenamevarchar20表名namevarchar20名称picturelongtext4294967295图片typevarchar50类型(1:收藏,21:赞,22:踩)1inteltypevarchar20推荐类型remarkvarchar100备注(12)标签biaoqian“标签”是用来记录标签的信息。标签biaoqian的结构如表4.12所示。表4.12标签表字段名称类型长度字段说明主键默认值idbigint主键主键addtimetimestap创建时间CURRENT_TIMESTAMPbiaoqianvarchar20标签(13)关于我们aboutus关于我们aboutus的结构如表4.13所示。表4.13关于我们表字段名称类型长度字段说明主键默认值idbigint主键主键addtimetimestamp创建时间CURRENT_TIMESTAMPtitlevarchar20标题subtitlevarchar20副标题contentlongtext4294967295内容picture1longtext4294967295图片1picture2longtext4294967295图片2picture3longtext4294967295图片3第5章系统实现5.1用户登录注册当用户第一次访问系统的时候，点击个人中心会自动进入用户登录注册页面，用户首次注册需要输入用户帐号、密码、性别、用户手机等基本信息。在图5.1中显示了使用者注册登记的界面。用户登录操作要求必须输入账号以及与之相对应的密码，然后按下“登录”键。若未键入使用者名称或口令，则会要求使用者输入使用者名称及口令。若输入的账号以及密码无法对应则提示密码错误，使用者登入界面显示在图5.2中。图5.1用户注册界面图图5.2用户登录界面图实现该功能的关键代码如下：if(!this.username){this.$utils.msg('请输入用户名')return}if(!this.password){this.$utils.msg('请输入用户密码')Return}if(!this.optionsValues[this.index]){this.$utils.msg('请选择登陆用户类型')Return}@PostMapping(value="/login")publicRlogin(Stringusername,Stringpassword,Stringcaptcha,HttpServletRequestrequest){UsersEntityuser=userService.selectOne(newEntityWrapper<UsersEntity>().eq("username",username));if(user==null||!user.getPassword().equals(password)){returnR.error("账号或密码不正确");}Stringtoken=tokenService.generateToken(user.getId(),username,"users",user.getRole());returnR.ok().put("token",token);}5.2用户个人中心当使用者成功登入系统时，可以点击个人中心按钮进入个人中心界面，其中有使用者的某些个人资料，使用者可以在其中进行修改及储存。图5.3显示了个人中心界面：图5.3用户个人中心管理界面图实现该功能的关键代码如下：if((!this.ruleForm.mima)&&`yonghu`==this.tableName){this.$utils.msg(`密码不能为空`);return}if((!this.ruleForm.xingming)&&`yonghu`==this.tableName){this.$utils.msg(`姓名不能为空`);return}if(`yonghu`==this.tableName&&this.ruleForm.youxiang&&(!this.$validate.isEmail(this.ruleForm.youxiang))){this.$utils.msg(`邮箱应输入邮件格式`);return}if(`yonghu`==this.tableName&&this.ruleForm.shoujihaoma&&(!this.$validate.isMobile(this.ruleForm.shoujihaoma))){this.$utils.msg(`手机号码应输入手机格式`);return}lettable=uni.getStorageSync("nowTable");awaitthis.$api.update(table,this.ruleForm);this.$utils.msgBack('修改成功');5.3用户发布博客当用户登录成功，进入系统之后，点击”我的”，进入到界面之后，点击博客文章，进入到该用户发布博客与历史发布博客记录页面，进入”我的博客文章”过程具体如图5.4所示。图5.4”我的”界面图进入博客文章后可以看到该用户发布的不同类型的博客。“我的博客文章”界面如图5.5所示：图5.5”我的”博客文章图在当前页面发布新博客右下角点击”新”进入发布博客界面，发布新博客需要填写博客基础信息，该界面如图5.6所示：图5.6发布博客界面图填写完博客基础信息后点击提交即可发布博客，成功发布博客后将有提示，成功发布博客如图5.7所示：图5.7博客成功发布界面图实现该功能的关键代码如下：asynconLoad(options){this.ruleForm.faburiqi=this.$utils.getCurDate();lettable=uni.getStorageSync("nowTable");//获取用户信息letres=awaitthis.$api.session(table);this.user=res.data;//ss读取this.ruleForm.zhanghao=this.user.zhanghaothis.ro.zhanghao=true;this.ruleForm.xingming=this.user.xingmingthis.ro.xingming=true;res=awaitthis.$api.option(`bokefenlei`,`bokefenlei`,{});//下拉框this.bokefenleiOptions=res.data;this.bokefenleiOptions.unshift("请选择博客分类");res=awaitthis.$api.option(`biaoqian`,`biaoqian`,{});//下拉框this.biaoqianOptions=res.data;this.biaoqianOptions.unshift("请选择标签");//如果有登陆，获取登陆后保存的useridthis.ruleForm.userid=uni.getStorageSync("userid")if(options.refid){//如果上一级页面传递了refid，获取改refid数据信息this.ruleForm.refid=options.refid;this.ruleForm.nickname=uni.getStorageSync("nickname");}//如果是更新操作if(options.id){this.ruleForm.id=options.id;//获取信息res=awaitthis.$(`bokewenzhang`,this.ruleForm.id);this.ruleForm=res.data;}5.4博客推送用户登录首页后下拉到博客文章推荐板块，该板块按照用户收藏博客类型进行博客推送，若用户收藏类型的博客数量未达到推送数量，则推送未曾收藏的博客类型。博客文章类型推荐如图5.8所示：图5.8博客文章推荐界面图实现该功能的关键代码如下：@RequestMapping("/autoSort2")//（按博客分类收藏推荐）publicRautoSort2(@RequestParamMap<String,Object>params,BokewenzhangEntitybokewenzhang,HttpServletRequestrequest){StringuserId=request.getSession().getAttribute("userId").toString();StringinteltypeColumn="bokefenlei";List<StoreupEntity>storeups=storeupService.selectList(newEntityWrapper<StoreupEntity>().eq("type",1).eq("userid",userId).eq("tablename","bokewenzhang").orderBy("addtime",false));List<String>inteltypes=newArrayList<String>();Integerlimit=params.get("limit")==null?10:Integer.parseInt(params.get("limit").toString());List<BokewenzhangEntity>bokewenzhangList=newArrayList<BokewenzhangEntity>();//去重if(storeups!=null&&storeups.size()>0){for(StoreupEntitys:storeups){bokewenzhangList.addAll(bokewenzhangService.selectList(newEntityWrapper<BokewenzhangEntity>().eq(inteltypeColumn,s.getInteltype())));}}EntityWrapper<BokewenzhangEntity>ew=newEntityWrapper<BokewenzhangEntity>();params.put("sort","id");params.put("order","desc");PageUtilspage=bokewenzhangService.queryPage(params,MPUtil.sort(MPUtil.between(MPUtil.likeOrEq(ew,bokewenzhang),params),params));List<BokewenzhangEntity>pageList=(List<BokewenzhangEntity>)page.getList();if(bokewenzhangList.size()<limit){inttoAddNum=(limit-bokewenzhangList.size())<=pageList.size()?(limit-bokewenzhangList.size()):pageList.size();for(BokewenzhangEntityo1:pageList){booleanaddFlag=true;for(BokewenzhangEntityo2:bokewenzhangList){if(o1.getId().intValue()==o2.getId().intValue()){addFlag=false;break;}}if(addFlag){bokewenzhangList.add(o1);if(--toAddNum==0)break;}}}elseif(bokewenzhangList.size()>limit){bokewenzhangList=bokewenzhangList.subList(0,limit);}page.setList(bokewenzhangList);returnR.ok().put("data",page);}5.5论坛交流用户登录后点击“论坛”，进入到论坛界面如图5.9所示：图5.9用户论坛界面图在用户论坛界面下滑可看到更多帖子也可在顶部按照标题进行搜索，点击“某某交流帖子”进入该帖子的详情介绍界面，进行评论可在帖子下方进行，该帖子详情界面如图5.10所示：图5.10某某帖子详情图实现该功能的关键代码如下：varcrossuserid;//更新跨表属性varcrossrefid;varcrossoptnum;if(this.cross){varstatusColumnName=uni.getStorageSync('statusColumnName');varstatusColumnValue=uni.getStorageSync('statusColumnValue');if(statusColumnName!=''){if(!obj){obj=uni.getStorageSync('crossObj');}if(!statusColumnName.startsWith("[")){for(varoinobj){if(o==statusColumnName){obj[o]=statusColumnValue;}}5.6学习路线用户登录后点击“我的”之后点击学习线路栏目可以看到自己发布的学习线路记录，用于记录自己在阅读学习过程中的困难点，进入学习线路界面过程如图5.11所示：图5.11“我的”学习线路图进入学习线路界面后可以进行新增，删除，查询，修改等操作，学习线路具体界面如图5.12所示：图5.12学习线路界面图实现该功能的关键代码如下：//搜索asyncsearch(){this.mescroll.num=1letsearchForm={page:this.mescroll.num,limit:this.mescroll.size}if(this.searchForm.biaoti){searchForm['biaoti']='%'+this.searchForm.biaoti+'%'}if(this.searchForm.xingming){searchForm['xingming']='%'+this.searchForm.xingming+'%'}letres={};if(this.userid){res=awaitthis.$api.page(`xuexixianlu`,searchForm);}else{res=awaitthis.$api.list(`xuexixianlu`,searchForm);}//如果是第一页数据置空if(this.mescroll.num==1)this.list=[];this.list=this.list.concat(res.data.list);letlength=Math.ceil(this.list.length/6)letarr=[];for(leti=0;i<length;i++){arr[i]=this.list.slice(i*6,(i+1)*6)}this.lists=arrif(res.data.list.length==0)this.hasNext=false;this.mescroll.endSuccess(this.mescroll.size,this.hasNext);}}};5.7用户管理当管理员登陆后台系统的时候，在用户管理界面下面的“用户”两个字，就会出现在这个页面上，在这个页面上键入相应的用户资料，就可以通过查询来查找该用户，并且可以对该用户的帐号进行添加、删除、修改、查询等操作。用户管理界面如图5.13所示：图5.13用户管理图实现该功能的关键代码如下：//添加/修改addOrUpdateHandler(id,type){this.showFlag=false;this.addOrUpdateFlag=true;this.crossAddOrUpdateFlag=false;if(type!='info'){type='else';}this.$nextTick(()=>{this.$refs.addOrUpdate.init(id,type);});},5.8博客分类管理作为一个管理员，登陆到后台，在“博客分类”下，点击“博客分类”，然后就会出现在“博客分类”的页面上，在页面上输入博客的类别，然后就可以找到相应的博客，然后就可以对其进行管理了，当然，你也可以对其做一些简单的处理。博客分类管理界面如图5.14所示：图5.14博客分类管理界面图实现该功能的关键代码如下：//获取数据列表getDataList(){this.dataListLoading=true;letparams={page:this.pageIndex,limit:this.pageSize,sort:'id',order:'desc',}if(this.searchForm.bokefenlei!=''&&this.searchForm.bokefenlei!=undefined){params['bokefenlei']='%'+this.searchForm.bokefenlei+'%'}this.$http({url:"bokefenlei/page",method:"get",params:params}).then(({data})=>{if(data&&data.code===0){this.dataList=data.data.list;this.totalPage=data.data.total;}else{this.dataList=[];this.totalPage=0;}this.dataListLoading=false;});},5.9标签管理管理员登录后台，在“标签”管理栏中选择“标签”按钮，然后就会出现在“标签”的管理页面上，在上面输入相应的标签信息，就可以找到相应的标签，也可以对这些标签进行简单的添加、删除、修改、查看等操作。标签管理界面如图5.15所示：图5.15标签管理界面图实现该功能的关键代码如下：deleteHandler(id){varids=id?[Number(id)]:this.dataListSelections.map(item=>{returnNumber(item.id);});this.$confirm(`确定进行[${id?"删除":"批量删除"}]操作?`,"提示",{}).then(({data})=>{if(data&&data.code===0){this.$message({message:"操作成功",type:"success",duration:1500,onClose:()=>{this.search();}});}else{this.$message.error(data.msg);}});});},5.10博客文章管理当管理员登录后台时，在“博客文章”管理界面中，在“博客文章”栏中，键入相应的博客文章，就可以通过搜索来查找相应的博客文章，并可以对其进行添加，查看评论，删除评论，删除评论，批量删除。博客文章管理界面如图5.16所示：图5.16博客文章管理界面图实现该功能的关键代码如下：//查看评论disscussListHandler(id,type){this.$router.push({path:'/discussbokewenzhang',query:{refid:id}});},//下载download(file){window.open(`${file}`)},//删除deleteHandler(id){varids=id?[Number(id)]:this.dataListSelections.map(item=>{returnNumber(item.id);});5.11学习线路管理以管理员身份登录到后台系统中，选择学习线路管理下的“学习线路”按钮，进入学习线路列表界面，输入标题、姓名，选择查询找到学习线路，还可以对学习线路进行删除、批量删除等操作。学习线路界面如图5.17所示：图5.17学习线路管理界面图实现该功能的关键代码如下：//当前页currentChangeHandle(val){this.pageIndex=val;this.getDataList();},//多选selectionChangeHandler(val){if(type!='info'){type='else';}this.$nextTick(()=>{this.$refs.addOrUpdate.init(id,type);5.12论坛管理管理员登录后台系统时，选择论坛管理界面下的“论坛”，进入论坛列表界面，输入对应帖子的信息可以点击查询找到对应帖子，还可以对帖子进行查看评论、删除、批量删除等操作。论坛管理界面如图5.18所示：图5.18论坛管理界面图实现该功能的关键代码如下：varcrossuserid;varcrossrefid;varcrossoptnum;if(this.type=='cross'){varstatusColumnName=this.$storage.get('statusColumnName');varstatusColumnValue=this.$storage.get('statusColumnValue');if(statusColumnName!=''){varobj=this.$storage.getObj('crossObj');if(statusColumnName&&!statusColumnName.startsWith("[")){for(varoinobj){if(o==statusColumnName){obj[o]=statusColumnValue;}}vartable=this.$storage.get('crossTable');this.$http({url:`${table}/update`,method:"post",data:obj}).then(({data})=>{});}else{crossuserid=this.$storage.get('userid');crossrefid=obj['id'];crossoptnum=this.$storage.get('statusColumnName');crossoptnum=crossoptnum.replace(/\[/,"").replace(/\]/,"");}}}5.13系统管理管理员登录后台系统时，选择系统管理系统下的“公告信息”，进入公告信息列表界面，输入对应公告的信息可以选择查询到对应公告，还可以对公告信息进行修改、删除、批量删除等操作。公告信息管理界面如图5.19所示：图5.19公告信息管理界面图实现该功能的关键代码如下：this.$http({url:"news/page",method:"get",params:params}).then(({data})=>{if(data&&data.code===0){if(data.data.total>=crossoptnum){this.$message.error(this.$storage.get('tips'));returnfalse;}else{this.$http({url:`news/${!this.ruleForm.id?"save":"update"}`,method:"post",data:this.ruleForm}).then(({data})=>{if(data&&data.code===0){this.$message({message:"操作成功",type:"success",duration:1500,onClose:()=>{this.parent.showFlag=true;this.parent.addOrUpdateFlag=false;this.parent.newsCrossAddOrUpdateFlag=false;this.parent.search();this.parent.contentStyleChange();}});}else{this.$message.error(data.msg);}});第6章系统测试在各个功能模块和接受操作界面设计完毕之后，在正式使用之前，还需要对其进行一系列的功能和性能的测试，从而确保系统能够可靠的运行，一旦发现了问题，就能够对其进行修复和改进。本文使用黑盒测试，黑盒测试简单来说就是一种理想情况下对于系统各个功能的检测，在进行黑盒测试的时候，测试人员要以用户的观点为出发点，利用对应的功能测试用例，对比实际测试获得的反馈和用户的预期，这对于发现存在的问题和及时的反馈是很有帮助的。在黑箱试验中，采用了位移法、边界值法。由于黑箱试验中经常出现“故障”，且误差出现频率高且频率高，本项目拟采用边界值分析法，选取边界值进行试验，从而直观、准确地判断出输入、输出范围内的系统是否稳定、可靠。6.1测试步骤同开发一样，在试点期间应该逐步实行。每个步骤都应当是前一个步骤的延续。一般系统都具有面向的使用用户以及需要进行管理的人员，而每一个对象下面都有不同的功能模块，所以测试时对于面向的对象以及对象下的功能模块进行划分测试：1.对系统进行简单划分，整理划分系统面向的各类用户以及各类用户的对应功能模块。2.测试对应功能模块能否达到预期效果，以及找出功能中的bug。3.对发现缺陷的程序进行标记并记录而后进行修复。6.2测试用例6.2.1登录测试用例用户端测试用例依据用户要求进行设计，采用黑盒测试的技术，部分的测试结果如表6.1所示。表6.1登录测试用例表测试编号测试目的操作步骤预期结果实际结果001登录测试输入正确的用户名和密码登录成功登录成功002登录测试输入错误的用户名登录失败登录失败003登录测试输入错误的的密码登录失败登录失败用户端测试登录操作图如图6.1所示：图6.1用户登录测试图6.2.2博客信息管理测试用例管理端在运行时要满足浏览器的运行需求，比如添加博客信息测试、修改博客信息测试、删除博客信息测试等。本节根据管理端各模块进行测试，因考虑到本文篇幅有限，这里代表性的部分测试用例，如表6.2所示。表6.2文章信息管理测试用例表测试编号测试目的操作步骤预期结果实际结果001添加博客信息测试在添加页面输入博客信息，点击确认按钮添加成功添加成功002修改博客信息测试在修改页面修改博客信息，点击确认按钮修改成功修改成功003删除博客信息测试在管理博客信息页面，点击某一用户的删除按钮删除成功删除成功004查询博客信息测试在管理博客信息页面查询输入框输入要查询的用户名字，点击查询按钮查询成功查询成功管理端删除博客信息测试操作图如图6.2所示：图6.2删除博客信息测试图6.2.3用户收藏点赞博客测试用例用户端测试用例依据用户要求进行设计，采用黑盒测试的技术，部分的测试结果如表6.3所示。表6.3收藏点赞用例表测试编号测试目的操作步骤预期结果实际结果001收藏测试点击收藏收藏成功收藏成功002点赞测试点击点赞点赞成功点赞成功003点踩测试点击点踩点踩成功点踩成功收藏操作图如图6.3所示：图6.3收藏博客测