第17章 【综合实例】电子商城系统

第17章【综合实例】电子商城系统——商品管理系统功能需求电子商城商品管理系统的主要功能如下：（1）管理员口令登录，密码采用MD5加密算法封装验证。（2）浏览库存商品信息，采用Qt数据网格控件实现。（3）商品入库和清仓，用表单录入商品信息（可指定商品类别、进价、售价、入库数量等，还可上传商品样照）。（4）预售订单功能。选择指定数量的库存商品出售，系统自动计算出应付款总金额并显示销售清单，用户一次可预售多种商品，然后统一下订单。商品管理系统功能需求01登录功能登录功能初始启动程序，显示登录界面（如图17.1所示）。输入管理员账号及口令，单击“登录”按钮执行验证，口令用Qt内置的MD5算法做加密处理后先存于MySQL数据库中，若验证不通过则弹出警告提示框。02新品入库功能新品入库功能在“新品入库”页上可看到全部库存的商品信息（商品名称、进价、售价和库存量），用户可输入（或选择）新品信息，将其录入系统中；也可选择库中已有的商品执行清仓操作，如图17.2所示。03预售订单功能预售订单功能在“预售订单”页上，用户从左边表单下拉列表中选择要预售的商品类别和名称，表单会自动联动显示出该商品的单价、库存、照片，并根据用户所指定的售出数量算出总价，如图17.3所示。第17章【综合实例】电子商城系统——项目开发准备01项目配置项目配置（1）创建Qt桌面应用程序项目，项目名称为“eMarket”。创建完成在QtCreator开发环境中单击左侧栏的按钮切换至项目配置模式，如图17.4所示。（2）修改项目的.pro配置文件，在其中添加配置项。配置文件eMarket.pro内容如下（加黑处为需要修改添加的地方）。02数据库准备1．创建数据库2．设计表3．创建视图数据库准备1．创建数据库在MySQL中创建数据库，名称为emarket，其中建立5个表，分别为category表（商品类别表）、commodity表（商品表）、member表（会员表）、orders表（订单表）和orderitems表（订单项表）。2．设计表（1）表结构设计对以上建好的各表设计其表结构字段属性如下。category表设计见表17.1。列名类型长度允许空值说明CategoryIDint6否商品类别编号，主键，自动递增Namechar16否商品类别名称数据库准备commodity表设计见表17.2。列名类型长度允许空值说明CommodityIDint6否商品编号，主键，自动递增CategoryIDint6否商品类别编号Namechar32否商品名称Pictureblob默认是商品图片InputPricefloat6，2位小数否商品购入价格（进价）OutputPricefloat6，2位小数否商品售出价格（单价）Amountint6否商品库存量数据库准备member表设计见表17.3。列名类型长度允许空值说明MemberIDchar16否会员账号，主键PassWordchar50否登录口令（以MD5加密存储）Namevarchar32否会员名Sexbit1否性别：1表示男，0表示女，默认1Emailvarchar32是电子邮箱Addressvarchar128是联系地址Phonechar16是联系电话RegisterDatedate默认否注册日期数据库准备orders表设计见表17.4。orderitems表设计见表17.5。列名类型长度允许空值说明OrderIDint6否订单编号，主键，自动递增MemberIDchar16否会员账号PaySumfloat6，2位小数是付款总金额PayWayvarchar32是付款方式OTimedatetime默认是下单日期时间列名类型长度允许空值说明OrderIDint6否订单编号，主键CommodityIDint6否商品编号，主键Countint11否数量Affirmbit1否是否确认：0没有确认，1确认，默认0SendGoodsbit1否是否发货：0没有发货，1发货，默认0数据库准备（2）外键关联设计好表结构之后，为表之间建立外键关联。本例要在commodity、orders和orderitems表上建立4个外键关联。①commodity表外键CategoryID引用category表主键，在NavicatforMySQL数据库可视化工具的commodity表设计窗口中选择“外键”选项卡，如图17.5所示设置即可。数据库准备②orders表外键MemberID引用member表主键，在orders表设计窗口中选择“外键”选项卡，按如图17.6所示进行设置即可。数据库准备③orderitems表在该表上要设置两个外键：OrderID引用orders表的主键OrderID，CommodityID引用commodity表的主键CommodityID。在orderitems表设计窗口中选择“外键”选项卡，按如图17.7所示进行设置即可。数据库准备（3）数据录入设计好表及其关联之后，往各表中预先录入一些数据记录以供后面测试运行程序之用，如图17.8～图17.10所示。数据库准备图17.10member表数据为体现实际应用，本章实例所用的商品信息皆是从真实的电商网站选取，各商品的样品图片由本书随源代码提供，读者可预先编写以下代码将其录入数据库commodity表的Picture字段。数据库准备3．创建视图根据应用需要，本例要创建一个视图commodity_inf，用于显示商品的基本信息（商品名称、进价、售价和库存），创建视图的操作如下。展开数据库节点，右击“视图”→“新建视图”，打开MySQL的视图创建工具，如图17.11所示。第17章【综合实例】电子商城系统——商品管理系统界面设计01总体设计总体设计在开发环境项目目录树状视图中，双击mainwindow.ui切换至可视化界面设计模式，如图17.12所示，在其上拖曳设计出商品管理系统的整个图形界面。02“新品入库”页“新品入库”页“新品入库”页界面设计效果如图17.13所示。“新品入库”页界面上各控件的属性设置见表17.6。“新品入库”页表17.6“新品入库”页界面上各控件的属性设置序号名称类型属性设置①newCategoryComboBoxQComboBox—②newNameLineEditQLineEdit—③newInputPriceLineEditQLineEdit—④newOutputPriceLineEditQLineEdit—⑤newCountSpinBoxQSpinBoxalignment:水平的,AlignHCenter;value:1⑥newUploadPushButtonQPushButtontext:上传...⑦newPictureLabelQLabelgeometry:宽度151,高度151;frameShape:Box;frameShadow:Sunken;text:空;scaledContents:勾选⑧newPutinStorePushButtonQPushButtontext:入库⑨newClearancePushButtonQPushButtontext:清仓⑩commodityTableViewQTableViewhorizontalHeaderVisible:勾选;horizontalHeaderDefaultSectionSize:120;horizontalHeaderMinimumSectionSize:25;horizontalHeaderStretchLastSection:勾选;verticalHeaderVisible:取消勾选03“预售订单”页“预售订单”页“预售订单”页界面设计效果如图17.14所示。“预售订单”页界面上各个控件的属性设置见表17.7。“预售订单”页表17.7“预售订单”页界面上各控件的属性设置序号名称类型属性设置①preCategoryComboBoxQComboBox—②preNameComboBoxQComboBox—③preOutputPriceLabelQLabelframeShape:Box;frameShadow:Sunken;text:空④preAmountLabelQLabelframeShape:Box;frameShadow:Sunken;text:空⑤preCountSpinBoxQSpinBoxalignment:水平的,AlignHCenter;value:1⑥preTotalLabelQLabelframeShape:Box;frameShadow:Sunken;text:空⑦prePictureLabelQLabelgeometry:宽度151,高度151;frameShape:Box;frameShadow:Sunken;text:空;scaledContents:勾选⑧preSellPushButtonQPushButtontext:出售⑨prePlaceOrderPushButtonQPushButtonenabled:取消勾选;text:下单⑩sellListWidgetQListWidgetgeometry:宽度441,高度31104登录窗口1．创建步骤2．窗口设计1．创建步骤（1）右击项目名，选择“添加新文件”菜单项，弹出“新建文件”对话框，如图17.15所示，选择“Qt”→“Qt设计师界面类”，单击“Choose...”按钮。1．创建步骤（2）在“Qt设计器界面类”对话框中，选择界面模板为“DialogwithoutButtons”，如图17.16所示，单击“下一步”按钮。1．创建步骤（3）在导航页上，将登录窗口所对应的类名命名为“LoginDialog”，如图17.17所示，单击“下一步”按钮。1．创建步骤（4）在“项目管理”页可看到即将添加到项目中的源文件名，确认无误后，单击“完成”按钮，如图17.18所示。2．窗口设计新添加的登录窗口可以像程序主窗体一样在可视化设计器中进行设计，我们向其中拖入若干控件，最终效果如图17.19所示，为便于指示，我们对这些控件也加了①、②、③，…数字标注。2．窗口设计登录窗口界面上各控件的属性设置见表17.8。序号名称类型属性设置①label_3QLabeltext:欢迎进入电子商城;font:微软雅黑,16;alignment:水平的,AlignHCenter②labelQLabeltext:管理员：;font:微软雅黑,12③adminLineEditQLineEditfont:微软雅黑,14;text:b02020622④label_2QLabeltext:口令：;font:微软雅黑,12⑤pwdLineEditQLineEditfont:微软雅黑,14;text:空;echoMode:Password⑥loginPushButtonQPushButtonfont:微软雅黑,12;text:登录⑦exitPushButtonQPushButtonfont:微软雅黑,12;text:退出第17章【综合实例】电子商城系统——商品管理系统功能实现01登录功能实现登录功能实现登录功能实现在logindialog.h头文件和logindialog.cpp源文件中。首先，在logindialog.h头文件中声明变量和方法，完整代码。然后，在logindialog.cpp源文件中实现登录验证功能，完整代码。其中，(a)QstringpwdMd5=strToMd5(ui->pwdLineEdit->text());：由于从数据库中查出的口令字符串是已经过MD5加密的，故这里需要先使用自定义的MD5转换函数strToMd5()将用户输入的口令字符串转为MD5加密串后再与从数据库中查出的内容比较以验证。(b)qba=QCryptographicHash::hash(str.toLatin1(),QCryptographicHash::Md5);：Qt5提供了QCryptographicHash类，该类实现了生成密码散列的方法，可用于生成二进制或文本数据的加密散列值。该类目前支持MD4、MD5、SHA-1、SHA-224、SHA-256、SHA-384和SHA-512等多种加密算法。02主体程序框架主体程序框架（1）main.cpp它是整个系统的主启动文件，代码。其中，(a)if(!createMySqlConn())：createMySqlConn()是我们编写的一个连接后台数据库的方法，它返回true表示连接成功，返回false表示失败。程序在开始启动时就通过执行该方法来检查数据库连接是否就绪。若连接不成功，系统则通过启动MySQL服务进程的方式再尝试一次；若依旧连接不成功，则提示连接失败，交由用户检查排除故障。(b)if(logindlg.exec()==QDialog::Accepted)：之前在登录对话框的实现中，若用户通过了口令验证则执行对话框类的“QDialog::accept();”方法，在这里判断对话框类的返回结果，即“QDialog::Accepted”表示验证通过。（2）mainwindow.h它是程序头文件，包含程序中用到的各个全局变量的定义、方法声明，完整的代码。（3）mainwindow.cpp它是本程序的主体源文件，其中包含各方法功能的具体实现代码，框架。03界面初始化功能实现界面初始化功能实现启动程序时，首先需要对界面显示的信息进行初始化，在窗体的构造方法MainWindow::MainWindow(QWidget*parent)中执行我们定义的初始化主窗体方法initMainWindow()，该方法的具体实现代码。本系统默认显示在前面的是“新品入库”页，但是对于“预售订单”页也同样会初始化其内容。上段代码中使用了loadPreCommodity()方法在预售订单页加载商品信息，该方法的实现代码如下：voidMainWindow::loadPreCommodity(){QSqlQueryModel*commodityNameModel=newQSqlQueryModel(this); //商品名称模型数据commodityNameModel->setQuery(QString("selectNamefromcommoditywhereCategoryID=(selectCategoryIDfromcategorywhereName='%1')").arg(ui->preCategoryComboBox->currentText()));ui->preNameComboBox->setModel(commodityNameModel); //商品名称列表加载（“预售订单”页）onPreNameComboBoxChange();}界面初始化功能实现这个方法只是在“预售订单”页加载了商品名称的列表，为了能对应显示出当前选中商品的其他信息项，在最后又调用了onPreNameComboBoxChange()方法，其实现代码如下：voidMainWindow::onPreNameComboBoxChange(){QSqlQueryModel*preCommodityModel=newQSqlQueryModel(this); //商品表模型数据QStringname=ui->preNameComboBox->currentText(); //当前选中的商品名preCommodityModel->setQuery("selectOutputPrice,Amount,PicturefromcommoditywhereName='"+name+"'"); //从数据库中查出单价、库存、照片等信息QModelIndexindex;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());//下面开始获取和展示照片QPixmapphoto;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()));}界面初始化功能实现这样做了之后，一开始启动程序直接切换至“预售订单”页，就可以看到某个默认显示的商品信息，如图17.20所示。界面初始化功能实现在第一个“新品入库”页中，默认通过视图commodity_inf加载了一个库存所有商品信息的数据网格列表，该网格控件支持用户选择记录并与左侧的表单联动，通过网格控件的单击事件过程实现：voidMainWindow::on_commodityTableView_clicked(constQModelIndex&index){onTableSelectChange(1);}界面初始化功能实现该事件过程向onTableSelectChange()方法传入一个参数（为当前选中的记录项的索引），再由该方法实际执行表单信息的更新，onTableSelectChange()方法的代码如下：voidMainWindow::onTableSelectChange(introw){intr=1; //默认索引为1if(row!=0)r=ui->commodityTableView->currentIndex().row();QModelIndexindex;index=commodity_model->index(r,0); //名称ui->newNameLineEdit->setText(commodity_model->data(index).toString());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(); //商品样照QSqlQueryquery;query.exec(QString("selectNamefromcategorywhereCategoryID=(selectCategoryIDfromcommoditywhereName='%1')").arg(ui->newNameLineEdit->text()));query.next();ui->newCategoryComboBox->setCurrentText(query.value(0).toString()); //实现类别联动}界面初始化功能实现以上代码中使用showCommodityPhoto()方法来显示商品样照，该方法的代码如下：voidMainWindow::showCommodityPhoto(){QPixmapphoto;QModelIndexindex;QSqlQueryModel*pictureModel=newQSqlQueryModel(this); //商品样照模型数据QStringname=ui->newNameLineEdit->text();pictureModel->setQuery("selectPicturefromcommoditywhereName='"+name+"'");index=pictureModel->index(0,0);photo.loadFromData(pictureModel->data(index).toByteArray(),"JPG"); //(a)ui->newPictureLabel->setPixmap(photo);}其中，(a)photo.loadFromData(pictureModel->data(index).toByteArray(),"JPG");：这里将从MySQL数据库中读取的字节数组类型的照片数据载入为Qt的QPixmap对象，再将其设为界面上标签的属性即可在界面上显出数据库图片类型字段的内容。04新品入库功能实现1．入库操作2．选样照3．清仓操作1．入库操作本系统的第一个“新品入库”页是供商品仓储管理员登记录入新进商品信息的，在左侧表单中填好（选择）新品信息后，单击“入库”按钮就可以将一件新的商品添加进MySQL数据库中。“入库”按钮的单击事件过程代码。其中，(a)query.exec(QString("selectCategoryIDfromcategorywhereName='%1'").arg(ui->newCategoryComboBox->currentText()));：入库新品的类别由管理员在界面“类别”列表中选择，为简单起见，本例所有商品的类别是固定的，预先录入数据库，暂不支持添加新类别。(b)query.exec(QString("insertintocommodity(CategoryID,Name,Picture,InputPrice,OutputPrice,Amount)values(%1,'%2',NULL,%3,%4,%5)").arg(categoryid).arg(name).arg(inputprice).arg(outputprice).arg(count));：这是Qt向MySQL数据库执行插入操作SQL语句的典型写法，用“%”表示待定参数；以.arg传递参数值，一条SQL语句可支持多个.arg传参方法，请读者注意掌握这种书写格式。(c)myPicImg.save(&buffer,"JPG");：这里使用一个QImage对象来存储要写入数据库的照片数据，它通过save()方法从QBuffer类型的缓存中载入照片数据，这也是Qt保存图片数据的通行方式。(d)query.addBindValue(var);：这里用SQL查询类对象的addBindValue()方法绑定照片数据作为参数传给SQL语句中“?”之处，这是Qt操作MySQL含参数SQL语句的另一种形式，也是通用的形式。2．选样照用户可从界面上传预先准备好的商品样照录入数据库，上传样照通过单击“上传...”按钮实现，其事件代码为：voidMainWindow::on_newUploadPushButton_clicked(){QStringpicturename=QFileDialog::getOpenFileName(this,"选择商品图片",".","ImageFile(*.png*.jpg*.jpeg*.bmp)");if(picturename.isEmpty())return;myPicImg.load(picturename);ui->newPictureLabel->setPixmap(QPixmap::fromImage(myPicImg));}3．清仓操作清仓是入库的逆操作，当某件商品已售罄或不再需要时，可直接单击“清仓”按钮将其信息记录从数据库删除，此按钮的事件代码为：voidMainWindow::on_newClearancePushButton_clicked(){QSqlQueryquery;query.exec(QString("deletefromcommoditywhereName='%1'").arg(ui->newNameLineEdit->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); //刷新数据网格（“新品入库”页）}05预售订单功能实现1．商品出售2．下订单1．商品出售用户可以选择不同类别的不同商品，指定数量后出售。这里的“出售”准确地说只是预售，在未下单之前，用户还可以添加新的商品进订单。“出售”按钮的单击事件过程代码。其中，(a)if(!myOrdered)：本系统用一个全局变量myOrdered标识当前用户是否处于出售（已开始购买商品但尚未最后下单）状态，当用户第一次执行“出售”操作时，系统会向数据库中写入一条订单信息并自动生成订单号（字段自增机制），此时将myOrdered置为true表示用户处于出售状态，只有在最后执行了下单操作后才会又将myOrdered置回false。(b)query.exec(QString("selectOrderIDfromorderswhereOTimeISNULL"));：只有执行过下单操作的订单才会在数据库中记录下单时间，并且程序逻辑只允许在完成当前订单下单之后才能开始一个新订单，因此，在任一时刻数据库中都至多只会有一个订单的下单时间字段为空，可以根据这一字段是否为空来检索出当前订单的订单号。2．下订单单击“下单”按钮来完成一个订单，其事件过程代码。其中，(a)QSqlDatabase::database().commit();：由于下单的一系列操作是一个完整不可分割的集合（原子操作），为保证数据库中数据的完整一致性，只有在所有操作都成功完成的前提下才允许将修改提交到数据库，这里采用了MySQL的事务操作技术来保证一致性。第17章【综合实例】电子商城系统——商品管理系统运行演示01登录电子商城登录电子商城启动程序，首先出现的是如图17.21所示的登录界面。为方便读者试运行，我们在数据库中已经预先创建了一个管理员的用户名“b02020622”，输入口令后单击“登录”按钮，出现商品管理系统主界面，如图17.22所示。02新品入库和清仓新品入库和清仓在左侧表单中选择类别和填写事先准备好的某件商品的信息，并单击“上传...”按钮选择其样品照片，单击“入库”按钮就能将该商品的记录添加到数据库中，并可从右边数据网格列表中看到新加入的商品，如图17.23所示。03预售下订单预售下订单切换到“预售订单”页，从左侧表单中选择一款商品后，单击“出售”按钮，右边区域会显示一条销售记录（包括售出时间、商品名、数量、单价和总价等信息），并弹出消息框提示该商品已加入订单，如图17.24所示。预售下订单此时，“下单”按钮变为可用，用户可随时单击执行下单操作，也可以继续出售其他商品，并且在每次出售时还可指定该商品的出售数量，系统会自动算出总价，并将完整的销售记录添加在右边区域，如图17.25所示。预售下订单出售完成后，单击“下单”按钮生成订单并写入MySQL数据库，系统弹出“下单成功！”消息提示，并在右区显示出订单信息，包括下单日期、订单号和应付款总额，其中应付款总额是此单所有销售记录的总价相加的和，如图17.26所示。