JavaScript+jQuery前端開發(fā)基礎(chǔ)教程（第2版）（微課版）第13章

JavaScript+jQuery前端開發(fā)基礎(chǔ)教程微課版第13章在線咨詢服務(wù)系統(tǒng)本章主要內(nèi)容：系統(tǒng)設(shè)計(jì)安裝和使用MySQL系統(tǒng)實(shí)現(xiàn)13.1.1系統(tǒng)功能分析本章實(shí)現(xiàn)的在線咨詢服務(wù)系統(tǒng)主要有以下幾個(gè)功能。用戶注冊(cè)：注冊(cè)平臺(tái)新用戶。用戶注冊(cè)功能主要是為了采集用戶信息，如聯(lián)系人姓名、聯(lián)系電話、收貨地址等。用戶注冊(cè)后，使用注冊(cè)的用戶名和密碼登錄平臺(tái)。用戶登錄：用戶登錄平臺(tái)后，可在線咨詢商品的相關(guān)問題。在線咨詢：用戶和店鋪進(jìn)行在線交流。13.1.2開發(fā)工具選擇本章實(shí)現(xiàn)的在線咨詢服務(wù)系統(tǒng)是一個(gè)典型的Web應(yīng)用程序，開發(fā)時(shí)需要Web服務(wù)器、數(shù)據(jù)庫(kù)服務(wù)器和編輯器等工具。本書前面各章均在VSCode中完成開發(fā)，并使用Node.js作為Web服務(wù)器。本章實(shí)例主要涉及的數(shù)據(jù)包括用戶信息、店鋪信息、商品信息和瀏覽記錄等，這些數(shù)據(jù)需使用數(shù)據(jù)庫(kù)進(jìn)行保存。本章選擇MySQL作為數(shù)據(jù)庫(kù)服務(wù)器。13.2.1安裝MySQL本章使用免費(fèi)的MySQL社區(qū)版來搭建數(shù)據(jù)庫(kù)服務(wù)器。安裝程序有Web版和獨(dú)立安裝包兩種。Web版的安裝程序需要通過聯(lián)網(wǎng)下載需要的組件。獨(dú)立安裝包含所有組件，安裝過程中不需要連接網(wǎng)絡(luò)。在Windows10中，可使用MySQL安裝器完成安裝，具體操作步驟如下……13.2.2管理MySQL服務(wù)器13.3系統(tǒng)實(shí)現(xiàn)本章實(shí)現(xiàn)的在線咨詢服務(wù)系統(tǒng)主要包括用戶注冊(cè)、店鋪?zhàn)?cè)、用戶登錄、商品展示、商品咨詢和咨詢服務(wù)等模塊。每個(gè)模塊由一個(gè)客戶端HTML文檔和關(guān)聯(lián)的服務(wù)端JavaScript腳本實(shí)現(xiàn)?？蛻舳薍TML文檔通過AJAX操作與Node.js服務(wù)器完成數(shù)據(jù)交換。系統(tǒng)各模塊之間的關(guān)系如圖13-17所示。13.3.1初始化項(xiàng)目13.3.2實(shí)現(xiàn)用戶登錄功能在頁(yè)面中輸入用戶名、密碼、驗(yàn)證碼，選擇登錄類型后，單擊“確定”按鈕提交登錄信息。如果登錄信息有誤，在頁(yè)面下方顯示提示文字；登錄成功后，登錄類型是會(huì)員則跳轉(zhuǎn)到商品展示頁(yè)面，登錄類型是店鋪則跳轉(zhuǎn)到咨詢服務(wù)頁(yè)面。13.3.3實(shí)現(xiàn)商品展示功能商品展示頁(yè)面顯示了商品簡(jiǎn)略信息，單擊商品圖片可打開商品詳情展示頁(yè)面。單擊“咨詢”鏈接，可進(jìn)入商品咨詢頁(yè)面。商品展示頁(yè)面右上角顯示了當(dāng)前用戶名稱，單擊“重新登錄”鏈接可返回登錄頁(yè)面。如果用戶未登錄，則顯示“登錄”鏈接。13.3.4實(shí)現(xiàn)商品咨詢功能1．設(shè)計(jì)商品咨詢頁(yè)面框架在VSCode中，為項(xiàng)目添加一個(gè)HTML文檔，命名為consulting.html，實(shí)現(xiàn)商品咨詢頁(yè)面框架2．驗(yàn)證是否登錄用戶打開商品咨詢頁(yè)面時(shí)，頁(yè)面向服務(wù)器請(qǐng)求“/checkisloged”，檢查用戶是否登錄，用戶未登錄時(shí)導(dǎo)航到登錄頁(yè)面。服務(wù)器端處理“/checkisloged”請(qǐng)求，通過檢查req.session.isLogin的值來判斷當(dāng)前用戶是否登錄3．實(shí)現(xiàn)當(dāng)前用戶信息載入商品咨詢頁(yè)面中請(qǐng)求當(dāng)前用戶信息的腳本代碼：$("#userinfo").load("/getuserinfo")

//載入當(dāng)前用戶星級(jí)等信息服務(wù)器端處理“/getuserinfo”請(qǐng)求，使用session對(duì)象中保存的會(huì)員或店鋪信息，從數(shù)據(jù)庫(kù)查詢?cè)敿?xì)信息，將其返回客戶端4．實(shí)現(xiàn)最近聯(lián)系人列表載入商品咨詢頁(yè)面中請(qǐng)求最近聯(lián)系人列表的腳本代碼：……腳本在成功載入聯(lián)系人列表后，首先將第一個(gè)咨詢的店鋪名稱及其ID加載到對(duì)應(yīng)的頁(yè)面元素中，然后發(fā)起AJAX請(qǐng)求，從服務(wù)器獲取店鋪信息和與店鋪的咨詢記錄。服務(wù)器端處理“/getuserlists”請(qǐng)求，返回最近聯(lián)系人列表、當(dāng)前店鋪信息以及與店鋪的咨詢記錄服務(wù)器端處理“/getshopdetail”請(qǐng)求，返回當(dāng)前店鋪信息服務(wù)器端處理“/getchatrecord”請(qǐng)求，返回與當(dāng)前店鋪有關(guān)的咨詢記錄5．實(shí)現(xiàn)店鋪信息和實(shí)時(shí)咨詢記錄載入當(dāng)用戶在最近聯(lián)系人列表中單擊店鋪名稱時(shí)，在腳本中請(qǐng)求服務(wù)器端的“/getshopdetail”和“/getchatrecord”，返回店鋪信息和咨詢記錄。6．實(shí)現(xiàn)選項(xiàng)卡切換當(dāng)用戶選擇“正在咨詢”和“店鋪信息”選項(xiàng)卡時(shí)，切換當(dāng)前選項(xiàng)卡，并顯示對(duì)應(yīng)的選項(xiàng)卡內(nèi)容。7．實(shí)現(xiàn)正在咨詢商品信息載入商品咨詢頁(yè)面請(qǐng)求正在咨詢的商品信息的腳本代碼如下。$('#asking-goods-info').load('/getaskgoodsinfo')//獲取當(dāng)前正在咨詢的商品信息當(dāng)用戶在商品展示頁(yè)面中單擊“咨詢”鏈接時(shí)，客戶端腳本會(huì)通過AJAX請(qǐng)求將對(duì)應(yīng)商品的ID和商品所屬店鋪的ID發(fā)送給服務(wù)器，服務(wù)器將其保存在session對(duì)象中。服務(wù)器端處理“/getaskgoodsinfo”請(qǐng)求時(shí)，使用req.session.askgoodsid中的商品ID作為參數(shù)，查詢數(shù)據(jù)庫(kù)獲取當(dāng)前正在咨詢的商品信息8．實(shí)現(xiàn)瀏覽記錄載入商品咨詢頁(yè)面請(qǐng)求瀏覽記錄的腳本代碼如下。$('#browse-record').load('/getbrowserecord')//獲取瀏覽記錄中的商品信息用戶在商品信息展示頁(yè)面（showgoods.html）中單擊商品圖片可進(jìn)入商品詳細(xì)信息頁(yè)面，此時(shí)，服務(wù)器端腳本會(huì)將商品ID保存到req.session.foots中。服務(wù)器在處理“/getbrowserecord”請(qǐng)求時(shí)，使用req.session.foots中記錄的商品ID作為參數(shù)，查詢數(shù)據(jù)庫(kù)獲得瀏覽過的商品信息，將其返回客戶端。9．實(shí)現(xiàn)商品信息咨詢發(fā)送當(dāng)用戶在“正在咨詢”選項(xiàng)卡中將鼠標(biāo)指針指向某條商品信息時(shí)，會(huì)顯示“咨詢”按鈕，單擊按鈕可將該條商品信息作為咨詢內(nèi)容發(fā)送，內(nèi)容會(huì)添加到顯示咨詢記錄的<div>元素中，同時(shí)也會(huì)提交給服務(wù)器保存。服務(wù)器處理“/appenduserchat”請(qǐng)求，將本條咨詢記錄存入數(shù)據(jù)庫(kù)10．實(shí)現(xiàn)用戶輸入咨詢信息發(fā)送單擊“發(fā)送”按鈕時(shí)，將