文章目录
- 前言
- 一、Ajax
-
- [1. 概述](#1. 概述)
- [2. 作用](#2. 作用)
- [3. 同步异步](#3. 同步异步)
- [4. 原生Ajax请求（了解即可）](#4. 原生Ajax请求（了解即可）)
- [5. Axios（重点）](#5. Axios（重点）)
-
- [5.1 基本使用](#5.1 基本使用)
- [5.2 Axios别名（简化书写）](#5.2 Axios别名（简化书写）)
- 二、前后端分离开发
-
- [1. 介绍](#1. 介绍)
-
- [1.1 前后台混合开发](#1.1 前后台混合开发)
- [1.2 前后台分离开发方式（主流）](#1.2 前后台分离开发方式（主流）)
- 2.YApi
-
- [2.1 简介](#2.1 简介)
- [2.2 YAPI接口平台中对于接口的配置步骤](#2.2 YAPI接口平台中对于接口的配置步骤)
- 总结
前言
本篇文章是2023年最新黑马JavaWeb企业级开发笔记07：Ajax、Axios请求、前后端分离开发介绍、Yapi配置步骤的总结，帮助需要学习Web开发的朋友温故而知新。
- Ajax
- Axios
- 前后端分离开发介绍
- 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如何管理接口文档：
-
首先登录YAPI的官网，然后使用github或者百度账号登录
-
在个人空间 中，选择项目列表 ->添加测试项 目
-
然后点击创建的项目，进入到项目中，紧接着先添加接口的分类
-
然后我们选择当前创建的分类，创建接口信息
-
来到接口的编辑界面，对接口做生层次的定制，例如：接口的参数，接口的返回值等等
-
添加接口的请求参数
-
添加接口的返回值
-
然后保存上述设置，紧接着我们可以来到接口的预览界面，查询接口的信息，其效果如下图所示
-
最后，我们还可以设置接口的mock信息
-
来到接口的Mock设置窗口
-
来到接口的预览界面，直接点击Mock地址
-
发现浏览器直接打开，并返回如下数据
总结
本篇文章是2023年最新黑马JavaWeb企业级开发（知识清单）07：Ajax、Axios请求、前后端分离开发介绍、Yapi配置步骤的总结，帮助需要学习Web开发的朋友温故而知新。
- Ajax
- Axios
- 前后端分离开发介绍
- Yapi接口管理配置步骤