周瑛琪 張秀梅

收稿日期：2023-07-03

基金項(xiàng)目：遼寧科技大學(xué)大學(xué)生創(chuàng)新創(chuàng)業(yè)訓(xùn)練基金項(xiàng)目（X202310146286）

DOI：10.19850/j.cnki.2096-4706.2024.05.011

摘? 要：隨著科技的進(jìn)步和人們對(duì)于教育的愈發(fā)重視，智慧校園已成為教育領(lǐng)域的熱門(mén)話題?；诖?，對(duì)基于Vue和Spring Boot的大學(xué)智慧校園學(xué)習(xí)交流與交易網(wǎng)站進(jìn)行了研究，通過(guò)IDEA、Visual Studio Code開(kāi)發(fā)工具實(shí)現(xiàn)前后端數(shù)據(jù)交互。該網(wǎng)站分為學(xué)習(xí)區(qū)、跳蚤市場(chǎng)區(qū)和生活交流區(qū)等多個(gè)分區(qū)。用戶(hù)可以在網(wǎng)站上發(fā)布帖子，進(jìn)行交流和交易。該網(wǎng)站為大學(xué)生提供一個(gè)方便、快捷、安全、可信的校園互動(dòng)平臺(tái)。

關(guān)鍵詞：智慧校園；學(xué)習(xí)交流；交易網(wǎng)站；Vue；Spring Boot

中圖分類(lèi)號(hào)：TP393? 文獻(xiàn)標(biāo)識(shí)碼：A? 文章編號(hào)：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? 引? 言

隨著信息技術(shù)的快速發(fā)展以及人們對(duì)高質(zhì)量教育的執(zhí)著追求，大學(xué)校園的教學(xué)、管理、服務(wù)等也面臨著越來(lái)越嚴(yán)峻的挑戰(zhàn)。傳統(tǒng)的校園管理方式已經(jīng)無(wú)法滿足人們的需求，智慧校園的建設(shè)使我們能夠依托互聯(lián)網(wǎng)系統(tǒng)強(qiáng)化高校與外界的聯(lián)系，構(gòu)建綜合聯(lián)動(dòng)教育機(jī)制[1]。隨著互聯(lián)網(wǎng)+、人工智能、大數(shù)據(jù)等技術(shù)的不斷發(fā)展，出現(xiàn)了更多以智慧為核心視角的服務(wù)方式[2]。而智慧校園作為應(yīng)對(duì)這種變化的新型管理模式，逐漸成為當(dāng)前大學(xué)校園管理改革的重要方向。智慧校園中融入信息化、數(shù)據(jù)處理、系統(tǒng)管理等多種技術(shù)手段，優(yōu)化了大學(xué)校園的教育、管理和服務(wù)模式，進(jìn)一步提高了教育質(zhì)量，提高了學(xué)生的學(xué)習(xí)體驗(yàn)，為首創(chuàng)具有現(xiàn)代化特色的智慧校園管理模式提供了新的思路。

隨著互聯(lián)網(wǎng)技術(shù)的不斷發(fā)展，越來(lái)越多的高校開(kāi)始將智慧校園建設(shè)與互聯(lián)網(wǎng)相結(jié)合，通過(guò)建設(shè)學(xué)習(xí)交流與交易網(wǎng)站，提升了學(xué)生的學(xué)習(xí)效率和學(xué)習(xí)體驗(yàn)。這種基于互聯(lián)網(wǎng)的學(xué)習(xí)交流與交易網(wǎng)站在大學(xué)生中越來(lái)越受歡迎，并且已經(jīng)成為推動(dòng)大學(xué)智慧校園建設(shè)的重要手段。然而，國(guó)內(nèi)在大學(xué)智慧校園建設(shè)方面，還缺乏成熟、系統(tǒng)的解決方案，亦缺乏基于互聯(lián)網(wǎng)的學(xué)習(xí)交流與交易網(wǎng)站的建設(shè)經(jīng)驗(yàn)。

綜上，基于Vue與Spring Boot技術(shù)，設(shè)計(jì)并實(shí)現(xiàn)了一個(gè)大學(xué)智慧校園學(xué)習(xí)交流與交易網(wǎng)站，為大學(xué)智慧校園建設(shè)提供一種全新的解決方案。以高效、便捷、易用為網(wǎng)站設(shè)計(jì)目標(biāo)，旨在幫助學(xué)生更好地完成課程學(xué)習(xí)，同時(shí)為學(xué)生提供、功能齊備、簡(jiǎn)單易用的交流與交易平臺(tái)。

1? 網(wǎng)站設(shè)計(jì)

1.1? 開(kāi)發(fā)環(huán)境與技術(shù)

在前端開(kāi)發(fā)方面，選擇Vue.js作為前端框架。Vue是一款當(dāng)下流行的前端開(kāi)發(fā)框架[3]，可提供數(shù)據(jù)綁定和組件化視圖的功能，能夠快速構(gòu)建復(fù)雜的單頁(yè)應(yīng)用程序。同時(shí)，Vue.js具有高效的性能、靈活的可擴(kuò)展性和易于使用的API，可以更加有效地實(shí)現(xiàn)系統(tǒng)的前端功能。

在代碼編輯器選取方面，采用Visual Studio Code作為前端代碼編輯器。由于Vue.js是一款基于MVVM的前端JavaScript框架，兼容性較好。開(kāi)發(fā)過(guò)程中，對(duì)Google Chrome、Firefox、Safari等主流瀏覽器的混合使用進(jìn)行了測(cè)試，結(jié)果是可以十分順暢地在多種瀏覽器之間切換使用，多種瀏覽器之間的兼容性很好。

在后端開(kāi)發(fā)方面，采用Spring Boot作為后端框架。Spring Boot是一個(gè)快速開(kāi)發(fā)的框架，是一些庫(kù)的集合，框架中的框架，只要導(dǎo)入相應(yīng)依賴(lài)，它就能夠被任意項(xiàng)目的構(gòu)建系統(tǒng)所使用[4]。Spring Boot是一種基于Spring模式的微服務(wù)產(chǎn)品[5]。Spring Boot是一種基于JEE形式的軟件產(chǎn)品，之后推出的MVC框架，也將其運(yùn)用到各種類(lèi)型的Web產(chǎn)品當(dāng)中，在使用的過(guò)程中，先后出現(xiàn)了多個(gè)版本，不同版本所提供的功能有所差別[6]。采用Spring框架，可以幫助我們快速構(gòu)建生產(chǎn)級(jí)可獨(dú)立運(yùn)行的Spring應(yīng)用程序。Spring Boot框架繼承了Spring的優(yōu)良特性[7]。Spring Boot具有自動(dòng)配置、快速啟動(dòng)和易于管理等特性，可以大大提高系統(tǒng)的開(kāi)發(fā)效率和穩(wěn)定性。

在開(kāi)發(fā)環(huán)境方面，選擇IntelliJ IDEA作為后端Java開(kāi)發(fā)環(huán)境。IDEA開(kāi)發(fā)工具與Eclipse一樣，主要用于Java開(kāi)發(fā)的集成環(huán)境，其具有強(qiáng)大的代碼審查和重構(gòu)[8]能力。

數(shù)據(jù)庫(kù)方面，選擇MySQL數(shù)據(jù)庫(kù)，MySQL是一款開(kāi)源的關(guān)系型數(shù)據(jù)庫(kù)管理系統(tǒng)，它具有穩(wěn)定性高、安全性好、功能齊全等特點(diǎn)，可以為我們提供穩(wěn)定、可靠的數(shù)據(jù)庫(kù)支持。

在項(xiàng)目構(gòu)建、版本控制和文檔編寫(xiě)等方面，采用前后端分離的開(kāi)發(fā)模式，因此需要使用版本控制工具來(lái)管理前后端代碼，本文中使用了Maven、Git等工具。Maven是Apache下的一個(gè)純Java開(kāi)發(fā)的開(kāi)源項(xiàng)目?；陧?xiàng)目對(duì)象模型（POM）概念，Maven利用一個(gè)中央信息片斷來(lái)管理一個(gè)項(xiàng)目的構(gòu)建、報(bào)告和文檔等步驟[9]。Maven是一款基于Java平臺(tái)的項(xiàng)目管理和整合工具，可以對(duì)項(xiàng)目的各個(gè)階段進(jìn)行管控[10]，采用Maven技術(shù)輔助管理項(xiàng)目依賴(lài)關(guān)系和構(gòu)建過(guò)程 GitHub作為代碼托管平臺(tái)，提供多人協(xié)作開(kāi)發(fā)、版本管理、代碼備份等功能。

通過(guò)以上技術(shù)選型，我們可以保證系統(tǒng)具有高效、穩(wěn)定、可擴(kuò)展、易維護(hù)的特性，同時(shí)還可以提高開(kāi)發(fā)效率和團(tuán)隊(duì)協(xié)作成效，為學(xué)習(xí)交流與交易網(wǎng)站的開(kāi)發(fā)和推廣提供有力的技術(shù)支撐。

1.2? 系統(tǒng)模塊設(shè)計(jì)

用戶(hù)模塊是整個(gè)網(wǎng)站的核心模塊，提供用戶(hù)登錄、注冊(cè)、個(gè)人信息管理等功能?；赩ue框架的組件化思想將頁(yè)面進(jìn)行拆分，分為登錄頁(yè)、注冊(cè)頁(yè)、個(gè)人中心頁(yè)等頁(yè)面。后端采用Spring Boot框架實(shí)現(xiàn)用戶(hù)管理的業(yè)務(wù)邏輯，提供用戶(hù)注冊(cè)、登錄驗(yàn)證、信息修改等功能。同時(shí)，在數(shù)據(jù)庫(kù)中設(shè)計(jì)用戶(hù)表，涵蓋用戶(hù)名、密碼、郵箱、電話等信息。

學(xué)習(xí)交流與交易模塊是網(wǎng)站的核心部分，集中了學(xué)生的學(xué)習(xí)交流與交易需求，具體包括課程討論、資源分享、二手書(shū)籍交易、生活用品交易等。該模塊基于Vue框架的組件化思想將頁(yè)面進(jìn)行拆分，分為分類(lèi)瀏覽頁(yè)、帖子詳情頁(yè)、發(fā)布帖子頁(yè)等頁(yè)面。后端采用Spring Boot框架實(shí)現(xiàn)學(xué)習(xí)交流的業(yè)務(wù)邏輯，提供帖子發(fā)布、編輯、刪除等功能。同時(shí)，在數(shù)據(jù)庫(kù)中設(shè)計(jì)帖子表，涵蓋帖子標(biāo)題、內(nèi)容、發(fā)布者信息等。

1.3? 數(shù)據(jù)庫(kù)設(shè)計(jì)

數(shù)據(jù)庫(kù)是現(xiàn)代軟件系統(tǒng)的核心組成部分之一，是數(shù)據(jù)存儲(chǔ)和管理的平臺(tái)。在開(kāi)發(fā)大學(xué)智慧校園學(xué)習(xí)交流與交易網(wǎng)站的過(guò)程中，數(shù)據(jù)庫(kù)設(shè)計(jì)是至關(guān)重要的一步。為確保網(wǎng)站中的數(shù)據(jù)正確顯示，需要對(duì)數(shù)據(jù)進(jìn)行分類(lèi)。不同字段值的設(shè)計(jì)要足夠精準(zhǔn)，以免在填寫(xiě)信息的時(shí)候出現(xiàn)數(shù)據(jù)添加不正確的情況[10]。

本網(wǎng)站使用MySQL數(shù)據(jù)庫(kù)進(jìn)行數(shù)據(jù)存儲(chǔ)和管理。在進(jìn)行數(shù)據(jù)庫(kù)結(jié)構(gòu)設(shè)計(jì)時(shí)，根據(jù)需要設(shè)計(jì)了以下幾個(gè)實(shí)體表：管理員信息表（us_admin）、帖子表（us_article）、帖子類(lèi)型表（us_article_type）、用戶(hù)權(quán)限表（us_power）、交流信息表（us_comment）、交流標(biāo)簽表（us_comment_tab）、用戶(hù)信息表（us_user）。帖子表如表1所示。

表1? 帖子表

列名 數(shù)據(jù)類(lèi)型 字段

類(lèi)型 長(zhǎng)度 是否為空 主鍵

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? 部分功能實(shí)現(xiàn)

2.1? 用戶(hù)登錄與注冊(cè)

用戶(hù)管理功能主要涉及用戶(hù)的注冊(cè)、登錄、權(quán)限管理等。用戶(hù)注冊(cè)需要填寫(xiě)一些基本信息，如用戶(hù)名、密碼、郵箱等，系統(tǒng)將會(huì)對(duì)用戶(hù)填寫(xiě)的信息進(jìn)行校驗(yàn)，以確保所填信息的準(zhǔn)確性。用戶(hù)注冊(cè)界面如圖1所示。部分代碼實(shí)現(xiàn)為：

@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==null）return 404;

return 200;

}

圖1? 用戶(hù)注冊(cè)界面

用戶(hù)戶(hù)登錄時(shí)系統(tǒng)需要驗(yàn)證用戶(hù)名和密碼，確保用戶(hù)的身份正確。權(quán)限管理需要分類(lèi)管理用戶(hù)的權(quán)限，不同身份的用戶(hù)具有不同的權(quán)限。用戶(hù)的登錄界面如圖2所示。部分代碼實(shí)現(xiàn)為：

@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? 用戶(hù)登錄頁(yè)面

2.2? 信息發(fā)布

信息發(fā)布分為學(xué)習(xí)信息和生活信息兩個(gè)部分。學(xué)習(xí)信息包括教師發(fā)布的課程信息、課程資料、考試安排等。生活信息包括校內(nèi)活動(dòng)、校園新聞、生活服務(wù)等。用戶(hù)可以根據(jù)自己的需求選擇關(guān)注不同的信息，系統(tǒng)根據(jù)用戶(hù)需求展示相應(yīng)的信息，信息發(fā)布如圖3所示。部分代碼實(shí)現(xiàn)為：

@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）！=null？200：400;

}

圖3? 信息發(fā)布頁(yè)面

交流功能可以分為兩個(gè)部分，一部分是學(xué)術(shù)交流，另一部分是二手交易。學(xué)術(shù)交流可以讓生生之間或師生之間分享學(xué)習(xí)經(jīng)驗(yàn)和學(xué)習(xí)資源，學(xué)生可以通過(guò)系統(tǒng)發(fā)布學(xué)習(xí)問(wèn)題，分享學(xué)習(xí)經(jīng)驗(yàn)等，教師可以通過(guò)系統(tǒng)發(fā)布有價(jià)值的學(xué)習(xí)資源，供學(xué)生學(xué)習(xí)參考，從兩個(gè)層面深化拓展教學(xué)，幫助師生共同進(jìn)步。二手交易可以讓學(xué)生在校園內(nèi)方便快捷地出售、購(gòu)買(mǎi)二手物品，提高資源利用率，避免資源閑置浪費(fèi)。溝通交流頁(yè)面如圖4所示。部分代碼實(shí)現(xiàn)為：

@PostMapping（"/getComment"）

PagefindComment（

@RequestParam（value = "page"，defaultValue = "0"）Integer page，

@RequestParam（value = "size"，defaultValue = "30"）Integer size，

@RequestParam（value = "artId"）Long artId）

{

Pagess=commentService.findViewComAndUser（page，size，artId）;

System.out.println（ss.getContent（））;

return commentService.findViewComAndUser（page，size，artId）;

}

圖4? 溝通交流頁(yè)面

2.3? 后臺(tái)管理

管理員登錄后臺(tái)管理頁(yè)面收集分析用戶(hù)反饋，對(duì)本網(wǎng)站做進(jìn)一步的優(yōu)化和改進(jìn)，維護(hù)網(wǎng)站環(huán)境，提升用戶(hù)體驗(yàn)。管理員的權(quán)限包括用戶(hù)權(quán)限管理、賬號(hào)管控、帖子推薦或刪除管理。管理員還擁有管理各個(gè)板塊內(nèi)容的權(quán)限，以及對(duì)板塊進(jìn)行增刪等。后臺(tái)管理頁(yè)面如圖5所示。部分代碼實(shí)現(xiàn)為：

@DeleteMapping（"/{id}"）

public Integer delete（@PathVariable Integer id）{

return userMapper.deleteById（id）;

}

3? 結(jié)? 論

本研究設(shè)計(jì)并實(shí)現(xiàn)了基于Vue與Spring Boot的大學(xué)智慧校園學(xué)習(xí)交流與交易網(wǎng)站，旨在為大學(xué)生提供更加便捷高效的學(xué)術(shù)交流與資源交易平臺(tái)，促進(jìn)校內(nèi)學(xué)術(shù)文化的繁榮發(fā)展。未來(lái)可從以下幾方面進(jìn)行深入研究：

1）優(yōu)化交流與交易平臺(tái)的用戶(hù)體驗(yàn)，提高用戶(hù)滿意度?？梢钥紤]引入更多前沿、高效的技術(shù)，不斷優(yōu)化前端界面、后臺(tái)交互，進(jìn)一步提高系統(tǒng)的穩(wěn)定性和可靠性，確保用戶(hù)在使用平臺(tái)時(shí)能夠獲得順暢的體驗(yàn)。

2）深入挖掘用戶(hù)的需求和行為模式，優(yōu)化系統(tǒng)功能和服務(wù)體系，實(shí)現(xiàn)更多元化、個(gè)性化的服務(wù)。隨著用戶(hù)需求的不斷變化，我們需要通過(guò)數(shù)據(jù)分析和用戶(hù)反饋等方式，不斷優(yōu)化系統(tǒng)的功能和服務(wù)模式，滿足不同場(chǎng)景下的用戶(hù)需求，提供更加個(gè)性化和差異化的服務(wù)。

3）拓展交流與交易平臺(tái)的服務(wù)范圍和覆蓋面，促進(jìn)校內(nèi)學(xué)術(shù)文化和社會(huì)文化的融合發(fā)展。我們可以考慮引入更多的社會(huì)資源和校園資源，進(jìn)一步豐富平臺(tái)上的學(xué)術(shù)交流和資源交易內(nèi)容，促進(jìn)學(xué)術(shù)文化和社會(huì)文化的融合發(fā)展。

總之，基于Vue與Spring Boot的大學(xué)智慧校園學(xué)習(xí)交流與交易網(wǎng)站是一個(gè)充滿活力和創(chuàng)新的領(lǐng)域，未來(lái)的研究必將拓寬視野。我們期待該領(lǐng)域的不斷壯大和持續(xù)發(fā)展。

參考文獻(xiàn)：

[1] 布英塔.互聯(lián)網(wǎng)背景下的高校智慧校園建設(shè)策略分析 [J].互聯(lián)網(wǎng)周刊，2023（3）：69-71.

[2] 劉光宇.高職院校智慧校園建設(shè)現(xiàn)狀及發(fā)展趨勢(shì) [J].中國(guó)培訓(xùn)，2023（2）：104-106.

[3] 朱二華.基于Vue.js的Web前端應(yīng)用研究 [J].科技與創(chuàng)新，2017（20）：119-121.

[4] 呂宇琛.SpringBoot框架在web應(yīng)用開(kāi)發(fā)中的探討 [J].科技創(chuàng)新導(dǎo)報(bào)，2018，15（8）：168+173.

[5] 張雷，王悅.基于SpringBoot微服務(wù)架構(gòu)下的MVC模型研究 [J].安徽電子信息職業(yè)技術(shù)學(xué)院學(xué)報(bào)，2018，17（4）：1-9.

[6] 趙霞琦.智慧視閾下基于微服務(wù)架構(gòu)的圖書(shū)館平臺(tái)建設(shè)與服務(wù)創(chuàng)新 [J].天津科技，2021，48（11）：68-71+76.

[7] 李源，李金忠，薛國(guó)鵬，等.CircleChat：基于SpringBoot和Uni-App框架的圈聊平臺(tái)的設(shè)計(jì)與實(shí)現(xiàn) [J].井岡山大學(xué)學(xué)報(bào)：自然科學(xué)版，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的在線考試系統(tǒng)設(shè)計(jì)與實(shí)現(xiàn) [D].南昌：江西師范大學(xué)，2023.

[10] 鄧志強(qiáng)，鄧林強(qiáng).Maven在Java項(xiàng)目開(kāi)發(fā)中的應(yīng)用 [J].電子元器件與信息技術(shù)，2019，3（5）：1-4.

作者簡(jiǎn)介：周瑛琪（2002—），女，滿族，遼寧葫蘆島人，本科在讀，研究方向：軟件工程；通訊作者：張秀梅（1978—），女，漢族，遼寧鞍山人，副教授，碩士研究生，研究方向：中文信息處理。