【《基于vue的美妆社区系统的设计与实现》12000字（论文）】

内容详情使用者管理者文章文章分类题目Id查看内容详情使用者管理者文章文章分类题目Id查看密码登录名手机号发文章浏览，评论评论条数所属类目查阅次数标题1nn1发布者用户名登录名详细n绑定邮箱所属类别属于名称mmn1图：5-1系统设计的E-R图在系统中，nosql的结构很适合本网站，顾及到维护后期、功能设计、稳固性、运行速率等多种方面因素，特别是考虑到移植性的便捷性，数据库运用mongodb系统。以下是网站使用者的属性表，用于存取基础的一些用户信息。表：5-1网站使用者表(user)名称字段注释备注_idobjectId数据库唯一id主键IdString用户id唯一idPhoneString电话Enable_flagString是否有效判断用户是否注销NicknameString头像Register_timeDate注册时间PasswordString密码AvatarString头像下表是文章的基本表，存储文章的基础信息。表：5-2文章表(article)名称字段注释备注_idobjectId必备id唯一标识，主键IdStringId文章关联idArticle_numIntRead_numInt阅读量Comment_numInt评论数ImgString文章缩略图Like_numInt点赞数TagArray标签StatusInt状态Enable_flagString删除状态TitleString标题ContentString内容Type_idString关联类型分类idAuthoridString关联用户idUpdate_atDate更新时间下表为分类的表，管理分类，显示分类的基础信息。表：5-3分类表(type)名称字段注释备注_idobjectId必备id唯一标识，主键IdStringIdidEnable_flagString删除状态Update_atDate更新时间Type_nameString名称下表评论的表，用于存储评论的基础关联信息表：5-4评论表(comment)名称字段注释备注_idobjectId必备id唯一标识，主键IdStringIdidEnable_flagString删除状态TimeDate更新时间ContentString内容User_idStirng用户id关联用户信息Love_numInt点赞数Article_idString文章id5.4网站结构美妆社区基于用户的使用习惯和当下美妆的设计潮流来进行设计，使得网站更符合人体美学，同时功能上也尽可能地满足用户地基础使用需求，网站功能结构如下设计：图：5-2美妆社区结构设计5.5用户界面各模块的实现首页，采用了传统简约的风格给用户一个直观清晰地展现。在上面的话是菜单，然后中间的话是轮播图和文章分类推荐。右边的话是一个热门文章推荐。采用了一个图文混排的方式进行展现。图：5-3美妆社区首页展示图当访问首页时，会请求分类接口和文章接口，同时访问热门文章接口，获取所有的展示信息。通过前端model层渲染后展示成网站模板样式。用户点击进入分类详情，会加载相应的分类文章。图：5-4分类界面图图：5-5用户评论界面图首页中会对网站推荐进行展示，同时对网站热度最高的文章进行展示。分别通过获取后台的热门推荐和热度文章实现图：5-7热门推荐榜与排行榜效果图在登录注册时，验证用户输入的合法性有效性，然后给后台进行登录注册图：5-8注册页面效果图文章发布界面：用于用户发布文章到个人中心，选择分类图：5-9发布页面效果图5.6数据管理子系统的实现对用户基础信息进行管理，对于高级一级管理员，可以分配给二级管理员对应的权限，同时管理界面可以对用户进行模糊搜索，后台通过查询数据库返回数据，对用户的基础信息进行修改，但是无法修改用户的账户和注册时间，可以进行重置密码和昵称操作。通过数据库设计角色字段来进行权限控制，普通管理员设置为2级字段，高级管理员设置一级字段。请求接口时，服务端判断用户的token是否有对应的权限身份，用来鉴别操作权限。图：5-10用户管理页面效果图对文章基础信息进行管理，管理员可以对文章内容和标题进行模糊的搜索，也可以清空搜索结果，通过监听输入框的值来实时现实搜索的结果，后台只支持管理员对文章进行删除操作，想发布文章只能通过前端进行发布操作。操作时，服务端会对权限进行token验证，验证请求的合法性，之后对文章信息进行操作。图：5-11文章管理管理页面效果图对评论基础信息进行管理。评论管理加入了修改和删除的功能，在查看评论内容是否符合社区规范的同时，可以对评论进行删除，搜索，编辑等操作，后台相应的进行数据库的修改，达到数据一致性的目的。搜索上，采用了后端与数据库模糊搜索的方法达到模糊匹配的效果，管理员输入一定的字段就可以对数据进行检索，达到提升效率的目的。图：5-12管理用户评论效果图6、系统测试6.1测试概述保证网站社区在之后的使用当中，出现bug的概率降低，包括使用者在误操作的情况下拥有较好的交互性，对网站进行严格测试是非常必要的环节。按照需求的设计，尽可能接近真实操作环境，同时满足功能上的设定，撰写测试所需要的用例，再根据用例表对美妆社区的所有功能点进行覆盖测试，发现使用中的异常，应尽可能得做好全面测试，边缘测试，覆盖率应该要足够满足网站得要求，保障在项目具有很好的用户使用效果，降低错误率[12]。黑盒测试较为适合美妆社区系统。功能上的测试也称作黑盒测试，测试过程中对于网站的内在逻辑和结构是无法体现的，主要测试的是整个网站的功能设计。应当主要测试网站的功能使用，同时考虑用户的可能操作范畴，尽可能的达到更高的覆盖率测试，检验能否保证网站正常运行，再操作食物后能不能做出很好的处理。6.2可用性测试(1)未登录使用测试：未登录用户操作网站，可以对现有图文内容进行正常查看，首页的广告，轮播图推荐和热度文章，推荐同时可以查看所有的文章内容，当游客要进行评论发布的时候会提示游客没有相应的权限，应当进行登录后进行操作，而当游客登录后并没有账户密码会提示游客去注册。实现了网站登录权限的管控，根据需求设计来看，权限的控制没有问题，测试通过。(2)用户登录使用：除了可以浏览所有文章，可以查看轮播图内容还有热度推荐。使用者对文章和个人信息管理需要访问自己的主页，通过信息页面管理，同时登录使用者还可以进行图文内容的更新，可以进行文章评论。根据需求功能，来完成游客的功能模块，测试通过。(3)管理者操作：想要对网站其他用户内容进行操作，需要用户管理员用户权限，登陆后才能对网站信息内容进行的管理。同时，可以对文章进行综合管理，进行增加，删除修改。另外高级管理者可管理类目，修改文章所属类目，对分类进行更新等其他内容管理权限，需求设定符合管理员角色。表：6-1测试方案用例操作测试用例期望结果测试结果打开网站浏览正常查阅主页图文内容，访问文章正常。访问正常，评论点赞失效。和期望效果一致不登录发表文章评论打开网站，直接评论内容警告“未登录，请您先登录后进行操作”和期望效果一致进行注册昵称手机号码空白或者账户密码空白、输入已有手机号警告“信息不完整，请查看”、“注册失败，手机号已注册，可直接登录”和期望效果一致点击登录使用错误的账号和密码警告“手机号或密码有误，请查看”和期望效果一致点击管理者登录使用错误信息登录警告“无效管理者”和期望效果一致进行管理操作对分类进行增加删除，修改文章所属类目操作成功和期望效果一致6.3安全性测试保证网站正常运营的先决条件是稳固的安全系统。在游客使用中没有权限，对系统进行后台修改操作，避免游客越权操作，保证用户的安全可靠性，应避免访问过程中对其他用户的内容或信息进行访问和篡改。同时管理员应当在使用中进行权限的严格控制非管理员用户进入管理员后台进行操作。在测试过程中，使用非管理员账户进行登录提示账户或密码不存在，请联系管理员，如果强行将网站输入后台管理的导航内容前台会判断是否有token存在，如果没有的话，重新跳转登录界面。经过测试发现，网站的安全可靠性得到了保障，测试无误。6.4系统测试结果总结运用黑盒测试对网站进行了整体的功能测试，可以发现结果基本能够满足未来的网站运行需求，对一些隐藏的问题，或许目前并未发现，对于功能需要是可以达到使用标准的。对于小部分未完善的功能点，应当在后面的使用和测试中发现和改进，同时不断进行版本更新，达到更好的使用效果。在后期的测试中会继续对网站性能和一些细节进行测试，更全面的保证网站的运营稳定性。7、结论以及展望7.1总结在选定了美妆社区这个课题后，对于美妆这个行业的认知还比较浅薄，大量查阅资料后发现美妆其实在古代就存在的，而综合个人的一些基础知识，总结出实现美妆的一些基本思路，首先在系统内容选择相较实用的功能。而在实现上选用了目前最流行的vue框架，由于在构建中小型项目上是非常适合的框架，而在后台上选用了JavaScript基础的nodejs。数据库上，选用了较为灵活的mongodb数据库。在开发美妆社区，这个网站过程中，发现在框架的建设和部署工作上不是很了解，且vue的使用还是比较浅薄的。在大量查阅的视频资料以及外文文献，发现其实vue的核心还是js，经过不断地学习和积累，发现了vue的路由器是一个很强大的前端权限控制工具,应用好路由的控制可以对页面跳转进行一个非常友好的交互，同时vue的动态管理工具vuex，也是非常适合页面控制的。在本次开发中不断地翻阅相关资料，询问同学解开了许多难题，使用上也趋于熟练，个人技术有了长足的进步。许多问题也能独自解决，重要的是提升了自身的学习解决问题能力。通过这次开发了解到了webpack的使用和配置。也通过这次开发知道了webpack的强大之处，它可以使传统的网站开发变得非常的敏捷，同时经过配置也可以使网站优化变得非常的简单，运用一些插件打包工具，可以使原生的一些传统js和css，压缩成非常小的内容，从而在用户请求的时候压缩体积，减少文件体积，加快请求速度，加快渲染速度，优化网站性能。经过这三个月左右的学习和网站开发，发现做一个网站还是需要考虑到特别多的细节，特别是这些细小的功能上应当做到尽善尽美。在一些非常微小的功能点上，还是有可圈可点的地方，后期还是应该继续进行优化，比如。用户的功能模块有喜欢和点赞带货打赏更多，同时还有一些关注的功能没有实现，因为在评论中也无法进行评论的回复，在用户登录后无法修改用户的个人头像，在真正商业开发的时候应当做到分模块分工。对每一个细小的功能点进行任务划分，这样才能做到每一个模块的非常微小的功能点，做到尽善尽美的开发。在后端接口的开发中，其实后端的结构还是应该做一些日常的异常处理，同时对一些常用的模块进行一个封装，在接口开发中，应当遵循模块划分原则，为后期的维护做准备，同时接口应当遵循resful风格。本次遇到的难题也通过老师得到解答，不但拥有了实际项目开发经验，也学习到了不一样的思维方式，提升了不少能力，特别是问题处理的机制和思想，解决问题的能力才是最宝贵的才能。本次开发中对于软件有了全新的展望和认识，同时也提升了不少的实力，奠定了日后开发的基础。7.2展望终于还是迎来了毕业之时，经过这次毕业设计，本人学会到了许多软件方面的知识，并且在软件开发这个周期中有了长足的进步，认识到了软件是一项伟大的工程，在以后的工作中更加顺利。对此本人也希望同学们好朋友们室友们能够在以后的软件研发上做出伟大的贡献，作出傲人的成绩。经过这次开发让本人感觉到自己对软件开发的热爱，希望在以后的职业生涯中能持续的在软件研发上越走越远，做出令人震撼的作品，同时也应该在技术这条道路上继续生根，本次网站开发量本人受益良多，为以后的开发学习奠定了基础，本人立志要做一个伟大的研发工程师工程师。参考文献[1]俞军.俞军产品方法论[M].中信出版集团.2019.[2]赵祖荫.王云翔,胡耀芳.网页设计与制作教程[M].北京:清华大学出版社.2008.[3]EthanBrown.Node与Express开发[M].人民邮电出版社.2015.[4]霍多罗夫.

MongoDB权威指南[M].人民邮电出版社.2014.[5]结城浩图解设计模式[M].人民邮电出版社.2016.[6]王世安.构件化网站开发教程[M].冶金工业出版社.2015.[7]梁灏.Vue.js实战[M].清华大学出版社.2