1Axios
1.1Ajax
-
Ajax的特点: 局部刷新 异步访问
-
什么是同步:当用户刷新页面时,必须等到所有数据都加载回来以后,统一刷新显示
- 缺点:当发出一个请求之后,用户需要等待该请求完成后在进行其他活动
-
什么是异步 :当用户刷新页面时,在内部同时发起多个请求,页面数据先回来的,则局部页面先刷新展现
-
Ajax为啥可以异步:Ajax引擎组件!!!
-
常见的Ajax API:jQuery/axios 让ajax调用变得简洁
1.2准备工作
说明:导入js文件
1.3Axios的入门案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Axios入门案例</title>
</head>
<body>
<!-- 1.导入js文件 -->
<script src="js/axios.js"></script>
<!-- 2.编辑JS代码 -->
<script>
//url地址: http://localhost:8080/findUser get/post
let url1 = "http://localhost:8080/findUser"
//语法: axios.get(url地址,传递的参数)
axios.get(url1)
.then(function(promise){
console.log(promise.data)
})
/* axios.get(url1)
.then((res) => {
}) */
</script>
</body>
</html>
2. SpringMVC
2.1概念
SpringMVC是Spring基于MVC的思想专门针对于前后端开发的框架
2.2传统Servlet的弊端
- 传统的Servlet,一个业务方法,需要编辑一个servlet,如果业务复杂,则导致Servlet数量增多
- Servlet请求方式只能支持Get和Post请求方式
- 我们通过Servlet获取参数的类型都是String类型需要手动进行类型转换 !!!
- 如果编辑servlet,则需要编辑大量的web.xml文件
上述的知识都是历史结果,后期的SpringMVC都是将Servlet进行了封装
2.3框架之间的调用关系
2.4常用的注解说明
@Controller
- 将该类首先交给SpringMVC进行管理,之后jiangSpringMVC整体框架交给Spring管理
@RequestMapping("/路径")
- 该路径必须与用户访问路径相同,如果路径不一样,浏览器报404错误
@ResponseBody
- 表示该方法的返回值是JSON字符串结构,如果返回值为String类型,则原数据返货
2.5SpringMVC–简单参数传递
2.5.1需求说明
-
常识:通过浏览器的地址栏,只能发起GET请求
-
URL1: http://localhost:8080/findUserById?id=1
-
知识点
- SpringMVC为了简化取值过程可以直接添加参数
- SpringMVC,路径地址信息不能重复
- 如果遇到多个参数,则使用对象的方式接受,对象的属性必须添加get和set的方法
-
@RequestMapping("/findUserById") public String findUserById(int id) { System.out.println("获取用户的ID值:" + id); return "查询成功"; }
3.6SpringMVC–对象方式接收参数
3.6.1需求说明
- 需求: URL地址: http://localhost:8080/findUserById?id=1&name=张三&age=18
- 特点说明: 用户一次性传递了多个参数
- 封装实体对象说明:
- 在pojo包下面
- 必须使用包装类型
- 必须添加Get/Set方法
- 必须序列化
3.6.2封装实体对象代码
-
package com.jt.pojo; import java.io.Serializable; public class User implements Serializable { private Integer id; //包装类型默认值为null 基本类型int 默认值0 private String name; private Integer age; private String sex; public Integer getId() { return id; } public void setId(Integer id) { this.id = id; } public String getName() { return name; } public void setName(String name) { this.name = name; } public Integer getAge() { return age; } public void setAge(Integer age) { this.age = age; } public String getSex() { return sex; } public void setSex(String sex) { this.sex = sex; } @Override public String toString() { return "User{" + "id=" + id + ", name='" + name + '\'' + ", age=" + age + '}'; } }
3.6.3UserController接收数据
/**
* 多个参数传递问题
* URL: http://localhost:8080/findUser?id=1&name=张三&age=18
* 参数: id=1&name=张三&age=18
* 返回值: String 查询成功
*/
@RequestMapping("/findUser")
public String findUser(User user){
System.out.println(user);
return "查询成功!!!";
}