JavaScript+jQuery前端开发基础教程（第2版）（微课版）第13章.pptx

JavaScript+jQuery前端开发基础教程微课版

第13章在线咨询服务系统本章主要内容：系统设计安装和使用MySQL系统实现

13.1.1系统功能分析本章实现的在线咨询服务系统主要有以下几个功能。用户注册：注册平台新用户。用户注册功能主要是为了采集用户信息，如联系人姓名、联系电话、收货地址等。用户注册后，使用注册的用户名和密码登录平台。用户登录：用户登录平台后，可在线咨询商品的相关问题。在线咨询：用户和店铺进行在线交流。

13.1.2开发工具选择本章实现的在线咨询服务系统是一个典型的Web应用程序，开发时需要Web服务器、数据库服务器和编辑器等工具。本书前面各章均在VSCode中完成开发，并使用Node.js作为Web服务器。本章实例主要涉及的数据包括用户信息、店铺信息、商品信息和浏览记录等，这些数据需使用数据库进行保存。本章选择MySQL作为数据库服务器。

13.2.1安装MySQL本章使用免费的MySQL社区版来搭建数据库服务器。安装程序有Web版和独立安装包两种。Web版的安装程序需要通过联网下载需要的组件。独立安装包含所有组件，安装过程中不需要连接网络。在Windows10中，可使用MySQL安装器完成安装，具体操作步骤如下……

13.2.2管理MySQL服务器

13.3系统实现本章实现的在线咨询服务系统主要包括用户注册、店铺注册、用户登录、商品展示、商品咨询和咨询服务等模块。每个模块由一个客户端HTML文档和关联的服务端JavaScript脚本实现。客户端HTML文档通过AJAX操作与Node.js服务器完成数据交换。系统各模块之间的关系如图13-17所示。

13.3.1初始化项目

13.3.2实现用户登录功能在页面中输入用户名、密码、验证码，选择登录类型后，单击“确定”按钮提交登录信息。如果登录信息有误，在页面下方显示提示文字；登录成功后，登录类型是会员则跳转到商品展示页面，登录类型是店铺则跳转到咨询服务页面。

13.3.3实现商品展示功能商品展示页面显示了商品简略信息，单击商品图片可打开商品详情展示页面。单击“咨询”链接，可进入商品咨询页面。商品展示页面右上角显示了当前用户名称，单击“重新登录”链接可返回登录页面。如果用户未登录，则显示“登录”链接。

13.3.4实现商品咨询功能

1．设计商品咨询页面框架在VSCode中，为项目添加一个HTML文档，命名为consulting.html，实现商品咨询页面框架

2．验证是否登录用户打开商品咨询页面时，页面向服务器请求“/checkisloged”，检查用户是否登录，用户未登录时导航到登录页面。服务器端处理“/checkisloged”请求，通过检查req.session.isLogin的值来判断当前用户是否登录

3．实现当前用户信息载入商品咨询页面中请求当前用户信息的脚本代码：$(#userinfo).load(/getuserinfo)??????//载入当前用户星级等信息服务器端处理“/getuserinfo”请求，使用session对象中保存的会员或店铺信息，从数据库查询详细信息，将其返回客户端

4．实现最近联系人列表载入商品咨询页面中请求最近联系人列表的脚本代码：……脚本在成功载入联系人列表后，首先将第一个咨询的店铺名称及其ID加载到对应的页面元素中，然后发起AJAX请求，从服务器获取店铺信息和与店铺的咨询记录。服务器端处理“/getuserlists”请求，返回最近联系人列表、当前店铺信息以及与店铺的咨询记录服务器端处理“/getshopdetail”请求，返回当前店铺信息服务器端处理“/getchatrecord”请求，返回与当前店铺有关的咨询记录

5．实现店铺信息和实时咨询记录载入当用户在最近联系人列表中单击店铺名称时，在脚本中请求服务器端的“/getshopdetail”和“/getchatrecord”，返回店铺信息和咨询记录。

6．实现选项卡切换当用户选择“正在咨询”和“店铺信息”选项卡时，切换当前选项卡，并显示对应的选项卡内容。

7．实现正在咨询商品信息载入商品咨询页面请求正在咨询的商品信息的脚本代码如下。$(#asking-goods-info).load(/getaskgoodsinfo)//获取当前正在咨询的商品信息当用户在商品展示页面中单击“咨询”链接时，客户端脚本会通过AJAX请求将对应商品的ID和商品所属店铺的ID发送给服务器，服务器将其保存在session对象中。服务器端处理“/getaskgoodsinfo”请求时，使用req.session.askgoodsid中的商品ID作为参数，查询数据库获取当前正在咨询的商品信息

8．实现浏览记录载入商品咨询页面请求浏览记录的脚本代码如下