平面ui設(shè)計(jì)網(wǎng)站,上海市住宅建設(shè)發(fā)展中心網(wǎng)站,網(wǎng)站做的不好會(huì)有什么后果,張家界有實(shí)力seo優(yōu)化費(fèi)用文章目錄 系列文章目錄目的前言一、詳細(xì)視頻演示二、項(xiàng)目部分實(shí)現(xiàn)截圖三、技術(shù)棧 后端框架springboot前端框架vue持久層框架MyBaitsPlus微信小程序介紹系統(tǒng)測(cè)試 四、代碼參考 源碼獲取 目的 摘要#xff1a;本文設(shè)計(jì)并實(shí)現(xiàn)了一個(gè)基于Java Spring Boot框架與微信小程序的寵物…文章目錄系列文章目錄目的前言一、詳細(xì)視頻演示二、項(xiàng)目部分實(shí)現(xiàn)截圖三、技術(shù)棧后端框架springboot前端框架vue持久層框架MyBaitsPlus微信小程序介紹系統(tǒng)測(cè)試四、代碼參考源碼獲取目的摘要本文設(shè)計(jì)并實(shí)現(xiàn)了一個(gè)基于Java Spring Boot框架與微信小程序的寵物領(lǐng)養(yǎng)與用品商城系統(tǒng)。該系統(tǒng)旨在解決傳統(tǒng)寵物領(lǐng)養(yǎng)與購(gòu)買渠道信息不透明、管理效率低等問(wèn)題。系統(tǒng)采用前后端分離架構(gòu)前端利用微信小程序提供便捷的用戶交互界面后端以Spring Boot為核心搭建穩(wěn)定服務(wù)端結(jié)合MySQL數(shù)據(jù)庫(kù)實(shí)現(xiàn)數(shù)據(jù)的高效存儲(chǔ)與管理。系統(tǒng)涵蓋寵物領(lǐng)養(yǎng)申請(qǐng)、審核、跟蹤以及寵物用品展示、購(gòu)買、支付等功能模塊。通過(guò)該系統(tǒng)用戶可輕松瀏覽寵物信息、提交領(lǐng)養(yǎng)申請(qǐng)、選購(gòu)寵物用品同時(shí)享受便捷的支付與物流服務(wù)。本系統(tǒng)不僅提升了寵物領(lǐng)養(yǎng)與購(gòu)買的便捷性與透明度還促進(jìn)了寵物行業(yè)的規(guī)范化發(fā)展為寵物主人提供了更加全面、高效的寵物服務(wù)體驗(yàn)具有重要的實(shí)際應(yīng)用價(jià)值。關(guān)鍵詞Java Spring Boot微信小程序?qū)櫸镱I(lǐng)養(yǎng)寵物用品商城前言博主介紹?全網(wǎng)粉絲10W,CSDN特邀作者、博客專家、CSDN新星計(jì)劃導(dǎo)師、全棧領(lǐng)域優(yōu)質(zhì)創(chuàng)作者博客之星、掘金/華為云/阿里云/InfoQ等平臺(tái)優(yōu)質(zhì)作者、專注于Java、小程序技術(shù)領(lǐng)域和畢業(yè)項(xiàng)目實(shí)戰(zhàn)?精彩專欄 推薦訂閱全網(wǎng)最全的Java python 小程序 php uniapp項(xiàng)目列表-CSDN博客文末獲取源碼數(shù)據(jù)庫(kù)感興趣的可以先收藏起來(lái)還有大家在畢設(shè)選題項(xiàng)目以及論文編寫(xiě)等相關(guān)問(wèn)題都可以給我留言咨詢希望幫助更多的人一、詳細(xì)視頻演示文章底部獲取博主聯(lián)系方式二、項(xiàng)目部分實(shí)現(xiàn)截圖?????三、技術(shù)棧后端框架SpringBootSpring Boot內(nèi)置了Tomcat、Jetty和Undertow等服務(wù)器這意味著你可以直接使用它們而不需要額外的安裝和配置。Spring Boot的一個(gè)主要優(yōu)點(diǎn)是它的自動(dòng)配置功能。它可以根據(jù)你的項(xiàng)目中的依賴關(guān)系自動(dòng)配置應(yīng)用程序。這使得配置應(yīng)用程序變得非常容易因?yàn)槟悴恍枰謩?dòng)配置每個(gè)依賴項(xiàng)。Spring Boot也提供了大量的開(kāi)箱即用的功能和插件如Spring Data、Spring Security和Spring Cloud等。這些功能使得開(kāi)發(fā)者可以更快速地構(gòu)建應(yīng)用程序并且可以更容易地?cái)U(kuò)展和集成其他技術(shù)。它是一個(gè)非常流行的框架它的自動(dòng)配置、內(nèi)置服務(wù)器和插件等功能使得開(kāi)發(fā)者可以更快、更輕松地構(gòu)建高質(zhì)量的應(yīng)用程序。前端框架VueVue.js的核心是虛擬DOM技術(shù)。虛擬DOM是一個(gè)內(nèi)存中的數(shù)據(jù)結(jié)構(gòu)它可以幫助Vue.js實(shí)現(xiàn)高效的DOM操作它采用了響應(yīng)式數(shù)據(jù)綁定、虛擬DOM、組件化等現(xiàn)代化技術(shù)為開(kāi)發(fā)者提供了一種靈活、高效、易于維護(hù)的開(kāi)發(fā)模式當(dāng)數(shù)據(jù)發(fā)生變化時(shí)UI也會(huì)自動(dòng)更新這樣就使得開(kāi)發(fā)者可以更加專注于數(shù)據(jù)處理而不是手動(dòng)更新UI這就是Vue體現(xiàn)出來(lái)的簡(jiǎn)潔靈活高效。持久層框架MyBaitsPlusMyBatis-Plus是一款基于MyBatis框架的增強(qiáng)工具旨在簡(jiǎn)化MyBatis的開(kāi)發(fā)。它是一款開(kāi)源的Java框架支持多種數(shù)據(jù)庫(kù)包括MySQL、Oracle、SQL Server、PostgreSQL等。MyBatis-Plus提供了豐富的API和注解可以通過(guò)簡(jiǎn)單的配置和使用來(lái)實(shí)現(xiàn)ORM操作大大減少了手寫(xiě)SQL的工作量。此外MyBatis-Plus還提供了一套代碼生成器可以自動(dòng)生成實(shí)體類、Mapper接口以及XML映射文件極大地簡(jiǎn)化了開(kāi)發(fā)流程。MyBatis-Plus還支持分頁(yè)查詢、動(dòng)態(tài)查詢、樂(lè)觀鎖、性能分析等實(shí)用功能方便開(kāi)發(fā)者進(jìn)行高效的數(shù)據(jù)操作。通過(guò)MyBatis-Plus開(kāi)發(fā)者可以快速開(kāi)發(fā)高質(zhì)量的數(shù)據(jù)訪問(wèn)層代碼提高開(kāi)發(fā)效率系統(tǒng)測(cè)試從多個(gè)角度進(jìn)行測(cè)試找到系統(tǒng)中存在的問(wèn)題是本系統(tǒng)首要的測(cè)試目的通過(guò)功能測(cè)試尋找出系統(tǒng)缺陷并改正確保系統(tǒng)沒(méi)有缺陷。在測(cè)試過(guò)程中證明系統(tǒng)滿足客戶需求發(fā)現(xiàn)問(wèn)題和不足及時(shí)改正。測(cè)試完成之后得出測(cè)試結(jié)論。系統(tǒng)測(cè)試目的在管理系統(tǒng)的開(kāi)發(fā)周期中系統(tǒng)測(cè)試是必不可少且考驗(yàn)?zāi)托牡倪^(guò)程。其重要性在于它是保證系統(tǒng)質(zhì)量和牢靠性的最后一道關(guān)也是整個(gè)系統(tǒng)開(kāi)發(fā)過(guò)程的最后一次檢查。系統(tǒng)測(cè)試主要是為了避免用戶在使用時(shí)發(fā)生問(wèn)題增強(qiáng)用戶體驗(yàn)感為了不影響用戶的使用我們需要從多角度、多思路去考慮系統(tǒng)可能遇到的問(wèn)題通過(guò)不同的模擬場(chǎng)景來(lái)發(fā)現(xiàn)缺陷并解決問(wèn)題。在測(cè)試的過(guò)程中也可以了解到該系統(tǒng)的質(zhì)量情況系統(tǒng)功能是否健全系統(tǒng)邏輯是否順暢。一個(gè)合格的系統(tǒng)測(cè)試過(guò)程完成后將大大提升系統(tǒng)質(zhì)量和使用感。測(cè)試的目標(biāo)是驗(yàn)證系統(tǒng)是否符合需求規(guī)格說(shuō)明書(shū)的定義并找出與需求規(guī)格說(shuō)明書(shū)不符合或與之沖突的內(nèi)容。測(cè)試過(guò)程中一定站在用戶的角度考慮問(wèn)題避免一些不切實(shí)際的場(chǎng)景浪費(fèi)測(cè)試時(shí)間從而可能會(huì)引起問(wèn)題導(dǎo)致預(yù)期結(jié)果與實(shí)際結(jié)果不符。系統(tǒng)功能測(cè)試對(duì)系統(tǒng)功能模塊進(jìn)行測(cè)試通過(guò)點(diǎn)擊、輸入邊界值和必填項(xiàng)非必填項(xiàng)的驗(yàn)證等方法進(jìn)行一系列的黑盒測(cè)試。通過(guò)編寫(xiě)測(cè)試用例根據(jù)測(cè)試用例中的內(nèi)容進(jìn)行測(cè)試最后得出測(cè)試結(jié)論。登錄功能測(cè)試方案當(dāng)需要登入該系統(tǒng)時(shí)通過(guò)賬戶密碼等功能點(diǎn)進(jìn)行驗(yàn)證用戶在輸入時(shí)需要輸入與數(shù)據(jù)庫(kù)內(nèi)存儲(chǔ)的數(shù)據(jù)匹配的內(nèi)容當(dāng)其中某項(xiàng)輸入錯(cuò)誤時(shí)系統(tǒng)將提示輸入錯(cuò)誤。此界面對(duì)角色權(quán)限也有相應(yīng)的校驗(yàn)當(dāng)用戶角色的帳號(hào)選擇管理員角色登錄時(shí)也會(huì)報(bào)錯(cuò)。登錄功能測(cè)試用例如下表所示。輸入數(shù)據(jù)預(yù)期結(jié)果實(shí)際結(jié)果結(jié)果分析用戶名guanliyuan 密碼123456 驗(yàn)證碼正確輸入登入系統(tǒng)成功登入系統(tǒng)和估算結(jié)果一樣用戶名guanliyuan 密碼111111 驗(yàn)證碼正確輸入密碼錯(cuò)誤密碼錯(cuò)誤請(qǐng)重新輸入密碼和估算結(jié)果一樣用戶名guanliyuan 密碼123456 驗(yàn)證碼錯(cuò)誤輸入驗(yàn)證碼錯(cuò)誤驗(yàn)證碼信息錯(cuò)誤和估算結(jié)果一樣用戶名空 密碼123456 驗(yàn)證碼正確輸入用戶名必填請(qǐng)輸入用戶名和估算結(jié)果一樣用戶名guanliyuan 密碼空 驗(yàn)證碼正確輸入密碼錯(cuò)誤密碼錯(cuò)誤請(qǐng)重新輸入密碼和估算結(jié)果一樣用戶管理功能測(cè)試方案用戶管理主要有添加、編輯、刪除、查找用戶功能。添加用戶時(shí)必填項(xiàng)不填檢驗(yàn)系統(tǒng)是否有非空檢驗(yàn)添加已有的用戶信息檢驗(yàn)是否提示用戶名已被使用刪除用戶信息系統(tǒng)將檢驗(yàn)是否進(jìn)行此操作更改用戶信息更改用戶信息后頁(yè)面是否可以展示出來(lái)。用戶管理測(cè)試用例如下表所示。輸入數(shù)據(jù)預(yù)期結(jié)果實(shí)際結(jié)果結(jié)果分析填入用戶基本信息添加成功在用戶列表中顯示該用戶出現(xiàn)在在列表中和估算結(jié)果一樣修改用戶信息編輯成功修改信息成功被修改用戶信息被修改和估算結(jié)果一樣選中刪除用戶系統(tǒng)詢問(wèn)是否刪除用戶確認(rèn)后用戶被刪除驗(yàn)證碼信息錯(cuò)誤系統(tǒng)詢問(wèn)是否刪除用戶確認(rèn)后查找不到用戶信息和估算結(jié)果一樣添加用戶時(shí)不填用戶名提示用戶名不能為空提示用戶名不能為空和估算結(jié)果一樣填入已有用戶名添加失敗提示用戶名重復(fù)添加失敗提示用戶名重復(fù)和估算結(jié)果一樣系統(tǒng)測(cè)試結(jié)論本系統(tǒng)主要使用黑盒測(cè)試通過(guò)模擬用戶使用系統(tǒng)實(shí)現(xiàn)各個(gè)功能編寫(xiě)測(cè)試用例并進(jìn)行測(cè)試。以確保系統(tǒng)流程的正確性。系統(tǒng)測(cè)試必不可少可以使系統(tǒng)更加完善該系統(tǒng)的可使用性也會(huì)更高。測(cè)試該系統(tǒng)主要為了驗(yàn)證系統(tǒng)的功能模塊是否滿足我們最初的設(shè)計(jì)理念驗(yàn)證各個(gè)功能模塊邏輯是否正確此系統(tǒng)不需要過(guò)于復(fù)雜的邏輯處理以便于使用者操作。測(cè)試的最終目的也是圍繞著用戶使用展開(kāi)。測(cè)試過(guò)程中所有場(chǎng)景都應(yīng)符合用戶需求不可偏離需求目標(biāo)遇到問(wèn)題時(shí)要站在用戶的角度進(jìn)行思考。經(jīng)過(guò)一系列的測(cè)試過(guò)程后得到最終的測(cè)試結(jié)果從測(cè)試結(jié)果可以看出實(shí)現(xiàn)的系統(tǒng)在功能和性能方面滿足設(shè)計(jì)要求。微信小程序介紹小程序簡(jiǎn)介小程序是一種連接用戶與服務(wù)的方式它能在微信內(nèi)被便捷地獲取和傳播具有出色的使用體驗(yàn)。不需要下載安裝用戶通過(guò)搜一搜或掃一掃就可以打開(kāi)使用使用完后退出即可。小程序是基于微信的開(kāi)發(fā)平臺(tái)屬于微信內(nèi)部。發(fā)展史微信中的 WebView 逐漸成為移動(dòng) Web 的一個(gè)入口時(shí)微信就有相關(guān)的 JS API 出現(xiàn)了也就是說(shuō)微信小程序開(kāi)發(fā)中會(huì)用到j(luò)avascript。2015年初微信發(fā)布了一整套網(wǎng)頁(yè)開(kāi)發(fā)工具包稱之為 JS-SDK開(kāi)放了拍攝、錄音、語(yǔ)音識(shí)別、二維碼、地圖、支付、分享、卡券等幾十個(gè)API供web開(kāi)發(fā)者開(kāi)發(fā)使用但是它也有很多不足例如白屏等問(wèn)題為解決這類問(wèn)題于是誕生了小程序。小程序的優(yōu)點(diǎn)1.快速的加載2.更強(qiáng)大的能力3.原生的體驗(yàn)4.易用且安全的微信數(shù)據(jù)開(kāi)放5.高效和簡(jiǎn)單的開(kāi)發(fā)小程序與普通網(wǎng)頁(yè)開(kāi)發(fā)的區(qū)別小程序的主要開(kāi)發(fā)語(yǔ)言是 JavaScript 小程序的開(kāi)發(fā)同普通網(wǎng)頁(yè)開(kāi)發(fā)有很大的相似性。對(duì)于前端開(kāi)發(fā)者而言從網(wǎng)頁(yè)開(kāi)發(fā)遷移到小程序的開(kāi)發(fā)成本并不高但是二者還是有區(qū)別的其主要區(qū)別如下1.網(wǎng)頁(yè)開(kāi)發(fā)中渲染線程和腳本線程是互斥的這使得長(zhǎng)時(shí)間的腳本運(yùn)行可能會(huì)導(dǎo)致頁(yè)面失去響應(yīng)而在小程序中二者是分開(kāi)的分別運(yùn)行在不同的線程中不會(huì)失去響應(yīng)。2.網(wǎng)頁(yè)開(kāi)發(fā)中可以使用各種瀏覽器暴露DOM并對(duì)其進(jìn)行操作而在小程序中邏輯層和渲染層是分開(kāi)的邏輯層運(yùn)行在 JSCore 中并沒(méi)有瀏覽器對(duì)象因此小程序中沒(méi)有DOM和BOM的操作。3.JSCore 的環(huán)境同 NodeJS 環(huán)境也不相同所以一些 NPM 的包在小程序中也是無(wú)法運(yùn)行的。4.網(wǎng)頁(yè)開(kāi)發(fā)需要面臨各種各樣的瀏覽器環(huán)境而小程序只需面臨兩大系統(tǒng)iOS和Android及輔助開(kāi)發(fā)者工具。5.網(wǎng)頁(yè)開(kāi)發(fā)中只需要使用到瀏覽器并搭配一些輔助工具或者編輯器即可小程序的開(kāi)發(fā)則有所不同需要經(jīng)過(guò)申請(qǐng)小程序帳號(hào)、安裝小程序開(kāi)發(fā)者工具、配置項(xiàng)目等才可以。申請(qǐng)賬號(hào)想要開(kāi)發(fā)一款小程序首先需要申請(qǐng)一個(gè)小程序賬號(hào)通過(guò)這個(gè)賬號(hào)就可以管理自己的小程序其步驟如下1.打開(kāi)官網(wǎng)https://mp.weixin.qq.com/進(jìn)入微信公眾平臺(tái)點(diǎn)立即注冊(cè)選擇小程序2.在小程序注冊(cè)頁(yè)面根據(jù)指引填寫(xiě)相關(guān)資料并注冊(cè)。3.到注冊(cè)郵箱查閱郵件點(diǎn)擊郵件中的鏈接地址進(jìn)行信息登記并繼續(xù)后確認(rèn)4.重新進(jìn)入網(wǎng)址https://mp.weixin.qq.com掃碼登錄進(jìn)入小程序頁(yè)面開(kāi)發(fā)---開(kāi)發(fā)管理---開(kāi)發(fā)設(shè)置獲取AppID(小程序ID相當(dāng)于一個(gè)身份證后面會(huì)用到這里需要知道自己的AppID即可)安裝開(kāi)發(fā)工具微信小程序有自己的開(kāi)發(fā)工具當(dāng)然你可以使用自己的編輯器編寫(xiě)代碼獲取完AppID后在當(dāng)前頁(yè)面進(jìn)行下載開(kāi)發(fā)者工具具體步驟如下1.單擊開(kāi)發(fā)----開(kāi)發(fā)工具---開(kāi)發(fā)者工具---下載---選擇對(duì)應(yīng)自己電腦系統(tǒng)版本下載應(yīng)用2.將下載好的應(yīng)用雙擊接受用戶協(xié)議安裝目錄可自愿修改之后進(jìn)行安裝。3.通過(guò)以上兩步就已經(jīng)安裝完微信開(kāi)發(fā)工具了想要了解更多微信工具的使用可閱讀官方文檔https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.html第一個(gè)微信小程序安裝完開(kāi)發(fā)工具后可以使用它開(kāi)發(fā)一個(gè)小demo先簡(jiǎn)單測(cè)試一下,其步驟如下1.在桌面找到新安裝的微信開(kāi)發(fā)者工具并雙擊。2.使用微信掃描彈出的二維碼進(jìn)入開(kāi)發(fā)者工具界面首次打開(kāi)需要掃碼登陸。3.在小程序項(xiàng)目---小程序中點(diǎn)擊加號(hào)填寫(xiě)項(xiàng)目配置AppID可使用自己注冊(cè)小程序時(shí)的AppID也可選擇測(cè)試號(hào)4.選擇著默認(rèn)模板其他配置默認(rèn)即可最后勾選用戶協(xié)議點(diǎn)擊新建。5.此時(shí)在開(kāi)發(fā)工具模擬器中會(huì)看到自己微信的頭像和hello world,此時(shí)表明第一個(gè)微信小程序已經(jīng)創(chuàng)建成功。小程序代碼構(gòu)成上面生成的demo項(xiàng)目文件目錄機(jī)構(gòu)如下一個(gè)基礎(chǔ)的小程序由四種文件構(gòu)成分別是1.json 后綴的 JSON 配置文件2.wxml 后綴的 WXML 模板文件3.wxss 后綴的 WXSS 樣式文件4.js后綴的 JS 腳本邏輯文件下面是對(duì)上面文件的詳細(xì)介紹.json文件此文件用于靜態(tài)配置項(xiàng)目根目錄下app.json文件是當(dāng)前小程序的全局配置包括小程序的所有頁(yè)面路徑、界面表現(xiàn)、網(wǎng)絡(luò)超時(shí)時(shí)間、底部 tab 等app.json基礎(chǔ)配置如下json文件中不能添加注釋這里為了方便說(shuō)明以//開(kāi)始的表示注釋使用此配置信息時(shí)將注釋刪除即可{ pages:[//1.pages用于配置所有頁(yè)面路徑默認(rèn)會(huì)進(jìn)入第一個(gè)路徑指定的頁(yè)面。 pages/index/index,//當(dāng)在這里配置完新頁(yè)面保存后pages下會(huì)自動(dòng)生成對(duì)應(yīng)的頁(yè)面文件只需修改自動(dòng)生成的文件即可。 pages/logs/logs ], entryPagePath: pages/logs/logs,//2.entryPagePath配置小程序默認(rèn)啟動(dòng)首頁(yè)不配置此項(xiàng)默認(rèn)會(huì)選擇pages配置中的第一項(xiàng)。 window:{//3.window:配置小程序所有頁(yè)面的頂部背景顏色文字顏色等。 navigationBarBackgroundColor: #ff0,//3-1設(shè)置頂部導(dǎo)航背景顏色支持十六進(jìn)制顏色值。 navigationBarTitleText: 微信小程序測(cè)試,//3-2設(shè)置頂部導(dǎo)航標(biāo)題文本。 navigationBarTextStyle:black,//3-3設(shè)置頂部導(dǎo)航標(biāo)題字體顏色其值只能是black和white默認(rèn)值。 navigationStyle:default,//3-4配置導(dǎo)航欄樣式默認(rèn)值defalult,還有一值custom導(dǎo)航欄標(biāo)題及背景都會(huì)消失僅右上角膠囊按鈕存在。 backgroundColor:#ffffff,//3-5配置窗口的背景色默認(rèn)值#ffffff支持十六進(jìn)制顏色值。 backgroundTextStyle:dark,//3-6配置下拉loading的樣式僅支持 dark默認(rèn)值和light。 backgroundColorTop:#666,//3-7設(shè)置頂部窗口的背景色僅iOS支持默認(rèn)值#ffffff。 backgroundColorBottom:#555,//3-8設(shè)置底部窗口的背景色僅iOS支持默認(rèn)值#ffffff。 enablePullDownRefresh:true,//3-9設(shè)置是否開(kāi)啟全局下拉刷新默認(rèn)值為false。 onReachBottomDistance:50,//3-10設(shè)置當(dāng)頁(yè)面上拉距底部某個(gè)距離后觸發(fā)事件單位為px,默認(rèn)值50例如下拉加載更多數(shù)據(jù)。 pageOrientation:auto//3-11設(shè)置屏幕旋轉(zhuǎn)時(shí)小程序是否跟隨設(shè)備旋轉(zhuǎn)橫豎屏顯示其值portrait默認(rèn)值設(shè)備旋轉(zhuǎn)時(shí)小程序不旋轉(zhuǎn)、landscape設(shè)備旋轉(zhuǎn)小程序旋轉(zhuǎn)保持與視線不變、auto自動(dòng)。 }, tabBar:{//4.tabBar:配置tab欄切換按鈕。 color:#fff,//4-1設(shè)置tab按鈕字體顏色其值為十六進(jìn)制顏色值且為必須項(xiàng)。 selectedColor:#000,//4-2設(shè)置tab按鈕被選中時(shí)字體顏色其值為十六進(jìn)制顏色值且為必須項(xiàng)。 backgroundColor:#999,//4-3設(shè)置tab欄背景顏色其值為十六進(jìn)制顏色值且為必須項(xiàng)。 borderStyle:black,//4-4設(shè)置tab欄邊框顏色其值為black默認(rèn)和white。 list:[//4-5設(shè)置tab按鈕選項(xiàng)其值為一個(gè)每項(xiàng)都是對(duì)象的數(shù)組且為必須項(xiàng)數(shù)組元素的個(gè)數(shù)必須是[2,5]個(gè)不在范圍內(nèi)不顯示。 { pagePath:pages/logs/logs,//4-5-1設(shè)置當(dāng)前要跳轉(zhuǎn)的頁(yè)面路徑。 text:登錄,//4-5-2設(shè)置當(dāng)前按鈕文本。 iconPath:images/tabs/home.png,//4-5-3設(shè)置當(dāng)前按鈕點(diǎn)擊前icon圖標(biāo)大小限制為40kb建議尺寸81px*81px不支持網(wǎng)絡(luò)圖片。 selectedIconPath:images/tabs/home-active.png//4-5-4設(shè)置當(dāng)前按鈕點(diǎn)擊后icon圖標(biāo)大小限制為40kb建議尺寸81px*81px不支持網(wǎng)絡(luò)圖片。 }, { pagePath:pages/index/index, text:登錄, iconPath:images/tabs/home.png, selectedIconPath:images/tabs/home-active.png } ], position:top,//4-6設(shè)置tab欄的位置其值bottom底部默認(rèn)、top頂部。 custom:false//4-7自定義設(shè)置tabBar一般忽略此項(xiàng)配置其默認(rèn)值為false,當(dāng)值為true時(shí)需要自定義設(shè)計(jì)tabBar否則tabBar將失效其設(shè)計(jì)可閱讀https://developers.weixin.qq.com/miniprogram/dev/framework/ability/custom-tabbar.html。 }, networkTimeout:{//5.networkTimeout:設(shè)置請(qǐng)求超時(shí)時(shí)間。 request:60000,//5-1設(shè)置wx.request的超時(shí)時(shí)間默認(rèn)值為60000單位值毫秒。 connectSocke:60000,//5-2設(shè)置wx.connectSocket的超時(shí)時(shí)間默認(rèn)值為60000單位值毫秒。 uploadFile:60000,//5-3設(shè)置wx.uploadFile的超時(shí)時(shí)間默認(rèn)值為60000單位值毫秒。 downloadFile:60000//5-4設(shè)置wx.downloadFile的超時(shí)時(shí)間默認(rèn)值為60000單位值毫秒。 }, //debug:true,//6.debug:是否開(kāi)啟在開(kāi)發(fā)工具控制臺(tái)面板顯示調(diào)試信息Page 的注冊(cè)頁(yè)面路由數(shù)據(jù)更新事件觸發(fā)等便于開(kāi)發(fā)者快速定位問(wèn)題所在調(diào)試完建議關(guān)閉其默認(rèn)值為false。 //functionalPages:true,//7.functionalPages是否啟用插件功能默認(rèn)false如要啟用可閱讀https://developers.weixin.qq.com/miniprogram/dev/framework/plugin/functional-pages.html。 //subpackages:{},//8.subpackages:分包結(jié)構(gòu)配置用于構(gòu)建時(shí)打包成不同的分包按需加載如需配置請(qǐng)閱讀https://developers.weixin.qq.com/miniprogram/dev/framework/subpackages.html。 //workers:string,//9.workers:設(shè)置處理多線程任務(wù)時(shí)worker代碼放置目錄如需配置請(qǐng)閱讀https://developers.weixin.qq.com/miniprogram/dev/framework/workers.html。 //requiredBackgroundModes:string,//10.requiredBackgroundModes設(shè)置需要在后臺(tái)使用的能力如需配置請(qǐng)閱讀https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html#requiredBackgroundModes //plugins:Object,//11.plugins:設(shè)置使用到的插件如需配置可閱讀https://developers.weixin.qq.com/miniprogram/dev/framework/plugin/using.html。 //preloadRule:Object,//12.preloadRule:設(shè)置分包預(yù)下載規(guī)則如需配置可閱讀https://developers.weixin.qq.com/miniprogram/dev/framework/subpackages/preload.html。 resizable:true,//13.resizable:設(shè)置是否允許在PC上對(duì)窗口進(jìn)行縮放及iPad是否支持屏幕旋轉(zhuǎn)默認(rèn)值為false。 //usingComponents:Object,//14.usingComponents:配置自定義組件。 //permission:Object,//15.permission:配置小程序接口權(quán)限相關(guān)設(shè)置如需配置可閱讀https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html#permission。 //sitemapLocation:String,//16.sitemapLocation:配置sitemap.json文件路徑默認(rèn)在app.json同級(jí)目錄下。 style:v2,//17.style:當(dāng)值為v2時(shí)表示啟用新版的組件樣式。 //useExtendedLib:Object,//18.useExtendedLib:配置引用的擴(kuò)展庫(kù)如需配置可閱讀https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html#useExtendedLib。 //entranceDeclare:Object,//19.entranceDeclare:配置微信消息用小程序打開(kāi)如需配置可閱讀https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/location-message.html。 //darkmode:String,//20.darkmode:配置小程序支持 DarkMode如需配置可閱讀https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html#darkmode。 //themeLocation:String,//21.themeLocation:配置theme.json 的路徑如需配置可閱讀https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html#themeLocation。 //lazyCodeLoading:String,//22.lazyCodeLoading:配置自定義組件代碼按需注入如需配置可閱讀https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html#lazyCodeLoading。 //singlePage:Object,//23.singlePage:配置單頁(yè)模式相關(guān)配置如需配置可閱讀https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html#singlePage。 }app.json文件更詳細(xì)配置文檔推薦https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.htmlproject.config.json 對(duì)開(kāi)發(fā)工具的配置使用這個(gè)配置后即使在更換電腦重新安裝工具后將此項(xiàng)目在工具中打開(kāi)依舊是自己熟悉的工具配置項(xiàng)。pages文件夾中json文件 pages文件夾中每個(gè)頁(yè)面下的json文件是對(duì)當(dāng)前頁(yè)面的配置當(dāng)前頁(yè)面使用此json文件配置頁(yè)面后當(dāng)前頁(yè)面可以忽略app.json文件的配置。.wxml文件此文件用于小程序骨架類似網(wǎng)頁(yè)中的html文件此文件存在pages文件夾下的頁(yè)面文件夾中也是由標(biāo)簽、屬性等構(gòu)成但是這里的標(biāo)簽和html中的標(biāo)簽有很大的不同如view classcontainertexthello/text/viewwxml文件和html文件不同之處1.標(biāo)簽名有所不同具體可閱讀組件相關(guān)文檔https://developers.weixin.qq.com/miniprogram/dev/component/2.小程序中可以實(shí)現(xiàn)數(shù)據(jù)綁定、列表渲染、條件渲染、模板等具體文檔推薦https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/wxss樣式wxss支持css大部分特性其文件為后綴.wxss的文件其不同之處1.新增rpx尺寸單位一個(gè)響應(yīng)式的尺寸單位把所有設(shè)備屏幕尺寸都劃分為750rpx,使用rpx可以適配不同屏幕尺寸。2.僅支持css基礎(chǔ)選擇器。js邏輯微信小程序中js邏輯代碼和網(wǎng)頁(yè)中js代碼基本相似后面會(huì)詳細(xì)介紹。四、代碼參考IgnoreAuth PostMapping(value /login) public R login(String username, String password, String captcha, HttpServletRequest request) { UsersEntity user userService.selectOne(new EntityWrapperUsersEntity().eq(username, username)); if(usernull || !user.getPassword().equals(password)) { return R.error(賬號(hào)或密碼不正確); } String token tokenService.generateToken(user.getId(),username, users, user.getRole()); return R.ok().put(token, token); } Override public String generateToken(Long userid,String username, String tableName, String role) { TokenEntity tokenEntity this.selectOne(new EntityWrapperTokenEntity().eq(userid, userid).eq(role, role)); String token CommonUtil.getRandomString(32); Calendar cal Calendar.getInstance(); cal.setTime(new Date()); cal.add(Calendar.HOUR_OF_DAY, 1); if(tokenEntity!null) { tokenEntity.setToken(token); tokenEntity.setExpiratedtime(cal.getTime()); this.updateById(tokenEntity); } else { this.insert(new TokenEntity(userid,username, tableName, role, token, cal.getTime())); } return token; } /** * 權(quán)限(Token)驗(yàn)證 */ Component public class AuthorizationInterceptor implements HandlerInterceptor { public static final String LOGIN_TOKEN_KEY Token; Autowired private TokenService tokenService; Override public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception { //支持跨域請(qǐng)求 response.setHeader(Access-Control-Allow-Methods, POST, GET, OPTIONS, DELETE); response.setHeader(Access-Control-Max-Age, 3600); response.setHeader(Access-Control-Allow-Credentials, true); response.setHeader(Access-Control-Allow-Headers, x-requested-with,request-source,Token, Origin,imgType, Content-Type, cache-control,postman-token,Cookie, Accept,authorization); response.setHeader(Access-Control-Allow-Origin, request.getHeader(Origin)); // 跨域時(shí)會(huì)首先發(fā)送一個(gè)OPTIONS請(qǐng)求這里我們給OPTIONS請(qǐng)求直接返回正常狀態(tài) if (request.getMethod().equals(RequestMethod.OPTIONS.name())) { response.setStatus(HttpStatus.OK.value()); return false; } IgnoreAuth annotation; if (handler instanceof HandlerMethod) { annotation ((HandlerMethod) handler).getMethodAnnotation(IgnoreAuth.class); } else { return true; } //從header中獲取token String token request.getHeader(LOGIN_TOKEN_KEY); /** * 不需要驗(yàn)證權(quán)限的方法直接放過(guò) */ if(annotation!null) { return true; } TokenEntity tokenEntity null; if(StringUtils.isNotBlank(token)) { tokenEntity tokenService.getTokenEntity(token); } if(tokenEntity ! null) { request.getSession().setAttribute(userId, tokenEntity.getUserid()); request.getSession().setAttribute(role, tokenEntity.getRole()); request.getSession().setAttribute(tableName, tokenEntity.getTablename()); request.getSession().setAttribute(username, tokenEntity.getUsername()); return true; } PrintWriter writer null; response.setCharacterEncoding(UTF-8); response.setContentType(application/json; charsetutf-8); try { writer response.getWriter(); writer.print(JSONObject.toJSONString(R.error(401, 請(qǐng)先登錄))); } finally { if(writer ! null){ writer.close(); } } // throw new EIException(請(qǐng)先登錄, 401); return false; } }數(shù)據(jù)庫(kù)參考-- ---------------------------- -- Table structure for token -- ---------------------------- DROP TABLE IF EXISTS token; CREATE TABLE token ( id bigint(20) NOT NULL AUTO_INCREMENT COMMENT 主鍵, userid bigint(20) NOT NULL COMMENT 用戶id, username varchar(100) NOT NULL COMMENT 用戶名, tablename varchar(100) DEFAULT NULL COMMENT 表名, role varchar(100) DEFAULT NULL COMMENT 角色, token varchar(200) NOT NULL COMMENT 密碼, addtime timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP COMMENT 新增時(shí)間, expiratedtime timestamp NOT NULL DEFAULT 0000-00-00 00:00:00 COMMENT 過(guò)期時(shí)間, PRIMARY KEY (id) USING BTREE ) ENGINEInnoDB AUTO_INCREMENT27 DEFAULT CHARSETutf8 ROW_FORMATCOMPACT COMMENTtoken表; -- ---------------------------- -- Records of token -- ---------------------------- INSERT INTO token VALUES (9, 23, cd01, xuesheng, 學(xué)生, al6svx5qkei1wljry5o1npswhdpqcpcg, 2023-02-23 21:46:45, 2023-03-15 14:01:36); INSERT INTO token VALUES (10, 11, xh01, xuesheng, 學(xué)生, fahmrd9bkhqy04sq0fzrl4h9m86cu6kx, 2023-02-27 18:33:52, 2023-03-17 18:27:42); INSERT INTO token VALUES (11, 17, ch01, xuesheng, 學(xué)生, u5km44scxvzuv5yumdah2lhva0gp4393, 2023-02-27 18:46:19, 2023-02-27 19:48:58); INSERT INTO token VALUES (12, 1, admin, users, 管理員, h1pqzsb9bldh93m92j9m2sljy9bt1wdh, 2023-02-27 19:37:01, 2023-03-17 18:23:02); INSERT INTO token VALUES (13, 21, xiaohao, shezhang, 社長(zhǎng), zdm7j8h1wnfe27pkxyiuzvxxy27ykl2a, 2023-02-27 19:38:07, 2023-03-17 18:25:20); INSERT INTO token VALUES (14, 27, djy01, xuesheng, 學(xué)生, g3teq4335pe21nwuwj2sqkrpqoabqomm, 2023-03-15 12:56:17, 2023-03-15 14:00:16); INSERT INTO token VALUES (15, 29, dajiyue, shezhang, 社長(zhǎng), 0vb1x9xn7riewlp5ddma5ro7lp4u8m9j, 2023-03-15 12:58:08, 2023-03-15 14:03:48);源碼獲取文章下方名片聯(lián)系我即可~大家點(diǎn)贊、收藏、關(guān)注、評(píng)論啦 、查看獲取聯(lián)系方式精彩專欄推薦訂閱全網(wǎng)最全的Java python 小程序 php uniapp項(xiàng)目列表