基于uni-app的校園閑置物品回收小程序的設(shè)計與實現(xiàn)

摘要：針對校園閑置物品循環(huán)利用、回收問題，文章設(shè)計并實現(xiàn)了一個可跨平臺使用的校園閑置物品回收小程序。小程序整體分為基于uni-app 框架開發(fā)的微信小程序及基于Lavarel框架的后臺管理系統(tǒng)兩大部分。小程序分為用戶端（普通用戶）和員工端（企業(yè)用戶），具有注冊、登錄、預(yù)約上門回收、訂單處理等功能，校園閑置物品回收小程序為創(chuàng)建更便捷的校園生活提供了服務(wù)平臺。

關(guān)鍵詞：uni-app框架；Lavarel框架；校園閑置物品回收；小程序

中圖分類號：TP315? 文獻(xiàn)標(biāo)志碼：A

0 引言

閑置物品是指生活中不再發(fā)揮效用的物品，除了衣物外，校園大學(xué)生的閑置物品還包括圖書、體育用品和便捷交通工具（自行車和電動車）等。同一產(chǎn)品在不同用戶手中有不同的使用價值，可以滿足用戶的不同需求。因此，校園大學(xué)生閑置物品的回收可以優(yōu)化物品的使用，與將閑置物品作廢品處理相比，回收后循環(huán)再利用更有益于構(gòu)建綠色和諧的社會環(huán)境，讓物品在價值損耗的過程中不斷流轉(zhuǎn)到有需要的用戶手中，最大程度地發(fā)揮其剩余價值。

校園閑置物品回收小程序不僅為大學(xué)生閑置物品回收提供了一個高效、安全的快捷通道，還借助移動智能設(shè)備和互聯(lián)網(wǎng)進(jìn)行科學(xué)優(yōu)化和效率提升，積極參與到垃圾分類及智能回收體系建設(shè)工作中。

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

本系統(tǒng)采用前后端分離模式，uni-app作為前端開發(fā)框架，Laravel作為后端開發(fā)框架，PHP作為后端處理語言，MySQL作為系統(tǒng)數(shù)據(jù)庫。系統(tǒng)的實現(xiàn)分為手機(jī)（小程序）端、服務(wù)端和數(shù)據(jù)庫端3部分。

1.1 開發(fā)環(huán)境

1.1.1 手機(jī)（小程序）端——HBuilderX

手機(jī)（小程序）端采用uni-app框架，開發(fā)環(huán)境HBuilderX是DCloud團(tuán)隊專門為uni-app開發(fā)的集成環(huán)境開發(fā)工具，具有輕巧（不含插件的安裝包版本只有十幾兆大小）、極速（啟動速度、大文檔打開速度、編碼提示都可以極速響應(yīng)）的優(yōu)勢。

1.1.2 服務(wù)端——XAMPP

系統(tǒng)服務(wù)端采用PHP+Apache+MySQL結(jié)構(gòu)，該結(jié)構(gòu)基于XAMPP集成開發(fā)環(huán)境。XAMPP是一款開源的網(wǎng)絡(luò)服務(wù)器套件，是一個集成Apache服務(wù)器、MySQL數(shù)據(jù)庫、PHP語言等的功能強(qiáng)大的軟件包，支持Windows、Linux和OSX操作系統(tǒng)［2］。

1.2 開發(fā)技術(shù)

1.2.1 Vue.js框架

Vue.js是用于構(gòu)建用戶界面的漸進(jìn)式JavaScript框架，基于數(shù)據(jù)驅(qū)動和組件化的思想構(gòu)建前端頁面。Vue.js框架的核心庫更加注重視圖層，具有簡單、運行效率高、語言簡潔、占用空間小、上手容易等特點［3］，是目前前端首選框架。

1.2.2 uni-app框架

uni-app是DCloud團(tuán)隊使用Vue.js、微信小程序標(biāo)簽以及API開發(fā)的國產(chǎn)跨開臺移動應(yīng)用開源框架，開發(fā)者編寫一套代碼，可發(fā)布到iOS、Android、H5以及微信小程序、百度小程序、頭條小程序、支付寶小程序等多個平臺，跨平臺能力極強(qiáng)。uni-app的社區(qū)活躍度高，具有組件豐富、平臺能力不受限、速度快、支持原生渲染、支持原生代碼混寫和原生軟件開發(fā)工具包等優(yōu)勢。uni-app實現(xiàn)了“一套代碼、多端發(fā)行”，有效降低了開發(fā)和維護(hù)成本［4］。

1.2.3 uView庫

uView是一款基于uni-app開發(fā)的UI庫，提供了一套完整的組件庫和豐富的樣式庫，使開發(fā)者可以快速構(gòu)建出漂亮、豐富的多平臺應(yīng)用。

1.2.4 Lavarel框架

Laravel是一款開源的PHP Web應(yīng)用程序框架。框架采用MVC（模型-視圖-控制器）架構(gòu)模式，提供了路由、中間件、Eloquent ORM、模板引擎、任務(wù)調(diào)度、事件管理等功能，幫助開發(fā)人員構(gòu)建優(yōu)雅、高效、可擴(kuò)展、可維護(hù)的Web應(yīng)用程序［5］。

1.2.5 MySQL數(shù)據(jù)庫

MySQL是一個快速、多線程、多用戶的SQL數(shù)據(jù)庫服務(wù)器，是目前廣泛使用的關(guān)系型數(shù)據(jù)庫管理系統(tǒng)［6］，具有體積小、速度快、成本低、跨平臺、兼容性好、開放源碼等特點。目前，MySQL數(shù)據(jù)庫是互聯(lián)網(wǎng)、社交系統(tǒng)、各類應(yīng)用軟件等系統(tǒng)的常見技術(shù)選擇，是與Java、Python、PHP等主流編程語言緊密結(jié)合的數(shù)據(jù)庫系統(tǒng)［4］。MySQL與主流編程語言的完美結(jié)合、無縫連接，實現(xiàn)了高效的數(shù)據(jù)交互和查詢。

2 系統(tǒng)整體設(shè)計

2.1 系統(tǒng)技術(shù)架構(gòu)

校園閑置物品回收系統(tǒng)采用前后端分層設(shè)計，分為表示層、業(yè)務(wù)邏輯層和數(shù)據(jù)層。

小程序的表示層使用uni-app框架，uView 作為第三方組件庫，Components管理組件，Uni_modules管理項目配置依賴，pages.json負(fù)責(zé)頁面配置。對uni-app進(jìn)行全局配置，決定頁面文件的路徑、窗口樣式、原生的導(dǎo)航欄及底部的原生tabBar等［1］，使用App.vue作為核心控制文件，通過uView中的網(wǎng)絡(luò)請求來發(fā)送get、post請求。

業(yè)務(wù)邏輯層使用簡潔的PHP Web開發(fā)框架Lavarel作為后臺框架。Laravel以其優(yōu)秀的路由系統(tǒng)和緩存機(jī)制而聞名，能夠有效地提升請求處理速度。Controller是Lavarel中的控制器，本系統(tǒng)中Controller的主要作用是負(fù)責(zé)接收用戶輸入請求，調(diào)度模型處理數(shù)據(jù)。數(shù)據(jù)層采用MySQL作為核心數(shù)據(jù)庫。

2.2 系統(tǒng)功能概述

本系統(tǒng)分為普通用戶（用戶端）和企業(yè)用戶（員工端）。普通用戶的主要功能模塊為：注冊、登錄、預(yù)約上門回收、附近回收機(jī)、訂單、積分兌換、“我的”等。企業(yè)用戶的主要功能模塊為：登錄、訂單和“我的”。

普通用戶可以是企業(yè)上門回收，也可以送到附近的回收機(jī)完成物品回收。對于普通用戶，訂單有待接單、待結(jié)算、已完成和已取消4種狀態(tài)。企業(yè)用戶訂單有待結(jié)算、已完成和已取消3種狀態(tài)。

3 系統(tǒng)主要功能設(shè)計及實現(xiàn)

3.1 功能需求

校園閑置物品交換小程序分為用戶端和公司端，總體功能需求如下。

3.1.1 用戶端

用戶注冊登錄成功后跳轉(zhuǎn)到小程序，在小程序中通過底部導(dǎo)航欄可以進(jìn)入首頁、公司回收、訂單及“我的”頁面。

用戶登錄可以采用手機(jī)驗證碼登錄，也可以采用賬號密碼登錄。

首頁中放置閑置物品的回收分類、舊物去向、預(yù)約上門回收、附近的回收機(jī)等功能鏈接。

公司回收中可以依據(jù)條件完成篩選，也可以查看公司名稱、聯(lián)系電話、地址、營業(yè)時間、公司圖片等。

訂單分為已接單（網(wǎng)點公司名稱、距離、回收人員姓名、電話、接單時間等信息）、回收中（網(wǎng)點公司名稱、回收人員姓名、電話、回收時間等信息）和已完成（網(wǎng)點公司名稱、回收種類、單位數(shù)量、獲取積分?jǐn)?shù)量、回收時間等信息）。

“我的”頁面中包含用戶基本信息（頭像、姓名、積分?jǐn)?shù)量、個性簽名、回收次數(shù)）、收入記錄（每筆訂單的收益）、積分記錄（回收的時間、簽到的時間、積分）。

附近的回收機(jī)可以查看全市的所有回收機(jī)列表信息、回收機(jī)地圖位置、回收業(yè)務(wù)完整流程等詳細(xì)信息。

3.1.2 公司端

公司員工登錄后可以配置賬號權(quán)限，進(jìn)行訂單處理（接單、訂單處理、訂單詳情），進(jìn)入個人中心查看評價以及修改密碼、退出登錄等。

3.2 用戶交互界面邏輯

小程序端用戶交互界面邏輯如圖1所示。

3.3 用戶登錄流程

普通用戶和企業(yè)用戶可以采用手機(jī)驗證碼和賬號密碼2種方式登錄系統(tǒng)。

手機(jī)驗證碼登錄的流程如下：用戶輸入11位手機(jī)號，若輸入正確則獲取短信驗證碼，同時短信驗證碼開始倒計時59s，用戶收到驗證碼后在指定時間內(nèi)輸入正確的驗證碼，完成登錄。若輸入的手機(jī)號不存在或不滿足正確的手機(jī)號要求，則利用Toast給出“手機(jī)號碼格式錯誤”或“手機(jī)號不存在”的提示。若用戶未在指定的59s內(nèi)輸入驗證碼，則利用Toast給出“驗證碼過期”的提示，同時清空驗證碼框中的信息。

3.4 用戶身份驗證

系統(tǒng)采用Token機(jī)制驗證用戶身份。首次登錄

時，前端調(diào)用后端的登錄接口，發(fā)送用戶名和密碼；后端收到請求。驗證用戶名和密碼，驗證成功，給前端返回一個Token；前端獲取到Token，將token存儲到緩存和Vuex中，并跳轉(zhuǎn)路由頁面。前端每次跳轉(zhuǎn)路由，都需判斷緩存中有無Token ，若沒有就跳轉(zhuǎn)到登錄頁面，若有則跳轉(zhuǎn)到對應(yīng)路由頁面。

客戶端攜帶Token每發(fā)送一次HTTP請求，攔截器都會攔截一次請求，把請求頭部的Authorization取出并與當(dāng)前存于服務(wù)器上的Token做對比，若是同一個，則證明是同一用戶，攔截器為當(dāng)前請求放行，繼續(xù)執(zhí)行請求。如果不是同一個，那么服務(wù)器會截斷請求并發(fā)送錯誤碼（例如：Token過期失效，返回401錯誤）發(fā)給客戶端，讓客戶端驗證身份重新登錄。若驗證成功，則進(jìn)入首頁。

3.5 閑置物品預(yù)約回收流程

預(yù)約上門回收時，出于校園安全考慮，學(xué)生在約定時間內(nèi)將閑置物品送至校門口，預(yù)收回收流程如下：

用戶登錄成功后，申請預(yù)約并填寫相關(guān)信息，系統(tǒng)完成各項必填信息的檢測，信息填寫完整，單擊“提交”按鈕，系統(tǒng)會檢測填寫信息是否正確，若無誤，回收員上門并處理回收物，否則，用戶重新填寫信息。

3.6 小程序端

學(xué)生用戶在微信上查找到校園閑置物品回收小程序，便可以直接進(jìn)入小程序訪問閑置物品回收系統(tǒng)。用戶通過注冊成為系統(tǒng)用戶，注冊成功后即可登錄。登錄成功后進(jìn)入小程序首頁，在首頁中可以預(yù)約上門回收、查看附近的回收機(jī)、舊物去向以及完成積分兌換等。通過小程序底部的導(dǎo)航欄，用戶可以快速進(jìn)入訂單、公司回收及“我的”頁面。用戶在公司回收頁面中可以搜索回收公司，通過“立即下單”按鈕完成預(yù)約回收。訂單頁面擁有待接單、待結(jié)算、已完成和已取消4張選項卡，進(jìn)入各選項卡對應(yīng)的頁面可以完成訂單的相應(yīng)處理。在“我的”頁面可以查看自己的積分情況及兌換記錄等信息。

3.7 前后端的交互實現(xiàn)

在小程序端與后臺管理系統(tǒng)的交互實現(xiàn)過程中，通過查看后端提供的接口文檔以及調(diào)用相應(yīng)的API，獲取所需的JSON數(shù)據(jù)并將返回的數(shù)據(jù)進(jìn)行解析后，應(yīng)用于小程序頁面中。系統(tǒng)采用uView UI中的網(wǎng)絡(luò)請求調(diào)用后端API，減少代碼冗余，便于后期更新維護(hù)。

4 結(jié)語

本文開發(fā)的校園閑置物品小程序采用前后端分離技術(shù)，小程序端包含用戶注冊、用戶登錄、預(yù)約上門回收、訂單等功能。用戶在完成賬號注冊及登錄后，便可在小程序中對自己的閑置物品進(jìn)行回收處理，對于一些使用痕跡較重的物品可以通過小程序提供的“舊物去向”捐贈渠道贈予需要的客戶，讓校園大學(xué)生加入獻(xiàn)愛心、垃圾分類及智能回收的建設(shè)工作中。

參考文獻(xiàn)

［1］張巧嶺.“求捎帶”校園訂餐系統(tǒng)前端設(shè)計［J］.現(xiàn)代信息科技，2022（3）：14-17.

［2］史桂紅.基于Android電氣產(chǎn)品銷售系統(tǒng)App的設(shè)計與實現(xiàn)［J］.企業(yè)科技與發(fā)展，2022（8）：73-77.

［3］朱志慧，蔡潔.基于SpringBoot+Vue+uni-app框架的校園失物招領(lǐng)系統(tǒng)［J］.電子技術(shù)與軟件工程，2022（917）：62-65.

［4］馬青松，熊新國，劉擁軍.基于uni-app框架的機(jī)房運維管理系統(tǒng)設(shè)計與實現(xiàn)［J］.信息記錄材料，2022（11）：129-133.

［5］看不懂.laravel框架知識點［EB/OL］.（2023-06-19）［2023-11-30］.https：//blog.csdn.net/2201_75943035/article/details/131286733.

［6］田娟.基于PHP+MySQL員工信息管理系統(tǒng)后臺設(shè)計與實現(xiàn)［J］.電腦知識與技術(shù)，2023（23）：47-49.

（編輯 姚 鑫編輯）

Design and implementation of campus idle goods recycling applet based on uni-app

Shi? Guihong

（School of Artificial Intelligence， Suzhou Chien-Shiung Institute of Technology， Taicang 215400， China）

Abstract：? In view of the convenience of recycling and recycling of idle items on campus， a cross-platform recycling small program of campus idle items is designed and realized. The small program is divided into two parts： the wechat mini program developed based on uni-app framework and the background management system based on Lavarel framework. Small programs are divided into user end （ordinary users） and employee end （enterprise users）， with registration， login， appointment door-to-door recycling， order processing and other functions， the program developed in this paper provides a convenient service platform to create a more convenient campus life platform.

Key words： uni-app framework; Lavarel framework; campus idle items recycling; small program