day07-08---axios

基本的请求方式

@RequestMapping 接收所有类型请求
四种请求类型
get
post
put
delete

 /**
     * 获取id
     * URL:http://localhost:8090/getUserById?id=100
     */
    @RequestMapping("getUserById")
    public String getUserById(Integer id) {
        return "动态获取参数" + id;
    }

    /**
     * 传对象
     * URL:http://localhost:8090/getUser?id=100&name=tomcat&age=300&sex=nan
     */
    @RequestMapping("getUser")
    public User getUser(User user) {
        return user;
    }

请求类型

请求类型是程序员按要求进行控制,按照业务要求选择

1. 分类A (get/delete 语法相同)
   1.get 请求实现查询
   2.delete 请求实现删除

2. 分类B (put/post 语法相同)
   1.put 请求实现修改
   2.post 请求实现新增

restFul请求风格

RestFul风格实现CRUD
1.查询 http://localhost:8090/user/100 type:GET
2.新增 http://localhost:8090/user/tomcat/18/男 type:POST
3.删除 http://localhost:8090/user/100 type:DELETE
4.更新 http://localhost:8090/user/mysql/100 type:PUT

restFul实现查询

@RequestMapping默认接收所有请求 RestFul语法:
1.参数的位置固定
2.参数必须使用{}包裹
3.必须使用**@PathVariable**动态的接收参数
restFul的优化:
如果{参数名称} 与对象中的属性名称一致,
则SpringMVC动态为对象赋值,@PathVariable可以省略
注意事项:前端传值和后端接收值数量必须一致,不然报错404

/**
     * RestFul实现用户查询
     * URL: http://localhost:8090/user/100
     * type:GET
     *
     * @RequestMapping默认接收所有请求 RestFul语法:
     * 1.参数的位置固定
     * 2.参数必须使用{}包裹
     * 3.必须使用@PathVariable动态的接收参数
     * 注意事项:{参数名称} 必须与方法中的名称一致
     */
//    @RequestMapping(value = "/user",method = RequestMethod.GET )
    @GetMapping("/user/{id}")
    public String restFulGet(@PathVariable Integer id) {
        return "restFul动态获取的参数:" + id;
    }
    /**
     * 需求: 查询name=tomcat age=18  sex=女的用户
     * <p>
     * URL: http://localhost:8090/user/tomcat/18/女
     * restFul的优化:
     * 如果{参数名称} 与对象中的属性名称一致,
     * 则SpringMVC动态为对象赋值,@PathVariable可以省略
     * <p>
     * 注意事项:前端传值和后端接收值数量必须一致,不然报错404
     */
    @GetMapping("/user/{name}/{age}/{sex}")
//public User restFulGetUser(@PathVariable String name,
//                           @PathVariable Integer age,
//                           @PathVariable String sex){
    public User restFulGetUser(User user) {
        return user;
    }

Axios

axios.get() restFul风格实现的动态传参数 实现查询

restFul风格实现业务的传参
URL http://localhost:8090/axios/user/tomcat/18
注意: 用模板字符串里面的参数应该是动态获取

/**
			 * restFul风格实现业务的传参
			 * URL  http://localhost:8090/axios/user/tomcat/18
			 * 注意: 用模板字符串里面的参数应该是动态获取
			 */
			let name = "tomcat"
			let age = 18
			axios.get(`http://localhost:8090/axios/user/${name}/${age}`)
			.then(function(result){
				console.log(result.data)
			})

后端代码

 /**
     * restFul 风格
     * http://localhost:8090/axios/user/${name}/${age}
     */
    @GetMapping("/axios/user/{name}/{age}")
    public User getUser(User user) {
        return user;
    }

axios.get()传递对象 实现查询

前端代码
axios.get(“url”, {params : user})
.then(function(result) { })

			/**
			 * 带参数的数据传递 params对象方式
			 * URL   http://localhost:8090/axios/user/getUserObj
			 */

			let user ={
				name: "mysql",
				age: 18,
				sex: "女"
			}
			
			axios.get("http://localhost:8090/axios/user/getUserObj", { //key:value  key固定是params
				params : user
			}).then(function(result) {
				console.log(result.data)
			})

后端代码

/**
     * URL   http://localhost:8090/axios/user/getUserObj
     */
    @GetMapping("/axios/user/getUserObj")
    public User getUserObj(User user) {

        return user;
    }

axios.delete() 请求实现删除

Axios-delete请求
删除的语法结构和Get请求语法一致

不带参数的删除
axios.delete(“url地址”).then(function(){})

携带参数个别参数 ?id=100
axios.delete(“url?id=100”).then(function(){})
axios.delete(url?${id}).then(function(){}) 使用模板函数

采用传对象删除
let 对象 = {key:value,key:value,key:value}
axios.delete(“url”,{params:封装对象})

axios.post() 请求实现新增

前端: 传递参数时不用写params 直接写参数

let user = {
				name:"post请求",
				age:20,
				sex:"女"
			}
			let url ="http://localhost:8090/axios/insertUser" 
			axios.post(url,user)//不用写params  直接写user
			.then(function(result){
				console.log(result)
			})

后端 :
post请求接收
post请求实现数据的入库
URL http://localhost:8090/axios/insertUser
参数:“user对象结构”
返回值:user对象

前端发起post请求方式,则传递的数据是一个Json串
常规参数: id=100 name=“post请求” age=20
post请求: {name: “post请求”, age: 20, sex: “女”}
前端post请求方式传递对象时一个JSON串

解决方法:
1.把对象转换为JSON @ResponseBody
2.JSON串转换为对象 @RequestBody

/**
     * post请求接收
     * post请求实现数据的入库
     * URL http://localhost:8090/axios/insertUser
     * 参数:"user对象结构"
     * 返回值:user对象
     *
     * 前端发起post请求方式,则传递的数据是一个Json串
     * 常规参数: id=100 name="post请求" age=20
     * post请求: {name: "post请求", age: 20, sex: "女"}
     *
     * 前端post请求方式传递对象时一个JSON串
     * 解决方法:
     * 1.把对象转换为JSON   @ResponseBody
     * 2.JSON串转换为对象   @RequestBody
     */
    @PostMapping("/axios/insertUser")
    public User insertUser(@RequestBody User user) {
        return user;
    }

箭头函数

箭头函数 主要简化回调函数的写法
思路:重复的固定的可以简化
axios.get(url).then((result,aa,bb,cc) => {console.log(result.data)})
规则:如果参数只有一个则括号可以省略 (常见!!!)
axios.get(url).then(result => {console.log(result.data)})

		let url = "http://localhost:8090/axios/getUserById?id=100"
		axios.get(url).then(result => {console.log(result.data)})

async-await 简化

/**
		 * async-await 简化
		 * async 需要标识一个函数
		 * await 需要标识ajax请求
		 */
		async function getUserById(){
			let url = "http://localhost:8090/axios/getUserById?id=100"
			let obj= await axios.get(url)//obj为promise对象
			console.log(obj.data)
			
			//解构赋值  提取其中有价值的数据
			let {data: resultData} = await axios.get(url)
			// let {data: resultData,status:code} = await axios.get(url)
			console.log(resultData)
			// console.log(code)
			
		}
		//调用方法
		getUserById()

定义axios基本请求路径 (设定公共的请求前缀)

	axios.defaults.baseURL = "http://localhost:8090"

关于VUE+Axios练习

需求:
1.利用VUE.js构建页面
2.利用Axios实现userList数据获取,利用VUE.js