Ajax01-课程导学、接口

本文介绍了Node.js与Ajax的学习目标、重点内容和接口概念,详细讲解了GET和POST方式请求接口的过程,并通过Postman工具进行接口测试。此外,讨论了接口文档的构成和重要性,并提供了图书馆管理和聊天机器人的实际案例,涉及图书管理接口的增删查改以及聊天机器人的消息交互功能实现。
摘要由CSDN通过智能技术生成

目录

 一、课程导学

1、学习Node.js与Ajax阶段的作用是什么

2、阶段学习目标

3、阶段课程内容基本信息 

4、本阶段重难点

5、阶段模块与学习方法建议 

6、阶段中技术点之间的关系

二、接口

1、借口的概念

1.1 通过GET方式请求接口的过程 

 1.2 通过POST方式请求接口的过程

2、借口测试工具Postman

2.1 什么是接口测试工具

2.2 下载并安装PostMan

2.3 了解PostMan界面的组成部分

 2.4 使用PostMan测试GET接口

2.5 使用PostMan测试POST接口

3、接口文档

3.1 什么是接口文档

3.2  接口文档的组成部分

3.3  接口文档示例 

案例-图书馆里

01 基于Bootstrap渲染页面UI结构

02 获取并渲染图书列表的数据

03 实现删除图书的功能

04 实现添加图书的功能

案例 – 聊天机器人

01 演示案例要完成的效果

02 梳理案例的代码结构

03 将用户输入的内容渲染到聊天窗口

04 发起请求获取聊天消息

05 将机器人的聊天内容转为语音

06 通过 播放语音

07 使用回车发送消息


 一、课程导学

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接口

 步骤:

  1. 选择请求的方式
  2. 填写请求的URL地址
  3. 填写请求的参数
  4. 点击 Send 按钮发起 GET 请求
  5. 查看服务器响应的结果

2.5 使用PostMan测试POST接口

 步骤:

  1. 选择请求的方式
  2. 填写请求的URL地址
  3. 选择 Body 面板并勾选数据格式
  4. 填写要发送到服务器的数据
  5. 点击 Send 按钮发起 POST 请求
  6. 查看服务器响应的结果

3、接口文档

3.1 什么是接口文档

接口文档,顾名思义就是接口的说明文档,它是我们调用接口的依据。好的接口文档包含了对接口URL,参数以及输出内容的说明,我们参照接口文档就能方便的知道接口的作用,以及接口如何进行调用。

3.2  接口文档的组成部分

接口文档可以包含很多信息,也可以按需进行精简,不过,一个合格的接口文档,应该包含以下6项内容,从而为接口的调用提供依据:  

  1. 接口名称:用来标识各个接口的简单说明,如登录接口,获取图书列表接口等。  
  2. 接口URL:接口的调用地址。  
  3. 调用方式:接口的调用方式,如 GET 或 POST。  
  4. 参数格式:接口需要传递的参数,每个参数必须包含参数名称、参数类型、是否必选、参数说明这4项内容。  
  5. 响应格式:接口的返回值的详细描述,一般包含数据名称、数据类型、说明3项内容。  
  6. 返回示例(可选):通过对象的形式,例举服务器返回数据的结构。

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()
    }
})

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值