在 RestFul API 中,前后端是分离的,后端不在负责视图的渲染,只负责返回指定的前端请求后端 Rest 风格的 API,后端接收到前端的请求之后,会根据请求方法类型,参数执行一些对应的操作。然后返回 JSON 格式的数据给前端。前端使用 ajax 技术发送 http 请求,可以使用原生的 API,比如 xhr、fetch、Promise API。Jquery 中的 $.ajax,以及现在常用的第三方 http 库 axios
我在 application.yml 中定义的端口是 3030,所以之后的请求都会以 http://localhost:3030
作为根路径,在下面我写好了一个最简单的 API,然后我们启动项目
@CrossOrigin
@RestController
public class StartController {
@RequestMapping("/")
public String Test() {
return "hello";
}
}
如果你看到这个页面,说明项目启动成功了。
接下来给大家解释一下这个项目的注解
其他的请求方式都是一样的,这里我们以 GET 请求为示例
// 不带参数,一般获取参数所有数据
@GetMapping("/get")
public String testGet() {
return "我是 GET 请求";
}
// 携带请求参数,携带参数获取数据
@GetMapping("/get/params")
public String test (@RequestParam("name") String name) {
return "名称" + name;
}
// RestAPI,获取请求路径中的数据。 一般用来请求单条数据
@GetMapping("/get/{id}")
public String testGet1(@PathVariable("id") Integer id) {
return "id:" + id;
}
// 接收实体参数,只要与实体的属性一一对应,就可以接收。 以实体类的形式接受参数
@GetMapping("/get/model")
public Map<String,Object> testGet2(@ModelAttribute User user) {
Map<String,Object> map = new HashMap<>();
map.put("user",user);
map.put("code",200);
map.put("msg","请求成功~");
return map;
}
// 接受 JSON格式的实体类
@GetMapping("/get/json/data")
public Map<String,Object> testGet3(@RequestBody User user) {
Map<String,Object> map = new HashMap<>();
map.put("user",user);
map.put("code",200);
map.put("msg","请求成功~");
return map;
}
axios 基本使用
我们看下官网的使用说明
实例方法
以下是可用的实例方法。指定的配置将与实例的配置合并。
axios#request(config)
axios#get(url[, config])
axios#delete(url[, config])
axios#head(url[, config])
axios#options(url[, config])
axios#post(url[, data[, config]])
axios#put(url[, data[, config]])
axios#patch(url[, data[, config]])
实例配置
{
url: '/user',
methods: 'GET',
data: {
"username": "abc",
"password": "123321"
}
...
}
示例:
// 直接请求 GET
axios.get('/user')
// 请求参数会在 url 中显示: /user?username=admin&password=123456
axios.get("/user",{
params: {
"username" : "admin",
"password": "123456"
}
})
// 使用配置的方式配置请求参数, 请求参数会以 JSON 字符串的形式传递,如果 header 中设置了 Content-Type 为 form 表单,就可以使用普通的参数接收
axios({
url: '/user',
methods: 'post',
data: {
"username": "admin",
"password": "123321"
},
},{
headers: {
"token": "123321"
}
})
后端代码接收不带参数的 get 请求
// 不带参数
@GetMapping("/get")
public String testGet() {
return "我是 GET 请求";
}
前端编写 ajax
async function testGetAsync() {
// GET 请求,不带参数
const {
data: res} = await this.axios.get("http://localhost:3030/get")
console.log(res)
}
运行结果
// 携带请求参数
@GetMapping("/get/params")
public String test (@RequestParam("name") String name) {
return "名称" + name;
}
前端 ajax 代码
// GET 请求,携带参数
const {
data: res1} = await this.axios.get('http://localhost:3030/get/params',{
params: {
name: 'coco'
}
})
console.log(res1)
get 请求携带参数,我们可以发现请求路径的变化,请求参数是可以看得到的
响应结果
补充说明,这种请求路径携带参数的方式是标准的 Restful API 格式,一般在 get 请求中获取 单个数据,或者 delete 方法中删除 一条记录使用的比较多
后端代码
// RestAPI,获取请求路径中的数据
@GetMapping("/get/{id}")
public String testGet1(@PathVariable("id") Integer id) {
return "id:" + id;
}
前端 ajax 代码
// 路径携带参数,请求路径我使用 ES6 中的新语法编写的
const {
data: res2} = await this.axios.get(`http://localhost:3030/get/3`)
console.log(res2)
响应结果
以上便是 GET 请求使用比较多的地方
在 RestFul API 中,一般用来提交 FORM 表单用到的会比较多。并且使用 post 请求携带的参数也比 get 请求更多。我在写项目当中,post 请求常常会用来做登录表单提交,数据添加等等
为了测试方便,我编写了一个如下的实体类。为了避免不必要的麻烦,在这里我一般不会去写构造函数
public class User {
private String username;
private Integer age;
private String password;
//getter、setter,toString 方法省略
}
后端代码
// 接收实体参数,只要与实体的属性一一对应,就可以接收
@PostMapping("/post/model")
public Map<String,Object> testPost(@RequestBody User user) {
System.out.println("实体:"+user.toString());
Map<String,Object> map = new HashMap<>();
map.put("user",user);
map.put("code",200);
map.put("msg","请求成功~");
return map;
}
前端 ajax 代码
// 接收实体类
const {
data: res3} = await this.axios.post('http://localhost:3030/post/model',{
age: 12,
username: "admin",
password: "123321"
})
补充说明
application/x-www-form-urlencoded;charset=UTF-8
PUT 请求在 Restful API 中常用来更新数据,使用这个我们就能区别开 POST 请求了,使用方式和 POST 请求几乎是一致的
后端代码
@PutMapping("/put/data")
public Map<String,Object> testGet3(@RequestBody User user) {
Map<String,Object> map = new HashMap<>();
map.put("user",user);
map.put("code",200);
map.put("msg","接收到了 put 请求,实体类封装成功~");
return map;
}
前端代码
const {
data: res4} = await this.axios.put('http://localhost:3030/put/data',{
age: 3,
username: "coco",
password: "adada"
},{
headers: {
"token": "123123131231dadawdw"
}
})
console.log(res4)
DELETE 请求用来删除一条记录中的数据, 和 GET 请求一样用于获取 url 中的参数
后端代码
@DeleteMapping("/delete/{id}")
public String testDelete(@PathVariable("id") Integer id) {
return "delete:" + id;
}
前端代码
const {
data: result} = await this.axios.delete(`http://localhost:3030/delete/${
5}`)
console.log(result)
运行效果
好了,今天的内容到这里就结束了~
如果大家有想知道的都可以提出来哦