本文結(jié)合一個示例，探討Spring Boot和小程序的整合開發(fā)與完全云開發(fā)的對比。以客戶端/服務(wù)器的體系結(jié)構(gòu)來劃分，第一部分介紹以Spring Boot為服務(wù)器(后端)，而第二部分以微信小程序(含云開發(fā))為客戶端(前端)，小程序和Spring Boot的整合方式實(shí)現(xiàn)。
1、Spring Boot作為后端開發(fā)工具
1●添加依賴
在pom.xml文件中和之間添加Lombok、Spring Data JPA、MySQL驅(qū)動依賴，代碼如例1所示。
【例1】添加Lombok、Spring Data JPA和MySQL驅(qū)動依賴的代碼示例。
2●創(chuàng)建類Person
在包c(diǎn)om.bookcode下創(chuàng)建backend子包，并在com.bookcode.backend包中創(chuàng)建類Person，修改類Person的代碼，代碼(即創(chuàng)建類后修改過的代碼)如例2所示。
【例2】創(chuàng)建類Person的代碼示例。
3●創(chuàng)建類PersonController
在包c(diǎn)om.bookcode.backend中創(chuàng)建類PersonController，代碼如例3所示。
【例3】創(chuàng)建類PersonController的代碼示例。
4● 創(chuàng)建類User
在包c(diǎn)om.bookcode.backend中創(chuàng)建類User，代碼如例4所示。
【例4】創(chuàng)建類User的代碼示例。
5●創(chuàng)建接口UserRepository
在包c(diǎn)om.bookcode.backend中創(chuàng)建接口UserRepository，修改接口UserRepository代碼，代碼如例5所示。
【例5】創(chuàng)建接口UserRepository的代碼示例。
6●創(chuàng)建類UserController
在包c(diǎn)om.bookcode.backend中創(chuàng)建類UserController，代碼如例6所示。
【例6】創(chuàng)建類UserController的代碼示例。
7●創(chuàng)建配置文件application.yml
在目錄src/resources下創(chuàng)建配置文件application.yml，修改配置文件application.yml，代碼如例7所示。
【例7】創(chuàng)建配置文件application.yml的代碼示例。
8● 運(yùn)行程序
在MySQL數(shù)據(jù)庫(版本為8.0.17)中創(chuàng)建數(shù)據(jù)庫mytest。請注意5.x版MySQL和8.x版MySQL例7中代碼略有差異。
運(yùn)行程序后，在瀏覽器中輸入localhost:8080/person，結(jié)果如圖1所示。在瀏覽器中輸入localhost:8080/allusers，結(jié)果如圖2所示。
■ 圖1 在瀏覽器中輸入localhost:8080/person的結(jié)果
■ 圖2 在瀏覽器中輸入localhost:8080/allusers的結(jié)果
2、微信小程序前端開發(fā)
1●修改文件app.json
修改文件app.json，代碼的修改方法是在語句“"pages/callMySecondFun/callMySecondFun",”之前增加3條語句，增加代碼如例8所示。
【例8】向app.json文件增加代碼的示例。
修改代碼后編譯程序，自動在目錄pages下生成homeofsb、users、listperson 3個子目錄，且在這3個子目錄(每個子目錄對應(yīng)一個頁面)下分別自動生成對應(yīng)頁面的4個文件(如homeofsb.wxml等)。
2● 修改homeofsb頁面的wxml、js和json文件
修改文件homeofsb.wxml、homeofsb.js和homeofsb.json。文件homeofsb.wxml修改后的代碼如例9所示。
【例9】文件homeofsb.wxml修改后的代碼示例。
文件homeofsb.js修改后的代碼如例10所示。
【例10】文件homeofsb.js修改后的代碼示例。
文件homeofsb.json修改后的代碼如例11所示。
【例11】文件homeofsb.json修改后的代碼示例。
3●修改listperson頁面的wxml、js和json文件
修改文件listperson.wxml、listperson.js和listperson.json。文件listperson.wxml修改后的代碼如例12所示。
【例12】文件listperson.wxml修改后的代碼示例。
文件listperson.js修改后的代碼如例13所示。
【例13】文件listperson.js修改后的代碼示例。
文件listperson.json修改后的代碼如例14所示。
【例14】文件listperson.json修改后的代碼示例。
4●修改users頁面的wxml、js、json和wxss文件
修改文件users.wxml、users.js、users.json和users.wxss。文件users.wxml修改后的代碼如例15所示。
【例15】文件users.wxml修改后的代碼示例。
文件users.js修改后的代碼如例16所示。
【例16】文件users.js修改后的代碼示例。
文件users.json修改后的代碼如例17所示。
【例17】文件users.json修改后的代碼示例。
文件users.wxss修改后的代碼如例18所示。
【例18】文件users.wxss修改后的代碼示例。
5●運(yùn)行程序
編譯程序后模擬器中的輸出結(jié)果如圖3所示。單擊圖3中的“訪問/person的結(jié)果”按鈕，跳轉(zhuǎn)到listperson頁面，模擬器中的輸出結(jié)果如圖4所示。單擊圖3中的“獲取所有user信息”按鈕，跳轉(zhuǎn)到users頁面，模擬器中的輸出結(jié)果如圖5所示。
■ 圖3 編譯程序后模擬器中的輸出結(jié)果
■ 圖4 單擊圖3中“訪問/person的結(jié)果”按鈕后模擬器中的輸出結(jié)果
■ 圖5 單擊圖3中“獲取所有user信息”按鈕后模擬器中的輸出結(jié)果
對比圖1和圖4，或者圖2和圖5，可以發(fā)現(xiàn)微信小程序前端成功獲取了Spring Boot后端的信息。
版權(quán)聲明：本文內(nèi)容由互聯(lián)網(wǎng)用戶自發(fā)貢獻(xiàn)，該文觀點(diǎn)僅代表作者本人。本站僅提供信息存儲空間服務(wù)，不擁有所有權(quán)，不承擔(dān)相關(guān)法律責(zé)任。如發(fā)現(xiàn)本站有涉嫌抄襲侵權(quán)/違法違規(guī)的內(nèi)容， 請發(fā)送郵件至 舉報(bào)，一經(jīng)查實(shí)，本站將立刻刪除。