收稿日期：2023-07-03
基金项目：辽宁科技大学大学生创新创业训练基金项目（X202310146286）
DOI：10.19850/j.cnki.2096-4706.2024.05.011
摘" 要：随着科技的进步和人们对于教育的愈发重视，智慧校园已成为教育领域的热门话题。基于此，对基于Vue和Spring Boot的大学智慧校园学习交流与交易网站进行了研究，通过IDEA、Visual Studio Code开发工具实现前后端数据交互。该网站分为学习区、跳蚤市场区和生活交流区等多个分区。用户可以在网站上发布帖子，进行交流和交易。该网站为大学生提供一个方便、快捷、安全、可信的校园互动平台。
关键词：智慧校园；学习交流；交易网站；Vue；Spring Boot
中图分类号：TP393" 文献标识码：A" 文章编号：2096-4706（2024）05-0049-05
Design and Implementation of a Smart Campus Learning Exchange and Trading Website
ZHOU Yingqi， ZHANG Xiumei
（School of Computer Science and Software Engineering， University of Science and Technology Liaoning， Anshan" 114051， China）
Abstract： With the advancement of technology and the increasing emphasis on education， smart campuses have become a hot topic in the field of education. Based on this， research is conducted on a university smart campus learning exchange and trading website based on Vue and Spring Boot， and front-end and back-end data interaction is achieved through IDEA and Visual Studio Code development tools. The website is divided into multiple sections， including the learning area， flea market area， and living exchange area. Users can post on the website for communication and transactions. This website provides a convenient， fast， secure， and trustworthy campus interaction platform for university students.
Keywords： smart campus; learning exchange; trading website; Vue; Spring Boot
0" 引" 言
随着信息技术的快速发展以及人们对高质量教育的执着追求，大学校园的教学、管理、服务等也面临着越来越严峻的挑战。传统的校园管理方式已经无法满足人们的需求，智慧校园的建设使我们能够依托互联网系统强化高校与外界的联系，构建综合联动教育机制[1]。随着互联网+、人工智能、大数据等技术的不断发展，出现了更多以智慧为核心视角的服务方式[2]。而智慧校园作为应对这种变化的新型管理模式，逐渐成为当前大学校园管理改革的重要方向。智慧校园中融入信息化、数据处理、系统管理等多种技术手段，优化了大学校园的教育、管理和服务模式，进一步提高了教育质量，提高了学生的学习体验，为首创具有现代化特色的智慧校园管理模式提供了新的思路。
随着互联网技术的不断发展，越来越多的高校开始将智慧校园建设与互联网相结合，通过建设学习交流与交易网站，提升了学生的学习效率和学习体验。这种基于互联网的学习交流与交易网站在大学生中越来越受欢迎，并且已经成为推动大学智慧校园建设的重要手段。然而，国内在大学智慧校园建设方面，还缺乏成熟、系统的解决方案，亦缺乏基于互联网的学习交流与交易网站的建设经验。
综上，基于Vue与Spring Boot技术，设计并实现了一个大学智慧校园学习交流与交易网站，为大学智慧校园建设提供一种全新的解决方案。以高效、便捷、易用为网站设计目标，旨在帮助学生更好地完成课程学习，同时为学生提供、功能齐备、简单易用的交流与交易平台。
1" 网站设计
1.1" 开发环境与技术
在前端开发方面，选择Vue.js作为前端框架。Vue是一款当下流行的前端开发框架[3]，可提供数据绑定和组件化视图的功能，能够快速构建复杂的单页应用程序。同时，Vue.js具有高效的性能、灵活的可扩展性和易于使用的API，可以更加有效地实现系统的前端功能。
在代码编辑器选取方面，采用Visual Studio Code作为前端代码编辑器。由于Vue.js是一款基于MVVM的前端JavaScript框架，兼容性较好。开发过程中，对Google Chrome、Firefox、Safari等主流浏览器的混合使用进行了测试，结果是可以十分顺畅地在多种浏览器之间切换使用，多种浏览器之间的兼容性很好。
在后端开发方面，采用Spring Boot作为后端框架。Spring Boot是一个快速开发的框架，是一些库的集合，框架中的框架，只要导入相应依赖，它就能够被任意项目的构建系统所使用[4]。Spring Boot是一种基于Spring模式的微服务产品[5]。Spring Boot是一种基于JEE形式的软件产品，之后推出的MVC框架，也将其运用到各种类型的Web产品当中，在使用的过程中，先后出现了多个版本，不同版本所提供的功能有所差别[6]。采用Spring框架，可以帮助我们快速构建生产级可独立运行的Spring应用程序。Spring Boot框架继承了Spring的优良特性[7]。Spring Boot具有自动配置、快速启动和易于管理等特性，可以大大提高系统的开发效率和稳定性。
在开发环境方面，选择IntelliJ IDEA作为后端Java开发环境。IDEA开发工具与Eclipse一样，主要用于Java开发的集成环境，其具有强大的代码审查和重构[8]能力。
数据库方面，选择MySQL数据库，MySQL是一款开源的关系型数据库管理系统，它具有稳定性高、安全性好、功能齐全等特点，可以为我们提供稳定、可靠的数据库支持。
在项目构建、版本控制和文档编写等方面，采用前后端分离的开发模式，因此需要使用版本控制工具来管理前后端代码，本文中使用了Maven、Git等工具。Maven是Apache下的一个纯Java开发的开源项目。基于项目对象模型（POM）概念，Maven利用一个中央信息片断来管理一个项目的构建、报告和文档等步骤[9]。Maven是一款基于Java平台的项目管理和整合工具，可以对项目的各个阶段进行管控[10]，采用Maven技术辅助管理项目依赖关系和构建过程 GitHub作为代码托管平台，提供多人协作开发、版本管理、代码备份等功能。
通过以上技术选型，我们可以保证系统具有高效、稳定、可扩展、易维护的特性，同时还可以提高开发效率和团队协作成效，为学习交流与交易网站的开发和推广提供有力的技术支撑。
1.2" 系统模块设计
用户模块是整个网站的核心模块，提供用户登录、注册、个人信息管理等功能。基于Vue框架的组件化思想将页面进行拆分，分为登录页、注册页、个人中心页等页面。后端采用Spring Boot框架实现用户管理的业务逻辑，提供用户注册、登录验证、信息修改等功能。同时，在数据库中设计用户表，涵盖用户名、密码、邮箱、电话等信息。
学习交流与交易模块是网站的核心部分，集中了学生的学习交流与交易需求，具体包括课程讨论、资源分享、二手书籍交易、生活用品交易等。该模块基于Vue框架的组件化思想将页面进行拆分，分为分类浏览页、帖子详情页、发布帖子页等页面。后端采用Spring Boot框架实现学习交流的业务逻辑，提供帖子发布、编辑、删除等功能。同时，在数据库中设计帖子表，涵盖帖子标题、内容、发布者信息等。
1.3" 数据库设计
数据库是现代软件系统的核心组成部分之一，是数据存储和管理的平台。在开发大学智慧校园学习交流与交易网站的过程中，数据库设计是至关重要的一步。为确保网站中的数据正确显示，需要对数据进行分类。不同字段值的设计要足够精准，以免在填写信息的时候出现数据添加不正确的情况[10]。
本网站使用MySQL数据库进行数据存储和管理。在进行数据库结构设计时，根据需要设计了以下几个实体表：管理员信息表（us_admin）、帖子表（us_article）、帖子类型表（us_article_type）、用户权限表（us_power）、交流信息表（us_comment）、交流标签表（us_comment_tab）、用户信息表（us_user）。帖子表如表1所示。
表1" 帖子表
列名 数据类型 字段
类型 长度 是否为空 主键
us_art_id bigint bigint No Yes
us_art_com_num int int Yes No
us_art_comment_id bigint bigint Yes No
us_art_content varchar （255） varchar 255 Yes No
us_art_cre_time datetime datetime Yes No
us_art_hot_num int int Yes No
us_art_like_num int int Yes No
us_art_tit varchar （255） varchar 255 Yes No
us_art_type_id bigint bigint Yes No
us_art_user_id bigint bigint Yes No
us_art_v int int Yes No
2" 部分功能实现
2.1" 用户登录与注册
用户管理功能主要涉及用户的注册、登录、权限管理等。用户注册需要填写一些基本信息，如用户名、密码、邮箱等，系统将会对用户填写的信息进行校验，以确保所填信息的准确性。用户注册界面如图1所示。部分代码实现为：
@PostMapping（\"/register\"）
public int signUp（String userName，String userPassword，
String userShow，String userEmail，
String userPhone，String userSex）
{
User user=new User（）;
user.setUserImg（\"default.jpg\"）;
user.setUserEmail（userEmail）;
user.setUserName（userName）;
user.setUserPhone（userPhone）;
user.setUserSex（userSex）;
user.setUserShow（userShow）;
user.setUserBlog（\"myself\"）;
Date date = new Date（）;
user.setUserTime（date）;
BCryptPasswordEncoderbCryptPasswordEncoder=new BCryptPasswordEncoder（）;
user.setUserPassword（bCryptPasswordEncoder.encode（userPassword））;
User newUser=userService.userRegister（user）;
if（ newUser==1）return 404;
return 200;
}
图1" 用户注册界面
用户户登录时系统需要验证用户名和密码，确保用户的身份正确。权限管理需要分类管理用户的权限，不同身份的用户具有不同的权限。用户的登录界面如图2所示。部分代码实现为：
@PostMapping（value = \"/userlogin\"）
public User userLogin（String email， String password）{
System.out.println（email+\" \"+password）;
BCryptPasswordEncoder encoder=new BCryptPasswordEncoder（）;
return userService.userLogin（email，password）;
}
图2" 用户登录页面
2.2" 信息发布
信息发布分为学习信息和生活信息两个部分。学习信息包括教师发布的课程信息、课程资料、考试安排等。生活信息包括校内活动、校园新闻、生活服务等。用户可以根据自己的需求选择关注不同的信息，系统根据用户需求展示相应的信息，信息发布如图3所示。部分代码实现为：
@PostMapping（\"/newpost\"）
int newPost（@RequestParam（value = \"userId\"）Long userId，
@RequestParam（value = \"title\"）String title，
@RequestParam（value = \"text\"）String text，
@RequestParam（value = \"select\"）Long select）
{
Article article=new Article（）;
article.setArtUserId（userId）;
article.setArtTitle（title）;
article.setArtContent（text）;
article.setArtTypeId（select）;
Date date=new Date（）;
article.setArtCreTime（date）;
return articleService.Post（article）！=1？200：400;
}
图3" 信息发布页面
交流功能可以分为两个部分，一部分是学术交流，另一部分是二手交易。学术交流可以让生生之间或师生之间分享学习经验和学习资源，学生可以通过系统发布学习问题，分享学习经验等，教师可以通过系统发布有价值的学习资源，供学生学习参考，从两个层面深化拓展教学，帮助师生共同进步。二手交易可以让学生在校园内方便快捷地出售、购买二手物品，提高资源利用率，避免资源闲置浪费。沟通交流页面如图4所示。部分代码实现为：
@PostMapping（\"/getComment\"）
Pagelt;ViewComAndUsergt;findComment（
@RequestParam（value = \"page\"，defaultValue = \"0\"）Integer page，
@RequestParam（value = \"size\"，defaultValue = \"30\"）Integer size，
@RequestParam（value = \"artId\"）Long artId）
{
Pagelt;ViewComAndUsergt;ss=commentService.findViewComAndUser（page，size，artId）;
System.out.println（ss.getContent（））;
return commentService.findViewComAndUser（page，size，artId）;
}
图4" 沟通交流页面
2.3" 后台管理
管理员登录后台管理页面收集分析用户反馈，对本网站做进一步的优化和改进，维护网站环境，提升用户体验。管理员的权限包括用户权限管理、账号管控、帖子推荐或删除管理。管理员还拥有管理各个板块内容的权限，以及对板块进行增删等。后台管理页面如图5所示。部分代码实现为：
@DeleteMapping（\"/{id}\"）
public Integer delete（@PathVariable Integer id）{
return userMapper.deleteById（id）;
}
3" 结" 论
本研究设计并实现了基于Vue与Spring Boot的大学智慧校园学习交流与交易网站，旨在为大学生提供更加便捷高效的学术交流与资源交易平台，促进校内学术文化的繁荣发展。未来可从以下几方面进行深入研究：
1）优化交流与交易平台的用户体验，提高用户满意度。可以考虑引入更多前沿、高效的技术，不断优化前端界面、后台交互，进一步提高系统的稳定性和可靠性，确保用户在使用平台时能够获得顺畅的体验。
2）深入挖掘用户的需求和行为模式，优化系统功能和服务体系，实现更多元化、个性化的服务。随着用户需求的不断变化，我们需要通过数据分析和用户反馈等方式，不断优化系统的功能和服务模式，满足不同场景下的用户需求，提供更加个性化和差异化的服务。
3）拓展交流与交易平台的服务范围和覆盖面，促进校内学术文化和社会文化的融合发展。我们可以考虑引入更多的社会资源和校园资源，进一步丰富平台上的学术交流和资源交易内容，促进学术文化和社会文化的融合发展。
总之，基于Vue与Spring Boot的大学智慧校园学习交流与交易网站是一个充满活力和创新的领域，未来的研究必将拓宽视野。我们期待该领域的不断壮大和持续发展。
参考文献：
[1] 布英塔.互联网背景下的高校智慧校园建设策略分析 [J].互联网周刊，2023（3）：69-71.
[2] 刘光宇.高职院校智慧校园建设现状及发展趋势 [J].中国培训，2023（2）：104-106.
[3] 朱二华.基于Vue.js的Web前端应用研究 [J].科技与创新，2017（20）：119-121.
[4] 吕宇琛.SpringBoot框架在web应用开发中的探讨 [J].科技创新导报，2018，15（8）：168+173.
[5] 张雷，王悦.基于SpringBoot微服务架构下的MVC模型研究 [J].安徽电子信息职业技术学院学报，2018，17（4）：1-9.
[6] 赵霞琦.智慧视阈下基于微服务架构的图书馆平台建设与服务创新 [J].天津科技，2021，48（11）：68-71+76.
[7] 李源，李金忠，薛国鹏，等.CircleChat：基于SpringBoot和Uni-App框架的圈聊平台的设计与实现 [J].井冈山大学学报：自然科学版，2021，42（3）：64-71.
[8] DROZDZ M，KOURIE D G，WATSON B W，et al. Refactoring Tools and Complementary Techniques [C]//IEEE International Conference on Computer Systems and Applications， 2006.Dubai：IEEE，2006：685-688.
[9] 王霏儿.基于SpringBoot的在线考试系统设计与实现 [D].南昌：江西师范大学，2023.
[10] 邓志强，邓林强.Maven在Java项目开发中的应用 [J].电子元器件与信息技术，2019，3（5）：1-4.
作者简介：周瑛琪（2002—），女，满族，辽宁葫芦岛人，本科在读，研究方向：软件工程；通讯作者：张秀梅（1978—），女，汉族，辽宁鞍山人，副教授，硕士研究生，研究方向：中文信息处理。
