Qt-5開發(fā)及實例-第17章--【綜合實例】電子商城系統(tǒng)課件

1、第17章 【綜合實例】電子商城系統(tǒng)商品管理系統(tǒng)功能需求電子商城商品管理系統(tǒng)的主要功能如下：（1）管理員口令登錄，密碼采用MD5加密算法封裝驗證。（2）瀏覽庫存商品信息，采用Qt數(shù)據網格控件實現(xiàn)。（3）商品入庫和清倉，用表單錄入商品信息（可指定商品類別、進價、售價、入庫數(shù)量等，還可上傳商品樣照）。（4）預售訂單功能。選擇指定數(shù)量的庫存商品出售，系統(tǒng)自動計算出應付款總金額并顯示銷售清單，用戶一次可預售多種商品，然后統(tǒng)一下訂單。商品管理系統(tǒng)功能需求01登 錄 功 能登 錄 功 能初始啟動程序，顯示登錄界面（如圖17.1所示）。輸入管理員賬號及口令，單擊“登錄”按鈕執(zhí)行驗證，口令用Qt內置的MD5算法

2、做加密處理后先存于MySQL數(shù)據庫中，若驗證不通過則彈出警告提示框。02新品入庫功能新品入庫功能在“新品入庫”頁上可看到全部庫存的商品信息（商品名稱、進價、售價和庫存量），用戶可輸入（或選擇）新品信息，將其錄入系統(tǒng)中；也可選擇庫中已有的商品執(zhí)行清倉操作，如圖17.2所示。03預售訂單功能預售訂單功能在“預售訂單”頁上，用戶從左邊表單下拉列表中選擇要預售的商品類別和名稱，表單會自動聯(lián)動顯示出該商品的單價、庫存、照片，并根據用戶所指定的售出數(shù)量算出總價，如圖17.3所示。第17章 【綜合實例】電子商城系統(tǒng)項目開發(fā)準備01項 目 配 置項目配置（1）創(chuàng)建Qt桌面應用程序項目，項目名稱為“eMarke

3、t”。創(chuàng)建完成在Qt Creator開發(fā)環(huán)境中單擊左側欄的 按鈕切換至項目配置模式，如圖17.4所示。（2）修改項目的.pro配置文件，在其中添加配置項。配置文件eM內容如下（加黑處為需要修改添加的地方）。02數(shù)據庫準備1創(chuàng)建數(shù)據庫2設計表3創(chuàng)建視圖數(shù)據庫準備1創(chuàng)建數(shù)據庫在MySQL中創(chuàng)建數(shù)據庫，名稱為emarket，其中建立5個表，分別為category表（商品類別表）、commodity表（商品表）、member表（會員表）、orders表（訂單表）和orderitems表（訂單項表）。2設計表（1）表結構設計對以上建好的各表設計其表結構字段屬性如下。category表設計見表17.1。列

4、 名類 型長 度允 許 空 值說 明CategoryIDint6否商品類別編號，主鍵，自動遞增Namechar16否商品類別名稱數(shù)據庫準備commodity表設計見表17.2。列 名類 型長 度允 許 空 值說 明CommodityIDint6否商品編號，主鍵，自動遞增CategoryIDint6否商品類別編號Namechar32否商品名稱Pictureblob默認是商品圖片InputPricefloat6，2位小數(shù)否商品購入價格（進價）OutputPricefloat6，2位小數(shù)否商品售出價格（單價）Amountint6否商品庫存量數(shù)據庫準備member表設計見表17.3。列 名類 型長 度

5、允 許 空 值說 明MemberIDchar16否會員賬號，主鍵PassWordchar50否登錄口令（以MD5加密存儲）Namevarchar32否會員名Sexbit1否性別：1表示男，0表示女，默認1Emailvarchar32是電子郵箱Addressvarchar128是聯(lián)系地址Phonechar16是聯(lián)系電話RegisterDatedate默認否注冊日期數(shù)據庫準備orders表設計見表17.4。列 名類 型長 度允 許 空 值說 明OrderIDint6否訂單編號，主鍵，自動遞增MemberIDchar16否會員賬號PaySumfloat6，2位小數(shù)是付款總金額PayWayvarcha

6、r32是付款方式OTimedatetime默認是下單日期時間orderitems表設計見表17.5。列 名類 型長 度允 許 空 值說 明OrderIDint6否訂單編號，主鍵CommodityIDint6否商品編號，主鍵Countint11否數(shù)量Affirmbit1否是否確認：0沒有確認，1確認，默認0SendGoodsbit1否是否發(fā)貨：0沒有發(fā)貨，1發(fā)貨，默認0數(shù)據庫準備（2）外鍵關聯(lián)設計好表結構之后，為表之間建立外鍵關聯(lián)。本例要在commodity、orders和orderitems表上建立4個外鍵關聯(lián)。 commodity表外鍵CategoryID引用category表主鍵，在Nav

7、icat for MySQL數(shù)據庫可視化工具的commodity表設計窗口中選擇“外鍵”選項卡，如圖17.5所示設置即可。數(shù)據庫準備 orders表外鍵MemberID引用member表主鍵，在orders表設計窗口中選擇“外鍵”選項卡，按如圖17.6所示進行設置即可。數(shù)據庫準備 orderitems表在該表上要設置兩個外鍵：OrderID引用orders表的主鍵OrderID，CommodityID引用commodity表的主鍵CommodityID。在orderitems表設計窗口中選擇“外鍵”選項卡，按如圖17.7所示進行設置即可。數(shù)據庫準備（3）數(shù)據錄入設計好表及其關聯(lián)之后，往各表中預

8、先錄入一些數(shù)據記錄以供后面測試運行程序之用，如圖17.8圖17.10所示。數(shù)據庫準備圖17.10 member表數(shù)據為體現(xiàn)實際應用，本章實例所用的商品信息皆是從真實的電商網站選取，各商品的樣品圖片由本書隨源代碼提供，讀者可預先編寫以下代碼將其錄入數(shù)據庫commodity表的Picture字段。數(shù)據庫準備3創(chuàng)建視圖根據應用需要，本例要創(chuàng)建一個視圖commodity_inf，用于顯示商品的基本信息（商品名稱、進價、售價和庫存），創(chuàng)建視圖的操作如下。展開數(shù)據庫節(jié)點，右擊“視圖”“新建視圖”，打開MySQL的視圖創(chuàng)建工具，如圖17.11所示。第17章 【綜合實例】電子商城系統(tǒng)商品管理系統(tǒng)界面設計01總

9、 體 設 計總體設計在開發(fā)環(huán)境項目目錄樹狀視圖中，雙擊mainwindow.ui切換至可視化界面設計模式，如圖17.12所示，在其上拖曳設計出商品管理系統(tǒng)的整個圖形界面。02“新品入庫”頁“新品入庫”頁“新品入庫”頁界面設計效果如圖17.13所示?！靶缕啡霂臁表摻缑嫔细骺丶膶傩栽O置見表17.6?！靶缕啡霂臁表摫?7.6 “新品入庫”頁界面上各控件的屬性設置序 號名 稱類 型屬 性 設 置newCategoryComboBoxQComboBoxnewNameLineEditQLineEditnewInputPriceLineEditQLineEditnewOutputPriceLineEdit

10、QLineEditnewCountSpinBoxQSpinBoxalignment:水平的,AlignHCenter;value:1newUploadPushButtonQPushButtontext: 上 傳.newPictureLabelQLabelgeometry: 寬度151,高度151;frameShape: Box;frameShadow: Sunken;text:空;scaledContents: 勾選newPutinStorePushButtonQPushButtontext: 入 庫newClearancePushButtonQPushButtontext: 清 倉commo

11、dityTableViewQTableViewhorizontalHeaderVisible: 勾選;horizontalHeaderDefaultSectionSize: 120;horizontalHeaderMinimumSectionSize: 25;horizontalHeaderStretchLastSection: 勾選;verticalHeaderVisible: 取消勾選03“預售訂單”頁“預售訂單”頁“預售訂單”頁界面設計效果如圖17.14所示。“預售訂單”頁界面上各個控件的屬性設置見表17.7。“預售訂單”頁表17.7 “預售訂單”頁界面上各控件的屬性設置序 號名 稱類

12、型屬 性 設 置preCategoryComboBoxQComboBoxpreNameComboBoxQComboBoxpreOutputPriceLabelQLabelframeShape: Box;frameShadow: Sunken;text:空preAmountLabelQLabelframeShape: Box;frameShadow: Sunken;text: 空preCountSpinBoxQSpinBoxalignment: 水平的, AlignHCenter;value:1preTotalLabelQLabelframeShape: Box;frameShadow: Sun

13、ken;text: 空prePictureLabelQLabelgeometry: 寬度151,高度151;frameShape: Box;frameShadow: Sunken;text:空;scaledContents: 勾選preSellPushButtonQPushButtontext: 出 售prePlaceOrderPushButtonQPushButtonenabled: 取消勾選;text: 下 單sellListWidgetQListWidgetgeometry: 寬度441,高度31104登 錄 窗 口1創(chuàng)建步驟2窗口設計1創(chuàng)建步驟（1）右擊項目名，選擇“添加新文件”菜單項

14、，彈出“新建文件”對話框，如圖17.15所示，選擇模板“Qt”“Qt設計師界面類”，單擊“Choose.”按鈕。1創(chuàng)建步驟（2）在“Qt設計器界面類”對話框中，選擇界面模板為“Dialog without Buttons”，如圖17.16所示，單擊“下一步”按鈕。1創(chuàng)建步驟（3）在導航頁上，將登錄窗口所對應的類名命名為“LoginDialog”，如圖17.17所示，單擊“下一步”按鈕。1創(chuàng)建步驟（4）在“項目管理”頁可看到即將添加到項目中的源文件名，確認無誤后，單擊“完成”按鈕，如圖17.18所示。2窗口設計新添加的登錄窗口可以像程序主窗體一樣在可視化設計器中進行設計，我們向其中拖入若干控件，

15、最終效果如圖17.19所示，為便于指示，我們對這些控件也加了、，數(shù)字標注。2窗口設計登錄窗口界面上各控件的屬性設置見表17.8。序 號名 稱類 型屬 性 設 置label_3QLabeltext: 歡 迎 進 入 電 子 商 城;font: 微軟雅黑,16;alignment: 水平的,AlignHCenterlabelQLabeltext: 管 理 員：;font: 微軟雅黑,12adminLineEditQLineEditfont: 微軟雅黑,14;text: b02020622label_2QLabeltext: 口 令：;font: 微軟雅黑,12pwdLineEditQLineEdi

16、tfont: 微軟雅黑,14;text: 空;echoMode: PasswordloginPushButtonQPushButtonfont: 微軟雅黑,12;text: 登 錄exitPushButtonQPushButtonfont: 微軟雅黑,12;text: 退 出第17章 【綜合實例】電子商城系統(tǒng)商品管理系統(tǒng)功能實現(xiàn)01登錄功能實現(xiàn)登錄功能實現(xiàn)登錄功能實現(xiàn)在logindialog.h頭文件和logindialog.cpp源文件中。首先，在logindialog.h頭文件中聲明變量和方法，完整代碼。然后，在logindialog.cpp源文件中實現(xiàn)登錄驗證功能，完整代碼。其中，(a)

17、 Qstring pwdMd5 = strToMd5(ui-pwdLineEdit-text();：由于從數(shù)據庫中查出的口令字符串是已經過MD5加密的，故這里需要先使用自定義的MD5轉換函數(shù)strToMd5()將用戶輸入的口令字符串轉為MD5加密串后再與從數(shù)據庫中查出的內容比較以驗證。(b) qba = QCryptographicHash:hash(str.toLatin1(), QCryptographicHash:Md5);：Qt 5提供了QCryptographicHash類，該類實現(xiàn)了生成密碼散列的方法，可用于生成二進制或文本數(shù)據的加密散列值。該類目前支持MD4、MD5、SHA-1、

18、SHA-224、SHA-256、SHA-384和SHA-512等多種加密算法。02主體程序框架主體程序框架（1）main.cpp它是整個系統(tǒng)的主啟動文件，代碼。其中，(a) if(!createMySqlConn()：createMySqlConn()是我們編寫的一個連接后臺數(shù)據庫的方法，它返回true表示連接成功，返回false表示失敗。程序在開始啟動時就通過執(zhí)行該方法來檢查數(shù)據庫連接是否就緒。若連接不成功，系統(tǒng)則通過啟動MySQL服務進程的方式再嘗試一次；若依舊連接不成功，則提示連接失敗，交由用戶檢查排除故障。(b) if (logindlg.exec() = QDialog:Accept

19、ed)：之前在登錄對話框的實現(xiàn)中，若用戶通過了口令驗證則執(zhí)行對話框類的“QDialog:accept();”方法，在這里判斷對話框類的返回結果，即“QDialog:Accepted”表示驗證通過。（2）mainwindow.h它是程序頭文件，包含程序中用到的各個全局變量的定義、方法聲明，完整的代碼。（3）mainwindow.cpp它是本程序的主體源文件，其中包含各方法功能的具體實現(xiàn)代碼，框架。03界面初始化功能實現(xiàn)界面初始化功能實現(xiàn)啟動程序時，首先需要對界面顯示的信息進行初始化，在窗體的構造方法MainWindow: MainWindow(QWidget *parent)中執(zhí)行我們定義的初始

20、化主窗體方法initMainWindow()，該方法的具體實現(xiàn)代碼。本系統(tǒng)默認顯示在前面的是“新品入庫”頁，但是對于“預售訂單”頁也同樣會初始化其內容。上段代碼中使用了loadPreCommodity()方法在預售訂單頁加載商品信息，該方法的實現(xiàn)代碼如下：void MainWindow:loadPreCommodity() QSqlQueryModel *commodityNameModel = new QSqlQueryModel(this);/商品名稱模型數(shù)據 commodityNameModel-setQuery(QString(select Name from commodity wh

21、ere CategoryID =(select CategoryID from category where Name=%1).arg(ui- preCategoryComboBox- currentText(); ui-preNameComboBox-setModel(commodityNameModel);/商品名稱列表加載（“預售訂單”頁） onPreNameComboBoxChange();界面初始化功能實現(xiàn)這個方法只是在“預售訂單”頁加載了商品名稱的列表，為了能對應顯示出當前選中商品的其他信息項，在最后又調用了onPreNameComboBoxChange()方法，其實現(xiàn)代碼如下：v

22、oid MainWindow:onPreNameComboBoxChange() QSqlQueryModel *preCommodityModel = new QSqlQueryModel(this);/商品表模型數(shù)據 QString name = ui-preNameComboBox-currentText();/當前選中的商品名 preCommodityModel-setQuery(select OutputPrice, Amount, Picture from commodity where Name= + name + );/從數(shù)據庫中查出單價、庫存、照片等信息 QModelInde

23、x index; index = preCommodityModel-index(0, 0); /單價 ui-preOutputPriceLabel-setText(preCommodityModel-data(index). toString(); index = preCommodityModel-index(0, 1); /庫存 ui-preAmountLabel-setText(preCommodityModel-data(index).toString(); ui-preCountSpinBox-setMaximum(ui-preAmountLabel-text().toInt();

24、 /下面開始獲取和展示照片 QPixmap photo; index = preCommodityModel-index(0, 2); photo.loadFromData(preCommodityModel-data(index).toByteArray(), JPG); ui-prePictureLabel-setPixmap(photo); /計算總價 ui-preTotalLabel-setText(QString:number(ui-preOutputPriceLabel- text().toFloat() * ui-preCountSpinBox-value();界面初始化功能實現(xiàn)

25、這樣做了之后，一開始啟動程序直接切換至“預售訂單”頁，就可以看到某個默認顯示的商品信息，如圖17.20所示。界面初始化功能實現(xiàn)在第一個“新品入庫”頁中，默認通過視圖commodity_inf加載了一個庫存所有商品信息的數(shù)據網格列表，該網格控件支持用戶選擇記錄并與左側的表單聯(lián)動，通過網格控件的單擊事件過程實現(xiàn)：void MainWindow:on_commodityTableView_clicked(const QModelIndex &index) onTableSelectChange(1);界面初始化功能實現(xiàn)該事件過程向onTableSelectChange()方法傳入一個參數(shù)（為當前選中

26、的記錄項的索引），再由該方法實際執(zhí)行表單信息的更新，onTableSelectChange()方法的代碼如下：void MainWindow:onTableSelectChange(int row) int r = 1;/默認索引為1 if(row != 0) r = ui-commodityTableView-currentIndex().row(); QModelIndex index; index = commodity_model-index(r, 0); /名稱 ui-newNameLineEdit-setText(commodity_model-data(index).toStri

27、ng(); index = commodity_model-index(r, 1); /進價 ui-newInputPriceLineEdit-setText(commodity_model-data(index). toString(); index = commodity_model-index(r, 2); /售價 ui-newOutputPriceLineEdit-setText(commodity_model-data(index). toString(); showCommodityPhoto(); /商品樣照 QSqlQuery query; query.exec(QString

28、(select Name from category where CategoryID=(select CategoryID from commodity where Name=%1).arg(ui-newNameLineEdit-text(); query.next(); ui-newCategoryComboBox-setCurrentText(query.value(0).toString();/實現(xiàn)類別聯(lián)動界面初始化功能實現(xiàn)以上代碼中使用showCommodityPhoto()方法來顯示商品樣照，該方法的代碼如下：void MainWindow:showCommodityPhoto()

29、 QPixmap photo; QModelIndex index; QSqlQueryModel *pictureModel = new QSqlQueryModel(this);/商品樣照模型數(shù)據 QString name = ui-newNameLineEdit-text(); pictureModel-setQuery(select Picture from commodity where Name= + name + ); index = pictureModel-index(0, 0); photo.loadFromData(pictureModel-data(index).toB

30、yteArray(), JPG);/(a) ui-newPictureLabel-setPixmap(photo);其中，(a) photo.loadFromData(pictureModel-data(index).toByteArray(), JPG);：這里將從MySQL數(shù)據庫中讀取的字節(jié)數(shù)組類型的照片數(shù)據載入為Qt的QPixmap對象，再將其設為界面上標簽的屬性即可在界面上顯出數(shù)據庫圖片類型字段的內容。04新品入庫功能實現(xiàn)1入庫操作2選樣照3清倉操作1入庫操作本系統(tǒng)的第一個“新品入庫”頁是供商品倉儲管理員登記錄入新進商品信息的，在左側表單中填好（選擇）新品信息后，單擊“入庫”按鈕就可以

31、將一件新的商品添加進MySQL數(shù)據庫中?！叭霂臁卑粹o的單擊事件過程代碼。其中，(a) query.exec(QString(select CategoryID from category where Name=%1).arg(ui- newCategoryComboBox- currentText();：入庫新品的類別由管理員在界面“類別”列表中選擇，為簡單起見，本例所有商品的類別是固定的，預先錄入數(shù)據庫，暫不支持添加新類別。(b) query.exec(QString(insert into commodity(CategoryID, Name, Picture, InputPrice, O

32、utputPrice, Amount) values(%1, %2, NULL, %3, %4, %5).arg(categoryid).arg(name).arg (inputprice).arg(outputprice).arg(count);：這是Qt向MySQL數(shù)據庫執(zhí)行插入操作SQL語句的典型寫法，用“%”表示待定參數(shù)；以.arg傳遞參數(shù)值，一條SQL語句可支持多個.arg傳參方法，請讀者注意掌握這種書寫格式。(c) myPicImg.save(&buffer, JPG);：這里使用一個QImage對象來存儲要寫入數(shù)據庫的照片數(shù)據，它通過save()方法從QBuffer類型的緩存中載

33、入照片數(shù)據，這也是Qt保存圖片數(shù)據的通行方式。(d) query.addBindValue(var);：這里用SQL查詢類對象的addBindValue()方法綁定照片數(shù)據作為參數(shù)傳給SQL語句中“?”之處，這是Qt操作MySQL含參數(shù)SQL語句的另一種形式，也是通用的形式。2選樣照用戶可從界面上傳預先準備好的商品樣照錄入數(shù)據庫，上傳樣照通過單擊“上傳.”按鈕實現(xiàn)，其事件代碼為：void MainWindow:on_newUploadPushButton_clicked() QString picturename = QFileDialog:getOpenFileName(this, 選擇商品

34、圖片, ., Image File(*.png *.jpg *.jpeg *.bmp); if (picturename.isEmpty() return; myPicImg.load(picturename); ui-newPictureLabel-setPixmap(QPixmap:fromImage(myPicImg);3清倉操作清倉是入庫的逆操作，當某件商品已售罄或不再需要時，可直接單擊“清倉”按鈕將其信息記錄從數(shù)據庫刪除，此按鈕的事件代碼為：void MainWindow:on_newClearancePushButton_clicked() QSqlQuery query; que

35、ry.exec(QString(delete from commodity where Name=%1).arg(ui-new NameLineEdit-text();/刪除商品記錄 /刷新界面 ui-newNameLineEdit-setText(); ui-newInputPriceLineEdit-setText(); ui-newOutputPriceLineEdit-setText(); ui-newCountSpinBox-setValue(1); ui-newPictureLabel-clear(); commodity_model-setTable(commodity_inf); commodity_model-select(); ui-commodityTableView-setModel(commodity_model);/刷新數(shù)據網格（“新品入庫”頁）05預售訂單功能實現(xiàn)1商品出售2下訂單1商品出售用戶可以選擇不同類別的不同商品，指定數(shù)量后出售。這里