【人口普查登记校验管理系统的设计与实现10000字（论文）】

目录TOC\o"1-3"\h\u摘要 摘要：本毕业设计实现了一个人口普查登记校验管理系统，该系统采用了前后端分离的技术。其中，通过目前业内主流的vue框架对前端页面做了整体的布局，后台关联数据库之类的实现，采用了SpringBoot框架。以MySQL作为本系统的数据库。人口普查登记校验管理系统分三个模块：首页模块、用户模块和管理员模块。首页主要用来展示近年来人口普查的一些资讯，还可以为用户提供登录注册；其中，用户模块的主要功能有：进行个人填报、修改个人密码、修改个人信息、修改填报信息等；管理员模块的主要功能有：管理个人账号（包括修改个人密码）、对用户进行管理、管理用户填报的信息、添加新闻分类、发布管理新闻资讯，管理相关友情链接。经过修改和测试，最终系统成功实现。关键词：VUE；SpringBoot；人口普查；前后端1绪论1.1背景介绍世界上所有国家都将人口的确切数量，人口的素质，人口的结构和人口的分布作为经济发展计划和政策制定的基础。人口普查是获得有关人口信息的主要手段[1]。这些信息对于政府制定几个重要的政策方向起着重要作用。随着计算机技术和网络技术的发展，人口普查技术和方法变得越来越科学。随着计算机技术的发展，人口普查已进入现代化阶段。现代人口普查已成为世界范围内的普遍普查方法[2]。在现代人口普查中，计算机起着重要的作用，计算方法更加复杂，人口普查和抽样调查更加集成，并且人口信息量巨大而精确。计算机技术被广泛用于外国人口普查。举个例子，在1950年的美国第17届全国人口普查中，首先使用计算机来计算人口统计信息，并进行统计和处理人口普查数据[3]。我国的人口普查方法比较简单。普查网站通常是临时设置的，只能在普查正式开始后才能使用。人口普查一旦完成，将不再使用，信息水平也很低[4]。同时，从城市社区人口管理的角度来看，社区信息建设是一个较晚的开始。近年来，由于全国社会计算机化的积极推动，社区计算机化的建设发展迅速，并取得了一定的成功[5]。我国的社区建筑计算机化始于1980年代。与发达国家不同，由于缺乏统一的标准，华人社区的计算机化在许多方面都具有共存的特征，这是有限的。受媒体和技术的影响，其功能并不理想[6]。1.2研究意义人口普查是一个国家/地区收集人口统计数据的最简单方法、是国家科学决策的重要基础、是制定人口政策的基础和前提[7]。由于人口普查，我们可以考虑到我国受过不同程度教育的人口比例来制定教育政策；了解不同部门人口的分布情况有助于制定人口就业政策；对工业从业人员分布的理解可以用来制定和调整产业政策。提供科学依据。此外，应根据人口统计数据研究社会保障和福利政策，种族政策，老年人政策等[8]。我们认为，人口普查对于一个国家制定诸如社会，经济，科学和教育等各种发展政策是必要的。没有准确的人口统计信息，我们的许多政策，政策和发展战略都是在没有科学依据的情况下制定的。因此，为了了解我国人口的数量，结构，分布和住房建设的变化，科学制定国家经济和社会发展计划，以及人们的物质和文化生活的总体组织，实施可持续发展战略，建设具有重大现实意义和深远历史意义的社会主义和谐社会。我国即将开始新一轮的人口普查。在以前的人口普查中，通常使用纸张输入家庭人口普查登记册，这是一个耗时且资源密集的过程。普查记录核查管理系统在改善纸质普查现状方面仍在纸上，代替体力劳动，有效地提高了普查效率。通过开发此系统，您可以巩固您的知识，提高开发水平，并为将来的工作打下坚实的基础。因此，该系统具有重要的现实意义。1.3论文结构本次论文分七个部分进行介绍：一、绪论，详细概括了本系统的研究背景和研究意义，为后续开发找好方向。二、主要介绍了开发工具和开发技术，为了更好地实现该系统。三、需求分析，主要分为问题分析、可行性分析、功能分析，并以用例图的形式展现系统总体的结构。四、系统设计，主要分为功能设计、数据库设计、页面设计，详细介绍了系统各部分的设计思路和流程。五、功能实现，以系统功能截图和核心代码的方式，详细介绍了此系统的各项功能。六、功能测试，测试系统各项功能。七、论文结尾，分别为结束语、参考文献和致谢。

2开发工具和开发技术介绍2.1VScode简介VScode主要用于web前端的开发，它是一种开源的开发平台，它具有对JavaScript，TypeScript和Node.js的内置支持，在VScode中，我使用到了vetur插件、JS-CSS-HTMLFormatter插件。Vetur插件是让vue代码可以高亮显示，方便开发，后两个插件是自动格式化代码，即不需要我们手动去调整代码格式，写完代码后按下ctrl+s就会自动格式化成规范的代码格式，极大的方便了代码的开发，让代码更加美观。2.2IDEA简介IDEA主要用于后端的开发，对前端也支持，但是开发起来没有VScode方便，主要用来编写java，被称为最好用的java开发工具，在很多方面，IDEA都有很出色的表现，里面自带了很多强大的插件，写java代码的首选[9]。2.3MySQL简介MySQL是⼀个关系型数据库管理系统，是平常我们用的最多的一种数据库，配合Navicat，可以更好的去管理，是一种轻量级的数据库。2.4Vue框架简介Vue框架是目前业内主流一种前端框架，他有简单小巧的核心，渐进式技术栈，足以应付任何规模的应用。2.5SpringBoot简介SpringBoot是所有给予Spring开发的项目起点。Spring框架的缺点是配置太过于繁杂，因此出现了SpringBoot框架，SpringBoot可以让我们的Spring中各种应用配置更加轻量化，他可以更快的跑起Spring应用程序并尽可能减少配置文件。3需求分析3.1问题描述由于人工上门人口普查费时费力，所以本系统是为了更加方便的进行人口普查，用户只需在网上填报，管理员只需在后台管理，方便快捷。用户可以进行个人填报，管理员在后台可以对用户填报的信息进行统一管理，首页添加了新闻模块，方便用户了解人口普查相关方面的资讯。3.2可行性分析可行性分析分为技术可行性、经济可行性、法律可行性。技术可行性：已经配置好了vue和SpringBoot所需的环境，开发工具方面，VScode和IDEA也已经配置完成，并下载了相关插件，通过图形化UI界面创建vue项目，通过提前画好的界面图，进行前端界面的开发，MySQL和Navicat相关配置也已就绪。经济可行性：本系统所采用的VScode、IDEA都是免费的开发工具，MySQL也是免费的数据库，框架也是完全开源，程序自行开发，几乎没有开发成本。法律可行性：本系统所采用的框架和开发工具全部是开源使用的，不会设计任何侵权，在法律上绝对可行。操作可行性：本系统用户界面设计简洁，人性化，同时做了移动端的适配，无论是移动端还是pc端，都能有很好地用户体验，操作简单便捷。3.3功能需求分析人口普查登记校验管理系统的系统功能结构图如图3-1所示：前端模块主要针对游客，主要分为新闻首页和注册登录：首页：展示人口普查相关方面的资讯，该设计是为了游客进入后可以查看这些资讯了解人口普查，其次是注册页面，游客可以在此进行账号注册。注册登录：游客进入页面需要进行注册，管理员账号则是后台发放，都需要在前端页面进行登录操作才能进入后台。后台分用户和管理员两个模块：用户：主要是进行个人填报，同时也可以对个人信息和填报信息进行维护操作。管理员：管理用户和自己的账户信息，查看修改统计用户填报的信息，对首页的新闻进行管理。图3-1系统功能结构图3.4用例图在软件开发的需求分析阶段使用用例图。它描述了系统的功能以及如何使用它。指示谁将成为受影响的用户，用户希望系统提供哪些服务，以及用户应向系统提供哪些服务。最常用于描述系统和子系统,分为业务用例图和系统用例图。本系统可以细分为八大功能模块，登录注册、个人信息维护、个人填报、填报信息维护、添加修改用户、天宝统计、发布新闻、浏览新闻，这里以用例图的形式，展示了用户和管理员与各大功能之间的关系，如图3-2所示：图3-2系统用例图

4系统设计4.1功能设计本系统主要分为前端和后台，有游客、用户、管理员三个大模块，具体功能如3.3所示。4.1.1用户功能设计用户进入系统网站，首先可以看到首页，首页有新闻、友情链接、登录注册功能，用户注册成功后，方可登录进后台系统。登录注册：用户注册成功后，点击登录输入账号密码后进入系统，管理员可以直接登录。维护个人信息：用户可以修改密码，修改个人注册时的信息。（3）新闻、友情链接：新闻和友情链接在首页直接展示，点击可查看详情或进入其他网站。（4）个人填报：用户点击个人填报可以录入个人完整信息，完成后点击提交送往数据库。4.1.2管理员功能设计系统管理员功能设计如下： （1）系统管理员登录。（2）维护用户信息：这里与普通用户不同的是，管理员可以维护所有用户信息。（3）添加新的管理员：可以分配账号给其他管理员，分担自己的工作量。（4）维护用户的填报信息：可以查看并修改所有用户提交的填报信息，可以进行人口统计。（5）新闻管理：可以添加新闻分类，发布新闻，对已发布的新闻可以进行增删改查。（6）友情链接：可以添加友情链接，用户在首页点击后能去往相应网站，对已添加的链接可以进行增删改查。4.2数据库设计数据库是为了存储系统内所需的数据，本系统用MySQL数据库来实现这一操作，他不仅能存储大量数据，而且还便于后台维护，用户信息，填报信息管理员信息，新闻信息等等数据都需要存储在数据库中。4.2.1系统E-R图本系统E-R图（实体-联系图）中，大致分为7各部分，游客、用户、管理员、个人填报、新闻分类、新闻信息、友情链接。具体E-R图如图4-1所示。图4-1系统E-R图数据库实体集如下所示：notice(id,userid,username,name,sex,tel,address,idcard,homeuser,pname);news(id,title,class,pic,admin,click,main);admin(id,username,pwd);user(id,username,pwd，sex，tel,email);class(id,newsclass,time);herf(id,url,urlname,);token(token,session,cx,login,username,valueid,tokentime);hoppy(id,username,xwid,title,url,ziduan,biao)。4.2.2数据库表上面的E-R图对应的实体集可以在数据库中建立相对应的表，这些表信息具体如下：（1）新闻分类表（xinwenfenlei）xinwenfenlei表，用来存储新闻分类信息，如表4-1所示。表4-1新闻分类表字段名字段介绍数据类型主键有无外键是否能为空id主键，公告idint(11)是无否fenleimingcheng分类名称varchar(25)否无否addtime添加日期date否无否（2）新闻表（xinwenxinxi）xinwenxinxi表，用来存放新闻信息，如表4-2所示。表4-2新闻表字段名字段介绍数据类型主键有无外键是否能为空id主键，新闻idint(11)是无否biaoti新闻标题varchar(25)否无否fenlei分类varchar(10)否无否tupian图片varchar(255)否无是tianjiaren添加人varchar(10)否无否dianjilv点击率int(255)否无是neirong内容varchar(255)否无否addtime添加日期date否无否（3）用户表（yonghu）yonghu表，用来存放用户信息，如表4-3所示。表4-3用户表字段名字段介绍数据类型主键有无外键是否能为空id主键，用户idint(11)是无否yonghuming用户名varchar(100)否无否mima密码varchar(11)否无否xingming姓名varchar(10)否无否xingbie性别varchar(2)否无否Shouji手机varchar(11)否无否youxiang邮箱varchar(25)否无否addtime添加日期date否无否（4）个人填报表（gerentianbao）gerentianbao表，用来存储个人填报的详细信息，如表4-4所示。表4-4个人填报表字段名字段介绍数据类型主键有无外键是否能为空id主键int(11)是无否yonghuid用户idint(10)否有否yonghuming用户名varchar(10)否有否xingming真实姓名varchar(5)否无否xingbie性别varchar(2)否无否shouji手机号varchar(11)否无否shenfen省份varchar(10)否无否chengshi城市varchar(10)否无否xian区县varchar(20)否无否xiangxidizhi详细地址varchar(45)否无否shenfenzheng身份证varchar(19)否无否huzhu户主varchar(5)否无否hunfou婚否varchar(3)否无否fumu父母varchar(10)否无否peiou配偶varchar(5)否无否zinv子女varchar(25)否无否beizhu备注varchar(255)否无否tianbaoren填报人varchar(5)否无否addtime添加日期date否无否（5）收藏记录表（shoucangjilu）shoucangjilu表，备用表，用于后存储后续开发的收藏记录的信息，如表4-5所示。表4-5收藏记录表字段名字段介绍数据类型主键有无外键是否能为空id主键int(11)是无否username用户名varchar(10)否有否xwid新闻编号int(10)否无否biao表varchar(255)否无是biaoti标题varchar(45)否无否url链接varchar(255)否无是ziduan字段varchar(255)否无是addtime添加日期date否无否（6）管理员表（admins）admins表，用于存储管理员信息，如表4-6所示。表4-6管理员表字段名字段介绍数据类型主键有无外键是否能为空id主键int(11)是无否username管理员账号名称varchar(10)否有否pwd密码varchar(11)否无否addtime添加日期date否无否（7）友情链接表（youqinglianjie）youqinglianjie表，用来存放友情链接的详细信息，如表4-7所示。表4-7友情链接表字段名字段介绍数据类型主键有无外键是否能为空id主键int(11)是无否wangzhanmingcheng网站名称varchar(10)否无否wangzhi网址varchar(45)否无否addtime添加日期date否无否（8）访问令牌表（token）token表，用来存储管理员和用户的账号密码，将其存储为一串cookie指令，不用每次都比对账号密码，减少服务器压力，如表4-8所示。表4-8访问令牌表字段名字段介绍数据类型主键有无外键是否能为空token主键，令牌varchar(50)是无否sessionsession值，账号密码信息varchar(255)否无否cx角色性质varchar(255)否无否login登录角色varchar(10)否无否username用户或管理账号姓名varchar(20)否有否valueid编号int(11)否无否token_time创建时间date否无否4.3页面设计4.3.1登录页面设计游客注册成为用户后，或者管理员，点击系统登录可以进入登录页面。如图4-2所示。图4-2登录页面设计图4.3.2主页面（新闻和链接）设计进入网站首先看到的页面，可以通过点击查看详情。如图4-3所示。图4-3首页设计图4.3.3注册页面设计游客点击首页的注册可以进入注册页面，在这里注册自己的账号。如图4-4所示。图4-4注册页面设计图4.3.4用户后台设计用户登录进入系统后的页面，如图4-5所示。图4-5用户后台设计图4.3.5管理后台设计管理员登录系统后的，如图4-6所示。图4-6管理员后台设计图5功能实现5.1项目工程目录介绍本系统前端采用vue框架，通过可视化UI界面来创建vue项目，创建完毕后，会自动生成项目目录，然后自己对目录再做一下简单的修改。项目目录中部分包如下所示：node_modules：存放项目所需的各种依赖；public：存放静态文件；src：存放各种vue文件；src/assets：存放图片这种静态文件。src/compnents：存放公共组件，如header、footer等。src/views：存放写好的各种页面，如login、main等。src/roter:路由文件。存放vue路由地址。Src/app.vue:主vue模块，引入其他模块。src/main.js:入口文件，初始化vue实例。图5-1项目工程目录图5.2用户登录注册模块5.2.1登录模块的实现游客注册完账号后，在登陆页面输入账号密码，返回后台提交到数据库，若有此信息，则显示登陆成功，若没有则显示账号或密码错误，若没有填写账号密码，会分别显示账号或密码不能为空，如图5-2所示。图5-2登录页面实现图核心代码：validateLogin(){varform=this.form;varusername=form.username;varpwd=form.pwd;//账号密码非空校验if(username==''){this.$message.error('帐号不能为空');returnfalse;}if(pwd==''){this.$message.error('密码不能为空');returnfalse;}returntrue;},login(){//登录校验if(this.validateLogin()){this.loading=true;this.$store.dispatch('user/login',this.form).then(res=>{this.loading=false;if(res.code==api.code.OK){this.$message.success('登录成功');varredirect=this.$route.query.redirect;if(redirect){this.$router.replace(redirect);}else{this.$router.replace('/admin/sy');}}else{this.$message.error(res.msg);}}).catch(err=>{this.loading=false;this.$message.error(err.message)})5.2.2注册模块的实现在注册模块中，用户需要录入注册信息，这里我们用了token验证，后台接口接收到前台返回的账号密码，然后加密生成一个token字符串并保存到数据库，之后登陆直接通过cookie响应给前端，无需再验证繁杂的账号密码，减少服务器压力。用户注册页面如图5-3所示。图5-3用户注册页面核心代码：submit(){this.$refs.formModel.validate().then(res=>{if(this.loading)return;this.loading=true;varform=this.form; //提交按钮校验this.$post(api.yonghu.insert,form).then(res=>{this.loading=false;if(res.code==api.code.OK){this.$message.success('添加成功');this.$emit('success',res.data);this.$refs.formModel.resetFields();this.loadInfo();}else{this.$message.error(res.msg);}}).catch(err=>{this.loading=false;this.$message.error(err.message);})}).catch(err=>{console.log(err.message);})}5.3首页新闻模块5.3.1新闻添加展示功能游客进入网站，首先看到的就是首页新闻，本系统将所有新闻都存储到了数据库中，以便于后续的增删改查，管理员添加新闻也是先存储到数据库中，然后再调用到前端，新闻页面如图5-4、图5-5所示。图5-4首页新闻页面图5-5管理员添加新闻页面核心代码：submit(){this.$refs.formModel.validate().then(res=>{if(this.loading)return;this.loading=true;varform=this.form;this.$post(api.xinwenxinxi.insert,form).then(res=>{this.loading=false;if(res.code==api.code.OK){this.$message.success('添加成功');this.$emit('success',res.data);this.$refs.formModel.resetFields();this.loadInfo();}else{this.$message.error(res.msg);}}).catch(err=>{this.loading=false;this.$message.error(err.message);})}).catch(err=>{console.log(err.message);}5.3.2新闻分类和友情链接模块的实现和添加新闻基本相同，也是管理员添加后存入数据库，再传到前端进行展示，分别如图5-6、5-7所示。图5-6新闻分类管理页面图5-7友情链接添加页面核心代码：submit(){this.$refs.formModel.validate().then(res=>{if(this.loading)return;this.loading=true;varform=this.form;this.$post(api.xinwenfenlei.insert,form).then(res=>{this.loading=false;if(res.code==api.code.OK){this.$message.success('添加成功');this.$emit('success',res.data);this.$refs.formModel.resetFields();this.loadInfo();}else{this.$message.error(res.msg);}}).catch(err=>{this.loading=false;this.$message.error(err.message);})}).catch(err=>{console.log(err.message);5.4用户后台管理5.4.1修改个人信息个人信息进入个人信息修改页面，首先接收后台的数据库响应，展示用户信息，然后进行修改后提交，提交时和注册相同，通过JS发送请求给接口，后台接受后进行验证，点击提交后，存入MySQL，接受该请求的和注册是是同一个接口，所以只会覆盖之前注册的信息，不会重新创建用户，覆盖完只会再返回存储到数据库中。然后修改密码也是同理，只是单独写了一个专门修改密码的界面和个人信息分开。具体实现页面如图5-8和图5-9所示。图5-8修改个人信息页面图5-9修改密码页面核心代码：loadInfo(){this.loading=true;varform=this.form;this.$post(api.yonghu.edit,{id:this.id}).then(res=>{this.loading=false;if(res.code==api.code.OK){extend(this,res.data);this.form=res.data.mmm;}else{this.$message.error(res.msg);this.$router.go(-1);}}).catch(err=>{this.$message.error(err.message);this.$router.go(-1);});5.4.2个人填报功能的实现在个人填报模块中，采取了多个表单验证，用户在这里可以正式进行填报，提交后会返回到后台然后存入数据库，用户自己也可以对自己填报的信息进行修改，分贝如图5-10、5-11所示。图5-10个人填报页面图5-11填报信息维护页面核心代码：methods:{submit(){this.$refs.formModel.validate().then(res=>{if(this.loading)return;this.loading=true;varform=this.form;this.$post(api.gerentianbao.insert,form).then(res=>{this.loading=false;if(res.code==api.code.OK){this.$message.success('添加成功');this.$emit('success',res.data);this.$refs.formModel.resetFields();this.$router.go(-1);}else{this.$message.error(res.msg);}}).catch(err=>{this.loading=false;this.$message.error(err.message);})}).catch(err=>{console.log(err.message);})}5.5管理员后台模块5.5.1个人信息修改的实现管理员的个人信息修改和用户的基本类似，不同的是，管理员信息只需要修改用户名即可，还加了一个管理员用户添加，这里面可以添加新的管理员账号，此页面和自己的信息修改区别是，一个返回到原来的数据，一个创建新的数据，然后存入数据库，具体实现页面如图5-12、5-13所示。图5-12管理员信息页面图5-13添加新管理员页面核心代码：exportdefault{name:'admins-add',data(){return{rule,loading:false,form:{username:'',pwd:'',}}}Watch{},props:{isRead:{type:Boolean,default:true},btnText:{type:String,default:'提交'}5.5.2管理员管理用户功能的实现系统管理员可以管理所有用户信息，在用户管理界面中，可对进行修改和删除操作，提交后返回对应的后台模块，再存储到数据库中。如图5-14所示。图5-14用户管理页面核心代码：exportdefault{name:'gerentianbao-add',data(){return{rule,loading:false,form:{yonghuming:'',xingming:'',xingbie:'',shouji:'',shengfen:'',chengshi:'',xian:'',xiangxidizhi:'',shenfenzheng:'',huzhu:'',fumu:'',hunfou:'',peiou:'',zinv:'',beizhu:'',tianbaoren:this.$store.state.user.session.username,yonghuid:0,},}}watch:{id:{handler(){this.loadInfo();}}}5.5.3用户填报信息管理功能的实现管理员可以查看所有用户的填报信息，可以查询某用户的填报信息并修改，这里操作和查询修改用户个人信息相同，不再赘述。具体如图5-15所示。图5-15个人填报管理页面核心代码：loadInfo(){this.loading=true;varform=this.form;this.$post(api.gerentianbao.edit,{id:this.id}).then(res=>{this.loading=false;if(res.code==api.code.OK){extend(this,res.data);this.form=res.data.mmm;}else{this.$message.error(res.msg);this.$router.go(-1);}}).catch(err=>{this.$message.error(err.message);this.$router.go(-1);});5.5.4人口统计功能的实现人口统计通过表格和柱状图两种方式进行展示，表格可以通过数据看到各省的实际人数，柱状图能更直观的看到人数分布；其中柱状图引用了highcharts的柱状图，此图表兼容目前所有浏览器，还适配于移动端，要引用此图表，首先我们要安装jQuery，然后再html页面中引入jQuery代码，用cdn加载jQuery库，然后去highcharts官网下载所需要的包，在html界面中引入highcharts，然后使用官方提供的CDN地址即可。如图5-16所示。图5-16人口统计页面核心代码：loadInfo(){this.loading=true;varform=this.form;this.$post(api.gerentianbao.edit,{id:this.id}).then(res=>{this.loading=false;if(res.code==api.code.OK){extend(this,res.data);this.form=res.data.mmm;}else{this.$message.error(res.msg);this.$router.go(-1);}}).catch(err=>{this.$message.error(err.message);this.$router.go(-1);});5.5.5新闻添加功能的实现在5.3.2中，管理员可以查询已有的新闻并进行维护，这里管理员还可以进行新闻的添加，通过输入标题，选择分类（分类也可以进行添加和修改，我们在5.5.6中进行说明），上传图片，输入初始点击率，输入详细内容来进行新闻的添加，添加完成的新闻会返回到后台存入数据库中，方便后期的管理维护，具体如图5-16所示。图5-16新闻添加页面核心代码：5.5.6新闻分类功能的实现在新闻分类界面，新闻分类可以让用户更快找到自己想看的新闻，管理员后期维护起来也更加方便。管理员只需输入新的分类的名称即可添加，此名称也会返回到后台并存储进数据可中，如图5-17所示。图5-16新闻添加页面核心代码：<el-form:model="form"ref="formModel"label-width="130px"status-iconvalidate-on-rule-change><el-form-itemlabel="标题"prop="biaoti"required:rules="[{required:true,message:'请填写标题'},{validator:rule.checkRemote,message:'内容重复了',checktype:'insert',module:'xinwenxinxi',col:'biaoti',trigger:'blur'}]"><el-inputplaceholder="输入标题"style="width:450px;"v-model="form.biaoti"/></el-form-item><el-form-itemlabel="分类"prop="fenlei"required:rules="[{required:true,message:'请填写分类'}]"><el-selectv-model="form.fenlei"><el-optionv-for="minxinwenfenleiList":value="m.id":label="m.fenleimingcheng"></el-option></el-select></el-form-item><el-form-itemlabel="图片"prop="tupian"><e-upload-imagev-model="form.tupian"></e-upload-image></el-form-item><el-form-itemlabel="添加人"prop="tianjiaren"><el-inputv-model="form.tianjiaren"readonlystyle="width:250px;"></el-input></el-form-item><el-form-itemlabel="点击率"prop="dianjilv":rules="[{validator:rule.checkNumber,message:'输入一个有效数字'}]"><el-inputplaceholder="输入点击率"style="width:250px;"v-model="form.dianjilv"/></el-form-item><el-form-itemlabel="内容"prop="neirong"><e-editorv-model="form.neirong"></e-editor></el-form-item><el-form-itemv-if="btnText"><el-buttontype="primary"@click="submit">{{btnText}}</el-button></el-form-item></el-form>5.6友情链接模块5.6.1友情链接功能的实现管理员添加友情链接后，存储进数据库，然后在前端进行展示，点击相应的链接可以去往相应的网站。考虑到本新闻页面无法列出太多新闻，用户可以前往相关的网站了解更多新闻资讯。具体实现页面如图5-17所示。图5-17友情链接页面核心代码：5.6.2友情链接添加功能的实现管理员可以添加友情链接，只需输入合法的网站名称和网址即可。这里添加的网站名称和链接会直接存入数据库中，方便维护，相较于在代码中输入超链接，更加人性化。如图5-18所示。图5-18友情链接添加页面核心代码：<el-form:model="form"ref="formModel"label-width="130px"status-iconvalidate-on-rule-change><el-form-itemlabel="分类名称"prop="fenleimingcheng"required:rules="[{required:true,message:'请填写分类名称'},{validator:rule.checkRemote,message:'内容重复了',checktype:'insert',module:'xinwenfenlei',col:'fenleimingcheng',trigger:'blur'}]"><el-inputplaceholder="输入分类名称"style="width:250px;v-model="form.fenleimingcheng"/></el-form-item><el-form-itemv-if="btnText"><el-buttontype="primary"@click="submit">{{btnText}}</el-button></el-form-item></el-form>

6系统测试6.1主要功能测试系统功能主要包括所有页面中可交互的功能，在系统里面进行各种检验性的测试，这里只测试主要的功能，具体测试如下。6.1.1用户登录注册测试用户想要进入系统，必须先进行登录，登陆的账号密码后台数据库中必须存在，这里选取了两个并不存在的用户名和密码。结果如图6-1所示。图6-1结果页面如果用户输入了空的信息，没有输入用户名或者密码，也会登陆失败，如图6-2所示。图6-2用户名密码为空页面6.1.2注册功能测试注册时，所填写的邮箱，手机号等格式都必须正确，若输入不正确会有相应提示，测试结果如图6-3所示。图6-3注册页面6.1.3用户个人填报功能测试用户个人填报是表单验证最多的地方，这里我做了大量的校验，没填或者不符合规范都会有提示，测试结果如图6-4所示。图6-4个人填报页面6.1.4新闻和分类添加功能测试管理员首先添加分类，之后可以在该分类添加新闻，新闻添加后，在首页可以进行查看。结果如图6-5、6-6、6-7所示。图6-5结果页面图6-6结果页面图6-7结果页面6.1.5人口统计功能测试用户个人填报后，会根据所在省份进