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

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

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