二.Ajax介绍2.1 Ajax概述我们前端页面中的数据，如下图所示的表格中的学生信息，应该来自于后台，那么我们的后台

2.1 Ajax概述

我们前端页面中的数据，如下图所示的表格中的学生信息，应该来自于后台，那么我们的后台和前端是互不影响的2个程序，那么我们前端应该如何从后台获取数据呢？因为是2个程序，所以必须涉及到2个程序的交互，所以这就需要用到Ajax技术。

Ajax: 全称Asynchronous JavaScript And XML,异步的JavaScript和XML.

2.2 Ajax作用

与服务器进行数据交互

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

异步交互：可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术。

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

2.3 同步异步

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

同步请求发送过程如下图所示：

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

浏览器页面发送请求给服务器，在服务器处理请求的过程中，浏览器页面还可以做其他的操作。

2.4 小案例

以下将进行一个小项目的练习,涉及到爬虫,前端,后端

声明:

可以访问gamehelper.gm825.com/wzry/hero/l… 获取数据,无需进行数据爬取

SQL代码已经准备好插入数据的语句,无需运行爬虫代码

创建数据库代码如下

create database if not exists javaweb;  
  
use javaweb;  
  
create table wangzhe(  
hero_id int comment "英雄id",  
name varchar(20) comment "英雄名字",  
cover varchar(100) comment "图片链接"  
) comment "王者";  
  
INSERT INTO javaweb.wangzhe (hero_id, name, cover) VALUES (141, '西施', 'http://pic.wankacn.com/2019-10-16_5da699228718a.png');  
INSERT INTO javaweb.wangzhe (hero_id, name, cover) VALUES (21, '甄姬', 'http://pictest.wankacn.com/2017-05-05_590c234940e6f.png');  
INSERT INTO javaweb.wangzhe (hero_id, name, cover) VALUES (37, '姜子牙', 'http://pictest.wankacn.com/2017-05-05_590c2339f01bf.png');  
INSERT INTO javaweb.wangzhe (hero_id, name, cover) VALUES (60, '雅典娜', 'http://pictest.wankacn.com/2017-05-09_591178d50a17a.png');  
INSERT INTO javaweb.wangzhe (hero_id, name, cover) VALUES (95, '鬼谷子', 'http://pic.wankacn.com/2017-05-16_591a6c6251957.png');  
INSERT INTO javaweb.wangzhe (hero_id, name, cover) VALUES (8, '鲁班七号', 'http://pictest.wankacn.com/2017-05-05_590c235759c23.png');  
INSERT INTO javaweb.wangzhe (hero_id, name, cover) VALUES (105, '苏烈', 'http://pic.wankacn.com/2017-08-16_5993f16569431.png');  
INSERT INTO javaweb.wangzhe (hero_id, name, cover) VALUES (48, '亚瑟', 'http://pictest.wankacn.com/2017-05-05_590c233041cf3.png');  
INSERT INTO javaweb.wangzhe (hero_id, name, cover) VALUES (143, '镜', 'http://pic.wankacn.com/2020-07-07_5f04145bd4696.png');  
INSERT INTO javaweb.wangzhe (hero_id, name, cover) VALUES (139, '曜', 'http://pic.wankacn.com/2019-06-25_5d11c6137c3fe.png');  
INSERT INTO javaweb.wangzhe (hero_id, name, cover) VALUES (136, '云中君', 'http://pic.wankacn.com/2019-04-04_5ca5d7f80df61.png');  
INSERT INTO javaweb.wangzhe (hero_id, name, cover) VALUES (135, '马超', 'http://pic.wankacn.com/2019-02-21_5c6e602c2aa21.png');  
INSERT INTO javaweb.wangzhe (hero_id, name, cover) VALUES (134, '盘古', 'http://pic.wankacn.com/2019-02-19_5c6b805115752.png');  
INSERT INTO javaweb.wangzhe (hero_id, name, cover) VALUES (133, '嫦娥', 'http://pic.wankacn.com/2018-12-26_5c22fa6f28bbe.png');  
INSERT INTO javaweb.wangzhe (hero_id, name, cover) VALUES (132, '猪八戒', 'http://pic.wankacn.com/2019-01-18_5c41377a62b70.png');  
INSERT INTO javaweb.wangzhe (hero_id, name, cover) VALUES (131, '瑶', 'http://pic.wankacn.com/2018-11-27_5bfd0aa89e0f9.png');  
INSERT INTO javaweb.wangzhe (hero_id, name, cover) VALUES (129, '上官婉儿', 'http://pic.wankacn.com/2018-11-13_5bea360053aa8.png');  
INSERT INTO javaweb.wangzhe (hero_id, name, cover) VALUES (127, '李信', 'http://pic.wankacn.com/2018-11-02_5bdbd4708fa91.png');  
INSERT INTO javaweb.wangzhe (hero_id, name, cover) VALUES (126, '沈梦溪', 'http://pic.wankacn.com/2018-09-13_5b99e680bf803.png');  
INSERT INTO javaweb.wangzhe (hero_id, name, cover) VALUES (125, '伽罗', 'http://pic.wankacn.com/2018-09-06_5b909433905d2.png');  
INSERT INTO javaweb.wangzhe (hero_id, name, cover) VALUES (124, '盾山', 'http://pic.wankacn.com/2018-08-28_5b84b1a03fef4.png');  
INSERT INTO javaweb.wangzhe (hero_id, name, cover) VALUES (122, '司马懿', 'http://pic.wankacn.com/2018-07-23_5b5548f8e79c9.png');  
INSERT INTO javaweb.wangzhe (hero_id, name, cover) VALUES (121, '孙策', 'http://pic.wankacn.com/2018-06-26_5b320091a1915.png');  
INSERT INTO javaweb.wangzhe (hero_id, name, cover) VALUES (120, '元歌', 'http://pic.wankacn.com/2018-06-26_5b32044409be0.png');  
INSERT INTO javaweb.wangzhe (hero_id, name, cover) VALUES (118, '米莱狄', 'http://pic.wankacn.com/2018-04-10_5acc27bf2e79a.png');  
INSERT INTO javaweb.wangzhe (hero_id, name, cover) VALUES (117, '狂铁', 'http://pic.wankacn.com/2018-03-20_5ab0dda97a4c4.png');  
INSERT INTO javaweb.wangzhe (hero_id, name, cover) VALUES (116, '裴擒虎', 'http://pic.wankacn.com/2018-02-23_5a8fdf41e691e.png');  
INSERT INTO javaweb.wangzhe (hero_id, name, cover) VALUES (115, '杨玉环', 'http://pic.wankacn.com/2018-02-07_5a7a6e89e83fc.png');  
INSERT INTO javaweb.wangzhe (hero_id, name, cover) VALUES (113, '公孙离', 'http://pic.wankacn.com/2018-01-02_5a4b2d79d6ac1.png');  
INSERT INTO javaweb.wangzhe (hero_id, name, cover) VALUES (112, '弈星', 'http://pic.wankacn.com/2017-12-06_5a27bc4e6b4fb.png');  
INSERT INTO javaweb.wangzhe (hero_id, name, cover) VALUES (110, '明世隐', 'http://pic.wankacn.com/2017-11-17_5a0e8c4208c88.png');  
INSERT INTO javaweb.wangzhe (hero_id, name, cover) VALUES (106, '梦奇', 'http://pic.wankacn.com/2017-09-29_59cdf29e3e62d.png');  
INSERT INTO javaweb.wangzhe (hero_id, name, cover) VALUES (104, '百里玄策', 'http://pic.wankacn.com/2017-08-04_59844776a6adf.png');  
INSERT INTO javaweb.wangzhe (hero_id, name, cover) VALUES (103, '女娲', 'http://pic.wankacn.com/2017-08-03_5982964831197.png');  
INSERT INTO javaweb.wangzhe (hero_id, name, cover) VALUES (98, '铠', 'http://pic.wankacn.com/2017-08-16_5993f44de1fbb.png');  
INSERT INTO javaweb.wangzhe (hero_id, name, cover) VALUES (96, '百里守约', 'http://pic.wankacn.com/2017-08-08_59891a63683d7.png');  
INSERT INTO javaweb.wangzhe (hero_id, name, cover) VALUES (89, '干将莫邪', 'http://pictest.wankacn.com/2017-05-09_5911c349718e1.png');  
INSERT INTO javaweb.wangzhe (hero_id, name, cover) VALUES (66, '黄忠', 'http://pictest.wankacn.com/2017-05-09_59115f1b38692.png');  
INSERT INTO javaweb.wangzhe (hero_id, name, cover) VALUES (65, '大乔', 'http://pictest.wankacn.com/2017-05-09_59115df336154.png');  
INSERT INTO javaweb.wangzhe (hero_id, name, cover) VALUES (64, '诸葛亮', 'http://pictest.wankacn.com/2017-05-05_590c234ec5ebe.png');  
INSERT INTO javaweb.wangzhe (hero_id, name, cover) VALUES (63, '东皇太一', 'http://pictest.wankacn.com/2017-05-05_590c232fb55c8.png');  
INSERT INTO javaweb.wangzhe (hero_id, name, cover) VALUES (62, '太乙真人', 'http://pictest.wankacn.com/2017-05-05_590c2338d81f3.png');  
INSERT INTO javaweb.wangzhe (hero_id, name, cover) VALUES (61, '蔡文姬', 'http://pictest.wankacn.com/2017-05-05_590c234d2d398.png');  
INSERT INTO javaweb.wangzhe (hero_id, name, cover) VALUES (59, '哪吒', 'http://pictest.wankacn.com/2017-05-09_591146fed1a87.png');  
INSERT INTO javaweb.wangzhe (hero_id, name, cover) VALUES (58, '杨戬', 'http://pictest.wankacn.com/2017-05-05_590c2344ceb61.png');  
INSERT INTO javaweb.wangzhe (hero_id, name, cover) VALUES (57, '成吉思汗', 'http://pictest.wankacn.com/2017-05-05_590c234211822.png');  
INSERT INTO javaweb.wangzhe (hero_id, name, cover) VALUES (56, '钟馗', 'http://pictest.wankacn.com/2017-05-05_590c23519c199.png');  
INSERT INTO javaweb.wangzhe (hero_id, name, cover) VALUES (55, '虞姬', 'http://pictest.wankacn.com/2017-05-09_5911777c98798.png');  
INSERT INTO javaweb.wangzhe (hero_id, name, cover) VALUES (54, '李元芳', 'http://pictest.wankacn.com/2017-05-05_590c2343b8795.png');  
INSERT INTO javaweb.wangzhe (hero_id, name, cover) VALUES (53, '张飞', 'http://pictest.wankacn.com/2017-05-05_590c234170ffa.png');  
INSERT INTO javaweb.wangzhe (hero_id, name, cover) VALUES (52, '刘备', 'http://pictest.wankacn.com/2017-05-05_590c23326ca1d.png');  
INSERT INTO javaweb.wangzhe (hero_id, name, cover) VALUES (51, '后羿', 'http://pic.wankacn.com/2017-12-13_5a3099f47e373.png');  
INSERT INTO javaweb.wangzhe (hero_id, name, cover) VALUES (50, '牛魔', 'http://pictest.wankacn.com/2017-05-05_590c23478167f.png');  
INSERT INTO javaweb.wangzhe (hero_id, name, cover) VALUES (49, '孙悟空', 'http://pictest.wankacn.com/2017-05-05_590c233c2bbc6.png');  
INSERT INTO javaweb.wangzhe (hero_id, name, cover) VALUES (47, '橘右京', 'http://pictest.wankacn.com/2017-05-05_590c23464b02a.png');  
INSERT INTO javaweb.wangzhe (hero_id, name, cover) VALUES (46, '娜可露露', 'http://pictest.wankacn.com/2017-05-05_590c233a826f8.png');  
INSERT INTO javaweb.wangzhe (hero_id, name, cover) VALUES (45, '不知火舞', 'http://pic.wankacn.com/2018-05-30_5b0e49feb9808.png');  
INSERT INTO javaweb.wangzhe (hero_id, name, cover) VALUES (44, '张良', 'http://pictest.wankacn.com/2017-05-05_590c2340df43f.png');  
INSERT INTO javaweb.wangzhe (hero_id, name, cover) VALUES (43, '艾琳', 'http://pictest.wankacn.com/2017-05-09_59114302686d2.png');  
INSERT INTO javaweb.wangzhe (hero_id, name, cover) VALUES (42, '花木兰', 'http://pictest.wankacn.com/2017-05-09_5911728740cc8.png');  
INSERT INTO javaweb.wangzhe (hero_id, name, cover) VALUES (41, '兰陵王', 'http://pictest.wankacn.com/2017-05-05_590c2330c26af.png');  
INSERT INTO javaweb.wangzhe (hero_id, name, cover) VALUES (40, '王昭君', 'http://pic.wankacn.com/2017-08-28_59a37b47af65d.png');  
INSERT INTO javaweb.wangzhe (hero_id, name, cover) VALUES (39, '韩信', 'http://pictest.wankacn.com/2017-05-05_590c23545ba7b.png');  
INSERT INTO javaweb.wangzhe (hero_id, name, cover) VALUES (38, '刘邦', 'http://pictest.wankacn.com/2017-05-05_590c233395c91.png');  
INSERT INTO javaweb.wangzhe (hero_id, name, cover) VALUES (36, '露娜', 'http://pictest.wankacn.com/2017-05-05_590c2353a041c.png');  
INSERT INTO javaweb.wangzhe (hero_id, name, cover) VALUES (35, '程咬金', 'http://pictest.wankacn.com/2017-05-05_590c234a58630.png');  
INSERT INTO javaweb.wangzhe (hero_id, name, cover) VALUES (34, '安琪拉', 'http://pictest.wankacn.com/2017-05-05_590c233d7b31d.png');  
INSERT INTO javaweb.wangzhe (hero_id, name, cover) VALUES (33, '貂蝉', 'http://pictest.wankacn.com/2017-05-05_590c234f59445.png');  
INSERT INTO javaweb.wangzhe (hero_id, name, cover) VALUES (32, '关羽', 'http://pictest.wankacn.com/2017-05-05_590c23316325e.png');  
INSERT INTO javaweb.wangzhe (hero_id, name, cover) VALUES (31, '老夫子', 'http://pictest.wankacn.com/2017-05-05_590c234a93870.png');  
INSERT INTO javaweb.wangzhe (hero_id, name, cover) VALUES (30, '武则天', 'http://pictest.wankacn.com/2017-05-05_590c2346e0409.png');  
INSERT INTO javaweb.wangzhe (hero_id, name, cover) VALUES (29, '项羽', 'http://pictest.wankacn.com/2017-05-05_590c2355a8a48.png');  
INSERT INTO javaweb.wangzhe (hero_id, name, cover) VALUES (28, '达摩', 'http://pictest.wankacn.com/2017-05-05_590c23506f249.png');  
INSERT INTO javaweb.wangzhe (hero_id, name, cover) VALUES (27, '狄仁杰', 'http://pic.wankacn.com/2018-05-17_5afd602a06167.png');  
INSERT INTO javaweb.wangzhe (hero_id, name, cover) VALUES (26, '马可波罗', 'http://pic.wankacn.com/2018-05-15_5afa452e33eb3.png');  
INSERT INTO javaweb.wangzhe (hero_id, name, cover) VALUES (25, '李白', 'http://pic.wankacn.com/2018-05-17_5afd4f63a5f15.png');  
INSERT INTO javaweb.wangzhe (hero_id, name, cover) VALUES (24, '宫本武藏', 'http://pictest.wankacn.com/2017-05-09_59116ec1b90cd.png');  
INSERT INTO javaweb.wangzhe (hero_id, name, cover) VALUES (23, '典韦', 'http://pictest.wankacn.com/2017-05-05_590c2331e56cb.png');  
INSERT INTO javaweb.wangzhe (hero_id, name, cover) VALUES (22, '曹操', 'http://pictest.wankacn.com/2017-05-09_59116e190ef9f.png');  
INSERT INTO javaweb.wangzhe (hero_id, name, cover) VALUES (20, '夏侯惇', 'http://pictest.wankacn.com/2017-05-05_590c2337b0007.png');  
INSERT INTO javaweb.wangzhe (hero_id, name, cover) VALUES (19, '周瑜', 'http://pictest.wankacn.com/2017-05-05_590c2335375ca.png');  
INSERT INTO javaweb.wangzhe (hero_id, name, cover) VALUES (18, '吕布', 'http://pictest.wankacn.com/2017-05-05_590c2334b5741.png');  
INSERT INTO javaweb.wangzhe (hero_id, name, cover) VALUES (17, '芈月', 'http://pic.wankacn.com/2017-06-20_5948d1ec9a667.png');  
INSERT INTO javaweb.wangzhe (hero_id, name, cover) VALUES (16, '白起', 'http://pictest.wankacn.com/2017-05-05_590c2349c67a0.png');  
INSERT INTO javaweb.wangzhe (hero_id, name, cover) VALUES (15, '扁鹊', 'http://pictest.wankacn.com/2017-05-05_590c23429ce10.png');  
INSERT INTO javaweb.wangzhe (hero_id, name, cover) VALUES (14, '孙膑', 'http://pictest.wankacn.com/2017-05-05_590c233cb89d3.png');  
INSERT INTO javaweb.wangzhe (hero_id, name, cover) VALUES (13, '钟无艳', 'http://pictest.wankacn.com/2017-05-05_590c2351100f8.png');  
INSERT INTO javaweb.wangzhe (hero_id, name, cover) VALUES (12, '阿轲', 'http://pictest.wankacn.com/2017-05-09_59116c08f0dd0.png');  
INSERT INTO javaweb.wangzhe (hero_id, name, cover) VALUES (11, '高渐离', 'http://pictest.wankacn.com/2017-05-05_590c2356bc303.png');  
INSERT INTO javaweb.wangzhe (hero_id, name, cover) VALUES (10, '刘禅', 'http://pictest.wankacn.com/2017-05-05_590c243539fa5.png');  
INSERT INTO javaweb.wangzhe (hero_id, name, cover) VALUES (9, '庄周', 'http://pictest.wankacn.com/2017-05-05_590c233fd8988.png');  
INSERT INTO javaweb.wangzhe (hero_id, name, cover) VALUES (7, '孙尚香', 'http://pictest.wankacn.com/2017-05-09_5911605741286.png');  
INSERT INTO javaweb.wangzhe (hero_id, name, cover) VALUES (6, '嬴政', 'http://pictest.wankacn.com/2017-05-05_590c233b1827c.png');  
INSERT INTO javaweb.wangzhe (hero_id, name, cover) VALUES (5, '妲己', 'http://pictest.wankacn.com/2017-05-05_590c233963aa3.png');  
INSERT INTO javaweb.wangzhe (hero_id, name, cover) VALUES (4, '墨子', 'http://pic.wankacn.com/2017-06-06_5936284094ea7.png');

爬取链接数据存入数据库爬虫代码如下

import requests  
import pymysql  
from pymysql.cursors import DictCursor  
  
# 数据库配置  
db_config = {  
'host': 'localhost',  
'user': 'root',  
'password': '123456',  
'database': 'javaweb'  
}  
  
  
url = "https://gamehelper.gm825.com/wzry/hero/list"  
  
response = requests.get(url)  
  
if response.status_code == 200:  
print("请求成功")  
# 解析数据  
data = response.json()  
print(data)  
try:  
# 连接到MySQL数据库  
connection = pymysql.connect(**db_config)  
print("数据库连接成功")  
cursor = connection.cursor(DictCursor)  
  
# 执行SQL语句  
insert_query = """  
insert into wangzhe(hero_id, name, cover)  
values (%s, %s, %s);  
"""  
for hero in data['list']:  
print(hero)  
values = (int(hero["hero_id"]), hero["name"], hero["cover"])  
cursor.execute(insert_query, values)  
  
# 提交事务  
connection.commit()  
print("数据插入成功")  
  
except Exception as e:  
print(f"Error while connecting to MySQL: {e}")  
  
else:  
print(f"Failed to retrieve data, status code: {response.status_code}")

Java后端代码后端代码相关目录图片.png

pom.xml

<?xml version="1.0" encoding="UTF-8"?>  
<project xmlns="http://maven.apache.org/POM/4.0.0"  
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"  
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">  
<modelVersion>4.0.0</modelVersion>  
  
<parent>  
<groupId>org.springframework.boot</groupId>  
<artifactId>spring-boot-starter-parent</artifactId>  
<version>3.0.5</version>  
</parent>  
  
<groupId>org.example</groupId>  
<artifactId>AjaxCreateAPI</artifactId>  
<version>1.0-SNAPSHOT</version>  
  
<properties>  
<maven.compiler.source>17</maven.compiler.source>  
<maven.compiler.target>17</maven.compiler.target>  
<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>  
</properties>  
  
<dependencies>  
<dependency>  
<groupId>org.springframework.boot</groupId>  
<artifactId>spring-boot-starter-web</artifactId>  
</dependency>  
  
<!-- mybatis-plus -->  
<dependency>  
<groupId>com.baomidou</groupId>  
<artifactId>mybatis-plus-boot-starter</artifactId>  
<version>3.5.3.1</version>  
</dependency>  
  
<!-- 数据库相关配置启动器 -->  
<dependency>  
<groupId>org.springframework.boot</groupId>  
<artifactId>spring-boot-starter-jdbc</artifactId>  
</dependency>  
  
<!-- druid启动器的依赖 -->  
<dependency>  
<groupId>com.alibaba</groupId>  
<artifactId>druid-spring-boot-3-starter</artifactId>  
<version>1.2.23</version>  
</dependency>  
  
<!-- 驱动类-->  
<dependency>  
<groupId>mysql</groupId>  
<artifactId>mysql-connector-java</artifactId>  
<version>8.0.28</version>  
</dependency>  
  
<dependency>  
<groupId>org.projectlombok</groupId>  
<artifactId>lombok</artifactId>  
<version>1.18.28</version>  
</dependency>  
  
<dependency>  
<groupId>org.springframework.boot</groupId>  
<artifactId>spring-boot-starter-aop</artifactId>  
</dependency>  
  
<dependency>  
<groupId>org.springframework.boot</groupId>  
<artifactId>spring-boot-starter-test</artifactId>  
<scope>test</scope>  
</dependency>  
</dependencies>  
  
  
</project>

resources.application.yaml

# 连接池配置  
spring:  
datasource:  
type: com.alibaba.druid.pool.DruidDataSource  
druid:  
url: jdbc:mysql:///javaweb  
username: root  
password: 123456  
driver-class-name: com.mysql.cj.jdbc.Driver  
  
mybatis-plus:  
configuration:  
log-impl: org.apache.ibatis.logging.stdout.StdOutImpl  
type-aliases-package: org.example.pojo

Main代码

package org.example;  
  
import org.mybatis.spring.annotation.MapperScan;  
import org.springframework.boot.SpringApplication;  
import org.springframework.boot.autoconfigure.SpringBootApplication;  
  
/**  
* @Author 烔  
* @date 2024/10/3  
* @Description ${description}  
*/  
@SpringBootApplication  
@MapperScan("org.example.mapper")  
public class Main {  
    public static void main(String[] args) {  
        SpringApplication.run(Main.class, args);  
    }  
}

pojo.Hero代码

package org.example.pojo;  
  
import com.baomidou.mybatisplus.annotation.TableField;  
import com.baomidou.mybatisplus.annotation.TableName;  
import lombok.Data;  
  
/**  
* @Author 烔  
* @date 2024/10/3  
* @Description 王者类  
*/  
@Data  
@TableName("wangzhe")  
public class Hero {  
    @TableField("hero_id")  
    private Integer heroId;  
    private String name;  
    private String cover;  
}

heroMapper

package org.example.mapper;  
  
import com.baomidou.mybatisplus.core.mapper.BaseMapper;  
import org.apache.ibatis.annotations.Mapper;  
import org.example.pojo.Hero;  
  
import java.util.List;  
  
/**  
* @Author 烔  
* @date 2024/10/3  
* @Description  
*/  
public interface HeroMapper extends BaseMapper<Hero> {  
}

HeroController

package org.example.controller;  
  
import org.example.mapper.HeroMapper;  
import org.example.pojo.Hero;  
import org.springframework.beans.factory.annotation.Autowired;  
import org.springframework.web.bind.annotation.CrossOrigin;  
import org.springframework.web.bind.annotation.GetMapping;  
import org.springframework.web.bind.annotation.RequestMapping;  
import org.springframework.web.bind.annotation.RestController;  
  
import java.util.List;  
  
/**  
* @Author 烔  
* @date 2024/10/3  
* @Description  
*/  
@RestController  
@RequestMapping("hero")  
@CrossOrigin  
public class HeroController {  
@Autowired  
private HeroMapper heroMapper;  
  
@GetMapping("selectAll")  
public List<Hero> selectAll(){  
    List<Hero> heroes = heroMapper.selectList(null);  

    return heroes;  
    }  
}

运行Main程序后再浏览器进入http://localhost:8080/hero/selectAll后得到如下图所示的JSON数据

图片.png

前端请求代码

<!DOCTYPE html>  
<html lang="zh-CN">  
<head>  
<meta charset="UTF-8">  
<title>Ajax原生方式</title>  
<script src="js/vue.js"></script>  
</head>  
<body>  
<input type="button" value="获取数据" onclick="getData()">  
  
<div id="div1"></div>  
</body>  
<script>  
    function getData() {  
        var xmlHttpRequest = new XMLHttpRequest();  
        xmlHttpRequest.open('GET', 'http://localhost:8080/hero/selectAll')  
        xmlHttpRequest.send()  
        xmlHttpRequest.onreadystatechange = function () {  
        if (xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){  
            document.getElementById('div1').innerHTML = xmlHttpRequest.responseText  
        }  
    }  
}  
</script>  
</html>

图片.png

2.5 Axios

原生的Ajax请求的代码编写起来还是比较繁琐的,所以接下来介绍一门更加简单的Ajax请求的技术Axios

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

2.5.1 Axios的基本使用

引入Axios文件

<script src="js/axios-0.18.0.js"></script>

环境准备在以上准备好的Java程序中HeroController中添加以下代码

@GetMapping("AjaxDemo")  
public String AjaxDemo(String name){  
    QueryWrapper<Hero> queryWrapper = new QueryWrapper<>();  
    queryWrapper.eq("name",name);  
    Hero hero = heroMapper.selectOne(queryWrapper);  

    return hero.toString();  
}

启动程序后访问 http://localhost:8080/hero/AjaxDemo?name=%E8%A5%BF%E6%96%BD 验证程序

图片.png

使用Axios发送请求,并获取响应结果 发送get请求

<!DOCTYPE html>  
<html lang="zh-CN">  
<head>  
<meta charset="UTF-8">  
<title>Axios案例</title>  
<script src="js/axios-0.18.0.js"></script>  
</head>  
<body>  
  
</body>  
  
<script>  
    axios({  
        method:"get",  
        url:"http://localhost:8080/hero/AjaxDemo?name=%E8%A5%BF%E6%96%BD"  
    }).then(function (resp){  
        alert(resp.data)  
    })  
</script>  
</html>

图片.png

post请求 环境准备: Java代码:

@PostMapping("AjaxDemo2")  
public String AjaxDemo2(@RequestParam("name") String name){  
    QueryWrapper<Hero> queryWrapper = new QueryWrapper<>();  
    queryWrapper.eq("name",name);  
    Hero hero1 = heroMapper.selectOne(queryWrapper);  

    return hero1.toString();  
}

<script>  
    axios({  
        method:"post",  
        url:"http://localhost:8080/hero/AjaxDemo2",  
        data:"name=鬼谷子"  
    }).then(function (resp){  
        alert(resp.data)  
    })  
</script>

图片.png

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

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

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

2.5.2 请求方法的别名

Axios还针对不同的请求，提供了别名方式的api,具体如下：

方法	描述
axios.get(url [, config])	发送get请求
axios.delete(url [, config])	发送delete请求
axios.post(url [, data[, config]])	发送post请求
axios.put(url [, data[, config]])	发送put请求

2.6 案例

需求:基于上文java代码生成的API完成基于Vue及Axios数据的动态加载显示

分析：

前端首先是一张表格，我们缺少数据，而提供数据的地址已经有了，所以意味这我们需要使用Ajax请求获取后台的数据。但是Ajax请求什么时候发送呢？页面的数据应该是页面加载完成，自动发送请求，展示数据，所以我们需要借助vue的mounted钩子函数。那么拿到数据了，我们该怎么将数据显示表格中呢？这里就得借助v-for指令来遍历数据，展示数据。
步骤：
1. 首先创建文件，提前准备基础代码，包括表格以及vue.js和axios.js文件的引入
2. 我们需要在vue的mounted钩子函数中发送ajax请求，获取数据
3. 拿到数据，数据需要绑定给vue的data属性
4. 在标签上通过v-for指令遍历数据，展示数据

API接口:http://localhost:8080/hero/selectAll

<!DOCTYPE html>  
<html lang="zh-CN">  
<head>  
<meta charset="UTF-8">  
<title>基于Vue及Axios的数据动态加载展示</title>  
<script src="js/vue.js"></script>  
<script src="js/axios-0.18.0.js"></script>  
</head>  
<body>  
    <div id="app">  
        <table width="60%" cellpadding="0" border="2">  
        <tr>  
            <th>序号</th>  
            <th>英雄id</th>  
            <th>英雄姓名</th>  
            <th>图片链接</th>  
            <th>图片</th>  
        </tr>  
            <tr align="center" v-for="(emp,index) in emps">  
                <td>{{index + 1}}</td>  
                <td>{{emp.heroId}}</td>  
                <td>{{emp.name}}</td>  
                <td><a :href="emp.cover" target="_blank">{{emp.cover}}</a></td>  
                <td>  
                <a :href="emp.cover" target="_blank">  
                <img :src="emp.cover" :alt="emp.name" :title="emp.name" width="150px" height="200px">  
                </a>  

                </td>  
            </tr>  
        </table>  
    </div>  
  
</body>  
    <script>  
        new Vue({  
            el: "#app",  
            data: {  
                emps: []  
            },  
            mounted() {  
                axios.get("http://localhost:8080/hero/selectAll").then(result => {  
                console.log(result.data)  
                this.emps = result.data  
            })  
            }  
        })  
    </script>  
</html>

图片.png