本文介绍了Node.js与Ajax的学习目标、重点内容和接口概念，详细讲解了GET和POST方式请求接口的过程，并通过Postman工具进行接口测试。此外，讨论了接口文档的构成和重要性，并提供了图书馆管理和聊天机器人的实际案例，涉及图书管理接口的增删查改以及聊天机器人的消息交互功能实现。
目录
一、课程导学
1、学习Node.js与Ajax阶段的作用是什么
2、阶段学习目标
3、阶段课程内容基本信息
4、本阶段重难点
5、阶段模块与学习方法建议
6、阶段中技术点之间的关系
二、接口
1、借口的概念
使用 Ajax 请求数据时，被请求的 URL 地址，就叫做数据接口（简称接口）。同时，每个接口必须有请求方式。
例如：
http://www.liulongbin.top:3006/api/getbooks 获取图书列表的接口(GET请求) http://www.liulongbin.top:3006/api/addbook 添加图书的接口（POST请求）
1.1 通过GET方式请求接口的过程
1.2 通过POST方式请求接口的过程
2、借口测试工具Postman
2.1 什么是接口测试工具
为了验证接口能否被正常被访问，我们常常需要使用接口测试工具，来对数据接口进行检测。
好处：接口测试工具能让我们在不写任何代码的情况下，对接口进行调用和测试。
2.2 下载并安装PostMan
访问 PostMan 的官方下载网址 https://www.getpostman.com/downloads/，下载所需的安装程序后，直接安装即可。
2.3 了解PostMan界面的组成部分
2.4 使用PostMan测试GET接口
步骤：
- 选择请求的方式
- 填写请求的URL地址
- 填写请求的参数
- 点击 Send 按钮发起 GET 请求
- 查看服务器响应的结果
2.5 使用PostMan测试POST接口
步骤：
- 选择请求的方式
- 填写请求的URL地址
- 选择 Body 面板并勾选数据格式
- 填写要发送到服务器的数据
- 点击 Send 按钮发起 POST 请求
- 查看服务器响应的结果
3、接口文档
3.1 什么是接口文档
接口文档，顾名思义就是接口的说明文档，它是我们调用接口的依据。好的接口文档包含了对接口URL，参数以及输出内容的说明，我们参照接口文档就能方便的知道接口的作用，以及接口如何进行调用。
3.2 接口文档的组成部分
接口文档可以包含很多信息，也可以按需进行精简，不过，一个合格的接口文档，应该包含以下6项内容，从而为接口的调用提供依据：
- 接口名称：用来标识各个接口的简单说明，如登录接口，获取图书列表接口等。
- 接口URL：接口的调用地址。
- 调用方式：接口的调用方式，如 GET 或 POST。
- 参数格式：接口需要传递的参数，每个参数必须包含参数名称、参数类型、是否必选、参数说明这4项内容。
- 响应格式：接口的返回值的详细描述，一般包含数据名称、数据类型、说明3项内容。
- 返回示例（可选）：通过对象的形式，例举服务器返回数据的结构。
3.3 接口文档示例
案例-图书馆里
01 基于Bootstrap渲染页面UI结构
- 用到的 css 库 bootstrap.css
- 用到的 javascript 库 jquery.js
- 用到的 vs code 插件 Bootstrap 3 Snippets
02 获取并渲染图书列表的数据
function getBookList() {
// 1. 发起 ajax 请求获取图书列表数据
$.get('http://www.liulongbin.top:3006/api/getbooks', function(res) {
// 2. 获取列表数据是否成功
if (res.status !== 200) return alert('获取图书列表失败！')
// 3. 渲染页面结构
var rows = []
$.each(res.data, function(i, item) { // 4. 循环拼接字符串
rows.push('<tr><td>' + item.id + '</td><td>' + item.bookname + '</td><td>' + item.author + '</td><td>' + item.publisher + '</td><td><a href="javascript:;">删除</a></td></tr>')
})
$('#bookBody').empty().append(rows.join('')) // 5. 渲染表格结构
})
}
03 实现删除图书的功能
// 1. 为按钮绑定点击事件处理函数
$('tbody').on('click', '.del', function() {
// 2. 获取要删除的图书的 Id
var id = $(this).attr('data-id')
$.ajax({ // 3. 发起 ajax 请求，根据 id 删除对应的图书
type: 'GET',
url: 'http://www.liulongbin.top:3006/api/delbook',
data: { id: id },
success: function(res) {
if (res.status !== 200) return alert('删除图书失败！')
getBookList() // 4. 删除成功后，重新加载图书列表
}
})
})
04 实现添加图书的功能
// 1. 检测内容是否为空
var bookname = $('#bookname').val()
var author = $('#author').val()
var publisher = $('#publisher').val()
if (bookname === '' || author === '' || publisher === '') {
return alert('请完整填写图书信息！')
}
// 2. 发起 ajax 请求，添加图书信息
$.post(
'http://www.liulongbin.top:3006/api/addbook',
{ bookname: bookname, author: author, publisher: publisher },
function(res) {
// 3. 判断是否添加成功
if (res.status !== 201) return alert('添加图书失败！')
getBookList() // 4. 添加成功后，刷新图书列表
$('input:text').val('') // 5. 清空文本框内容
}
)
案例 – 聊天机器人
01 演示案例要完成的效果
02 梳理案例的代码结构
- 梳理页面的 UI 布局
- 将业务代码抽离到 chat.js 中
- 了解 resetui() 函数的作用
03 将用户输入的内容渲染到聊天窗口
// 为发送按钮绑定点击事件处理函数
$('#btnSend').on('click', function () {
var text = $('#ipt').val().trim() // 获取用户输入的内容
if (text.length <= 0) { // 判断用户输入的内容是否为空
return $('#ipt').val('')
}
// 将用户输入的内容显示到聊天窗口中
$('#talk_list').append('<li class="right_word"><img src="img/person02.png" /> <span>' + text + '</span></li>')
resetui() // 重置滚动条的位置
$(‘#ipt’).val('') // 清空输入框的内容
// TODO: 发起请求，获取聊天消息
})
04 发起请求获取聊天消息
function getMsg(text) {
$.ajax({
method: 'GET',
url: 'http://ajax.frontend.itheima.net:3006/api/robot',
data: {
spoken: text
},
success: function (res) {
if (res.message === 'success') {
var msg = res.data.info.text
$('#talk_list').append('<li class="left_word"><img src="img/person01.png" /> <span>' + msg + '</span></li>')
resetui()
// TODO: 发起请求，将机器人的聊天消息转为语音格式
}
}
})
}
05 将机器人的聊天内容转为语音
function getVoice(text) {
$.ajax({
method: 'GET',
url: 'http://ajax.frontend.itheima.net:3006/api/synthesize',
data: {
text: text
},
success: function (res) {
// 如果请求成功，则 res.voiceUrl 是服务器返回的音频 URL 地址
if (res.status === 200) {
$('#voice').attr('src', res.voiceUrl)
}
}
})
}
06 通过 <audio> 播放语音
<!-- 音频播放语音内容 -->
<audio src="" id="voice" autoplay style="display: none;"></audio>
07 使用回车发送消息
// 让文本输入框响应回车事件后，提交消息
$('#ipt').on('keyup', function (e) {
// e.keyCode 可以获取到当前按键的编码
if (e.keyCode === 13) {
// 调用按钮元素的 click 函数，可以通过编程的形式触发按钮的点击事件
$('#btnSend').click()
}
})
275
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
