智慧校園學(xué)習(xí)交流與交易網(wǎng)站設(shè)計與實現(xiàn)

收稿日期：2023-07-03

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

DOI：10.19850/j.cnki.2096-4706.2024.05.011

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

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

中圖分類號：TP393" 文獻(xiàn)標(biāo)識碼：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" 引" 言

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

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

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

1" 網(wǎng)站設(shè)計

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

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

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

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

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

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

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

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

1.2" 系統(tǒng)模塊設(shè)計

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

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

1.3" 數(shù)據(jù)庫設(shè)計

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

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

表1" 帖子表

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

類型 長度 是否為空 主鍵

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

2.1" 用戶登錄與注冊

用戶管理功能主要涉及用戶的注冊、登錄、權(quán)限管理等。用戶注冊需要填寫一些基本信息，如用戶名、密碼、郵箱等，系統(tǒng)將會對用戶填寫的信息進(jìn)行校驗，以確保所填信息的準(zhǔn)確性。用戶注冊界面如圖1所示。部分代碼實現(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==1）return 404;

return 200;

}

圖1" 用戶注冊界面

用戶戶登錄時系統(tǒng)需要驗證用戶名和密碼，確保用戶的身份正確。權(quán)限管理需要分類管理用戶的權(quán)限，不同身份的用戶具有不同的權(quán)限。用戶的登錄界面如圖2所示。部分代碼實現(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" 用戶登錄頁面

2.2" 信息發(fā)布

信息發(fā)布分為學(xué)習(xí)信息和生活信息兩個部分。學(xué)習(xí)信息包括教師發(fā)布的課程信息、課程資料、考試安排等。生活信息包括校內(nèi)活動、校園新聞、生活服務(wù)等。用戶可以根據(jù)自己的需求選擇關(guān)注不同的信息，系統(tǒng)根據(jù)用戶需求展示相應(yīng)的信息，信息發(fā)布如圖3所示。部分代碼實現(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）！=1？200：400;

}

圖3" 信息發(fā)布頁面

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

@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" 后臺管理

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

@DeleteMapping（\"/{id}\"）

public Integer delete（@PathVariable Integer id）{

return userMapper.deleteById（id）;

}

3" 結(jié)" 論

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

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

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

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

總之，基于Vue與Spring Boot的大學(xué)智慧校園學(xué)習(xí)交流與交易網(wǎng)站是一個充滿活力和創(chuàng)新的領(lǐng)域，未來的研究必將拓寬視野。我們期待該領(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ā)展趨勢 [J].中國培訓(xùn)，2023（2）：104-106.

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

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

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

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

[7] 李源，李金忠，薛國鵬，等.CircleChat：基于SpringBoot和Uni-App框架的圈聊平臺的設(shè)計與實現(xiàn) [J].井岡山大學(xué)學(xué)報：自然科學(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è)計與實現(xiàn) [D].南昌：江西師范大學(xué)，2023.

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

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