基于Vue的大学生活科普网站交互设计与实现

绪论1.1研究背景近几年毕业大学生的数量与日俱增，由人社部统计：2023届高校毕业生将达到1158万人。随着互联网的普及和发展，大学生作为社会的新鲜血液，越来越多地依赖于网络获取信息。然而，在信息爆炸的时代，大学生面临着信息过载的问题，同时也存在着信息差问题。信息差是指在获取和利用信息的过程中，由于个人的知识、经验、能力等方面的局限性，导致对信息的理解和判断出现偏差。这种现象在大学生群体中尤为明显。基于此，本次毕业设计将设计实现一个用户友好、易于操作的网站界面，为用户带来更直观便捷的了解信息的渠道，能够吸引更多用户和提升用户黏性。大学生科普网站上主要是关于学生需要了解的技能考试、热门大赛、住房攻略、公司福利、基本常识、简历制作指南以及毕业生求职等信息。用户可以在该网站上学习各种技能知识，浏览相关学习视频，不仅如此，用户还可以在论坛上相互交流互动，对热门词条进行搜索。该项目有助于用户对最新资讯的掌握了解，有助于提高大学生的信息素养，减少信息差现象，为他们的成长和发展创造良好的条件。1.2研究目的和意义1.2.1研究目的为满足用户查阅信息的需求，设计实现一个基于Vue的大学生活科普网站，通过科普内容的传播，帮助公众了解最新的科研成果和科学技术的应用，增强群体的创新意识和科学文化素质。科学技术与经济发展紧密相连，科普网站可以帮助公众理解这两者的结合点，从而对推动经济高质量发展和经济转型起到积极作用。科普内容往往与人们的日常生活密切相关，如食品安全、医疗卫生、能源应用等，这些信息的普及有助于提升人们的生活质量和安全感。互联网健康教育和医学科普可以为公众提供健康知识的学习平台，增强对健康的自我掌控，改善民众的健康素养，推动医疗效果的整体改善。通过科普网站不仅可以有效地传播应急避险知识，提高公众在面对自然灾害和突发事件时的应对能力，科普网站还可以加强对环境保护和可持续发展的教育，引导公众参与到环保行动中来，共同维护生态环境。科普网站通过有趣的互动和丰富的视觉内容，能够激发青少年对科学的兴趣，培养未来的科学家和工程师。本网站通过后台添加和管理文章信息、录入文章内容、用户管理等，前台用户通过登录系统、查看主题列表各个种类的文章获取信息、发表文章和阅读文章等。1.2.2研究意义基于Vue的大学生活科普网站是科普教育的重要载体，通过研究基于Vue的大学生活科普网站可以为科普教育提供更加便捷、高效的技术支持，推动科普教育的发展；基于Vue的大学生活科普网站可以通过图文、音频、视频等多种形式展示科普内容，丰富科普形式，提高用户的学习兴趣，还可以根据用户的兴趣和浏览历史，为用户提供个性化的科普内容推荐，使用户能够更快速地找到自己感兴趣的科普知识；基于Vue的大学生活科普网站是通过结合数字媒体技术和信息管理来实现对文章的高效管理，在管理员具备一定的计算机操作能力下提高文章管理效率。文章信息化，提高管理效率，为用户提供更多和更便捷的服务，简化程序，聚焦于查询浏览文章方面的功能。1.3国内外研究现状1.3.1国内研究现状Vue.js是一种用于构建用户界面的渐进式JavaScript框架。与其他主流前端框架如React和Angular相比，Vue在某些方面有着其独特的优势。从团队使用Vue的实践经验来看，Vue的使用方法相对简单明了。它融合了React的组件化、prop、单向数据流等核心概念，同时也采纳了Angular的模板语法，并加入了双向数据绑定的特性。这使得在开发过程中，开发者能够更加灵活地应对不同的需求和场景。随着前端技术的不断发展,诞生了许多优秀的前端开发框架,其中Vue.js开发框架以其简单易学易用的特性,吸引了大量开发者,框架的完善程度和流行程度都在不断提升[2]。随着前端技术的不断发展,诞生了许多优秀的前端开发框架,其中Vue.js开发框架以其简单易学易用的特性,吸引了大量开发者,框架的完善程度和流行程度都在不断提升。国内科普宣传工作的开展仍以传统宣传形式为主,采用集中时间的定点宣传。部分科普机构、部门的门户网站和科普专栏疏于管理,微信公众号、微博等新媒体宣传渠道也不及时更新,使得公众对此类宣传缺乏兴趣。科普宣传工作所开展的深度和广度有限,很多地方的科普宣传仍表现为科普讲座、广场宣传等特定形式,缺少对听众需求的分析,无法针对受众开展特定形式的宣传活动，最后是宣传效果没有达到预期,从现有的图书、美术作品和音像制品来看,其宣传缺少交流性,所以需要基于当前的网络背景开发出具有革新性宣传模式[8]。1.3.2国外研究现状在国外，Vue.js的应用发展非常广泛，涵盖了从简单的示例项目到复杂的实际应用。首先，在GitHub上有许多获得大量Star的Vue.js项目，这些项目包括了各种不同类型和规模的应用程序，如仿豆瓣电影webApp、仿手机QQ单页面应用、小米官网仿制版以及基于Vue2的知乎日报单页应用等。此外，还有一些涉及到后端开发和数据库管理的项目，比如基于vue.js、node.js和mongodb开发的DoraCMS，这类项目可以帮助开发者更好地理解如何在实际项目中整合Vue.js与后端技术栈。此外，还有一些涉及到后端开发和数据库管理的项目，比如基于vue.js、node.js和mongodb开发的DoraCMS，这类项目可以帮助开发者更好地理解如何在实际项目中整合Vue.js与后端技术栈。国外科普网站的研究现状非常活跃且多元化。不同类型的网站上，科普内容的比重差异较大。例如，门户网站的科普内容占总信息量比重相对较低，新闻媒体的科学新闻是重要版块。然而，在英国和其他欧洲国家，学术机构的网站的科学传播内容丰富。此外，也有一些特定的杂志，如Science，Nature，PNAS等，被大量研究者用来发表自己的观点和研究成果[9]。这些杂志在科普工作中也起到了重要的作用。1.3主要研究内容本文主要调研了解项目背景和国内外研究现状，明确解决的问题和实现技术。完成基于Vue的大学生活科普网站交互设计与实现，通过本网站可以让用户更直观、快速的了解查阅信息的渠道，通过搜索或浏览查看相关信息，帮助用户科普更多大学期间的一些活动竞赛等，也帮助用户解决信息差问题。主要的研究重点主要有三点：一是浏览相关活动或竞赛，可实时参加和收藏活动，并可随时取消收藏和撤销参加；二是可以查看在线论坛，评论文章内容，并可进行收藏和点赞，以及发布自己的论坛文章和管理自己的文章评论；三是用户能随时查看自己参加的活动记录以及点赞评论内容。1.4论文的组织结构本文一共分为七个不同的章节，分别是：第一个章节是绪论，这个版块主要阐述了国内外针对本网站的研究现状和对比，从而得出了本系统的主要研究内容，以及研究背景与研究意义。第二个章节是开发工具与关键技术，对本系统使用的开发工具进行了介绍，以及对关键开发技术的开发原理进行整理和分析，并对数据库和前后端分离进行了说明。第三个章节是系统分析，结合网络调查和现有活动申请系统出现的问题，进行业务描述和业务问题概述，对此类问题的业务流程和角色进行了分析，对系统用例进行了详细的分析，从而得出本系统的开发结构。第四个章节是系统设计，通过对系统的功能结构和框架结构进行绘制和分析，总结出了系统的总体设计，并对所有的功能模块进行分析，绘制时序图。其次进行数据库设计，分别使用用例图和ER图对实体和数据库关系进行了介绍，使用表格展示了所用到的所有数据库表信息。最后确定了本系统的主要UI设计，完成系统的主要配色和版块设计。第五个章节是系统实现，该部分详细介绍本系统的实现环境和核心功能，从首页、分类列表、论坛中心、文章展示、个人中心等几个模块进行阐述。第六个章节是系统测试，主要介绍了本系统的测试环境，进行测试的目的，并记录了测试用例，并对测试结果进行了详细的分析。最后通过测试结果对系统的功能进行了修改与完善。第七个章节是总结与展望，是完成毕业设计期间的学习成长记录和总结，以及对未来的发展的期许与规划。1.5本章小结本章节对本系统的前期准备工作进行了详细的介绍。从查阅资料到需求分析、原型分析、系统实现、测试修改的全过程，对国内外的日程系统进行比对和分析，得出本系统开发的意义，并通过不断的查阅资料，完成系统的前后端分离开发，在这个过程中，学习到了很多新知识。2相关开发工具及技术2.1开发工具VisualStudioCode是一个运行于OSX、Windows和Linux之上的，针对于编写现代Web和云应用的跨平台编辑器。VisualStudioCode为开发者们提供了对多种编程语言的内置支持，同时也会为这些语言提供丰富的代码补全和导航功能。JavaScript，TypeScript，Node.js和ASP.NET5开发者也将会获得额外的工具集。2.2开发技术2.2.1Vue框架Vue.js是一套构建用户界面的渐进式框架。Vue.js采用了自底向上增量开发的设计，具有轻量，简洁的特点。在Web应用的开发中视图层是Vue.js的核心库主要关注的，Vue.js与其它的JavaScript库和现有的项目进行整合的时候非常容易。并且Vue.js完全可以采用单文件组件配合相关的工具和支持的库进行开发复杂的大型单页面的Web应用。Vue.js是基于HTML、CSS和JS的渐进式前端开发框架，用于构建用户界面。其组件化的编程模型，能够高效地开发用户界面。核心是重视用户界面层，开发者能够简单上手，可以方便与第三方库或已有的项目嵌套使用。Vue.js框架目录结构如表2.1所示：表2.1Vue.js开发框架目录结构目录名称主要作用APP应用的核心代码，大部分业务将在该目录下进行Views存放所有页面代码的文件目录package.json用于存放依赖关系的文件config各种配置文件的目录Api存放所有接口的文件目录Layouts项目所有布局文件Styles目录下包含所有SCSS样式文件public为应用程序的入口目录，存储项目用到的所有图片或视频资料Store用于存放所有数据库文件validator验证相关目录components存放所有封装的组件文件Main.js用于引入第三方库、自定义插件HTML是建造网页的基本元素，可以用于嵌入图片与对象，创建交互式的表单，结合CSS样式处理，能够被浏览器读取并展示。使用Vue.js框架技术之后就不需要和HTML直接交互，而是使用组件式的开发方式，使用一个VUE文件会将内容挂载到一个DOM元素上，然后进行一些相关的事件处理或监听，所有值都是响应式的，能够使用一些指令在渲染的DOM上应用响应式行为。Vue.js和HTML有很多差别，具体比较如图2.2所示：表2.2Vue.js开发框架和HTML结构比较Vue.js框架技术HTML基本结构文件类型不同.vue的格式结尾.html格式结尾代码架构不同template是一级节点，与script和style是并列的一级节点一个html大节点，里面有script和style节点外部引入文件的方式不同import引入js或css文件；utils文件引入；组件全局导入；组件单独导入；html中通过script、linkhref引入js和css元素的操作不同采用MVVM模式，渲染性能较好需使用js操作DOM通过上面的比较，Vue.js的优势在于能够适应开发技术的进步，满足开发需要，因此本系统使用Vue.js框架技术进行前端开发。一方面是Vue.js是我学习的主要专业技术，在完成项目开发的同时，能够不断掌握其关键技术，是对我学习深入程度的考验和检验。另一方面是Vue.js是主流的前端框架技术，能将其牢牢掌握，有助于我在工作中进行商业项目开发，同时结合一些新的技术，不断充实知识储备，积累开发经验。随着信息技术不断进步，编程技术在不断更新迭代，必须不断地练习和实践，才能更快地学习新的技术和运用于实际生活中。在本系统中，主要需要实现的功能是登录的路由判断、对表格进行增删改查、在线论坛的发布、点赞与收藏操作。使用Vue.js框架，结合VueRouter、Axios进行接口路径的处理，实现角色的辨别与路由的切换。使用Slot插槽实现对表格数据的处理，便于参加活动、收藏互动等功能的实现。在界面中，使用Transition实现单元素或组件的过渡，使用Animation结合Animate.css为功能模块添加进入、离开过渡动画，增强用户视觉体验。2.2.2Node.jsNode.js是一个开源且跨平台的JavaScript运行环境，它允许JavaScript代码在浏览器之外运行，主要用于服务器端应用程序的开发。Node.js使用了GoogleChrome的V8JavaScript引擎，因此执行JavaScript的速度非常快，性能出色。对于需要处理大量用户请求的Web应用，Node.js能够提供良好的性能。它的轻量级线程模型意味着在处理高并发请求时，资源消耗较低，这对于用户表单收集系统、后台管理系统等场景特别有用。Node.js因其独特的优势，在实时应用、分布式系统、工具开发、高并发Web应用以及多人在线游戏等领域都有广泛的应用。此外，它还支持微服务架构，有助于提升Web应用的开发效率和可维护性。在当今的互联网公司里，越来越多的开发团队选择使用Node.js作为服务器平台来开发软件产品，使用Node.js开发的软件产品也因为Node.js的优势而越来越广泛。全球知名的职场社交平台领英的移动平台也从最开始的Ruby全部迁移到Node.js，并且因为使用了Node.js，服务器的数量也骤减，变为原来的十分之一。并且全球各大出名的互联网公司也有众多产品已经使用了Node.js作为服务器开发平台，并且都取得了非常好的反馈。包括LinkedIn、Yahoo、Paypal、Walmart、Groupon等国外公司，雪球、淘宝、网易、百度等国内公司，他们有很多项目都使用了Node.js环境。Node.js具有以下突出之处：使用JavaScript语法，保持了前后端开发语言的一致性；基于chrome浏览器的V8引擎运行，性能突出；采用时间驱动、异步编程模型，高并发、低消耗；支持unix，windows等不同的系统平台，可以跨平台使用。显然，Node.js的这些优势使得其对于用户数量大，并发高，IO密集的系统的开发是不二之选。2.2.3MySQL数据库MySQL数据库是一个广泛使用的关系型数据库管理系统（RDBMS），它特别适合于进行各种数据分析任务。目前市面上，对数据进行处理使用最多且最便捷的就是MySQL，其具备开源、跨平台使用的特性，是众多软件开发者的首要选择。MySQL是一个关系型的数据库管理系统，将数据信息存放到不同的数据表中，可以提高数据库的读写效率。使用者在进行数据库设计时，必须遵循数据库设计基本原则，对数据库表之间的关系进行联络和梳理，方便开发者对数据进行访问和处理。MySQL数据库的系统特性如下：（1）操作数据时响应速度快，只需使用sql语句就可进行查询，操作简单，能够大大减少项目开支。（2）使用多种编译器测试过的语言，其可移植性极高，保证不会受到约束和控制。（3）支持多线程的处理方式，能够充分利用中央处理器的资源。（4）数据安全保障。在连接数据库时，对用户输入的密码进行了加密，将加密后的编码存入数据库中，能够充分用户的密码安全。（5）支持各种开发使用，方便用户操作数据。（6）MySQL的体积较小，这使得它在资源有限的环境下也能高效运行。（7）MySQL的性能稳定，很少出现异常宕机，这对于需要长期稳定运行的系统来说是至关重要的。2.3本章小结本章节主要对系统开发使用的开发工具进行了介绍，并对前后端开发使用到的框架技术进行了详细的介绍。其中前端使用Vue.js3.0框架技术，后端使用Node.js框架技术，以及这些技术的实现原理和方法进行了详细的介绍。3需求分析3.1功能性需求分析根据传统的科普网站系统的特点，一个科普系统的主要功能应该包括:网站注册登录、文章页面展示、点赞以及文章评论、个人空间、后台功能管理等。本系统结合实际应用，根据这些典型的网站的功能将分为六大功能模块:登录注册模块、首页模块、个人空间模块、用户管理模块、角色管理模块以及文章与评论管理模块，并对这六个关键的功能模块展开详细的需求分析和说明。3.1.1登录注册模块登录注册模块是用户访问应用程序的入口，它不仅需要提供便捷、快速的访问途径，还要确保安全性和隐私保护。以下是对该模块的一些功能需求分析：用户在注册时需要输入有效的手机号，通常为11位数字，且需判断是否以合法的运营商号码段开头。系统应能检测输入是否超过规定长度，并在不符合要求时给出提示。为防止自动化工具注册账户，可以引入图形验证码，该验证码应为动态生成的包含大小写字母及数字的组合。用户每刷新页面或点击刷新验证码时，都应产生新的验证码。用户输入手机号后，应能通过点击获取短信验证码，该过程包括发送60秒倒计时，以及设置验证码有效期（如10分钟）。超过有效期需可重新请求发送。当用户输入的手机号已被注册时，系统应提示用户直接登录而不是重新注册。对于多次输入为空或其他无效操作，应有相应的频繁操作提示。除了传统的用户名和密码登录，还可以提供第三方登录选项，例如微信登录等，以便提高转化率并减少跳出率。设计清晰友好的用户界面，确保用户能够轻松地完成登录和注册流程。页面间的交互要流畅，提示信息要明确易懂。综上所述，登录注册模块的设计需要综合考虑用户体验、安全性、数据收集等多方面因素，以实现一个既方便又安全的访问入口。3.1.2首页模块首页模块是网站或应用程序中最重要的部分之一，它通常是用户首次访问时的入口点。因此，首页模块的需求分析需要考虑到用户体验、功能性和视觉效果等多方面因素。导航功能：首页应该提供清晰的导航功能，使用户能够轻松地找到他们想要的信息或服务。这包括主菜单、子菜单、搜索栏等。布局和设计：首页的布局和设计应该简洁、易于理解，并且符合品牌形象。重要的信息和功能应该突出显示，以便用户能够快速找到它们。响应式设计：首页应该适应不同的设备和屏幕尺寸，以确保用户在任何设备上都能够获得良好的体验。内容展示：首页应该展示有吸引力的内容，包括文字、图片、视频等，以吸引用户的注意力并提供有价值的信息。用户交互：首页应该提供一些用户交互的功能，例如登录/注册、联系我们、订阅新闻等，以便用户能够与网站或应用程序进行互动。社交媒体集成：首页可以集成社交媒体功能，例如分享按钮、社交媒体链接等，以便用户可以方便地分享内容并与其他人互动。3.1.3个人空间模块个人中心页面是一个集合了用户个人信息、功能入口以及相关设置的专属区域，它是用户与APP交互的重要部分。个人中心应能够清晰地展示用户的个人信息，如头像、昵称、用户名等，以便于用户识别和确认其个人空间。个人中心应该提供清晰的功能入口，例如设置、我的点赞、收藏夹等，这些功能入口应该是用户经常使用的操作，需要突出并易于访问。个人中心的布局应该合理，可以采用宫格、列表或宫格+列表的形式来组织内容，以提高用户体验和操作效率。个人中心的设计应考虑用户的操作习惯和逻辑，使得用户能够顺畅地完成任务，例如历史记录、修改设置等。随着产品的业务发展，个人中心可能需要添加新的功能和服务，因此在设计时应考虑到未来的扩展性和适应性。3.1.4用户管理模块用户管理模块是后台管理系统中的关键部分，主要负责处理与用户相关的各种操作和数据管理。用户可以注册账号，完善个人信息，收藏感兴趣的内容，对文章进行点赞评论分享等，查看历史浏览记录，消息通知，提醒用户关注的问题有新的回答或者活动有新的更新。3.1.5角色管理模块角色管理模块是后台管理系统中的关键组件，用于定义和管理不同角色及其权限。允许管理员创建新的角色，并编辑现有角色的名称、描述等基本信息。为每个角色分配具体的操作权限，这些权限决定了角色可以访问和操作的功能模块。允许管理员将用户添加到角色中或从角色中移除，以实现对用户权限的批量管理。提供强大的搜索功能，帮助管理员快速找到特定角色，并根据不同条件进行筛选和排序。3.1.6文章与评论管理模块用户可以创建、编辑、组织和发布文章内容，提供富文本编辑器，支持文本格式化、图片和视频插入、超链接添加等功能，以便用户轻松创建和编辑文章内容。允许用户为文章分配一个或多个分类和标签，以便于内容的管理和检索。支持定时发布、立即发布和草稿保存等功能，使用户能够灵活控制文章的发布时间和状态。提供强大的搜索功能，帮助用户快速找到特定文章，并根据不同条件进行筛选和排序。允许用户对文章进行评论，并提供给管理员回复、删除或置顶评论的功能。3.2角色需求分析3.2.1管理员需求管理员主要是针对系统的所有用户，所有发布的文章和活动进行管理的人员。他们的账号不需要通过注册，而是通过系统所有者根据需要直接操作后台的数据库而设置的。管理员的身份一般是对系统的管理，不需要发布文章，修改自身资料已经留言和评论的功能，只需要对系统所有用户以及他们所发布的所有文章进行管理，主要对用户发布的文章内容进行审核，防止文章包含涉黄涉暴等违法内容。主要操作功能就是删除用户账号和删除违规文章。同时，管理员也可以作为普通用户进行浏览网站信息等。3.2.2普通用户需求系统的用户管理模块主要是针对用户类型，用户类型有游客、普通用户。游客是在该网站上没有注册登录的用户，他们可以随意浏览网站上的文章和活动，无须登录即可浏览文章内容和搜索文章。而普通用户是已经注册登录的用户，他们可以修改个人信息，发布文章，点赞评论，管理评论留言，也可以参加网站上的活动以及退出网站。3.3非功能性需求分析3.3.1安全性在系统的实际运行过程中，不仅要满足功能和性能方面的需求，系统的安全性需求也是前端开发人员在开发时必须考虑的问题。系统应实现一个健壮的用户认证机制。这通常涉及用户名和密码的验证，可能还包括多因素认证，以确保只有授权用户才能访问系统。基于用户角色的访问控制（RBAC）是保护系统安全的常用方法。它要求为每个用户分配角色，并为每个角色定义一组权限，从而限制用户对系统资源的访问。通过转义前端和后台的字段，可以有效防止跨站脚本攻击（XSS）。XSS攻击是指攻击者将恶意脚本注入到其他人浏览的网页中，这些脚本随后在用户的浏览器内执行，可能导致信息泄露或其他形式的攻击。对于涉及功能安全的系统，还需要明确其对应的安全完整性等级（SIL或ASIL），并按照输入、处理、输出的格式来编写每一条需求描述。3.3.2易用性本文设计和实现的网站具有直观、清晰和一致的设计，使新用户能够快速理解如何使用。包括明确的导航菜单，清晰的按钮和链接，以及一致的颜色和字体等。而且网站还提供一个强大的搜索引擎，使用户能够快速找到他们需要的信息。搜索结果应该相关且准确，并且可以按照相关性或其他标准进行排序。网站不仅优化其加载速度，以减少用户等待时间。这可能涉及到优化图片和其他媒体文件，减少HTTP请求，以及使用缓存等技术，网站还提供一个用户反馈系统，让用户可以轻松地提供他们的建议和问题。这可以通过在线表单，电子邮件，或者实时聊天等方式实现。3.3.3性能需求为了解决前端开发中低配置计算机在页面渲染上的性能问题，本文设计以下功能来优化性能和提升用户体验。使用内容分发网络（CDN）来加速静态资源的加载，提高全球用户的访问速度，实现有效的缓存策略，减少数据库查询次数，加快页面加载速度。对前端和后端代码进行优化，减少不必要的计算和内存使用，提高效率。采用合适的图片格式，并对其进行压缩，使用图片懒加载技术，确保快速加载显示关键图片。使用虚拟DOM技术（如React或Vue）来减少DOM操作的开销，提高页面渲染效率。合理设置HTTP缓存策略，利用浏览器缓存机制减少重复资源的加载。本用例是用户登录系统之后，查看日程信息之后，进行的查看、参加或收藏日程信息的操作。3.4本章小结本系统的主要角色是用户和管理员，用户主要是游客和普通用户，其能够操作的主要功能有：注册登录网站、浏览文章内容、查看参加或收藏感兴趣的文章或者活动、查看收藏、查看点赞或收藏在线论坛信息、发布论坛文章、管理发布的文章、点赞及留言、查看个人信息等的功能；管理员主要功能有：用户信息管理、在线论坛管理、主页管理等。4系统设计4.1系统总体设计4.1.1功能结构设计通过需求分析和用例描述总结出本系统的主要功能总体结构图。主要有五个大板块，分别是首页、分类列表、活动专区、在线论坛、个人中心。具体信息如图4.1所示：图4.1功能结构图大学生活科普网站主要包含了5个主要功能：首页、分类列表管理、活动专区管理、在线论坛管理、个人中心管理；分类列表中包括有热门竞赛、技能考试、就业指南，用户可以在其中浏览自己感兴趣的内容；关于在线论坛中用户可以对文章进行点评操作，也可在我的论坛页面自行发布文章以及查看用户的喜欢和收藏信息；在个人中心中主要有：个人信息，用户的浏览文章记录、对文章进行搜索等功能。4.1.2框架结构设计本系统主要使用Vue.js前端框架结构，使用MVVM设计模式实现自底向上的开发过程。来开发一款便捷高效、功能齐全的大学生活科普网站。MVVM设计模式具体原理信息如图4.2所示：图4.2MVVM结构图MVVM设计模式具有很多优点：耦合程度低。视图能够不受模型的修改与改变的作用而单独存在，一个视图模型可以和不同的视图进行关联，当视图或者模型被修改而发生变化的时候对应的模型或者视图则可以不受任何影响。可重复使用。将一些视图组件的逻辑放在同一个视图模型里，然后可以让很多不同的View使用该视图逻辑，从而该视图逻辑可以被重复使用。可单独开发。不同的开发人员可以专注于不同的开发方向，比如对软件系统的业务逻辑以及系统数据的开发，而页面设计师可以只用注重于页面的设计。可测试。可以通过针对视图模型编造测试用例并对界面进行测试。后端采用MVC模式，MVC的分解成不同的层这种开发模式同时也简化了开发人员不同小组的开发，不一样的开发工作可以由不同技术方向的开发人员进行开发，主要包括对视图、控制器和业务逻辑等方面的开发工作。MVC模式和MVVM模式有下面的不同之处。运用Node.js框架对大学生活科普网站系统进行开发，旨在构建一个简单、高效、实用的后端框架，用于承载数据和进行数据处理，为前端提供接口，完成数据的动态处理。MVC架构图如图4.3所示。图4.3MVC架构图4.2功能模块设计4.2.1登录登录时用户输入账号和密码信息之后，点击登录按钮时，前端将用户信息传递给后端，后端通过比对数据库的数据，返回不同的权限信息。并通过权限去匹配路由信息。对前端的目录进行动态添加路由信息，页面跳转到该权限下的用户页面，实现用户管理员的自动识别和跳转，达到登录的功能实现。具体登录时序图如图4.4所示：图4.4登录时序图4.2.2参加或取消参加活动参加活动是本系统的主要功能之一，用户登录系统之后，可以查看大学生科普网站里面的各种活动，查看自己感兴趣的活动并点击参加，点击参加之后，按钮自动变成撤销的功能，活动信息会自动保存到用户的个人中心，用户可以方便查看或者设置活动提醒时间，实时提醒用户去参加活动。参加活动时序图如图4.5所示。同时用户可以选择取消参加活动，在活动申请时间结束之前点击撤销即可。此时，用户个人中心也会自动删除活动信息，方便用户使用。取消活动时序图如图4.6所示。图4.5参加活动时序图图4.6撤销活动时序图4.2.3点赞、收藏文章或取消点赞、收藏用户登录系统之后，可以查看在线论坛的所有论坛信息，在浏览论坛时，进行点赞收藏评论等操作，状态会改变，同时系统自动将用户点赞、收藏或评论的文章存到用户的论坛中，方便用户查看。点赞、收藏和评论文章时序图如图4.7所示：图4.7点赞、收藏或评论文章时序图用户也可以取消点赞或者取消收藏文章，进行操作之后，点赞或收藏的数量会减少，回到初始的状态，用户的个人论坛中也会自动删除取消操作之后的文章。取消点赞、收藏时序图如图4.8所示：图4.8取消点赞、收藏或评论文章时序图4.2.4发布论坛文章信息用户登录网站之后，在我的论坛板块可以发布论坛文章，点击发布按钮之后，文章会进入到最新板块，同时个人论坛中也会显示用户发布的文章信息。发布论坛文章时序图如图4.9所示：图4.9发布论坛文章时序图4.2.6管理员管理员输入账号密码之后，后端接收到前端传递的接口，拿取管理员输入的账号密码信息，并通过sql语句自动匹配数据库数据，返回角色权限信息，对路由进行动态添加，得到菜单信息，跳转到管理员用户界面。管理员主要进行登录管理、用户信息管理、论坛信息管理和主页管理，对所有数据进行相关的操作。管理员时序图如图4.11所示：图4.11管理员时序图4.3数据库设计4.3.1数据库设计方法数据库的设计是每一个系统开发的根基，根据系统的业务信息求、处理需求，设计出数据模式以及应用程序，能够有效地对数据信息进行存储，方便用户通过sql语句对数据库数据进行相关的操作。数据库设计通常有以下几种方法：直观设计法、规范设计法、计算机辅助设计法、自动化设计法。这些方法都能够帮助用户进行数据库的设计，对数据进行处理，也是近几年来常用的一些数据库设计思路的体现。4.3.2实体关系分析实体－联系图，是用于显示实体之前关系的图，通常包括三个属性，分别是类型、属性、联系。通过对实体之间的关系进行探究，对我们的功能开发逻辑的实现有很大的帮助。根据对数据库表的设计与分析，可以绘制出如下E-R图：用户的基本信息，实体的属性主要有昵称、电话号码、头像、电子邮箱、性别、个人简介、出生日期等，用户信息实体图如图4.12所示：图4.12用户信息实体图活动信息模块主要是装载了所有的活动信息，包括活动名称、活动属性、发起者名字、发起人单位、发起者编号、开始申请时间、结束申请时间、开始时间、结束时间等，素质活动信息实体图如图4.13所示：图4.13活动信息实体图在线论坛模块主要包括论坛文章信息和我的点赞、收藏和评论信息。论坛文章实体图如图4.14所示。图4.14论坛文章实体图在线日程管理系统总E-R关系图如图4.21所示：图4.21大学生科普网站实体图4.4系统界面设计界面的美观度是用户/对产品产生第一印象的依据之一。本系统的界面设计是在调研多个同类型系统之后，形成了现在的界面框架与样式，整个系统界面采用ViewDesign组件库设计，线条使用较为明显的粗线条搭配白色背景，增强视觉效应，能较好地引起用户的关注，增强用户的体验感。本网站/分为上下两个板块，最上面是本系统的主标题，采用蓝色背景作为显眼标识，菜单并排显示，点击菜单选项后会出现标识。下半部分基本采用粗线条用于板块区分，显得整个页面干净整洁，突出用户浏览的数据信息。用户在进行功能操作时，界面中会弹出提示，与用户完成交互，让用户了解操作进展，增强体验感。系统界面流程图显示了整个系统的所有交互跳转，能够快速定位每一个功能的关键作用。4.5本章小结本章节通过对系统的功能结构和框架结构进行绘制和分析，总结出了系统的总体设计，并对所有的功能模块进行分析，绘制时序图。其次进行数据库设计，分别使用用例图和实体关系图对实体和数据库关系进行了介绍，使用表格展示了所用到的所有数据库表信息。最后确定了本系统的主要页面设计，完成系统的主要配色和版块设计。通过对所有需求的分析，最终完成了设计。5系统实现5.1系统实现环境硬件环境：12thGenIntel(R)Core(TM)i5-124002.50GHz16G运行500G内存软件环境：Windows11开发环境：VisualStudio2019、HBuilderX运行环境：GoogleChrome浏览器5.2首页界面描述主页是用户登录之久跳转的第一个页面，主要有热门话题、最新资讯、活动推荐等板块，主要是展示一些比较热门的信息，让用户快速了解网站主要功能和需求，点击可以跳转到相应的页面。关键技术和代码本模块是用户登录之后跳转的页面，主要根据登录的用户权限进行不同主页的展示，当用户点击登录之后，传递给后端一个Uid参数，通过这个参数对数据库进行筛选之后，拿到菜单的原始数据。使用handleFetchMenu的方法，对菜单进行拼接，拼接后返给前端显示。asyncfunctionhandleFetchMenu(uid){constuserInfo=awaitcache.get(`USER:INFO:ID:${uid}`)if(userInfo){if(userInfo.role_id!==0||menuList.role_id===1){response.msg='用户端菜单获取成功!'letparentData=[]for(constitemofmenuList){if(item.p_id===0){parentData.push({meta:{title:item.title},children:[]})}}response.data=parentData}}5.3分类列表（1）界面描述按照不同的主题（如热门比赛、技能考试、就业指南等）、时间、来源进行分类筛选和排序，方便用户快速找到感兴趣的内容。热门比赛是关于学术竞赛方面的，比如数学奥林匹克、物理竞赛、编程比赛等；技能考试有语言考试：英语四六级、日语能力测试等，计算机考试：计算机二级、网络工程师、软件测试师等，职业资格考试：会计师、律师、医生等；就业指南是有关行业分类：互联网、金融、制造业等，职位分类：产品经理、运营、开发工程师等，公司分类：大型互联网公司、创业公司、国有企业等；对于时间的筛选有最近一周、最近一个月和最近三个月；最后是关于来源筛选有官方渠道：政府网站、教育部门、行业协会等，新闻媒体：新华网、人民网、腾讯新闻等，社交媒体：微博、微信公众号、知乎等，个人博客和论坛：CSDN、知乎专栏、天涯论坛等。（2）关键技术和代码本模块主要是分类列表，用户进行按钮操作，当用户点击按钮之后，proxy.$Modal.confirm弹出模态框，提示用户相关操作用户点击之后，使用postScheduleInfo将参数传递给后端改变状态，同时使用proxy.$M对用户进行提示。constmodalEvent=(state,row)=>{if(state===1){proxy.$Modal.confirm({title:'温馨提示',content:'确定参加这个活动吗？',onOk:async()=>{awaitpostScheduleInfo({id:row.id,status:1}).then(()=>{})proxy.$M('参加成功，请到个人中心查看详细信息')},onCancel:()=>{proxy.$M('取消操作')}})}5.4论坛中心界面描述在论坛中心，用户可以了解相关模块的最新动态、市场趋势和热门活动，并与其他用户交流经验、分享学习心得，用户还可以点赞评论收藏，形成更加紧密的社群关系。论坛中心还包含推荐文章、最新发布文章以及我的论坛。推荐里面的文章是用户点击率比较高的文章，最新发布的文章是按时间顺序排列的文章，我的论坛中，用户可以发布论坛文章，也可以查看用户喜欢和收藏的文章。关键技术和代码本模块主要是进行论坛的操作，其中点赞和收藏之后状态和样式的改变是重点。当用户点赞或者收藏之后，使用selectCollect方法对状态进行判断，当value.isCollect=0时是其原有的状态，等于1时是新状态。使用postCollectInfos接口向后端传递变化的参数信息，返回新状态。constselectCollect=async(value,index)=>{constcollectData=ref(0)console.log(value.isCollect)if(value.isCollect===0){collectData.value=formTemplate.data[index].collectData+=1isCollect.value=formTemplate.data[index].isCollect=1}elseif(value.isCollect===1){collectData.value=formTemplate.data[index].collectData-=1isCollect.value=formTemplate.data[index].isCollect=0}awaitpostCollectInfos({id:value.id,collectData:collectData.value,isCollect:isCollect.value}).then(()=>{postCollectData({id:value.id,isCollect:isCollect.value})})}5.5活动专区界面描述发布各类线上线下活动信息，如讲座、展览、竞赛等，鼓励用户参与，不仅如此，网站上部分活动还推出用户线上抽奖，抽中的用户，网站会以邮件的方式自动发送给用户让其填写收货地址和联系方式后续方便用户领取奖品。关键技术和代码本模块主要通过图展示数据信息，使用getQualityScore()、getActivityData()、getAllActivitiesInfo()几个接口从后端拿取数据，并展示到页面，在这里封装了一个iPrint函数，用于打印数据到控制台。constgetInit=async()=>{getQualityScore().then((res)=>{echartsTemplate.qualityScore=res.data})getAllActivitiesInfo({input:'',activer:'',type:'',key:'',order:'',page:1,size:30}).then((res)=>{tableTemplate.data=res.data.rowsiPrint.log('echartsTemplate.qualityScore',tableTemplate.data)})}5.6个人中心界面描述用户可以注册账号，完善个人信息，收藏感兴趣的内容，查看历史浏览记录，消息通知，提醒用户关注的问题有新的回答或者活动有新的更新。关键技术和代码本模块主要是战术用户的个人信息以及参与活动的数据信息。使用AsyncAwait异步函数对数据接口进行处理，其中接口是getMyScheduleInfo()，通过for循环，给数据添加序号信息，方便展示数据。并使用onMounted()函数，对表格的高度进行规定，使得表格的高度能够自适应屏幕，达到最好的效果。constMyScheduleInfo=async(param)=>{getMyScheduleInfo(param).then((res)=>{tableTemplate.table.data=res.data.rowstableTemplate.table.total=res.data.totalfor(leti=0;i<tableTemplate.table.data.length;i++){Object.assign(tableTemplate.table.data[i],{no:i+1})}onMounted(()=>{constsetTableHeight=()=>{tableTemplate.table.height=window.innerHeight-300iPrint.log('tableTemplate.table.height',tableTemplate.table.height)}setTableHeight()window.onresize=()=>{setTableHeight()}})5.7本章小结本章主要介绍了大学生活科普网站系统环境和系统主要功能的具体实现过程和关键代码展示。其中重点介绍了本网站上关于首页、分类列表、论坛中心、活动专区以及个人中心五个模块的实现。系统实现环境中主要介绍了运行所需要的软件、硬件开发和运行环境。对整个网站的代码质量、功能实现等方面不断优化测试，不断优化和改善代码质量，不断提升系统的健壮性和稳定性以及对不同浏览器的兼容性，最终使得本网站完成了需求和设计目标。6系统测试6.1系统测试环境6.1.1软件环境（1）操作环境：windows7系统以上（2）测试工具：ApiPost6（3）其他软件：office20196.1.2硬件环境（1）12thGenIntel(R)Core(TM)i5-124002.50GHz16G运行（2）腾讯云服务器（3）网络：500兆网速6.2软件测试目的本系统的测试目的主要是验证系统在运行过程中可能存在的一些问题，方便后续的修护和优化工作开展，为在线日程管理系统的测试工作提供一个基础框架。提高软件质量：通过对软件系统进行一系列的测试活动，可以显著提升软件的整体品质；满足用户需求：确认软件是否满足用户的需求和预期，保证功能的实现与业务目标的一致性；降低风险：识别潜在的问题点，减少未来可能出现的风险，如数据丢失、系统崩溃等；提高开发效率：通过早期发现问题，减少在开发周期后期修复错误的成本和时间开销；保护数据安全：确保软件在数据处理和存储方面的安全性，防止数据泄露或损坏；遵守法规标准：验证软件是否符合相关行业规范和标准要求，避免因违规带来的法律责任；提升用户体验：优化用户界面和交互流程，提供更好的用户体验和满意度；评估软件属性：对软件的性能、安全性、易用性等方面进行全面评价；文档化测试结果：形成详细的测试报告，为后续的开发和维护工作提供参考和依据。软件测试是软件开发过程中一个关键环节，它不仅有助于提升产品的稳定性和用户满意度，还对整个项目的成败起到决定性作用。通过有效的测试策略和方法，能够确保交付给用户的软件产品是可靠、安全并且符合需求的。6.3测试用例一个良好设计的测试用例可以确保软件在各种条件和环境下按照预期工作，并且能够揭露潜在的缺陷和问题。阅读和分析产品需求文档，确保完全理解了需要测试的功能以及用户交互流程，明确测试用例的目的，识别出需要验证的功能点、性能指标或安全要求，基于软件的使用情境，构建可能的用户操作序列，包括正常流程和异常流程。为每个测试场景选择合适的输入数据，包括正常值、边界值、错误值等，详细描述执行测试所需要的每一步操作，保证其他人能够根据这些步骤复现测试，清楚地说明每个测试步骤期望得到的输出或系统行为。自我检查测试用例的完整性和逻辑性，确保它们能够有效地发现潜在问题，邀请同事对测试用例进行评审，以提高用例质量和覆盖率。根据评审反馈修改和完善测试用例，将完成的测试用例纳入版本控制系统，保持其追踪性和可管理性。本系统的部分测试用例如下列表格所示。表6.1用户登录测试用例测试ID输入情况输出情况预期结果实际结果0001信息完整登录成功进入主页进入主页0002信息输入有误无法登录登录失败登录失败0003未点击登录按钮无法登录登录失败登录失败0004未输入登录信息无法登录登录失败登录失败表6.2用户查询活动测试用例测试ID输入情况输出情况预期结果实际结果0001信息完整查询成功显示相应数据显示相应数据0002输入活动名称有误查询成功不显示数据不显示数据0003只输入活动名称查询成功显示相应数据显示相应数据0004只选择发起单位信息查询成功显示相应数据显示相应数据0005只选择活动类别查询成功显示相应数据显示相应数据0006未点击查询结果按钮查询失败不显示数据不显示数据0007查询之后未点击重置查询按钮查询失败不显示数据不显示数据表6.3参加活动测试用例测试ID输入情况输出情况预期结果实际结果0001信息完整参加成功按钮变成撤销按钮变成撤销0002未点击确定按钮参加失败按钮不变按钮不变0003点击取消按钮参加失败按钮不变按钮不变0004点击撤销按钮参加失败按钮变成参加按钮变成参加表6.4点赞测试用例测试ID输入情况输出情况预期结果实际结果0001信息完整图标变成红色点赞成功点赞成功0002点赞后再次点击图标变成原状态点赞失败点赞失败表6.5发布文章测试用例测试ID输入情况输出情况预期结果实际结果0001信息完整发布文章成功我的论坛显示发布的文章我的论坛显示发布的文章0002只输入标题发布文章失败发布失败发布失败0003只输入内容发布文章失败发布失败发布失败0004点击取消按钮发布文章失败发布失败发布失败0005未点击确定按钮发布文章失败发布失败发布失败6.4测试结果分析测试结果分析是软件测试过程中的一个重要环节，它涉及对测试执行过程中收集的数据和信息进行详细审查，以确定软件产品质量并发现潜在问题。通过对本系统进行多次的测试之后，总结的测试结果如下：第一次测试结束时，测试用例的预期结果与实际结果的匹配率是55%，主要问题是点击发布文章时，系统的响应时间过长，无法在相应的时间内显示用户发布的文章信息，进行修改之后，修复了此问题。其次是在切换管理员登录时，跳转的路径会出现问题，发现是由于路由的显示有问题。第二次测试结束时，通过对第一次测试出现的问题进行修复之后，再进行测试，发现第一次测试出现的问题已经得到解决，此次测试用例的预期结果与实际结果的匹配率是95%，发现存在的问题是用户姓名重复之后，后台对数据的处理容易出现问题，需要进行进一步的修复。第三次测试结束后，对第二次测试出现的问题进行了修复，再进行测试，此次测试用例通过率99%。通过多次的测试，修复和完善了系统出现的问题，证明了本系统能够稳定的运行，系统功能能够正常使用。第四次测试结束后，本次测试过程中没有出现问题，预期结果与实际结果基本一致，能够证明本系统已经逐渐成熟，能够投入使用。6.5本章小结本章节主要阐述了系统测试的软件和硬件环境，并对测试目的和测试计划进行了规划，完成测试计划得出测试用例。经过多次的软件测试之后，本系统的功能得到了完善。软件测试是对开发的检验，也是对用户的负责任，通过一次又一次的检测，不断完善系统功能，达到用户期待的使用效果。7总结与展望7.1总结本文主要阐述了一个基于Vue的大学生活科普网站交互设计与实现过程。系统完全由Web前端的相关技术进行实现。前端部分使用了组件化思想的框架Vue.js，服务器部分使用了优势突出的Node.js环境开发。本系统前后端完全解耦，业务逻辑按照模块化的方式，Web页面基于组件化，并严格按照MVVM软件设计模式进行设计与实现。本文首先介绍了系统研究的背景情况和研究目的及意义，并对国内外的研究现状进行了简要描述和对比分析。接着对系统中使用的重要的技术进行了简要的分析与介绍，包括Vue.js框架、Node.js、面向文档的分布式数据库MySQL，MVVM设计模式、Web前端组件化以及Web前端工程化。随后本文对系统进行了系统需求分析。并根据分析对系统的总体架构进行了设计，并将整个系统划分为登录注册模块、首页模块、个人空间模块、用户管理模块、角色管理模块和文章与评论管理模块共六个模块，同时也进行了一些非功能性需求分析，接着介绍了系统的实现和测试过程。在系统的实现部