Java学习三阶段-Day07

1.Axios练习

1.1 入门案例

<script src="../js/axios.js"></script>
		<script>
			/* 
				1.promise对象解决传统ajax中的回调地狱问题.
				2.Axios封装了promise对象,异步调用更加简洁
				3.常见请求类型 1.get(查) 2.post(form表单) 
							  3.put(改) 4.delete(删除)
				4.分组: 用法相同 get/delete   post/put
				注意事项: 默认条件下通过浏览器只能发起Get请求!!!!
			 */
			/* 1.Axios入门案例-get请求 
			   原始方式:   参数: 1.url地址  2.请求参数   3.回调函数
			   axios方式: 参数:  1.url地址  2.请求参数 
						  关键字: then(回调函数)
			*/
			axios.get("http://localhost:8090/findAll")
				 .then(function(result){
					 //result返回值是一个promise对象.
					 console.log(result)
					 //动态获取服务器返回值使用result.data的方式
					 console.log(result.data)
				 })

1.2 箭头函数用法

语法: 将function 省略,利用=> 符号代替
Java学习三阶段-Day07_第1张图片

1.3 Axios Get请求方式

1.3.1 字符串拼接

说明: 将用户的请求数据通过字符串拼接实现数据传递.
例如: “http://localhost:8090/getUserById?id=1”
注意事项:
如果出现下列的报错,则检查 1.检查后端是否有方法对应 2.重启后端服务器再次调试
Java学习三阶段-Day07_第2张图片

1.3.1.1 编辑前端JS

Java学习三阶段-Day07_第3张图片

1.3.1.2 编辑后端Controller

注意事项:
1.请求类型必须与Ajax的类型匹配.
2.参数动态接收
Java学习三阶段-Day07_第4张图片

1.3.1.3 编辑后端Service

根据ID查询数据库
Java学习三阶段-Day07_第5张图片

1.3.2 对象请求方式(重点)

1.3.2.1 需求

如果Ajax请求的参数有多个,如果采用字符串拼接的方式.导致效率太低.结构复杂.所以需要采用对象的方式实现数据的提交.

1.3.2.2 对象方式提交

需求: 根据name=“大乔” sex="女"的条件查询数据库.
Java学习三阶段-Day07_第6张图片

1.3.2.3 请求路径

如果遇到中文,则浏览器转译处理.
在这里插入图片描述

1.3.2.4 编辑UserController

Java学习三阶段-Day07_第7张图片

1.3.2.5 编辑UserService

Java学习三阶段-Day07_第8张图片

1.3.3 RestFul结构

1.3.3.1 语法说明

说明: RestFul的风格主要的目的 是简化Get请求的方式. 将原有的字符串的拼接.改为使用"/" 的方式进行参数传递.
例子:
1.get请求类型 http://localhost:8090/getUser?name=“大乔”&age=18
2.restFul请求类型 http://localhost:8090/user/大乔/18 请求类型: XXX

注意事项:
1.利用restFul可以简化用户get请求的类型.
2.编辑restFul请求时 应该采用**无状态(请求中不能出现动词)**的请求名称
3.使用restFul时 应该按照规范编辑请求的类型. GET(查) PUT(修改) POST(新增) DELETE(删除)

1.3.3.2 编辑页面JS
/**
			 * 要求: 利用restFul风格 查询name中包含"君"的数据
			 * URL: http://localhost:8090/user/君  GET
			 */
			axios.get("http://localhost:8090/user/君")
				 .then(result => {
					 console.log(result.data)
				 })
1.3.3.3 编辑UserController

Java学习三阶段-Day07_第9张图片

1.3.3.4 编辑UserService

Java学习三阶段-Day07_第10张图片

1.4 前后端调用流程

Java学习三阶段-Day07_第11张图片

1.5 关于SpringMVC业务知识

1.5.1 @RequestMapping说明

说明: 该注解主要实现了用户的请求与后端Controller中的方法绑定.
支持的请求类型: 8种请求类型全部支持.
升级版本注解: 只对某些特定的请求类型有效果.
常见请求注解:
@GetMapping(“getUserById”) //只允许get请求类型访问
@PostMapping("") //只允许post请求类型访问
@PutMapping("")
@DeleteMapping("")

1.5.2 参数使用对象接收的原理

Java学习三阶段-Day07_第12张图片
原理:
1.当用户调用该方法时.则该方法开始运行.则实例化一个空对象 User对象.
2.当用户传递数据时. ?name=xxxx&sex=xxx
3.调用对象的setName方法为对象的属性赋值. 同理 setSex方法为属性赋值. (SpringMVC实现)

1.5.3 RestFul风格参数接收说明

1). 简单参数接收
Java学习三阶段-Day07_第13张图片
2).对象参数接收
Java学习三阶段-Day07_第14张图片

1.6 Axios-delete请求

1.6.1 对象方式删除

1.6.1.1 编辑页面JS
<script src="../js/axios.js"></script>
		<script>
			/* GET请求的方式 与Delete请求的方式一致 */
			//1.删除name="xxxx"的数据 使用params 对象的方式实现
			let user = {
				name: "星期五"
			}
			axios.delete("http://localhost:8090/deleteUserByName",{
				params: user
			}).then(result => {
				console.log(result.data)
			})
	</script>
1.6.1.2 编辑UserController

Java学习三阶段-Day07_第15张图片

1.6.1.3 编辑UserService

Java学习三阶段-Day07_第16张图片

1.6.2 restFul风格删除数据

1.6.2.1 编辑页面JS

Java学习三阶段-Day07_第17张图片

1.6.2.2 编辑UserController

Java学习三阶段-Day07_第18张图片
业务层Service方法,调用上一个案例即可.

2. VUE与Axios练习

2.1 需求

利用VUE与Axios实现用户列表的展现
Java学习三阶段-Day07_第19张图片

2.2 实现思路

1.利用生命周期函数created 触发Axios函数调用
2.编辑axios函数,实现数据的动态的获取.
3.将axios远程获取的数据交给Vue对象的属性管理
4.利用vue中的循环遍历的写法实现表格数据展现

2.3 业务具体实现

2.3.1 编辑页面JS

<!DOCTYPE html>
<html>
		<meta charset="utf-8">
		<title>前后端交互</title>
	</head>
	<body>
		<!-- 1.定义vue根标签 -->
		<div id="app">
			<!-- 需要准备一个表格,展现user的数据 -->
			<table id="tab1" border="1px" width="80%" align="center">
				<tr align="center" height="60px">
					<th colspan="5"><h1>用户列表</h1></th>
				</tr>
				<tr align="center" height="60px">
					<th>编号</th>
					<th>名称</th>
					<th>年龄</th>
					<th>性别</th>
					<th>操作</th>
				</tr>
				<!-- 4.遍历数据实现表格数据获取 -->
				<tr align="center" v-for="user in userList">
					<td v-text="user.id"></td>
					<td v-text="user.name"></td>
					<td v-text="user.age"></td>
					<td v-text="user.sex"></td>
					<td>
						<button>修改</button>
						<button @click="deleteUserById(user.id)">删除</button>
					</td>
				</tr>
			</table>
		</div>
		<!-- 导入2个JS函数类库  vue/axios -->
		<script src="../js/vue.js"></script>
		<script src="../js/axios.js"></script>
		<script>
			const app = new Vue({
				el: "#app",
				data: {
					userList: []
				},
				methods: {
					//2.定义获取远程数据的ajax请求
					getUserList(){
						axios.get("http://localhost:8090/findAll")
							 .then(result => {
								 //服务器返回的是JSON串,经过JS程序解析变为JS对象
								 //3.实现数据赋值
								 this.userList = result.data
							 })
					},
					deleteUserById(id){
						axios.delete("http://localhost:8090/user/"+id)
							 .then(result => {
								 console.log(result.data)
								 //刷新页面
								 this.getUserList()
							 })
					}
				},
				created(){
					//1.触发函数调用
					this.getUserList()
				}
			})
		</script>
	</body>
</html>

2.3.2 编辑UserController

由于查询方法之前写过,所以这里只标识删除操作.
Java学习三阶段-Day07_第20张图片

2.3.2 编辑UserService

Java学习三阶段-Day07_第21张图片

2.3.3 页面模版字符串写法

通过模版字符串可以简化拼接过程.
Java学习三阶段-Day07_第22张图片

你可能感兴趣的:(Java学习三阶段,vue,java,javascript,spring,boot,前端)