項(xiàng)目10

綜合項(xiàng)目——學(xué)生成績(jī)查詢(xún)期末考試結(jié)束后，李老師著手開(kāi)發(fā)學(xué)院的學(xué)生成績(jī)管理系統(tǒng)，并邀請(qǐng)張華加入項(xiàng)目團(tuán)隊(duì)。其中，一個(gè)關(guān)鍵模塊要求前端能以表格的形式展現(xiàn)后端服務(wù)器提供的數(shù)據(jù)。在李老師的指導(dǎo)下，張華決定采用

Node.js+Ajax+MySQL技術(shù)棧開(kāi)發(fā)，實(shí)現(xiàn)便捷的學(xué)生成績(jī)查詢(xún)功能。該功能的核心需求是，用戶(hù)在前端頁(yè)面單擊“點(diǎn)我獲取成績(jī)表”按鈕后，頁(yè)面無(wú)須刷新即可觸發(fā)后端查詢(xún)MySQL數(shù)據(jù)庫(kù)操作，并將查詢(xún)結(jié)果以表格的形式直觀地展示在前端頁(yè)面上。情境導(dǎo)入1.常見(jiàn)的數(shù)據(jù)庫(kù)現(xiàn)在市面上流行的數(shù)據(jù)庫(kù)有多種，常見(jiàn)的數(shù)據(jù)庫(kù)有MySQL、Oracle、SQLServer、MongoDB

等，其中，MySQL、Oracle、SQLServer

等數(shù)據(jù)庫(kù)為關(guān)系數(shù)據(jù)庫(kù)，屬于傳統(tǒng)數(shù)據(jù)庫(kù)，MongoDB為NoSQL數(shù)據(jù)庫(kù)，也稱(chēng)非關(guān)系數(shù)據(jù)庫(kù)，屬于新型數(shù)據(jù)庫(kù)。本項(xiàng)目使用MySQL數(shù)據(jù)庫(kù)進(jìn)行講解。任務(wù)使用Node.js操作數(shù)據(jù)庫(kù)2.創(chuàng)建數(shù)據(jù)庫(kù)連接（1）新建數(shù)據(jù)庫(kù)和表打開(kāi)

MySQL

數(shù)據(jù)庫(kù)客戶(hù)端，創(chuàng)建名為

mydb的數(shù)據(jù)庫(kù)，創(chuàng)建表stuscore，并插入幾條測(cè)試數(shù)據(jù)。（2）安裝與連接數(shù)據(jù)庫(kù)①

使用Node.js連接MySQL數(shù)據(jù)庫(kù)時(shí)，需要先安裝MySQL第三方模塊，可以通過(guò)如下命令下載。任務(wù)使用Node.js操作數(shù)據(jù)庫(kù)npminstallmysql@2.18.1②

連接數(shù)據(jù)庫(kù)。新建test.js文件，代碼如下。任務(wù)使用Node.js操作數(shù)據(jù)庫(kù)constmysql=require('mysql'); //導(dǎo)入MySQL模塊constdb=mysql.createPool({ //創(chuàng)建連接host:'127.0.0.1',user:'root',password:'admin123',database:'mydb'});//測(cè)試是否連接成功db.query('select1',(err,results)=>{if(err)returnconsole.log(err.message);console.log(results);});③

執(zhí)行上述連接文件，如果出現(xiàn)如下結(jié)果，則說(shuō)明連接成功。任務(wù)使用Node.js操作數(shù)據(jù)庫(kù)[RowDataPacket{'1':1}]3.操作數(shù)據(jù)庫(kù)數(shù)據(jù)庫(kù)連接成功后，可以對(duì)數(shù)據(jù)表進(jìn)行增、刪、改、查等操作。（1）查詢(xún)數(shù)據(jù)表查詢(xún)users表中的所有數(shù)據(jù)，使用MySQL模塊提供的query()方法進(jìn)行查詢(xún)操作。任務(wù)使用Node.js操作數(shù)據(jù)庫(kù)//省略導(dǎo)入MySQL模塊及創(chuàng)建連接的代碼//執(zhí)行SQL語(yǔ)句constsqlStr='select*fromusers';db.query(sqlStr,(err,results)=>{if(err)returnconsole.log(err.message);console.log(results);})（2）插入操作在users表中插入一條記錄，代碼如下。任務(wù)使用Node.js操作數(shù)據(jù)庫(kù)//省略導(dǎo)入MySQL模塊及創(chuàng)建連接的代碼//準(zhǔn)備要插入的數(shù)據(jù)constuser={username:'張華',password:'123456'};constsqlStr='insertintousers(username,password)values(?,?)';db.query(sqlStr,[user.username,user.password],(err,results)=>{if(err)returnconsole.log(err.message);//成功if(results.affectedRows===1){console.log('插入數(shù)據(jù)成功');}})插入操作還可以使用較為簡(jiǎn)便的方法實(shí)現(xiàn)，代碼如下。任務(wù)使用Node.js操作數(shù)據(jù)庫(kù)//省略導(dǎo)入MySQL模塊及創(chuàng)建連接的代碼//準(zhǔn)備要插入的數(shù)據(jù)constuser={username:'zhangsan',password:'123456'};constsqlStr='insertintousersset?';db.query(sqlStr,user,(err,results)=>{if(err)returnconsole.log(err.message);//成功if(results.affectedRows===1){console.log('插入數(shù)據(jù)成功');}})（3）更新數(shù)據(jù)根據(jù)條件更新users表中的記錄，代碼如下。任務(wù)使用Node.js操作數(shù)據(jù)庫(kù)//省略導(dǎo)入MySQL模塊及創(chuàng)建連接的代碼//準(zhǔn)備更新語(yǔ)句constuser={id:4,username:'lisi',password:'654321'};constsqlStr='updateuserssetusername=?,password=?whereid=?';db.query(sqlStr,[user.username,user.password,user.id],(err,results)=>{if(err)returnconsole.log(err.message);//成功if(results.affectedRows===1){console.log('更新數(shù)據(jù)成功');}})更新操作還可以使用較為便捷的方法實(shí)現(xiàn)，代碼如下。任務(wù)使用Node.js操作數(shù)據(jù)庫(kù)//省略導(dǎo)入MySQL模塊及創(chuàng)建連接的代碼//準(zhǔn)備要插入的數(shù)據(jù)constuser={id:5,username:'lisi',password:'654321'};constsqlStr='updateusersset?whereid=?';db.query(sqlStr,[user,user.id],(err,results)=>{if(err)returnconsole.log(err.message);//成功if(results.affectedRows===1){console.log('更新數(shù)據(jù)成功');}})（4）刪除數(shù)據(jù)若要?jiǎng)h除指定的記錄，則首先需要編寫(xiě)SQL語(yǔ)句，使用MySQL模塊提供的query()方法進(jìn)行刪除操作。任務(wù)使用Node.js操作數(shù)據(jù)庫(kù)//省略導(dǎo)入MySQL模塊及創(chuàng)建連接的代碼//進(jìn)行刪除操作constsqlStr='deletefromuserswhereid=?';db.query(sqlStr,5,(err,results)=>{if(err)returnconsole.log(err.message);//成功if(results.affectedRows===1){console.log('刪除數(shù)據(jù)成功');}})本項(xiàng)目主要分為前端和后端兩部分交互操作。前端主要通過(guò)Ajax技術(shù)在不刷新頁(yè)面的情況下，將后端數(shù)據(jù)以表格的形式動(dòng)態(tài)顯示在前端頁(yè)面上。按照上面的項(xiàng)目分析，項(xiàng)目實(shí)現(xiàn)時(shí)需要如下技術(shù)支撐。（1）Node.js環(huán)境。（2）express等第三方模塊。（3）MySQL8.0數(shù)據(jù)庫(kù)。（4）JavaScript+Ajax+VSCode等技術(shù)和工具。（5）解析JSON格式數(shù)據(jù)的工具。項(xiàng)目分析1.搭建項(xiàng)目環(huán)境（1）創(chuàng)建stuscore目錄，并將其作為項(xiàng)目目錄。（2）項(xiàng)目初始化設(shè)置。切換到stuscore目錄，執(zhí)行如下命令，完成項(xiàng)目初始化并安裝所需模塊。項(xiàng)目實(shí)施npminit-ynpminstallexpress@4.19.2 //穩(wěn)定版，適配項(xiàng)目需求npminstallmysql@2.18.1 //兼容MySQL8.0+，避免連接兼容問(wèn)題2.創(chuàng)建MySQL連接模塊在項(xiàng)目stuscore根目錄下新建schema目錄，在該目錄下新建conn.js文件，并將其作為MySQL連接模塊。項(xiàng)目實(shí)施//省略導(dǎo)入MySQL模塊及創(chuàng)建連接的代碼//導(dǎo)出獲得連接的對(duì)象module.exports=db3.創(chuàng)建MySQL查詢(xún)路由模塊在項(xiàng)目stuscore根目錄下新建router目錄，然后在router目錄下創(chuàng)建mysqlModule.js文件，作為路由模塊文件。項(xiàng)目實(shí)施4.創(chuàng)建Web服務(wù)器（1）打開(kāi)項(xiàng)目stuscore根目錄，安裝cors模塊。（2）在項(xiàng)目stuscore根目錄下新建app.js文件，并將其作為項(xiàng)目入口服務(wù)器文件。項(xiàng)目實(shí)施npmicors@2.8.55.搭建前端數(shù)據(jù)顯示頁(yè)面在項(xiàng)目

stuscore

根目錄下新建

scoreinfo.html

文件，使用

Ajax

通過(guò)服務(wù)器接口獲取JSON格式的成績(jī)數(shù)據(jù)，解析該數(shù)據(jù)并以表格形式提交到前端頁(yè)面。項(xiàng)目實(shí)施5.搭建前端數(shù)據(jù)顯示頁(yè)面在項(xiàng)目

stuscore

根目錄下新建

scoreinfo.html

文件，使用

Ajax

通過(guò)服務(wù)器接口獲取JSON格式的成績(jī)數(shù)據(jù)，解析該數(shù)據(jù)并以表格形式提交到前端頁(yè)面。項(xiàng)目實(shí)施6.添加CSS樣式代碼，美化頁(yè)面效果7.查看頁(yè)面效果啟動(dòng)MySQL服務(wù)（可通過(guò)phpstudy、MySQL自帶客戶(hù)端等工具啟動(dòng)）。然后切換到stuscore目錄，執(zhí)行如下命令。nodeapp.js打開(kāi)瀏覽器，直接雙擊scoreinfo.html文件（或通過(guò)VSCode的GoLive插件打開(kāi)），單擊“點(diǎn)我獲取成績(jī)表”按鈕。項(xiàng)目實(shí)施本項(xiàng)目是前端與后端數(shù)據(jù)交互的一個(gè)