【《基于Vue的JavaScript技术学习博客系统的设计与实现》10000字】

第PAGEVI页基于Vue的JavaScript技术学习博客系统的设计与实现目录TOC\o"1-3"\h\u191041绪论 3253681.1研究背景 3266131.2研究目的与意义 3277152技术分析 3280592.1Vue.js框架 3107512.2SpringBoot框架 4127953系统需求分析 4100433.1可行性分析 445603.1.1技术可行性 4238763.1.2经济可行性 4232353.1.3操作可行性 4323563.2系统需求分析 5194773.2.1后台管理 5211083.2.2前端展示 5259684系统总体设计 673934.1系统结构设计 6156944.2系统模块设计 6327594.2.1用户管理模块 691184.2.2博客管理模块 9121464.2.3分类管理模块 11149904.2.4图片管理模块 1352804.2.5留言管理模块 14160354.4系统数据库设计 17226905系统实现 21165125.1用户管理实现 22116515.2博客管理实现 23261325.3分类管理实现 26136345.4图片管理实现 28138305.5留言管理实现 3076876系统测试 31183166.1测试用例 3113016.2系统性能测试 37169276.3系统安全性测试 37323166.4测试结论 3713224结论 3819405参考文献 38摘要随着互联网的普及，网络成为了人们获取信息的主要通道，系统的设计就是为了给人们提供充分表达自我的平台。本文对JavaScript技术学习博客系统的开发进行描述。经过前期充分调研，系统决定使用前后端分离技术，并确定了需求，最终完成了所有的功能开发。本系统完整的实现需求中的所有功能，并且简洁大方，操作方便，满足了人们在互联网中分享技术的需求，同时，也给人们增加了新的学习平台。关键字：Vue，SpringBoot，博客，前后端分离1绪论1.1研究背景当今时代是个人的时代，每个人都能在公众平台上发表自己的想法，分享自己的经验，人们也经常利用对应的博客平台用来学习，通过开放式的平台，人们可以更加方便的进行交流学习，比如微博、Facebook、公众号、知乎等各大平台[2]，博客不仅只有文本的形式，视频Vlog的出现，让那些即使没有写作的才能大众也能通过视频的形式发表自己的想法，国内目前最流行的就是抖音、快手等视频软件，还有具有独特风格的哔哩哔哩。同时，国内正慢慢走向知识付费时代，你可以用自己的知识获得收益，微信公众号中的付费文章，知乎的付费咨询等各大平台都有自己相应的知识付费功能，这让更多的大学生或者各界的专业人士去加入博客网站，利用自己闲暇之余发表一些专业的文章和视频。1.2研究目的与意义现如今是一个知识交融的时代，只要你想学习，你能在网上找到很多的学习资源，因为各大平台的内容都不局限于某种领域下，当我们想搜索某一领域下的资料时，我们会获取到海量的信息，其中包含了许多无用的信息，这样带来的问题就是会占用我们大量的时间和精力来筛选信息。所以建立一个自己的博客系统，用于发表某一领域的知识，可以让自己的知识更加体系化，这样也有利于人们搜索，直接在垂直领域博客网站去搜索即可[1]。2技术分析2.1Vue.js框架Vue是目前很流行的一款前端框架，其有大量的开发者社区，如果遇到问题，可以通过社区来快速的解决问题[3]。目前各大公司都在使用Vue开源框架，其特点在于语法简单，可以快速上手。2.2SpringBoot框架SpringBoot的主要作用就是简化Spring配置，使用它使得jar依赖管理以及应用编译和部署更为简单。

在SpringBoot[13][14]中一个可执行的jar即为一个服务，每个服务可以在自己的容器中运行，所以SpringBoot非常符合微服务的概念。还有自动配置，无需XML，所以使用SpringBoot可以为我们省去很多配置的麻烦[7][8]。3系统需求分析3.1可行性分析3.1.1技术可行性本系统的模式是前后端分离，所需前端技术为前端框架Vue.js、路由框架Vue-router、全局状态管理Vuex，前端UI框架Element，前端HTTP框架Axios，图表框架Echarts；后端使用MVC[5]框架SpringBoot，微服务框架SpringCloud，文档生产工具Swagger-UI，分布式缓存Redis，容器化部署Docker。该模式与传统的开发模式相比更具有优势，因为前后端分离开发，让排错更加方便，不像之前前后端具有很大的依赖性，所用技术都有强大的社区，开发过程中所遇问题，均可在开发者社区中找到相应的答案，本系统能在现有的技术下完成，所以从技术的层面是可行的[9][10]。3.1.2经济可行性系统使用的技术和开发工具均为开源，技术成本为零，硬件需要一台计算机，目前已经实现，无需购买，开发完成后，需要租用服务器，决定租用阿里云学生服务器，价格优惠，所以在经济上也是可行的。3.1.3操作可行性系统采用B/S架构，管理员通过浏览器访问和管理，整体设计美观，导航明确，来去只如，减少等待，给用户良好的体验，后台管理做到实时监控、统计等功能，操作简便，让管理员能够轻易上手，本系统在操作上也是可行的。3.2系统需求分析本系统分为两个部分，包括门户网站展示与后台运营，后台有发表文章、文章分类、文章标签、添加图片、管理用户、评论等模块。网站界面支持登录注册，查看图文消息，根据标签分类筛选文章，根据关键字搜索，可在相应文章下进行评论，对应需求描述如下。3.2.1后台管理后台管理界面用来控制文章以怎样的形式在前台展示，可以对文章、图片素材、用户进行管理，以及对网站的配置，其中最重要的就是对文章的管理。文章管理是系统的核心，添加文章时需要输入标题、文章简介、文章分类、推荐等级，以及内容，文章内容支持常见的格式，可以插入图片，图片在图片管理模块中选取，文章编辑也同样支持以上功能，删除文章时需要从数据库中直接删除，支持按照标签对文章进行分类，在标签管理界面设置，标签管理是给文件分类的重要依据，标签管理模块支持对标签的增删改查。素材管理中主要涉及的是图片，可在本地文件中添加图片至系统中。在用户模块中，能查看并修改个人信息，以及删除操作，评论模块默认显示所有评论，可根据条件进行搜索查询，允许管理员删除评论。3.2.2前端展示前端展示模块与后端相对应，导航栏中显示所有功能，支持搜索功能，头像图标，根据文章推荐级别在首页的相应位置展示文章，通过管理员的设置，可以设置当前文章是否可以进行评论，评论支持表情和文字的形式。分类模块可以展示不同类别的文章，某一类别文章默认根据发表日期进行排序，专题模块中每个专题都有专题封面，点击专题将展示专题文章列表，留言板支持已登录的用户留言。门户网站设计应当做到：操作清晰明确、便捷优雅，设计统一稳定、美观大方。4系统总体设计4.1系统结构设计系统所有模块如图4.1所示。图4.1系统结构图4.2系统模块设计本系统包括五个模块：用户管理模块、博客管理模块、分类管理模块、图片管理模块、留言模块。下面将对各个功能进行设计。4.2.1用户管理模块该模块主要是对用户进行管理，具体功能如图4.2所示。图4.2用户管理图在门户网站注册的用户，将保存在用户表中，管理员点击用户管理菜单，将进入管理界面，具体功能描述如表4-1所示。表4-1用户管理功能设计表名称说明用户名名称限制在50字符以内，并且具有唯一性，不可重复查找通过名称查询，支持模糊查询，并且将查询的结果显示列表中。头像前台以合理尺寸显示用户头像昵称用户的网名，非必填用户标签来源：标签表中的数据登录次数后台统计该IP登录的次数登录IP记录该计算机的唯一IP操作系统用户操作系统编辑打开弹框,可录入需要编辑的内容，保存成功后将更新列表内容重置密码提示是否将用户密码初始化，二次确认后，重置用户密码。删除点击按钮后，提示是否删除该用户，二次确认后删除该用户4.2.2博客管理模块该模块是本系统的核心，该模块的具体功能如图4.3所示。图4.3博客管理图新增文章支持添加封面，给文章分类，给文章标记标签，设置推荐等级，以及是否开启评论选项，系统支持Markdown编辑模式。编辑文章编辑文章功能支持修改文章封面、标题、简介，以及修改文章分类、标签、等级、是否开启评论选项，以及文章主题内容。查询文章根据文章标题名称、分类名、标签名、推荐等级进行查找相应文章。删除文章支持删除单个文章，以及批量删除选中的文章。导出文章当文章需要保存在本地时，可导出相应文章，导出格式为Markdown格式。博客管理分为文章管理，分类管理，标签管理，推荐管理，其中文章管理具体功能描述如表4-2所示。表4-2文章管理功能设计表名称说明博客名称输入名称，所属检索板块分类名称来源于管理员在后台添加的分类标签名称属于标签表中的数据推荐等级选择等级：一级、二级、三级、四级查找根据以上条件来查找结果添加博客打开新增页面，输入内容，添加成功后提示成功弹框删除点击按钮，可删除文章，删除成功后显示成功提示批量删除前端需选择复选框，选中多个文章，进行批量删除操作标题图展示封面图片，来源于图片列表中的数据标题需具有意义，支持中英文等作者博主需输入该文章的原创作者名称分类文章的所属分类标签管理员手动录入的标签推荐等级等级:一级推荐，二级推荐，三级推荐，四级推荐点击数后台监听该文章的点击次数编辑打开编辑弹框，输入需修改的内容，更新数据，自动刷新列表，删除二次确认删除后，删除该文章，删除成功或者失败将显示提示框博客管理模块界面支持添加和编辑，其中编辑功能与添加功能可共用页面，具体功能描述如表4-3所示。表4-3添加博客功能设计表名称说明标题标题限制在50字符以内，必填标题图可通过控件上传本地图片，支持拖拽上传简介简介限制在100字符以内，非必填分类列表数据来源于分类列表模块标签标签列表数据源，来自标签推荐等级与文章管理一致是否原创选项：原创，转载文章类型选项：博客，推广文章评论选项：开启，是否发布选项：发布，下架内容支持文字排版、样式设置、插入图片，使用Markdown控件4.2.3分类管理模块分类管理主要是对文章进行分类管理，其功能如图4.5所示。图4.5文章分类管理图分类管理可以对博客进行分类，创建文章的时候可以选择，使文章的结构更加清晰，分类管理的具体功能描述如表4-4所示。表4-4分类功能设计表名称说明分类名后台首页和门户网站将根据分类名区分文章查找可根据名称查找分类列表添加点击按钮，打开添加弹框，可输入分类名和介绍，以及排序创建时间展示该类别的创建时间状态展示状态：正常，异常置顶将该类别移动至列表顶部，前台展示排序编辑打开编辑弹框，提交编辑后，动态更新当前页面删除点击按钮删除类别，需要判断该类别下是否有文章，如有文章则提示先删除文章，再删除该类别文章最终需要展示在门户网站，展示要求如表4-5所示。表4-5网站博客展示设计表名称说明文章标题标题需要加粗，展示在文章上方，所属文章展示板块，该模块需要做到美观大方。缩览图在文章标题下方显示缩览图文章简介展示在缩览图右方合理位置，文章标题下方文章信息点击文章标题，进入文章详情页面，展示文章作者、文章标签、浏览数、点赞数，点赞数和浏览数实时更新。

4.2.4图片管理模块图片管理模块是本系统的素材库，文章所用图片素材都来源于这里，想要使用素材，需要先添加图片分类，并且需要选择合适的封面，以及标题和简介，具体功能如图4.4图片分类。图4.4图片分类管理图系统所有的图片素材都来自该模块中，添加图片前需要先选择图片类别，然后再该类别下添加图片，图片管理模块具体功能描述如表4-6所示。表4-6图片管理功能设计表名称说明图片分类名称图片名称限制在50字符以内，必填，所属检索板块。查找根据图片分类名称关键字查找相应的图片列表分类封面图图片类别的封面图，若图片库暂无图片，封面图可为空，所属图片类别列表板块。分类名展示图片类别名称排序图片类别的排序创建时间展示该图片类别的创建时的日期更新时间为图片库最后更新的日期图片列表显示该类别下的图片素材列表，可对图片进行管理，所属操作板块。置顶点击按钮置顶该类别编辑可修改类别的封面、标题，以及类别排序删除删除该图片类别，如果类别下面有图片，提示请删除该类别下的图片。4.2.5留言管理模块留言管理模块下的留言数据来源于两个功能模块，是在文章下的评论和在留言板的内容。管理员可根据评论名、名称、评论类型、评论来源进行查找，可删除留言，支持批量删除留言。留言管理的具体功能描述如表4-7所示。表4-7留言管理功能设计表名称说明评论内容内容在1024字符以内，必填，需登录评论人录入评论人的名称评论类型选项：评论、点赞评论来源选项：博客、关于我、留言板查找点击按钮根据条件查找类别列表头像展示该评论人的头像，所属评论列表板块评论人展示评论人的名称被评论人展示被评论人的名称类型留言类型：评论、点赞内容评论内容以对话的形式展示创建时间展示该条留言的当前时间删除可删除该条评论，管理员可删除所有评论，普通权限只能删除自己的评论。批量删除选择需要批量删除的评论，未选中复选框，将禁止点击批量删除。门户网站中文章评论功能设计如表4-8所示。表4-8网站评论功能设计表名称说明留言内容可输入评论内容，必填，所属评论板块。取消评论点击按钮，将清空评论内容。发送评论需登录后才能评论，，未登录则跳转至登录页面。展示需要显示评论人的头像、名称、时间、内容。回复弹出回复弹框（需登录），所属回复板块回复内容可输入回复内容，最多输入1024个字符取消评论点击按钮，将清空评论内容。发表评论需登录后才能评论，未登录则跳转至登录页面。删除评论作者有权限删除本人留言，不能删除非本人的留言。导航菜单界面可以帮助博主快速管理系统，博主登录后展示导航菜单，系统所有菜单如表4-9所示。表4-9系统菜单设计表名称说明首页提供简单的数据统计功能，让博主对当前系统的情况有初步了解。博客管理主要是为博主管理文章而设置的一系列流程，包括查找，添加，删除，编辑。用户管理管理系统的用户，包括增删改查。消息管理记录留言信息。图片管理管理图片素材，分类，封面。权限管理管理员和普通用户的权限设置。系统后台需要根据图表的形式来展现各种数据，系统首页面板的具体功能设计如表4-10所示。表4-10首页展示面板设计表名称类型说明今日IP数图文统计当日在网站中活跃的IP数，并展示用户数图文后台统计网站的总用户数评论数图文统计并展示网站的总评论数文章数图文记录发表的所有文章数量文章分类情况饼图根据项目类别，统计当前文章分类数量，以及各类别的占比，鼠标移动到相应图标，展示相应数据。标签分类情况饼图根据标签类别，统计当前标签数量，以及各标签的占比

4.4系统数据库设计数据库设计围绕博客对象展开，通过对分类、标签、图片、留言等各个功能模块的实体进行分析，从而确定实体之间的相互关系，构建数据库各个表格[6]。以上分析，可得到数据库实体关系图E-R如图4.6所示。图4.6数据库E-R图根据表关系结构，结合各个模块的功能，分析数据库表属性的构成，完成数据库表的创建，下面是对各个表格的详细设计。博客表结构博客表用于存放文章的相关信息，如标题、简介、内容、标签uid、标题图片等，如表4-11所示。表4-11博客表结构字段名数据类型非空注释uidvarchar(32)是唯一uidtitlevarchar(200)是标题summaryvarchar(200)简介contentlongtext内容tag_uidvarchar(255)标签uidclick_countint(11)点击数file_uidvarchar(255)标题图片statustinyint(1)是uid状态create_timetimestamp是创建时间update_timetimestamp是更新时间admin_uidvarchar(32)管理员is_originalvarchar(1)uidauthorvarchar(255)是否原创（0：不是1：是）articles_partvarchar(255)作者blog_sortvarchar(32)文章出处leveltinyint(1)分类UIDis_publishvarchar(1)推荐等级（0：正常）sortint(11)是否发布：0：否，1：是start_comtinyint(1)是排序字段博客分类表结构分类表用来存储文章类别，管理员发布文章时，需要选择的类别就是在该表中获取的数据，如表4-12所示。表4-12博客分类表结构字段名数据类型非空注释uidvarchar(32)是唯一uidsort_namevarchar(255)内容contentvarchar(255)简介create_timetimestamp是创建时间update_timetimestamp是更新时间statustinyint(1)是状态sortint(11)排序字段click_countint(11)点击次数博客标签表结构标签表用于存放管理员为文章命名的标签，具体描述如表4-13所示。表4-13博客标签表结构字段名数据类型非空注释uidvarchar(32)是唯一uidcontentvarchar(255)标签内容create_timetimestamp是创建时间update_timetimestamp是更新时间statustinyint(1)是状态sortint(11)排序字段click_countint(11)标签简介图片表结构博客图片表用于存放图片素材的相关信息，如图片uid、图片名、创建时间、更新时间、分类uid等，如表4-14所示。表4-14图片表结构字段名数据类型非空注释uidvarchar(32)是唯一uidfile_uidvarchar(255)图片uidpic_namevarchar(255)图片名picture_sort_uidvarchar(32)分类uidstatustinyint(1)是状态create_timetimestamp是创建时间update_timetimestamp是更新时间图片分类表结构图片分类表用于存放图片分类的相关信息，如唯一uid、分类图片uid、分类名、状态、创建时间、更新时间，如表4-15所示。表4-15图片分类表结构字段名数据类型非空注释uidvarchar(32)是唯一uidfile_uidvarchar(255)图片uidpic_namevarchar(255)名称statustinyint(1)是状态create_timetimestamp是创建时间update_timetimestamp是更新时间用户表结构该表用于记录门户网站中用户的个人信息，以及各种状态，如表4-16所示。表4-16用户表结构字段名数据类型非空注释uidvarchar(32)是唯一uiduser_namevarchar(255)是用户名pass_wordvarchar(32)是密码gendertinyint(1)性别(1:男2:女)avatarvarchar(100)个人头像emailvarchar(60)邮箱mobilevarchar(50)手机birthdaydate出生年月日user_tagtinyint(1)是标签：0:普通用户，1:管理员，2:博主留言表结构用户表主要存储数据，其中包括留言者的个人信息，以及用户权限等，如表4-17所示。表4-17留言表结构字段名数据类型非空注释uidvarchar(32)是唯一uiduser_uidvarchar(32)用户uidto_uidvarchar(32)回复某条评论的uidto_user_uidvarchar(32)回复某个人的uidcontentvarchar(20)评论内容blog_uidvarchar(32)uidstatustinyint(1)是状态create_timeTimestamp是创建时间update_timetimestamp是更新时间sourcevarchar(255)是评论来源typetinyint(1)是评论类型1:点赞0:评论5系统实现本章主要从系统的开发环境、前后端功能的具体实现、部分功能界面以及系统测试等方面进行具体分析。系统结构分为5个包，其中有eureka，sms：邮件和短信发送，picture：图片服务，用于图片上传和下载；web：提供web端API接口服务，admin:提供admin端API接口服务；utils中存放的是常用工具类，commons则是公共模块，主要用于存放Entity实体类、Feign远程调用接口、以及公共config配置。业务数据存储使用mysql，缓存数据存储使用redis，数据库配置信息在admin包中的application.yml文件中进行配置，数据库查询语句保存在mapper目录中，系统接口集中在admin目录下的resetapi文件夹内，通过注解的方式暴露接口。系统前端使用vue+ElementUi进行开发，通过Axios请求后端接口，Axios是一个基于promise的HTTP库，可以用在浏览器和node.js中，前端工程是VueCli创建的，其目录结构分为以下几种：api主要是AJAX请求集合，assets存放的是项目静态资源，components是业务组件，一些公共组件和可以封装的功能，都放在该文件夹下，views是页面文件，这里是前端的业务核心，保存了所有的前端页面[11][12]。5.1用户管理实现该模块具体开发如下：前端使用input输入框接受查询参数，点击查询，返回用户列表，并且通过表格组件el-table将用户数据渲染到页面中，允许管理员修改个人信息，用户管理界面如图5.1.1所示。图5.1.1用户管理图管理员可操作用户列表，点击编辑按钮则打开编辑弹框，默认显示该用户的头像、用户名、邮箱、评论状态、用户标签、性别等信息，其中编辑头像功能使用了图片上传控件，点击确认则提交编辑，将调用user/edit接口，该接口使用eidit方法对用户执行编辑操作，通过editUser方法更新数据库信息，编辑弹框如图5.1.2所示。图5.1.2用户编辑图点击删除按钮后，提示“弹框此操作将把用户删除,是否继续?”，点击确认则将该用户的id作为入参调用user/delete接口，该接口调用delete方法，通过用户id删除用户，使用sql语句在数据库中删除该用户，删除操作如图5.1.3所示。图5.1.3删除操作图5.2博客管理实现博客管理模块的接口在adminr/restapi目录下的BlogRestApi文件中，通过Swagger暴露接口文档。获取列表的入参为名称、分类名、标签名等，点击查找按钮将调用接口blog/getList，并且将获取的博客列表通过表格组件el-table渲染到页面中，列表界面入图5.2.1所示。图5.2.1列表图点击添加将跳转至添加页面，其中标题、分类、推荐等级、是否发布、是否原创、网站评论、内容为必填内容，点击确定将以上输入内容作为入参，并且调用接口blog/add，将内容更新到博客表t_blog中，添加界面如图5.2.2所示。图5.2.2添加博客图点击本地上传，则打开上传博客文件弹框，目前支持Markdown文件批量上传，步骤是先提交所有图片，再提交全部的博客文件，上传功能使用了前端上传组件Upload，点击提交到服务器，则调用接口blog/uploadLocalBlog，具体界面如图5.2.3所示。图5.2.3上传博客管理员可操作博客列表，点击编辑按钮则打开编辑弹框，默认显示博客的信息，其中博客所有内容都可修改，点击确认则提交编辑，将调用blog/edit接口，该接口使用eidit方法对用户执行编辑操作，并通过sql语句更新数据库中博客表t_blog的信息，编辑弹框如图5.2.4所示。图5.2.4编辑博客图支持批量删除博客，前端通过对el-table中列数据el-table-column的进行配置type=selection，使得该博客列表实现复选操作，将选中的博客列表作为入参调用blog/deleteBatch接口，二次确认删除后将使用sql语句在t_blog表中删除该列表，并更新博客列表，删除页面如图5.2.5所示。图5.2.5删除博客

5.3分类管理实现博客分类管理模块的接口在adminr/restapi目录下的BlogSortRestApi文件中，通过Swagger暴露接口文档。进入分类页面，前端将调用接口blogSort/getList自动获取所有分类列表，入参为分类名，点击查找按钮，执行相应sql命令从表t_blog_sort中获取相应分类列表，分类列表界面如图5.3.1所示。图5.3.1博客分类列表管理员可对类别进行操作，点击添加分类按钮将出现添加弹框，分类名和排序为必填，点击确认按钮，将调用blogSort/add接口，通过执行sql语句，将这条数据添加到t_blog_sort博客分类表中，具体界面如图5.3.2所示。图5.3.2增加分类门户网站主要界面如图5.3.3所示，其中该网站的首页有导航链接、轮播图，支持搜索文章，如图5.3.4所示图5.3.3网站分类界面图5.3.4网站首页

5.4图片管理实现图片分类管理模块的接口在adminr/restapi目录下的PictureSortRestApi文件中，通过Swagger暴露接口文档，前端默认调用接口获取所有图片分类列表，入参为图片分类名，点击查找调用接口pictureSort/getList获取相应列表，通过sql查找t_picture_sort表，具体界面入图5.4.1所示。图5.4.1图片管理界面点击添加图片，显示弹框，入参为封面、标题、排序，点击确认将调用接口pictureSort/add，并将该条数据新增至表t_picture_sort中。编辑图片接口为pictureSort/edit，点击编辑按钮将调用该接口，其入参与新增的一致，点击确认后，将这条数据更新至表t_picture_sort中，如图5.4.2所示。图5.4.2添加图片分类删除图片接口为pictureSort/delete，入参为图片类别id，通过调用接口执行相应sql，在数据库中t_picture_sort表中删除该条数据。每个图片分类下都有一个图片列表按钮，点击图片列表，将调用接口picture/getList,入参为图片分类id，获取该分类下的所有图片，如图5.4.3所示。图5.4.3图片列表点击添加图片，显示上传图片弹框，前端使用了Upload上传控件，点击上传将调用picture/getList接口，将图片数据添加到t_picture表中，相应界面如图5.4.4所示。图5.4.4增加图片弹框前端通过对el-table中列数据el-table-column的进行配置type=selection，使得该图片列表实现复选操作，将选中的图片列表作为入参调用picture/delete接口，点击删除选中将执行相应sql命令，删除表t_picture中的数据。

5.5留言管理实现留言管理模块的接口在adminr/restapi目录下的CommentRestApi文件中，通过Swagger暴露接口文档，其中获取评论列表接口为comment/getList，入参为评论名、用户名、评论来源，编辑评论接口为comment/edit，删除评论接口为comment/delete，通过评论id为入参删除该条数据，留言管理界面如图5.5.1所示。图5.5.1用户留言列表用户留言板如图5.5.2所示。图5.5.2留言板6系统测试每个软件开发完成后都需要进行测试，主要测试功能的完整性、正确性，以及确认软件符合需求。本次测试不考虑源代码，采用黑盒测试进行测试[3]。测试有三类：功能测试、性能测试、安全测试，下面将对主要功能进行说明。6.1测试用例系统功能测试用例包括前提条件，输入测试用例，对正确和失败的输入都有相应的输出，主要功能有登录，普通用户可登录门户网站，管理员可登录后台管理页面，其中所用的测试用例表如表6-1所示。表6-1登录功能测试用例名称登录功能测试用例IDlogin用例描述在相应的输入框里输入自己的账号密码，系统会将输入的账号密码传入到后台进行判断，系统会根据判断的内容输出相应的判断结果。测试方案输入正确的账号密码后跳转至首页，输入错误则弹出警示框。输入数据数据1：admin/123456数据2：admin/admin预期结果结果1：登陆成功，跳转至首页结果2：将显示“用户名或密码错误”；当输入正确账号和密码时的测试结果如图6.1所示。图6.1登录测试当用户输入的账号密码错误时，测试结果如图6.2所示。图6.2登录测试结果当管理员登录成功时，测试结果如图6.3所示。图6.3后台首页当管理员登录失败时，测试结果如图6.4所示。6.4登录失败页面博客管理功能测试如表6-2所示。表6-2博客管理功能测试用例名称博客管理功能测试用例IDBlog用例描述管理员输入博客内容，点击确定，系统会校验输入内容是否合法，不合法，将提示相关信息，合法则更新至数据库。测试方案输入合法的内容后更新博客列表，输入错误则给出提示。输入数据数据1：测试博客/前端框架/javaScript/发布/原创/评论/内容数据2：测试博客/内容预期结果结果1：发布成功，更新博客列表结果2：显示某些数据不合法当输入合法的数据时的测试结果如图6.5所示。图6.5插入成功测试图输入不合法数据时，测试结果如图6.6所示。图6.6录入不合法数据测试图图片分类管理功能测试如表6-3所示。表6-3图片分类管理功能测试用例名称图片分类管理功能测试用例IDPicture用例描述管理员输入图片分类信息，点击确定，系统会校验输入内容是否合法，不合法，将提示相关信息，合法则更新至数据库。测试方案输入合法的内容后更新图片分类列表，输入错误则给出提示。输入数据数据1：测试分类/3数据2：空预期结果结果1：添加成功，更新图片列表结果2：显示某些数据不合法当输入合法的数据时的测试结果如图6.7所示。图6.7录入合法数据测试图留言管理功能测试如表6-4所示。表6-4博客管理功能测试用例名称留言管理功能测试用例IDComment用例描述管理员选中相应留言，点击确定，系统会校验输入内容是否合法，不合法，将提示相关信息，合法则删除留言。测试方案管理员成功删除留言，自动更新列表，删除错误则给出提示。输入数据数据1：删除1、2两条数据数据2：不选择数据预期结果结果1：删除成功，更新博客列表结果2：提示错误信息当管理员成功删除数据时测试结果如图6.8所示。图6.8删除成功测试图当管理员删除数据失败时测试结果如图6.9所示。图6.9删除失败测试图

6.2系统性能测试系统性能测试是检测系统好坏的一个重要标准，系统性能直接影响到用户的体验，所以系统性能测试尤其重要。由于系统使用了前后端分离系统，前端UI框架使用了Element-UI，其界面简洁，交互体验十分流畅，系统各个功能的响应时间小于3秒。6.3系统安全性测试对系统进行了暴力测试，直接通过url暴力访问需要相应权限的页面，则将重定向到主页面，必须经过鉴权后才能够成功查看页面，通过Navicat数据库软件访问用户表，查看密码，发现密码以加密的形式保存。6.4测试结论最后对本