axios ---- 请求方式

最新推荐文章于 2024-05-23 15:51:14 发布

Sky皓皓

最新推荐文章于 2024-05-23 15:51:14 发布

阅读量226

点赞数

分类专栏：前端文章标签： vue vue.js

本文链接：https://blog.csdn.net/Skyhaohao/article/details/119945823

版权

这篇博客介绍了axios的基础用法，包括入门案例和各种HTTP请求方法，如GET、POST、PUT、DELETE，并提供了具体的代码示例。

摘要由CSDN通过智能技术生成

axios ---- 请求方式

入门案例
- 1. axios入门案例
axios 的常用请求方式
axios的综合案例

入门案例

1. axios入门案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>axios入门案例</title>
	</head>
	<body>
		<script src="../js/vue.js"></script>
		<script src="../js/axios.js"></script>
		<!-- 使用步骤：
				1.导入js函数类库
				2.发起Ajax请求，之后业务处理-->
		<div id="app" v-text="info">
			
		</div>
		<script>
		
			/* axios请求方式：
				1.请求类型
					1.get  执行查询业务
					2.post  执行form表单提交(登录/新增)
					3.put  执行修改操作
					4.delete 执行删除业务时	
				2. axios语法
				   axios.get("url地址信息","参数信息")
						.then(function(args){
							
						})
				3. 关于args参数说明
					axios为了统筹返回值的获取方式，
					将所有的数据封装为promise对象
				*/
			/* 案例一：利用axios获取后台用户列表信息
				url: http://localhost:8080/findAll */
			axios.get('http://localhost:8080/findAll')
				.then(function(promise){
     
					console.log(promise)
					console.log(promise.data)
					
			});	
			/* 写法二：
			const app = new Vue({
				el:"#app",
				data:{
					info: ''
				},
				mounted:function(){
					axios.get('http://localhost:8080/findAll').then(
						a => (
							this.info = a.data
						)
					).catch(function(e){
						console.log(e)
					})
				}
			}); */
			
		</script>
	</body>
</html>

package com.jt.controller;

import com.jt.pojo.User;
import com.jt.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;

import java.util.List;

@RestController
@CrossOrigin  //开启跨域机制
public class UserController {
   
    @Autowired
    private UserService