基于微信小程序的食品購系統(tǒng)

1、基于微信小程序的食品購系統(tǒng)摘要隨著互聯(lián)網(wǎng)的迅猛發(fā)展，關(guān)于購物的各種網(wǎng)站、手機(jī)應(yīng)用軟件也變得越來越多姿多彩。 有些大型的購物網(wǎng)站和應(yīng)用程序的功能太過復(fù)雜，界面過多，對于購物而言不夠便利。而 隨著微信的逐漸發(fā)展，使得微信小程序購物更加方便的一種途徑。該系統(tǒng)使用微信開發(fā)者工具開發(fā)用戶使用的小程序端頁面，采用了 java開發(fā)技術(shù)和 MySQL數(shù)據(jù)庫技術(shù)對系統(tǒng)的后臺數(shù)據(jù)進(jìn)行管理，實(shí)現(xiàn)了網(wǎng)上進(jìn)行瀏覽商品，選擇自己喜歡 的商品，實(shí)現(xiàn)網(wǎng)絡(luò)形式的購物。管理員通過注冊登錄后可以對商品、用戶、訂單等信息進(jìn) 行維護(hù)和管理，包括實(shí)現(xiàn)對商品等信息的增刪改查等操作，從而促進(jìn)了食品購系統(tǒng)的后臺 維護(hù)和成功運(yùn)行。該系統(tǒng)為實(shí)現(xiàn)人

2、們更便捷、更高效的購物行為創(chuàng)造了可能性。關(guān)鍵詞：微信小程序；網(wǎng)上購物；java； mysqlABSTRACTWith the rapid development of the Internet, various websites and mobile application software about shopping have become more and more colorful. Some large shopping websites and applications have too complicated functions and too many interfaces,

3、which is not convenient for shopping. With the gradual development of WeChat, a way to make WeChat applet shopping more convenient.The system uses WeChat developer tools to develop small program pages used by users. It uses java development technology and MySQL database technology to manage the back

4、ground data of the system. shopping. After registering and logging in, the administrator can maintain and manage the information of commodities, users, orders, etc., including the operations of adding, deleting, modifying, and inspecting commodities and other information, thereby promoting the backg

5、round maintenance and successful operation of the food purchasing system.This system has created the possibility of realizing more convenient and efficient shopping behaviors.KEY WORDS:Wechat applet, online shopping, Java, MySQL目錄 TOC o 1-5 h z HYPERLINK l bookmark7 o Current Document 1緒論 1 HYPERLIN

6、K l bookmark9 o Current Document 系統(tǒng)研究背景 1微信小程序的發(fā)展 1網(wǎng)上購物的發(fā)展 1網(wǎng)上購物系統(tǒng)的現(xiàn)狀 2 HYPERLINK l bookmark11 o Current Document 系統(tǒng)研究意義 2 HYPERLINK l bookmark13 o Current Document 2系統(tǒng)需求分析3 HYPERLINK l bookmark15 o Current Document 系統(tǒng)需求概述 3 HYPERLINK l bookmark17 o Current Document 系統(tǒng)的方便性需求分析 3 HYPERLINK l bookmark

7、19 o Current Document 系統(tǒng)的可行性需求分析 3 HYPERLINK l bookmark21 o Current Document 系統(tǒng)的功能需求分析 3 HYPERLINK l bookmark23 o Current Document 3微信小程序介紹4 HYPERLINK l bookmark25 o Current Document 微信的簡介 4 HYPERLINK l bookmark27 o Current Document 微信小程序的簡介 4 HYPERLINK l bookmark29 o Current Document 微信小程序的基本功能介紹 5

8、 HYPERLINK l bookmark31 o Current Document 微信小程序開發(fā)技術(shù)的介紹 5微信小程序頁面效果圖展示 6 HYPERLINK l bookmark41 o Current Document MySQL12 HYPERLINK l bookmark43 o Current Document MySQL數(shù)據(jù)庫的介紹12 HYPERLINK l bookmark45 o Current Document MySQL數(shù)據(jù)庫技術(shù)介紹12 HYPERLINK l bookmark47 o Current Document MySQL數(shù)據(jù)庫的表的實(shí)體對象12 HYPER

9、LINK l bookmark49 o Current Document Java后臺管理系統(tǒng) 16 HYPERLINK l bookmark51 o Current Document 后臺管理系統(tǒng)各模塊頁面效果圖 16 HYPERLINK l bookmark53 o Current Document 后臺管理系統(tǒng)的前端技術(shù)介紹 18后臺管理系統(tǒng)的后臺技術(shù)介紹 19 HYPERLINK l bookmark55 o Current Document 6食品購系統(tǒng)功能模塊20 HYPERLINK l bookmark57 o Current Document 食品購系統(tǒng)的功能需求 20 HYP

10、ERLINK l bookmark59 o Current Document 食品購系統(tǒng)的功能描述 22面向用戶的功能流程圖 22面向管理員的功能流程圖 22 HYPERLINK l bookmark61 o Current Document 7系統(tǒng)的測試與運(yùn)行23 HYPERLINK l bookmark63 o Current Document 系統(tǒng)測試的意義 23 HYPERLINK l bookmark65 o Current Document 系統(tǒng)測試的結(jié)論 23 HYPERLINK l bookmark67 o Current Document 8結(jié)論 24 HYPERLINK l

11、 bookmark69 o Current Document 參考文獻(xiàn)25 HYPERLINK l bookmark71 o Current Document 致謝261緒論系統(tǒng)研究背景微信小程序的發(fā)展最近這幾年以來，互聯(lián)網(wǎng)的普及已經(jīng)成為常態(tài)，微信也已經(jīng)成為家喻戶曉的應(yīng)用軟件， 微信小程序從2017年以來，在微信公開課上面正式上線，逐步興起，經(jīng)過將近兩年的發(fā) 展，已經(jīng)形成了微信小程序新型的開發(fā)環(huán)境以及開發(fā)者生態(tài)。微信小程序，是這個(gè)中國IT行業(yè)中的具有影響意義的創(chuàng)新成果，越來越多的開發(fā)者加 入到小程序開發(fā)這個(gè)行列，齊心協(xié)力地推動(dòng)了小程序的發(fā)展，當(dāng)微信小程序經(jīng)歷全面開放 申請后，公司企業(yè)、政府部門

12、、新聞媒體、其他組織或者個(gè)人都可以成為開發(fā)者，都可以 申請和注冊小程序。小程序的應(yīng)用數(shù)量已經(jīng)突破了一百萬，并且覆蓋在許許多多不同的行業(yè)中，因?yàn)樾〕?序的使用是不需要下載、不需要安裝應(yīng)用軟件的，只要用戶有微信，通過掃描二維碼或者 點(diǎn)擊搜索小程序的名稱的方式，進(jìn)入小程序頁面。在許多城市中，小程序可以實(shí)現(xiàn)客車地 鐵等交通工具的網(wǎng)上購票，可以實(shí)現(xiàn)找?guī)裙卜?wù)，還可以實(shí)現(xiàn)外賣點(diǎn)餐的功能等等。 總而言之，微信小程序的不斷發(fā)展，創(chuàng)造了更多就業(yè)機(jī)會(huì)，推動(dòng)了社會(huì)的穩(wěn)定進(jìn)步。網(wǎng)上購物的發(fā)展當(dāng)今世界互聯(lián)網(wǎng)可以說是風(fēng)生水起，各種各樣的購物網(wǎng)站、手機(jī)購物類的應(yīng)用軟件也 已經(jīng)蔚然成風(fēng)。購物對于當(dāng)代人而言，不僅僅是當(dāng)有

13、時(shí)間的時(shí)候出門逛街，更是足不出戶 通過電腦或者手機(jī)就能夠完成的事情。購物形式的多姿多彩，豐富了人們的生活方式，網(wǎng) 上購物最大的好處就是方便，用戶不用親自到實(shí)體店買東西，通過上網(wǎng)就可以了解大量自 己想要的信息，從而滿足自己的需求，使得網(wǎng)購已經(jīng)成為了當(dāng)今社會(huì)不可或缺的一種生活 方式。隨著電子商務(wù)熱潮的一度興起和互聯(lián)網(wǎng)的迅猛發(fā)展，以及越來越多的實(shí)踐深入表明， 網(wǎng)上購物不僅能夠集中致力于提供給用戶產(chǎn)品展示的美好體驗(yàn)，讓客戶們通過上網(wǎng)就可以 自由地選擇自己心儀的商品，而且可以通過網(wǎng)絡(luò)的方式使得購物成為不只是逛街挑選，更 是空閑時(shí)候的一種休息娛樂方式。在1998年3月18日的時(shí)候，中國第一筆網(wǎng)上電子交易成

14、功地在北京誕生，易趣網(wǎng)站 是我國國內(nèi)最早產(chǎn)生的網(wǎng)站。2003年，一場非典的爆發(fā)居然間接推動(dòng)了網(wǎng)上購物的發(fā)展， 就在此時(shí)，阿里巴巴旗下的淘寶網(wǎng)成立，馬云帶領(lǐng)著自己的團(tuán)隊(duì)在互聯(lián)網(wǎng)行業(yè)奪得一席之 地，本系統(tǒng)在編寫之前，對網(wǎng)上大量的商城進(jìn)行了需求分析，并且對許多購物網(wǎng)站，購物 APP以及商城小程序進(jìn)行了調(diào)查，包括頁面的商品布局、用戶的購物操作流程、管理員的 管理操作等。1.1.3網(wǎng)上購物系統(tǒng)的現(xiàn)狀在如今這個(gè)信息化水平飛速發(fā)展的時(shí)代，網(wǎng)絡(luò)這個(gè)名次已經(jīng)成為了人們?nèi)粘Ｉ?、學(xué) 習(xí)、工作中必不可少的重要部分，通過網(wǎng)絡(luò)，人們可以了解信息，享受便捷，因此網(wǎng)上購 物的市場前景十分的廣闊，特別是十分受到青年人和中年人

15、的喜愛。網(wǎng)上購物系統(tǒng)也可以 稱之為在線商城，對于普通消費(fèi)者來說，網(wǎng)上購物的最大優(yōu)點(diǎn)就是方便和便宜。隨著人們對這種購物方式的喜愛，越來越多的網(wǎng)上購物系統(tǒng)隨之出現(xiàn)，并且獲得了人 們的普遍好評。因此，可以說網(wǎng)上購物系統(tǒng)的發(fā)展前景是非常樂觀的，網(wǎng)上購物系統(tǒng)的場 景化和社會(huì)化的形成就可以說是得益于移動(dòng)智能手機(jī)的普及了，我國移動(dòng)市場保持著高速 發(fā)展的形式，光移動(dòng)端的交易額就可以占據(jù)相當(dāng)大的比例。用戶在網(wǎng)上瀏覽商品，通過網(wǎng) 上支付，進(jìn)行點(diǎn)擊購買，商家通過郵寄快遞的方式進(jìn)行發(fā)貨，這種發(fā)展方式得到了用戶的 認(rèn)可，從而推動(dòng)著網(wǎng)上購物系統(tǒng)的不斷發(fā)展。系統(tǒng)研究意義微信應(yīng)用軟件應(yīng)用的日益廣泛，使得微信小程序得到了迅速的

16、發(fā)展，通過這一點(diǎn)就可 以看出來基于微信小程序的食品購系統(tǒng)就有很大的發(fā)展前景。另一方面，對于當(dāng)今信息科 技高速發(fā)展的時(shí)代而言，網(wǎng)上購物已經(jīng)發(fā)展成為了經(jīng)濟(jì)社會(huì)和網(wǎng)絡(luò)信息中相互結(jié)合的時(shí)代 產(chǎn)物，具有明顯的信息性、網(wǎng)絡(luò)性、社會(huì)性以及交易性等時(shí)代特點(diǎn)。再加上是基于小程序 的特點(diǎn)，使得用戶只需要通過微信應(yīng)用程序，不需要再次下載安裝別的軟件就可以進(jìn)入到 小程序，方便用戶的使用。2系統(tǒng)需求分析系統(tǒng)需求概述做好充分的系統(tǒng)需求分析對于系統(tǒng)的設(shè)計(jì)者來說是至關(guān)重要的一步，只有明確的系統(tǒng) 的需求，知道自己的系統(tǒng)需要什么，還缺少什么，針對所發(fā)現(xiàn)的問題應(yīng)該怎樣做，才可以 做好該系統(tǒng)。本系統(tǒng)的需求分析是通過對用戶的關(guān)于不同種

17、類食物的喜好，對微信小程序 以及許多網(wǎng)上購物手機(jī)軟件的需求進(jìn)行了詳細(xì)地搜索和調(diào)查，按照用戶對于商品的需求確 定了本系統(tǒng)的主要功能，分析并確定了實(shí)體的基本屬性，方便用戶使用時(shí)可以單純的選擇 商品進(jìn)行購買，使得用戶在使用本系統(tǒng)的時(shí)候可以有一種很好的體驗(yàn)。系統(tǒng)的方便性需求分析許多網(wǎng)上購物系統(tǒng)的存在很大一部分原因是為了方便用戶進(jìn)行瀏覽商品實(shí)現(xiàn)購買的， 所以購物系統(tǒng)的設(shè)計(jì)應(yīng)該以頁面簡潔、操作簡單、實(shí)用性強(qiáng)大為目標(biāo)。通過調(diào)查發(fā)現(xiàn)，購物系統(tǒng)的最終目的就是想要通過用戶使用該系統(tǒng)來提高流量，進(jìn)而 實(shí)現(xiàn)了流量的轉(zhuǎn)化，從而在其中賺取利益。所以系統(tǒng)的各個(gè)頁面不應(yīng)該設(shè)置的太過于繁瑣， 商品的圖片應(yīng)該以簡潔醒目的為主，不

18、宜太花哨，還是應(yīng)該以有利于用戶的體驗(yàn)為主。另一方面，現(xiàn)如今存在的許多軟件系統(tǒng)在運(yùn)行的時(shí)候，可能會(huì)出現(xiàn)大量的插件等占據(jù) 內(nèi)存的東西，而且用戶下載的同時(shí)，很容易就可能會(huì)下載到一些自己根本不需要的軟件。 而基于微信小程序的食品購系統(tǒng)是一個(gè)不需要單獨(dú)下載軟件，在用戶擁有微信軟件的前提 下，通過搜索小程序名稱或者掃描小程序二維碼的方式，就可以使用的一個(gè)應(yīng)用。系統(tǒng)的可行性需求分析基于微信小程序的食品購系統(tǒng)是用于在網(wǎng)上進(jìn)行瀏覽商品，選擇自己喜歡的商品，通 過網(wǎng)上支付的形式進(jìn)行購物的，使用了微信開發(fā)者工具開發(fā)用戶使用的小程序端頁面，采 用了 java開發(fā)技術(shù)和MySQL數(shù)據(jù)庫技術(shù)對系統(tǒng)的后臺數(shù)據(jù)進(jìn)行管理，本系

19、統(tǒng)所需要的軟 件和硬件環(huán)境有：高性能的計(jì)算機(jī)一臺，安裝微信開發(fā)者工具，安裝Eclipse的java可視 化開發(fā)工具，安裝MySQL的服務(wù)器，Navicat Premium等圖形工具。本系統(tǒng)的主要輸入設(shè) 備使用的是鍵盤操作，輸出設(shè)備使用的是顯示器輸出。系統(tǒng)的功能需求分析基于微信小程序的食品購系統(tǒng)主要可以大體分為兩個(gè)模塊，第一個(gè)模塊是面向用戶使 用的模塊，其功能主要包括：用戶通過微信客戶端進(jìn)入小程序，獲取頭像等信息、進(jìn)行注 冊登錄、瀏覽商品、查看不同類型的食物、進(jìn)行購買商品等操作。第二個(gè)模塊是面向管理 員使用的模塊，其功能大致包括：管理員注冊登錄，對商品、分類、用戶等實(shí)體進(jìn)行管理， 包括添加、刪除

20、、修改、查詢操作。3微信小程序介紹微信的簡介微信，英文是WeChat,是由騰訊公司研發(fā)推出的一個(gè)應(yīng)用程序，該應(yīng)用程序能夠?qū)崿F(xiàn) 給智能終端提供免費(fèi)的即時(shí)通訊。微信的使用需要消耗少量的流量，因此它支持網(wǎng)絡(luò)快速 發(fā)送消息，其中消息可以包括許多形式，有語音、文字、圖片、視頻等。微信同時(shí)還支持 跨操作系統(tǒng)平臺，也支持跨通信運(yùn)營商。而且隨著微信應(yīng)用程序的發(fā)展，像公眾平臺、朋 友圈、搖一搖等許多服務(wù)插件也隨之出現(xiàn)。通過查閱相關(guān)資料可以得知，自2012年3月29日，微信應(yīng)用程序的用戶耗時(shí)433天 突破了一億，而后又更迅速的發(fā)展，是國內(nèi)用戶數(shù)量最多的一個(gè)移動(dòng)社交產(chǎn)品，是過去20 年網(wǎng)絡(luò)通信和移動(dòng)通信的集大成者，

21、成為了人們的一種生活方式。2020年3月，據(jù)統(tǒng)計(jì)微 信及WeChat的合并月活躍賬戶的數(shù)目達(dá)到了 11.65億。微信的功能也越來越強(qiáng)大，第一，微信可以添加好友后和他人進(jìn)行即時(shí)的免費(fèi)通訊， 第二，微信用戶還可以通過語音聊天室和許多人進(jìn)行實(shí)時(shí)對講機(jī)功能，還有微信小程序的 出現(xiàn)使得微信更加豐富多彩。第三，微信在出行方面推出了 “高速e行”即通過綁定車和 微信賬戶的方式，開通免密，在下高速時(shí)進(jìn)行通過自動(dòng)地識別車牌號碼，就可以在微信賬 戶中自動(dòng)扣錢。第四，微信可以綁定銀行卡，在微信客戶端進(jìn)行安全高效的手機(jī)支付，還 有微信提現(xiàn)功能等等。微信的攔截系統(tǒng)也很強(qiáng)大，其攔截分為三大系統(tǒng)，有：技術(shù)攔截、 舉報(bào)人工處

22、理和辟謠工具。總而言之，微信產(chǎn)品的優(yōu)勢有許多，第一、省流量。大約1000條的文字消息，1000 秒的語音消息、1分鐘的視頻信息的發(fā)送僅僅需要1M流量，而且微信的后臺運(yùn)行僅僅需 要消耗大約2.4K每小時(shí)。第二，軟件免費(fèi)。微信應(yīng)用程序里不需要下載別的軟件就可以 使用QQ郵箱助手、通訊安全助手等。第三、多平臺。微信支持iPhone、Android、Windows phone、塞班平臺的手機(jī)之間進(jìn)行相互的接收和發(fā)送消息。第四、交友方式豐富。用戶可以 通過手機(jī)通訊錄、QQ、微信掃描二維碼、微信號查找等方式進(jìn)行好友的添加。微信小程序的簡介微信小程序，英文名是WeChat Mini Program，是連接普

23、通用戶和服務(wù)的一種全新的方 式，是一種新的開放能力。于2017年1月9日正式上線，小程序可以在微信應(yīng)用程序內(nèi) 被很方便地獲取、使用和傳播，而且具有十分出色的用戶使用體驗(yàn)。據(jù)了解，微信小程序 并不是一個(gè)憑空產(chǎn)生的新概念，當(dāng)微信中的WebView漸漸地發(fā)展成為移動(dòng)Web的一個(gè)非 常重要的入口的時(shí)候，微信從此便擁有了相關(guān)的JS API 了。微信小程序提供給用戶更多的產(chǎn)品功能設(shè)計(jì)層面上的控制力。小程序的設(shè)置頁中給用 戶提供了一種數(shù)據(jù)權(quán)限開關(guān)，用戶在使用小程序時(shí)需要開啟開關(guān)，當(dāng)用戶授權(quán)后關(guān)閉了該權(quán)限，小程序再次獲取用戶信息的時(shí)候就需要用戶再次重新進(jìn)行授權(quán)。騰訊公司提倡著的 隱私保護(hù)理念是“科技向善，數(shù)據(jù)

24、有度”。微信小程序的基本功能介紹第一、精美的微信小程序頁面。一個(gè)小程序即使它的功能再齊全，使用到的技術(shù)再強(qiáng)大，但是它的頁面不美觀或者過 于花哨都會(huì)給用戶帶來不好的用戶體驗(yàn)，不僅不會(huì)吸引用戶前來使用，可能會(huì)導(dǎo)致用戶的 第一印象太差，從而使得小程序逐漸被遺忘，甚至最終被淘汰。因此，擁有一個(gè)美觀的小 程序頁面，是設(shè)計(jì)者設(shè)計(jì)小程序需要注意的事項(xiàng)之一。第二、準(zhǔn)確的導(dǎo)航欄。對于一個(gè)功能比較多的小程序而言，擁有準(zhǔn)確的導(dǎo)航欄是尤為重要的。就像食品購小 程序的底部導(dǎo)航欄，分別是首頁、分類、購物車、我的這四個(gè)導(dǎo)航，明確地為用戶顯示了 該小程序是主要頁面。還有其分類頁面中的左側(cè)有不同的分類，每個(gè)分類都可以展示相對

25、應(yīng)的不同商品，從而明確地告訴用戶各種商品的信息。第三、商品收藏功能。對于購物的小程序而言，商品收藏的功能類似于一個(gè)非常方便的容器，如果用戶不需 要購買該商品，但是又不想錯(cuò)過，此時(shí)就可以選擇該商品添加進(jìn)收藏功能里面。第四、商品搜索功能。用戶通過在搜索框中輸入自己想要購買的商品名稱，就可以準(zhǔn)確地找到商品，從而節(jié) 省了時(shí)間，避免了瀏覽到其他自己不需要的商品。微信小程序開發(fā)技術(shù)的介紹微信小程序的開發(fā)使用的是微信開發(fā)者工具，開發(fā)者通過使用小程序進(jìn)行調(diào)試，可以 完成API和頁面的開發(fā)調(diào)試，而且使用開發(fā)者工具可以進(jìn)行代碼的查看和編輯以及小程序 的預(yù)覽等功能。開發(fā)者在微信開發(fā)者工具的登錄頁，能夠通過使用微信應(yīng)

26、用程序掃描二維 碼的方式進(jìn)行登錄，開發(fā)者工具可以獲取到該開發(fā)者的微信賬戶信息，從而進(jìn)行開發(fā)和測 試小程序，新建項(xiàng)目時(shí)需要申請小程序的AppID。微信小程序整體的包的大小有限制，基本都要在4M之內(nèi)，所以如果小程序里邊需要 實(shí)現(xiàn)展示大量圖片的話，圖片需要存放在服務(wù)器上。在微信小程序中有個(gè)配置文件project.config.json，開發(fā)者通過該文件可以在不同的設(shè) 備中進(jìn)行開發(fā)。目前開發(fā)者工具提供了五種文件的編輯，分別是：wxml、wxss、js、json、 wxs。每個(gè)頁面都有wxml、wxss、js、json，但是不是必須具有的。小程序與網(wǎng)頁的相類似， 網(wǎng)頁可以用html，css和js來完成，

27、而小程序則用wxml、wxss、js來實(shí)現(xiàn)。wxml文件是用于描述和構(gòu)建頁面結(jié)構(gòu)的，在wxml中可以進(jìn)行動(dòng)態(tài)數(shù)據(jù)的綁定。小程 序提供的插值語法，即使用Mustache語法，雙大括號的形式。通過wx:for進(jìn)行列表的渲 染。wxss文件用來描述頁面的各個(gè)樣式，有尺寸單位和樣式導(dǎo)入的特性，其中在iPhone6 中，固定屏幕寬度為750rpx,有1rpx=0.5px的換算關(guān)系。js文件是用來添加邏輯信息的， 定義app用于調(diào)用getApp()，頁面的初始數(shù)據(jù)在data里進(jìn)行設(shè)置，關(guān)于生命周期函數(shù)的監(jiān) 聽頁面，其加載在onLoad中設(shè)置、初次渲染完成使用onReady，頁面上拉觸底的事件處理 函數(shù)用o

28、nReachBottom。在 json文件中使用usingComponents: 可以進(jìn)行其他組件的使用。 app.json配置文件是用于對小程序進(jìn)行全局配置的，頁面之間的跳轉(zhuǎn)的URL中的地址必須 先在app.json中聲明，其決定著頁面設(shè)置的文件路徑、窗口表現(xiàn)、可以設(shè)置網(wǎng)絡(luò)超時(shí)時(shí)間 的信息、可以設(shè)置多個(gè)tabBar等。配置小程序以及其頁面是否允許被微信索引的時(shí)候，需要配置好其sitemap.json，這樣 在控制臺上就可以顯示其索引的調(diào)試信息。sitemap.json默認(rèn)的情況下是所有的頁面都會(huì)被 索引。其配置可以如下所示：rules: action: allow, page: *使用開發(fā)者

29、工具開發(fā)小程序最主要的開發(fā)語言便是JavaScript，是ECMAScript的一種 實(shí)現(xiàn)，開發(fā)者通過使用JavaScript來進(jìn)行業(yè)務(wù)邏輯的開發(fā)以及調(diào)用API來實(shí)現(xiàn)業(yè)務(wù)的需求。 3.4微信小程序頁面效果圖展示基于微信小程序的食品購系統(tǒng)的小程序端是提供頁面給用戶使用的，大體分為四個(gè)主 頁面，它們分別是：首頁、分類、購物車、我的。用戶通過微信小程序后可以瀏覽商品， 查看不同種類的商品，查看各個(gè)商品的詳細(xì)信息，用戶登錄后可以完善自己的信息，還可 以選擇心儀的商品添加進(jìn)收藏，或者添加到購物車?yán)锩?。首頁中有搜索框、輪播圖、和部分展示的商品。頁面最上面的搜索框用來搜索商品名 稱的，首頁中的搜索框需要設(shè)置

30、bindtap和bindinput節(jié)流，bindtap綁定點(diǎn)擊事件，該小 程序中設(shè)置了 bindtap=mysearch，通過使用wx.navigateTo方法跳轉(zhuǎn)到指定的商品詳情的 頁面，這種方法僅僅是非tabBar頁面，在tabBar頁面中跳轉(zhuǎn)頁面則需要使用的方法是： wx.switchTab方法。Bindinput監(jiān)聽input輸入框的輸入和節(jié)流，本小程序通過在wxml中設(shè) 置了 bindinput=spinput，在js文件中實(shí)現(xiàn)監(jiān)聽輸入框的關(guān)鍵詞放入到data中。輪播圖通 過swiper和swiper-item實(shí)現(xiàn)，通過block中的wx:for= 遍歷js中的圖片。下面的展 示商品

31、是使用的scroll-view可滾動(dòng)視圖區(qū)域。其首頁的效果圖如圖3-1所示：LlfeChaTFT6:2Si 燈 一，拿第*謂軸A商品名稱感恩生活- sJ+Rri- XL AC I I b- IILM4 ini 4ft圖3-1基于微信小程序的食品購系統(tǒng)的小程序端首頁分類頁面設(shè)置了幾種不同種類的商品，分別展示了熱門推薦、水果、零食、牛奶、蛋 糕、巧克力、餅干等許多種類的食品。用戶在點(diǎn)擊每個(gè)不同的分類時(shí)，分別有對應(yīng)種類的 商品在右側(cè)展示，用戶也可以進(jìn)一步點(diǎn)擊商品，查看商品的詳情頁面。在分類頁面中用到了 wx：for循環(huán)數(shù)組和wx:for-item給列表賦別名，是用來定義在循環(huán) 中的每一個(gè)元素的變量。

32、對于展示商品的模塊中，用到了三元運(yùn)算符，其語法為“條件表 達(dá)式?表達(dá)式1:表達(dá)式2，即當(dāng)條件表達(dá)式的值為true時(shí)調(diào)用表達(dá)式1,否則調(diào)用表達(dá)式2。 其分類頁面效果圖如圖3-2所示，商品詳情頁面的效果圖如圖3-3所示。請他人商品名秣 on120rr巧克 力肝1G： 25蘋果.年再圖3-2 基于微信小程序的食品購系統(tǒng)的小程序端分類頁面分類頁面中數(shù)組綁定事件的部分js代碼如下：tapfl:fUnction(e)var that = this;var index = e.currentTarget.dataset.index;for (var i = 0; i that.data.fllist.len

33、gth; i+) that.data.fllistiflactive = 1; that.data.fllistindexflactive = 2;that.setData(fllist: that.data.fllist,gtype:that.data.fllistindex.id)setTimeout(function() that.loadInitData();,300)5:3G1M W蘋果2玩的斤三具.含有較寢的狎，能可人體過剩的油鹽燃合，使 N1E出體外，當(dāng)人體爆入鈉鹽過多囿，Qfe些革果， 有利于平面體內(nèi)由解質(zhì).聿吳中含芍的噴和錢等元 變.易闔筋壁明收，臺補(bǔ)葩養(yǎng)血、寧沖安目酢冏;L

34、*J 收藏圖3-3 基于微信小程序的食品購系統(tǒng)的小程序端商品詳情頁面當(dāng)用戶登錄成功后，可以對商品進(jìn)行添加進(jìn)購物車，可以實(shí)現(xiàn)購買，或者加入收藏。 在購物車頁面低端，對刪除和立即購買設(shè)置其綁定事件。對于刪除事件的進(jìn)行判斷語句如 下所示：if(wx.getStorageSync(uid)for (var i = 0; i that.data.list.length; i+) if (that.data.listi.checked = checked) ids += that.data.listi.id + ,;購物車頁面如圖3-4所示。1卸上WHh圖3-4 基于微信小程序的食品購系統(tǒng)的小程序端購物車

35、頁面在我的頁面，用戶可以編輯自己的個(gè)人資料信息，包括真實(shí)姓名、聯(lián)系電話、省市地 區(qū)以及用戶的詳細(xì)地址。用戶可以在我的頁面查看自己的訂單和收藏的商品。我的頁面中的登錄按鈕需要使用button的open-type=getUserInfo來引導(dǎo)用戶主動(dòng)進(jìn) 行權(quán)限的授予。在js中對頁面數(shù)據(jù)初始化時(shí)設(shè)置buttonshow: 1,當(dāng)用戶填寫個(gè)人資料，查 看我的訂單時(shí)都需要判斷用戶是否已經(jīng)是登錄狀態(tài)，只有登錄的前提下，才能通過設(shè)置 wx.navigateTo跳轉(zhuǎn)到相應(yīng)的模塊。在個(gè)人信息中，使用了 picker組件，是一個(gè)從底部彈起 的滾動(dòng)選擇器，選擇器的類型通過mode屬性來設(shè)置，設(shè)置省市區(qū)的時(shí)候可用re

36、gion，設(shè) 置其bindchange觸發(fā)事件。bindGetUserInfo: function (e) var that = this;if (e.detail.userInfo) ,因?yàn)樾〕绦驁?zhí)行更新操作時(shí)，不能直接獲取用戶的信息，所以在寫其登錄按鈕的時(shí)候， 要設(shè)置button觸發(fā)bindgetuserinfo事件如下：button open-type=getUserInfo bindgetuserinfo=bindGetUserInfo登錄/button我的頁面如圖3-5所示。 06:3個(gè)人費(fèi)科我的訂單aonLdJ圖3-5 基于微信小程序的食品購系統(tǒng)的小程序端我的頁面MySQLMySQ

37、L數(shù)據(jù)庫的介紹MySQL是一種關(guān)系型的數(shù)據(jù)庫管理系統(tǒng)，是開放源代碼的，即任何人在許可下可以 進(jìn)行下載和修改個(gè)性化需要，因此廣受人們的使用。MySQL通常使用結(jié)構(gòu)化查詢語言SQL 對數(shù)據(jù)庫進(jìn)行管理，使得數(shù)據(jù)庫的存儲(chǔ)和更新操作變得更好實(shí)現(xiàn)。MySQL具有速度快、 可靠性好、適應(yīng)性強(qiáng)的特點(diǎn)，可以在不需要事務(wù)化處理的前提下使用。關(guān)系數(shù)據(jù)庫的特點(diǎn)就是把數(shù)據(jù)保存在不同的表里面，然后再把這些表保存在不同的數(shù) 據(jù)庫里面，這種分開存放的設(shè)計(jì)提高了 MySQL的讀取速度，具有很強(qiáng)的靈活性和可管理 性。MySQL數(shù)據(jù)庫技術(shù)介紹JPA是一個(gè)標(biāo)準(zhǔn)接口，是Sping Boot訪問關(guān)系型數(shù)據(jù)庫的，全稱是Java Persi

38、stence API， 如果想要在JPA中使用MySQL數(shù)據(jù)庫，只需要對其進(jìn)行建模，在java的實(shí)體類中定義好 屬性，成功編譯后，就可以在圖形化界面Navicat Premium中看到自動(dòng)生成的表。在Spring Boot的配置文件中，如果spring使用了 JPA這個(gè)標(biāo)準(zhǔn)接口，并且類型定義為 LocalContainerEntityManagerFactoryBean 的話，那么組件注冊在該配置文件中出現(xiàn)即可， 其他的配置文件可以忽略掉。用注解的方式自動(dòng)注冊bean。還需要定義實(shí)體管理器工廠， 指定JPA持久化，hibernate.hbm2ddl.auto設(shè)置為update，可以實(shí)現(xiàn)表結(jié)構(gòu)的

39、即時(shí)更新功能。 而且在 java 文件中需要對數(shù)據(jù)庫進(jìn)行增加、修改、查詢、刪除的操作時(shí)需要導(dǎo)入 org.springframework.data.jpa.repository.JpaRepository 和 Query 兩個(gè)包。MySQL數(shù)據(jù)庫的表的實(shí)體對象在設(shè)計(jì)之前和設(shè)計(jì)的過程中，通過多次修改，最終確定了本系統(tǒng)的數(shù)據(jù)庫表結(jié)構(gòu)。有 用戶表、商品表、商品類別表、輪播圖表、訂單表、購物車表、收藏表，一共七個(gè)表。其 系統(tǒng)的實(shí)體對象的各個(gè)屬性如圖4-1至圖4-7所示。usernameswordlogintimecountryhead inn gctimenickname)real nameadmin

40、但戶圖4-1用戶實(shí)體屬性圖在用戶這個(gè)實(shí)體中，有兩種角色，第一種是在小程序端購物的用戶，第二種是在java 端管理平臺的web前端的管理員。其中屬于管理員的屬性有：用戶id、用戶名、密碼、注 冊時(shí)間和登錄時(shí)間。購物的用戶屬性有：id、真實(shí)姓名、昵稱、密碼、頭像、電話、注冊 時(shí)間、登陸時(shí)間、省、市、區(qū)、具體地址。ctimeremark圖4-2商品實(shí)體屬性圖good向品)圖4-3商品類別實(shí)體屬性圖在商品這個(gè)實(shí)體中，給它設(shè)置了七個(gè)屬性，有商品id、商品名稱、商品價(jià)格、商品的 所屬類型、商品的上架時(shí)間、圖片和商品本身具體的內(nèi)容。在商品類別的實(shí)體中，定義了 id、種類名稱和序列位置三個(gè)屬性。圖4-4輪播圖

41、實(shí)體屬性圖圖4-5用戶訂單實(shí)體屬性圖在輪播圖實(shí)體中，設(shè)置了其id和圖片地址兩個(gè)屬性。對于訂單實(shí)體，設(shè)置了六個(gè)屬性， 分別是訂單編號、用戶id、用戶的下單時(shí)間、訂單的狀態(tài)、訂單數(shù)據(jù)和總額信息。圖4-7用戶收藏實(shí)體屬性圖對于購物車實(shí)體而言，有id、商品編號、用戶id和數(shù)量四個(gè)屬性。在收藏實(shí)體中，有 id、用戶id和商品編號三個(gè)屬性。Java后臺管理系統(tǒng)后臺管理系統(tǒng)各模塊頁面效果圖后臺管理的角色是管理員，通過注冊登錄進(jìn)入食品購管理平臺，其管理操作有用戶管 理、商品管理、類別管理、訂單管理、輪播管理，頁面左側(cè)為各個(gè)導(dǎo)航。如下圖5-1至圖 5-5所示。圖5-1食品購管理平臺的用戶管理jfttbiftna

42、w撮作里用 tTSR*禽國FK七*ran丁制e*tETnay*3占好；兩砧麗=w哥m間二密如間.*ms-事新卷的H三軍加，扯睢白際網(wǎng)si*里wafliiB城:礎(chǔ)呵IlSKJSBth期咽處年ffV水is劉砂胡鵬M郎如*餐式禮忸S騫曹493Mo:刀 彩川泗4 怔曰將用的$I? IfrJI5限前a刪K552O3S43.23 SftiftHd安黑翠更例H加厘他1出破似Y7片航tBtT劉四回耳口可叮4 * 方亞史明干252ft2fl43ZJ2ft3fli：SQ聶即陰理的的和恥眸舞ITMO圖5-2食品購管理平臺的商品管理圖5-3食品購管理平臺的類別管理圖5-4食品購管理平臺的訂單管理圖5-5食品購管理平臺

43、的輪播管理5.2后臺管理系統(tǒng)的前端技術(shù)介紹EasyUI框架：在java后臺管理的web端的頁面展示中，用到了 EasyUI框架，EasyUI 是一種用戶界面插件集合，給Web的技術(shù)開發(fā)人員提供了非常簡單并且易使用的組件，能 夠快速地在jQuery和html5之上輕松地創(chuàng)建web頁面，使用EasyUI不需要寫太多的代碼， 僅僅只是需要編寫一些HTML簡單的標(biāo)記便可以成功地定義用戶的界面。通過查閱資料得 知，其中聲明UI組件的辦法有兩種，第一種在html或者jsp中聲明組件的形式是在標(biāo)簽 的class里設(shè)置為：class=easyui-dialog”。為網(wǎng)頁創(chuàng)建邊框布局的時(shí)候可以設(shè)置 calss=

44、easyui-layout，確定好布局容器，定義好區(qū)域。本系統(tǒng)使用的是jquery-easyui-1.7.0 的版本，使用easyUI的優(yōu)點(diǎn)有很多，不僅操作簡潔，而且可以節(jié)省開發(fā)網(wǎng)頁的時(shí)間。EL表達(dá)式使用起來可以讓jsp書寫起來簡單，得到更加簡潔的代碼。通常情況下，在 jsp頁面中，訪問對象就是通過使用EL表達(dá)式來進(jìn)行表達(dá)的，其格式是用$符加一對大括 號來表示的，如果EL表達(dá)式中的變量沒有設(shè)定好范圍的話，就默認(rèn)在page內(nèi)進(jìn)行查找， 然后再依照次序在request、session和application的范圍內(nèi)查找。JavaScript是一種web的編程語言，是用來進(jìn)行編輯網(wǎng)頁行為的，對于設(shè)計(jì)

45、方面和概 念方面來說與java是一種完全不相同的語言。在使用時(shí)JS代碼必須在 標(biāo)簽之間存放。AJAX不是編程語言，但是使用AJAX，在不刷新頁面的情況下就可以使 得頁面得到更新，當(dāng)頁面加載后，會(huì)從服務(wù)器請求和接收數(shù)據(jù)，允許通過與web服務(wù)器通 過交換數(shù)據(jù)來進(jìn)行異步更新網(wǎng)頁，因此，不需要再次加載整個(gè)頁面，就可以實(shí)現(xiàn)更新網(wǎng)頁 的需求。JSON是通過JS對象標(biāo)記法來書寫文本的。jQuery屬于一個(gè)JavaScript的類，簡 化了 JavaScript的編程。在商品管理頁面中使用AJAX進(jìn)行更新的部分代碼如下：$.ajax(url：ctx + /goodsController/gtypeList,t

46、ype：post, data:,dataType:json, success:function(res) $(#type).empty(); $(#type).append( 全部 ); for(var i=0;i++) ！ )5.3后臺管理系統(tǒng)的后臺技術(shù)介紹Springboot,是繼承了 spring框架原來特有的性質(zhì)的全新的一種開源框架，它致力于快 速開發(fā)，通過集成大量的框架解決了依賴包的版本沖突問題和引用不穩(wěn)定問題，是用來對 新spring的初始搭建和開發(fā)過程進(jìn)行簡化的，在使用時(shí)需要對web.xml進(jìn)行配置，配置 spring事務(wù)，添加注解，配置日志文件等?？?/p>

47、而言之，springboot的使用給項(xiàng)目節(jié)省了搭建 的時(shí)間，而且不需要關(guān)注各個(gè)不同框架是否兼容是否相適應(yīng)的問題。MyBatis，是一種持久層框架，支持定制化的SQL，存儲(chǔ)過程和高級映射，避免了 JDBC 代碼，自行設(shè)置參數(shù)和獲取結(jié)果集，可以通過配置和原生map來使用注解或者是XML。 MyBatis有三層功能架構(gòu)：API接口層、基礎(chǔ)支撐層以及數(shù)據(jù)處理層。其教程簡單易學(xué)， 不依賴第三方，而且不會(huì)對相應(yīng)的程序或者數(shù)據(jù)庫的設(shè)計(jì)強(qiáng)加影響。6食品購系統(tǒng)功能模塊6.1食品購系統(tǒng)的功能需求基于微信小程序的食品購系統(tǒng)主要分為兩個(gè)部分，第一個(gè)部分是面向用戶的小程序端 頁面，第二個(gè)部分是面向管理員的web端頁面，

48、其功能塊劃分如下圖6-1所示：圖6-1基于微信小程序的食品購系統(tǒng)功能塊劃分效果圖ER 圖是描述用于實(shí)體、屬性以及聯(lián)系的關(guān)系的數(shù)據(jù)模型，這種實(shí)體聯(lián)系模型提供了 描述實(shí)體聯(lián)系的圖形符號，可以作為用戶和系統(tǒng)分析員之間進(jìn)行交流溝通的有效工具，化 抽象為形象，接近于人的思維習(xí)慣。矩形框代表實(shí)體，橢圓形代表實(shí)體的各個(gè)屬性，菱形 框表示實(shí)體之間的某種關(guān)系。ER圖的聯(lián)系有三種類型，分別是一對一聯(lián)系、一對多聯(lián)系 和多對多聯(lián)系。本小程序使用的數(shù)據(jù)庫實(shí)體大致分為七種，具體細(xì)分的話可以按角色的不 同分為用戶和管理員。該數(shù)據(jù)庫對應(yīng)的ER圖如6-2所示：注將時(shí)”豆江H 收下史：M圖6-2基于微信小程序的食品購系統(tǒng)的ER圖

49、6.2食品購系統(tǒng)的功能描述6.2.1面向用戶的功能流程圖6.2.2面向管理員的功能流程圖健改商品百面用戶信總Hd鄴I* I*訂單管理的除商品I輪幽容理的隨笆播典湖:用理7系統(tǒng)的測試與運(yùn)行7.1系統(tǒng)測試的意義系統(tǒng)測試對于設(shè)計(jì)者本身而言就有很大的意義，這不僅僅是在檢測系統(tǒng)的安全性，也 是對系統(tǒng)的可靠性進(jìn)行檢測，這兩個(gè)特性對一個(gè)系統(tǒng)是非常重要的。系統(tǒng)檢測還有利于查看設(shè)計(jì)的功能是否能夠順利的運(yùn)行，是否真的有良好的用戶體驗(yàn)。7.2系統(tǒng)測試的結(jié)論基于微信小程序的食品購系統(tǒng)在進(jìn)行系統(tǒng)測試的時(shí)候，無論是在java端還是小程序端 都可以順利運(yùn)行，兩種角色的用戶也可以實(shí)現(xiàn)其中的功能。只是系統(tǒng)還不夠完善，例如： 小

50、程序在運(yùn)行時(shí)頁面刷新的速度較慢，用戶關(guān)于購買的功能不是很齊全等問題。8結(jié)論微信小程序是用來連接用戶和服務(wù)的前所未有的一種全新的方式，小程序提供了非常 簡單的開發(fā)框架，并且還有很高效的組件和API,用戶可以直接在微信應(yīng)用程序中非常便 捷地被獲取和傳播，有利于用戶有很好的使用體驗(yàn)?；谛〕绦騺碓O(shè)計(jì)系統(tǒng)具有很多優(yōu)點(diǎn)， 其設(shè)計(jì)指南以尊重用戶知情權(quán)和操作權(quán)為基礎(chǔ)，做到建立友好高效的用戶體驗(yàn)。小程序所必須的頁面組成有具有頁面邏輯作用的js文件和具有頁面結(jié)構(gòu)作用的wxml 文件，前者在邏輯層工作，后者在渲染層工作?；谖⑿判〕绦虻氖称焚徬到y(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)的過程中，加深了我對于開發(fā)完整的系統(tǒng) 的整體認(rèn)識，使得自

51、己對java方面的知識有了更深的理解，同時(shí)也學(xué)習(xí)了微信小程序通過 開發(fā)者工具的使用和編譯。本系統(tǒng)中采用了 easyUI、springboot、springjpa等技術(shù)來進(jìn)行開 發(fā)設(shè)計(jì)?；谖⑿判〕绦虻氖称焚徬到y(tǒng)致力于給用戶提供簡潔美觀的商品展示頁面，該系 統(tǒng)是的主要功能包括用戶通過微信進(jìn)入小程序，瀏覽商品，通過登錄完善信息來進(jìn)行購買 自己喜歡的食品，以及java后臺管理功能，包括對用戶、商品、分類，輪播圖等的增刪改 查等管理操作。在設(shè)計(jì)的過程中也遇到了許多問題，比如說，由于類的屬性設(shè)置不合理， 導(dǎo)致多次重新設(shè)計(jì)數(shù)據(jù)庫的表，在多表查詢的過程中也遇到了一些問題，還有注解的使用， 腳本語言的使用方法等都需要通過百度等途徑進(jìn)一步學(xué)習(xí)。通過實(shí)現(xiàn)該系統(tǒng)，使得我對多個(gè)功能模塊的融合有了新的感受，這不僅僅是需要實(shí)現(xiàn) 每個(gè)功能，還需要有一定的邏輯思維，讓各個(gè)模塊有順序的相結(jié)合。參考文獻(xiàn)Suher J , Szu、hi Huang, Lee L . Planning for Multiple Shopping Goals in the MarketplaceJ. Journal of Consumer Psychology, 2019, 29(4).Yao C , Lee Y C . An Empiri