黑马JavaWeb开发笔记07——Ajax、Axios请求、前后端分离开发介绍、Yapi详细配置步骤

前言

本篇文章是2023年最新黑马JavaWeb企业级开发笔记07：Ajax、Axios请求、前后端分离开发介绍、Yapi配置步骤的总结，帮助需要学习Web开发的朋友温故而知新。

1. Ajax
2. Axios
3. 前后端分离开发介绍
4. Yapi接口管理配置步骤

一、Ajax

1. 概述

• Ajax: 全称Asynchronous JavaScript And XML，异步的JavaScript和XML。
• 前端页面中的数据，应该来自于后台，后台和前端是互不影响的2个程序，那么前端应该如何从后台获取数据呢？因为是2个程序，所以必须涉及到2个程序的交互，所以这就需要用到Ajax技术。

2. 作用

• 与服务器进行数据交互

  • 如下图所示：前端资源被浏览器解析，但是前端页面上缺少数据，可以通过Ajax技术，向后台服务器发起请求，后台服务器接受到前端的请求，从数据库中获取前端需要的资源，然后响应给前端，前端在通过我们学习的vue技术，可以将数据展示到页面上，这样用户就能看到完整的页面了。
  • 此处可以对比JavaSE中的网络编程技术来理解
    

• 异步交互

  • 可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术。
  • 如下图所示：当我们在百度搜索java时，下面的联想数据是通过Ajax请求从后台服务器得到的，在整个过程中，我们的Ajax请求不会导致整个百度页面的重新加载，并且只针对搜索栏这局部模块的数据进行了数据的更新，不会对整个页面的其他地方进行数据的更新，这样就大大提升了页面的加载速度，用户体验高
    

3. 同步异步

针对于上述Ajax的局部刷新功能是因为Ajax请求是异步的，与之对应的有同步请求。

• 同步请求发送过程如下图所示：
  
  浏览器页面在发送请求给服务器，在服务器处理请求的过程中，浏览器页面不能做其他的操作。只能等到服务器响应结束后，浏览器页面才能继续做其他的操作
• 异步请求发送过程如下图所示：
  

4. 原生Ajax请求（了解即可）

• 准备数据地址：http://yapi.smart-xwork.cn/mock/169327/emp/list
• 创建XMLHttpRequest对象：用于和服务器交换数据
• 向服务器发送请求
• 获取服务器响应数据

具体的步骤此处就不介绍了，过程比较繁琐，可以自己去了解一下。

5. Axios（重点）

Axios是对原生的AJAX进行封装，简化书写。
Axios官网是：https://www.axios-http.cn

5.1 基本使用

• 引入Axios文件：<script src="js/axios-0.18.0.js"></script>

• 使用Axios发送请求，并获取响应结果，官方提供的api很多，此处给出2种，如下

  • 发送 get 请求
    

  • 发送 post 请求
    

• axios() 是用来发送异步请求的，小括号中使用 js的JSON对象传递请求相关的参数：

  • method属性：用来设置请求方式的。取值为 get 或者 post。
  • url属性：用来书写请求的资源路径。如果是 get 请求，需要将请求参数拼接到路径的后面，格式为： url?参数名=参数值&参数名2=参数值2
  • data属性：作为请求体被发送的数据。也就是说如果是 post 请求的话，数据需要作为data 属性的值

• then() 需要传递一个匿名函数。我们将 then()中传递的匿名函数称为回调函数，意思是该匿
  名函数在发送请求时不会被调用，而是在成功响应后调用的函数。而该回调函数中的 resp 参数是对响应的数据进行封装的对象，通过 resp.data 可以获取到响应的数据。

5.2 Axios别名（简化书写）

二、前后端分离开发

1. 介绍

• 前端开发有2种方式：前后台混合开发和前后台分离开发

1.1 前后台混合开发

• 这种开发模式有如下缺点：
  • 沟通成本高：后台人员发现前端有问题，需要找前端人员修改，前端修改成功，再交给后台人员使用
  • 分工不明确：后台开发人员需要开发后台代码，也需要开发部分前端代码
  • 不便管理：所有的代码都在一个工程中
  • 不便维护和扩展：前端代码更新，和后台无关，但是需要整个工程包括后台一起重新打包部署

1.2 前后台分离开发方式（主流）

• 将工程分为前端和后端这2个工程，交给不同人员分别开发
  

• 前端页面需要数据，可以通过发送异步请求，从后台获取

• 前后台开发人员都需要遵循同一套规范开发，这就是接口文档，保证前端人员知道后台返回数据格式，后端人员知道前端需要的数据格式

  • 接口文档有离线版和在线版本，接口文档示可以查询今天提供资料/接口文档示例里面的资料
  • 接口文档的内容是后台开发者根据产品经理提供的产品原型和需求文档所撰写出来的
    接口文档示例：
    

• 后台开发者开发一个功能的具体流程如下图所示：
  

  • 需求分析：需要阅读需求文档，分析需求，理解需求
  • 接口定义：查询接口文档中关于需求的接口的定义，包括地址，参数，响应数据类型等等
  • 前后台并行开发：各自按照接口文档进行开发，实现需求
  • 测试：前后台开发完，各自按照接口文档进行测试
  • 前后段联调测试：前段工程请求后端工程，测试功能

2.YApi

2.1 简介

• 前后台分离开发中，我们前后台开发人员都需要遵循接口文档
• YApi 是高效、易用、功能强大的 api 管理平台，旨在为开发、产品、测试人员提供更优雅的接口管理服务
• 官网地址：https://yapi.pro/
• YApi主要提供了2个功能：
  • API接口管理：根据需求撰写接口，包括接口的地址，参数，响应等等信息。
  • Mock服务：模拟真实接口，生成接口的模拟测试数据，用于前端的测试。

2.2 YAPI接口平台中对于接口的配置步骤

注意：我进去看了一下，这个网站非常不稳定，非常卡顿，并且很多人反映无法注册，推测需要魔法。我用Google账号登陆后网站仍然无法正常操作，读者可以选择使用其他类似的管理平台（据说国产的apifox作用差不多），此处为了符合视频笔记，仍然会写明Yapi的配置步骤。

演示一下YApi如何管理接口文档：

1. 首先登录YAPI的官网，然后使用github或者百度账号登录

2. 在个人空间中，选择项目列表->添加测试项目
   

3. 然后点击创建的项目，进入到项目中，紧接着先添加接口的分类
   

4. 然后我们选择当前创建的分类，创建接口信息
   

5. 来到接口的编辑界面，对接口做生层次的定制，例如：接口的参数，接口的返回值等等
   

6. 添加接口的请求参数
   

7. 添加接口的返回值
   

8. 然后保存上述设置，紧接着我们可以来到接口的预览界面，查询接口的信息，其效果如下图所示
   

9. 最后，我们还可以设置接口的mock信息
   

10. 来到接口的Mock设置窗口
    

11. 来到接口的预览界面，直接点击Mock地址
    

12. 发现浏览器直接打开，并返回如下数据
    

总结

本篇文章是2023年最新黑马JavaWeb企业级开发（知识清单）07：Ajax、Axios请求、前后端分离开发介绍、Yapi配置步骤的总结，帮助需要学习Web开发的朋友温故而知新。

1. Ajax
2. Axios
3. 前后端分离开发介绍
4. Yapi接口管理配置步骤