【萌宠网的设计与实现11000字（论文）】

V1绪论1.1开发背景随着“互联网+”技术的不断发展与进步，现代网络技术，通信技术信息技术的不断地融合，伴随着网购热的兴起，，如何让传统的商场购物与“互联网+”技术相结合，发展网络购物网站也成为了新的研究热点。现在越来越多的市场都在研究以互联网技术为平台，结合大数据等新技术，借助网站开启自己的可以有效寻找受众用户的，多元化的网络商城，根据每个用户的需要，每个市场需要的用户，各类购物网站不断出现，从而有效的提升了用户的购物体验，推动了各个市场的经济发展。1.2课题研究的目的和意义随着社会的不断进步与发展以及人民生活水平的不断提高，为了缓解自身压力或者想要一个可以陪伴自己的伙伴，越来越多的人选择养一只小宠物陪着自己。为了给自己的小宠物好的环境和生活，没有养宠物经验的学生在身边没有养宠物的人时，通常会选择在网上查找资料，然而网上笼统的资料和经验分享何其之多。养宠物之后你会发现需要买的宠物用品也有不少，为了让自己的“主子”用的好一点，在琳琅满目的商品中选出自己心仪的东西也不太容易。买完东西后，那些自己买多买错的东西，自己用不到，丢了又可惜，一般都会到学校的二手群中售卖，然而二手群中买的东西很多，消息一会儿就被顶上去了，很容易好的东西卖不出去，想买的人也没看着。因此，信息化的整合网站可以为一类人群解决大部分的问题在使用传统二手物品售卖网站时，主要存在以下问题：1)物品种类太多，很多是自己不想买的2)售卖人见不到，买到的东西没有保障3)信息安全容易暴露，网上人员鱼龙混杂设计一个A学子内部使用的网站，物品买卖是自己学校的同学，经验分享都是自己身边的同学，可以让A学子们更好的沟通交流养宠物的经验，互相置换好用的二手宠物用品，对学生们的幸福感提升多少有些作用。1.3本文主要内容本文主要研究A萌宠网的设计与实现，网站主要为用宠物的A学子用户群体所服务，借助网站为用户提供定制的服务，让用户可以更好的了解其他学生养宠物的经验分享，更加方便的与其他“主子”们一起交流。通过走访调查用户对于萌宠网的不同需求，对用户的需求加以分析设计，确定文章的主要研究内容如下：首先对网站作可行性分析，从经济、运营和技术三个方面确定网站的可行性，在此基础上进行A萌宠网的需求分析，通过对网站需要解决的问题进行具体的分析，从而明确网站的功能需求及性能分析。确定需求后可以明确网站的整体框架，设计一个合理的框架有利于网站后期的可扩展性，协调网站的各个模块。其次完成网站的各个功能概要设计与详细设计，主要针对用户端和管理端，发布模块，评论模块等主要模块进行详细设计。市场上的同类的网站有些是针对论坛设计了交流网站，有些是针对二手物品设计的商品买卖网站，但这些网站的内容针对性不强。A萌宠网，在这些网站的基础上进行了整合，也增加了内容方面和用户群体的针对性。最突出的是，网站是面对广大A学子的，养宠物的人是你身边的同学，经验交流会变得非常的方便，二手物品的买卖也可以线下实现，省去了快递的费用，也避免了很多的网络诈骗，线上线下的结合，方便了A广大的养宠物的群体。最后，对网站的功能及性能进行测试。本文列举了网站的测试方法和测试案例，针对网站测试中发现的问题及时修复，保证网站的健壮性。1.45382论文组织结构本文的主要工作内容是A萌宠网的设计与实现。A萌宠网主要由前端和后端组成，文章依次从网站的需求分析，具体功能的明确，功能模块的设计，以及网站测试的详细介绍。整篇论文的结构如下：第一章绪论介绍A萌宠网的开发背景，课题研究的目的和意义以及本文章关于网站的内容介绍。第二章网站需求分析对网站的设计进行需求分析、可行性研究以及安全、性能方面的分析。第三章开发环境与技术简介主要介绍了该网站的开发环境和使用的主要技术。第四章网站概要设计根据网站的需求分析，设计了网站的总体框架，划分了各个功能模块，定义了具体功能，完成了数据库设计。第五章网站详细设计与实现在网站概要设计的基础上对系统进一步做出详细设计，还有功能的实现、运行界面和模块的关键代码。第六章网站测试与维护本章节介绍网站测试的目的，对设计完成的网站作出网站测试计划，并按照设计的步骤实现网站测试功能，发现问题及时解决问题。

2开发环境与开发技术简介2.1网站开发环境A萌宠网由前端页面端与后端两部分组成，其中前端是基于Javascript和Vue.js并以ElementUI作为样式框架开发的页面。后端是基于Node.js以Egg.js为框架开发。网站采用MySQL作为数据库，存储在服务器中为用户端和管理端提供数据。2.2Node.js简介Node.js由RyanDahl开发，是一个基于ChromeV8引擎的\t"/item/node.js/_blank"JavaScript运行环境，使用了一个\t"/item/node.js/_blank"事件驱动、非阻塞式I/O模型，让JavaScript运行在\t"/item/node.js/_blank"服务端的开发平台，它让JavaScript成为与\t"/item/node.js/_blank"PHP、\t"/item/node.js/_blank"Python、\t"/item/node.js/_blank"Perl、\t"/item/node.js/_blank"Ruby等服务端语言平起平坐的\t"/item/node.js/_blank"脚本语言。

Node.js对一些特殊用例进行优化，提供替代的\t"/item/node.js/_blank"API，使得V8在非浏览器环境下运行得更好，V8引擎执行Javascript的速度非常快，性能非常好，基于ChromeJavaScript运行时建立的平台，用于方便地搭建响应速度快、易于扩展的\t"/item/node.js/_blank"网络应用。2.3Vue.jsVue是一套用于构建\t"/item/Vue.js/_blank"用户界面的渐进式\t"/item/Vue.js/_blank"JavaScript框架。与其它大型框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持\t"/item/Vue.js/_blank"类库结合使用时，Vue也完全能够为复杂的单页应用（\t"/item/Vue.js/_blank"SPA）提供驱动。

2.4MySQL数据库MySQL数据库拥有成本低和源码开放的特点，同时MySQL数据库支持Java编程语言，因此系统选用MySQL数据库作为系统的数据库。2.5Egg.JSegg.js是一个基于koa的企业级web应用解决方案，由阿里巴巴nodejs团队封装。它是一个优秀的解决方案，其核心设计理念是约束和规范团队开发，帮助开发团队和开发人员降低开发和维护成本。通用框架是大市场模式（集成数据库、模板引擎、前端框架等功能），但侧重于提供web开发的核心功能和一套灵活可扩展的插件机制。固定的技术选择会使框架的可扩展性变差，无法满足各种定制需求。通过egg，团队的架构师和技术领导者可以基于自己的技术架构轻松地扩展适合自己业务场景的框架。egg坚持“协议优于配置”的原则，按照一套统一的协议开发应用程序。在团队内部采用这种方法可以降低开发人员的学习成本，开发人员不再是“钉子”，可以流动。如果没有达成一致的团队，沟通的成本非常高。例如，有些人将按目录划分堆栈，而有些人将按目录划分函数。如果开发商的认知不一致，很容易出错。但传统并不等于可扩展性差。相反，egg具有很高的可扩展性，可以根据团队的协议定制框架。通过使用loader，框架可以根据不同的环境定义默认配置，还可以覆盖egg的默认约定。

3网站需求分析在项目开发前应对网站作详细的需求分析，通过大量的调研工作，了解用户的需求以及明确项目的功能、性能和安全性等具体要求，从而确定网站需要完成什么功能。3.1网站需求概述A萌宠网主要针对广大养宠物的A学子进行设计开发，主要有论坛和二手商城两部分组成，在论坛页面加入了评论的功能，方便用户在帖子下进行交流。A萌宠网的主要功能：（1）注册登录，修改自己的信息，查看自己发布的帖子，查看自己购买或者卖出物品的订单记录。（2）发布帖子，在帖子下进行评论。（3）发布商品（4）购买商品（5）对用户进行管理，对用户发的帖子进行管理，对发布的商品进行管理。A萌宠网主要分为用户端和管理端以及超管，用户端的主要功能分为个人模块、论坛模块、二手商城模块、发布模块、评论模块；管理端除了用户的这些主要功能外，还有信息管理模块。个人模块主要包括子功能有注册、登录以及个人信息管理，论坛模块主要子功能有发布帖子、浏览帖子内容，二手商城模块主要子功能有发布二手物品、浏览发布商品信息，评论模块主要子功能有在发布的帖子下进行交流、在发布的商品下进行交流；信息管理模块主要包括的子功能有查看用户的信息、用户信息权限管理、发布帖子管理、发布商品管理。网站结构图如图2-1所示。图2-1网站功能结构图3.2系统可行性分析3.2.1经济可行性分析经济可行性分析主要是对项目的经济效益进行分析。网站相对简单，整个开发周期短，开发成本低。在后期的使用中，该网站将给学生们带来极大的便利。因此在经济上是可行的。3.2.2运营可行性分析运营可行性分析主要是分析网站运行时是否需要对现有的环境进行较大的改变，以及以后在网站维护和运行方面会不会遇到比较难以解决的困难。3.2.3技术可行性分析技术上的可行性分析主要分析技术条件能否顺利完成开发工作，软、硬件能否满足开发者的需要等。系统主要采用了Javascript语言和SQLServer语言进行相关的开发。数据库使用的是SQLServer，该数据库可以存储大量的数据，同时该数据库管理系统还提供了大量的高级数据管理功能，并且它还有安全性、易用性等特点。这些技术均为目前主流开发技术，技术成熟，扩展性较高。3.3系统功能需求分析根据走访调研结果，得出用户对于网站的功能需求，通过分析将功能划分为个人模块、论坛模块、二手商城模块、评论模块以及信息管理模块五个模块，下面将详细介绍各个模块的功能。3.3.1个人模块功能分析（1）注册打开网站点击注册，按照提示要求输入账号、昵称、密码以及头像之后，若输入合法提交注册申请。（2）登录注册成功后点击登录选项，账号为注册账号并输入注册时设定好的密码进行用户登录。（3）个人信息管理用户查看编辑个人信息。3.3.2论坛模块功能分析发布帖子用户打开网站，在宠物知识板块进入我的帖子，点击发布帖子，输入文章标题，编辑好文章内容，选择是否可以评论后即可点击发送浏览帖子用户打开网站，在宠物知识板块进入交流板块，可以点击帖子，进入并浏览帖子内容。3.3.3二手物品模块模块功能分析发布商品用户打开网站，在二手物品模块进入我的二手物品可以查看自己自己发布过的物品，也可以点击发布二手物品，输入物品名称、价格、描述和具体物品的信息图片，点击发布即可。浏览商品用户打开网站，在二手物品模块进入二手物品市场，点击查看即可浏览物品的详细信息。购买商品用户打开网站，在二手物品模块进入二手物品市场，点击购买，在扫码之后即可完购买。3.3.4评论模块功能介绍发布评论用户登录网站，进入任意帖子或商品详情页在发布者允许评论的条件下可以发布自己的评论见解进行交流回复评论用户登录网站，进入任意帖子或商品详情页在别人的评论下可以进行回复。3.3.5信息管理模块功能分析用户信息管理员或超管登录网站，在个人中心进入用户管理可以查看用户的信息帖子管理管理员或超管登录网站，在交流模板可以将不符合要求的帖子进行下线。商品管理管理员或超管登陆网站，在二手物品市场可以将不符合要求的商品下架。3.4网站性能需求分析为使A萌宠网的功能在运行过程中能够满足用户需求，对网站的性能需求进行分析。衡量网站性能的主要指标有网站连接速度、网站真实流量、网站空间大小、可扩展性、安全性、易用性和易维护性。（1）网站连接速度网络请求通常应该在1-2秒内响应。但是由于用户所处的网络情况可能较为复杂，比如网络信号不好，这就需要应用在发送网络请求时设置一个超时时间，如果超时需要及时给用户以反馈，避免用户误以为应用后台发生了故障。（2）网站真实流量最直接的衡量标准就是网站真实流量，分析一个网站的真实流量可以从一下几个方面：ALEXA排名网站的收录量和索引量网站页面内容的收录速度（3）网站空间大小内存是手机的有限资源，占用率的大小直接影响手机的运行速度。APP应用端为尽量减少内存的占用率，对于执行完毕的页面及时启动销毁程序；对于第三方库中使用不到的Library，在开发工程中及时删除。APP应用应尽量减少内存占用，景区导游助手APP的内存占用目标不超过30M。（4）可扩展性系统在将来的运行中，根据不同变化，还会有不同的需求出现，因此保障系统的可扩展性极为重要。例如，景区内景点变化，系统对于景点经纬度值采用动态存储的方式保存景点的值。另外系统代码分模块管理，对于常用的模块进行封装，采用接口的方式调用，保障系统的可扩展性。（5）易用性和易维护性目标系统用户界面应操作简单、易用、灵活、风格统一。所有交互系统均提供中文图形界面，符合常规系统的操作模式，对于非专业技术人员，可以直接使用，无需教学。3.5网站流程图A萌宠网由用户端和管理端两大部分组成，结合功能、性能需求分析以及可行性等方面，设计流程图出网站流程图，用户端主要发布帖子、发布商品和发布评论，管理端负责管用户客端的数据，用户端与管理端所有更新数据均需上传服务器保存到数据库中，根据需求分别确定A萌宠网用户端与管理端数据流程图如图2-2图、2-3所示。图2-2A萌宠网用户端数据流程图图2-3A萌宠网管理端数据流程图3.6数据流图A萌宠网具有用户和管理员两个外部实体。游客发送到系统的数据流有：用户信息、帖子信息、商品信息、评论信息、订单信息，系统接收到数据流后发送反馈数据流，有用户ID、帖子信息详情、评论、订单详情；管理员发送到系统的数据流有编辑后用户数据信息、用户权限等。根据数据流信息得出系统顶层数据流图如图2-4所示。图2-4A萌宠网顶层数据流图3.7用例图用例图描述软件产品外部特性的视图，从用户的角度来描述需求，分析产品的功能和动态行为。网站有两个参与者，一个用户，一个是管理员，用例图如图2-5所示。图2-5用户与管理员用例图3.8数据字典根据数据流图设计A萌宠网数据字典如下所示：数据流名称用户信息含义注册网站的用户信息来源用户去向存储到用户信息表组成昵称+账号+密码+头像数据流名称帖子信息含义用户写的帖子来源用户去向存储到帖子信息表组成文章标题+小标题+文章内容数据流名称评论信息含义用户发表评论来源用户去向存储到评论信息表组成发布时间+内容数据流名称生成订单含义用户发布的商品来源用户去向存储到商品信息表组成商品名+价格+简单描述+具体信息数据存储名称用户权限含义说明超管给用户所有的权限组成结构权限说明超管可以给用户管理员权限3.9需求分析小结A萌宠网是一款论坛和置物网站，主要服务于广大的A学子中养宠物的群体。本章节对A萌宠网的需求分析作出了详细的介绍，明确了网站功能，将系统分为五大模块，方便后续设计开发。

4网站概要设计4.1概要设计思想围绕A萌宠网的功能设计可以进行系统的概要设计，将对需求分析得出的各个模块做出概要设计方案，包括网站的基本处理流程、网站的组织结构、明确不同模块的功能、设计出软件结构图，为网站的详细设计提供基础。4.2网站总体设计A萌宠网受“互联网+”的启发，是一款基于Javascript技术设计开发的网站，网站以A学子为依托，旨在解决养宠物时遇到的问题，经验分享，二手物品买卖等问题。A萌宠网由前端和后端两个部分组成，其中前端采用Javascript和Vue.js技术开发，后端采用Egg.js框架技术。网站为用户提供论坛和二手商城，有效地提升学生幸福感，推动A校园的和谐发展。根据需求分析，A萌宠网的总框架设计图如图4-1所示。图4-1总框架图4.2.1Web用户端设计Web用户端服务于广大A养宠物群体，进入网站，注册属于自己的账号。登录成功后，用户可以在宠物知识板块浏览发布的帖子，在我的帖子的页面可以看到自己已经发布的贴子，也可以发布新的帖子；在二手物品板块可以浏览发布的商品，也可以在我的二手物品中看到自己发布的商品，也可以发布新的商品，也可以在我的交易记录中查看自己买的东西和卖出的东西。Web用户端的程序流程图如图4-2所示。图4-2Web用户端程序流程图4.2.2Web管理端设计Web管理端服务于网站的管理人员，管理员注册登录网页端，对注册用户的个人信息管理。可以查看用户生成的订单信息。对用户发布的个人评论管理，对于一些不当评论拥有删除的权限。网页端的数据存储在服务器中的数据库。Web管理端的程序流程图如图4-3所示。图4-3Web管理端程序流程图4.3功能模块设计A萌宠网本质上是借用计算机、通讯等技术，为A学子养宠物群体提供的论坛和置物网站，网站的功能根据用户对网站的需求而定，结合学校实际情况，将A萌宠网划分为三个模块，分别是发布模块，评论模块以及用户管理模块。这些功能模块完成直接与用户的信息交互。下面详细介绍各个模块的概要设计。4.3.1发布模块发布模块在A萌宠网中具有重要作用，用户打开网站，进入宠物知识的交流板块可以发布帖子，在二手物品的二手物品商城可以发布自己的商品，发布模块会收集用户或者管理员想要传达的信息，以帖子的形式发布出来（商品的本质也是一种帖子，只是操作的方式不一样）。网站的主要的内容，就是靠用户和管理员发布的帖子所组成。4.3.2评论模块用户模块是用户之间，用户和管理员之间交流的最主要方式，在每一篇用户发布并且允许评论的帖子下，用户可以发布自己的见解和回复别的用户所发布的评论，方便了用户间的交流，实现了A学子在线上的交流沟通，也方便了A学子沟通后进行线下的交流和二手物品的交易。4.3.3用户管理模块用户管理模块是管理员和超管使用的模块，管理员可以在个人中心进入用户管理，查看用户的个人信息，管理用户信息的增加、删除、修改、查询，超管可以将普通用户的权限进行修改，让其成为管理员（拥有管理员权限）。4.4网站数据库设计根据数据流图以及数据字典进行系统的数据库设计，从概念结构和逻辑结构两方面来完成数据库设计的描述。在数据库设计的环节中，要保证数据库的可扩展性以及严谨性，具有扩展性的数据库可以帮助开发人员在后期开发过程中省掉更多不必要的麻烦。4.4.1数据库概念结构设计A萌宠网共有用户、管理员、帖子、评论以及商品五大实体，根据系统的功能要求，设计出各个实体间的联系，确定实体的属性。A萌宠网的E-R图如下图4-7所示。图4-7A萌宠网E-R图4.4.2数据库逻辑结构设计根据需求分析以及E-R图设计的数据库中的数据表有五张数据表，分别为用户表、商品表、评论信息表、管理员表和帖子信息表。用户表存储游客的注册信息，包括用户昵称、用户账号和用户密码。参见表4-1。表4-1用户Users表字段名数据类型主键备注U_idint是用户IDU_namevarchar(40)否用户名U_nicknamevarchar(40)否用户昵称U_passwordvarchar(40)否用户密码商品表存储用户发布的商品信息，包括用户手机号、订单编号、身份证号码、门票价格、门票类型和订单生成时间。参见表4-2。表4-2商品goods表字段名数据类型主键备注g_idint是商品IDgood_namevarchar(50)否商品名buy_idint否订单编号buy_dateint否订单时间g_priceint否商品价格good_msgvarchar(50)否商品信息created_atvarchar(50)否发布时间评论信息表存储用户发布的评论信息，用户可以在帖子下发表自己的评论，该表中的数据有用户id、用户昵称、发布时间和发布内容。参见表4-3。表4-3评论信息comment表字段名数据类型主键备注c_idint是评论IDcommentldint否帖子idcromldint否用户idfromNamevarchar(50)否用户昵称contentvarchar(500)否评论内容dateint否发布时间管理员表存储管理员的注册信息，管理员本质就是权限和普通用户不同的用户，所以表的内容基本一致帖子信息表存储用户发布的帖子信息，表中数据包括帖子标题名称、帖子id、帖子内容、用户id和发布时间。参见表4-4。表4-4帖子信息post表字段名数据类型主键备注p_idint(50)是帖子IDtitlevarchar(50)否帖子名称authorInt(50)否用户idcontentvarchar(500)否帖子内容created_atvarchar(100)否发布时间

5系统详细设计与实现在对网站进行概要设计后，明确了网站的基本处理流程、组织结构、模块划分、数据结构设计等，本节主要描述A萌宠网的详细设计以及具体实现，详细设计是在概要设计的基础上做进一步的设计。根据概要设计的所得出的模块划分，详细设计将实现各模块的算法设计、用户界面设计和数据结构设计的细化等。下面将介绍主要模块的详细设计。5.1网站发布模块设计网站发布主要两个部分，发布帖子和发布商品，商品的本质也是一种帖子，商品的属性会比帖子多。（1）验证表单，如果为true，建立一个postthis.$refs.postForm.validate(async(valid)=>{if(valid){this.postForm.status=1;this.loading=true;let{id,platforms,...tmp}=this.postForm;letpost={...tmp,type:Number(this.type),comment_disabled:ment_disabled?1:0,created_at:parseTime(newDate(tmp.created_at||"")),status:1,};console.log("post");console.log(post);（2）验证post是否已经发布过（如果发布过就改为编辑）if(this.isEdit){awaitapi.update(this.$store.getters.token,post,this.id);}else{const{id}=awaitapi.update(this.$store.getters.token,post);this.$notify({title:"成功",message:"发布文章成功",type:"success",duration:2000,});（3）判断是后台判断是帖子还是商品，定义常量并存储到数据库asyncsubmit(){const{ctx}=this;letid=ctx.query.id;this.checkRole([0,1,2]);letuserId=awaitthis.getUserId();let{type,price=0,good_name='',good_msg='',title,content,content_short,comment_disabled=0,status,created_at=newDate(),good_id}=ctx.request.bodyconstpost={title,content,content_short,comment_disabled,status,type,created_at,}constgood={price,good_name,good_msg,status:1}if(id){awaitctx.service.post.update({...post,author:userId,id,});if(type===2){awaitctx.service.good.update({...good,author:userId,id:good_id,});}ctx.body={message:'发布成功',code:200,};ctx.status=200;}else{letgood_insertId=null;if(type===2){lettmp_data=awaitctx.service.good.insert({...good,author:userId,created_at:newDate()});good_insertId=tmp_data.insertId}letdata=awaitctx.service.post.insert({...post,author:userId,good_id:good_insertId,created_at:newDate()});ctx.body={msg:'发布成功',code:200,id:data.insertId};ctx.status=200;}5.2网站评论模块设计（1）判断是发布评论，还是回复评论<transitionname="fade"><divclass="input-wrapper"v-if="showItemId===item.id"><el-inputclass="gray-bg-input"v-model="inputComment"type="textarea":rows="3"autofocusplaceholder="写下你的评论"></el-input><divclass="btn-control"><spanclass="cancel"@click="cancel">取消</span><el-buttonclass="btn"type="success"round@click="commitComment(item.id,item.fromName)">确定</el-button></div></div></transition><transitionname="fade"><divclass="input-wrapper"><el-inputclass="gray-bg-input"v-model="inputComment2"type="textarea":rows="3"autofocusplaceholder="写下你的评论"></el-input><divclass="btn-control"><spanclass="cancel"></span><el-buttonclass="btn"type="success"round@click="commitComment2">确定</el-button></div></div>编辑评论，判断评论是否合法，定义常量存储到数据库asynccommitComment2(){if(!this.inputComment2||this.inputComment2.length<6){this.$notify({message:"评论需大于6个字符",type:"danger",duration:2000,});return;}letquery={commentId:this.id,fromId:this.$store.getters.id,fromName:this.$,content:this.inputComment2,type:0,status:0,};提交评论asyncinsertComm(){const{ctx}=this;constres=awaitment.insert({...ctx.request.body,date:newDate()});ctx.body={code:200,};ctx.status=200;}5.3网站用户管理模块设计（1）管理员和超管可以看到用户管理页面（隐藏框）<el-buttontype="primary"size="default"@click="open(scope.row)">修改</el-button><el-buttontype="danger"size="default"@click="del(scope.row)">删除</el-button>点击修改用户信息信息（管理员和超管都可）<el-dialogtitle="修改用户信息":visible.sync="msgDialog"width="30%"><el-form:model="form"label-width="120px":inline="false"size="normal"><el-form-itemlabel="账号"><el-inputv-model=""disabled></el-input></el-form-item><el-form-itemlabel="密码"><el-inputv-model="form.password"></el-input></el-form-item><el-form-itemlabel="权限"><el-selectv-model="form.role"value-key=""placeholder=""clearablefilterable><el-optionv-for="iteminoptions":key="item.value":disabled="!item.abled":label="item.label":value="item.value"></el-option></el-select></el-form-item></el-form><spanslot="footer"><el-button@click="msgDialog=false">取消</el-button><el-buttontype="primary"@click="submit">提交</el-button></span></el-dialog>asyncsubmit(id,role){letquery={...this.form,};awaitapi.update_in_super(this.$store.getters.token,query);this.$message({type:"success",message:"修改成功",});this.msgDialog=false;this.getList();}修改用户权限（超管）asyncupdate_in_super(){const{ctx}=this;const{id,name,nickname,password,role}=ctx.request.bodyif(role===1||role===0){awaitthis.checkRole([0]);console.log("")}else{awaitthis.checkRole([0,1]);}6网站测试和维护网站测试是系统投入使用前的一个重要环节，通过网站测试，可以检查网站的实际运行效果和预期运行效果之间的差异，从而了解网站是否完成需求的要求。网站测试可以帮助节省人力物力和时间，减少不必要的损失。6.1网站测试需求 A萌宠网的测试，主要完成以下计划：测试网站的前端，是否会出现闪退、无法跳转页面等情况；测试用户注册是否能够成功；测试发布帖子是否可以成功，浏览贴子是否内容完整，是否可以看到自己发布的贴子；测试发布商品是否成功，发布商品是否上架成功，可以查询购买的商品；测试发布评论是否成功，发布的帖子内容是否完整显示；测试个人中心是否可以修改个人信息。测试管理员是否可以管理用户发布的帖子、商品，可以查询用户的信息；测试超管是否可以修改用户的权限；测试后端能否可以将用户在前端的所有操作完整的作用在数据库，完成信息在数据库的增删改查。6.2网站测试过程模拟用户正常使用A萌宠网的过程，注册登录，发布帖子，发布商品，发布评论信息，看数据库是否有更新。经过大量测试后，用户端并未发现有闪退、卡顿现象，数据更改及时，未出现修改失败现象。（1）登录网站，输入没有注册的账号和已注册账号但错误密码，观察网站能否弹出错误信息的提示；再次输入已注册的用户账号及正确的密码查看是否能够成功登录网站，成功后查看后台是否捕获到登录网站用户的ID。登录管理员模式，观察是否出现漏洞。经过大量测试后，并未发现非法登录成功的现象。而多次登录、退出管理员模式，也未发现权限错误无法更改信息现象。非法登录测试用例表如图6-1所示。图6-1非法登录测试用例表（2）发布帖子功能，发布帖子和商品，查看后台数据信息是否准确。经过大量测试后，未