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

本文主要是介绍黑马JavaWeb开发笔记07——Ajax、Axios请求、前后端分离开发介绍、Yapi详细配置步骤,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

文章目录

  • 前言
  • 一、Ajax
    • 1. 概述
    • 2. 作用
    • 3. 同步异步
    • 4. 原生Ajax请求(了解即可)
    • 5. Axios(重点)
      • 5.1 基本使用
      • 5.2 Axios别名(简化书写)
  • 二、前后端分离开发
    • 1. 介绍
      • 1.1 前后台混合开发
      • 1.2 前后台分离开发方式(主流)
    • 2.YApi
      • 2.1 简介
      • 2.2 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接口管理配置步骤

这篇关于黑马JavaWeb开发笔记07——Ajax、Axios请求、前后端分离开发介绍、Yapi详细配置步骤的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1113808

相关文章

JVM 的类初始化机制

前言 当你在 Java 程序中new对象时,有没有考虑过 JVM 是如何把静态的字节码(byte code)转化为运行时对象的呢,这个问题看似简单,但清楚的同学相信也不会太多,这篇文章首先介绍 JVM 类初始化的机制,然后给出几个易出错的实例来分析,帮助大家更好理解这个知识点。 JVM 将字节码转化为运行时对象分为三个阶段,分别是:loading 、Linking、initialization

Spring Security 基于表达式的权限控制

前言 spring security 3.0已经可以使用spring el表达式来控制授权,允许在表达式中使用复杂的布尔逻辑来控制访问的权限。 常见的表达式 Spring Security可用表达式对象的基类是SecurityExpressionRoot。 表达式描述hasRole([role])用户拥有制定的角色时返回true (Spring security默认会带有ROLE_前缀),去

浅析Spring Security认证过程

类图 为了方便理解Spring Security认证流程,特意画了如下的类图,包含相关的核心认证类 概述 核心验证器 AuthenticationManager 该对象提供了认证方法的入口,接收一个Authentiaton对象作为参数; public interface AuthenticationManager {Authentication authenticate(Authenti

Spring Security--Architecture Overview

1 核心组件 这一节主要介绍一些在Spring Security中常见且核心的Java类,它们之间的依赖,构建起了整个框架。想要理解整个架构,最起码得对这些类眼熟。 1.1 SecurityContextHolder SecurityContextHolder用于存储安全上下文(security context)的信息。当前操作的用户是谁,该用户是否已经被认证,他拥有哪些角色权限…这些都被保

Spring Security基于数据库验证流程详解

Spring Security 校验流程图 相关解释说明(认真看哦) AbstractAuthenticationProcessingFilter 抽象类 /*** 调用 #requiresAuthentication(HttpServletRequest, HttpServletResponse) 决定是否需要进行验证操作。* 如果需要验证,则会调用 #attemptAuthentica

Spring Security 从入门到进阶系列教程

Spring Security 入门系列 《保护 Web 应用的安全》 《Spring-Security-入门(一):登录与退出》 《Spring-Security-入门(二):基于数据库验证》 《Spring-Security-入门(三):密码加密》 《Spring-Security-入门(四):自定义-Filter》 《Spring-Security-入门(五):在 Sprin

Java架构师知识体认识

源码分析 常用设计模式 Proxy代理模式Factory工厂模式Singleton单例模式Delegate委派模式Strategy策略模式Prototype原型模式Template模板模式 Spring5 beans 接口实例化代理Bean操作 Context Ioc容器设计原理及高级特性Aop设计原理Factorybean与Beanfactory Transaction 声明式事物

Zookeeper安装和配置说明

一、Zookeeper的搭建方式 Zookeeper安装方式有三种,单机模式和集群模式以及伪集群模式。 ■ 单机模式:Zookeeper只运行在一台服务器上,适合测试环境; ■ 伪集群模式:就是在一台物理机上运行多个Zookeeper 实例; ■ 集群模式:Zookeeper运行于一个集群上,适合生产环境,这个计算机集群被称为一个“集合体”(ensemble) Zookeeper通过复制来实现

这15个Vue指令,让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件,按住 Control 和回车键再显示它吗?小菜一碟: <template

CentOS7安装配置mysql5.7 tar免安装版

一、CentOS7.4系统自带mariadb # 查看系统自带的Mariadb[root@localhost~]# rpm -qa|grep mariadbmariadb-libs-5.5.44-2.el7.centos.x86_64# 卸载系统自带的Mariadb[root@localhost ~]# rpm -e --nodeps mariadb-libs-5.5.44-2.el7