目录
1.axios请求实例
1、vue前端代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>ajax例子</title>
</head>
<body><div id="app"><ul><li v-for="(item, index) in users" >{{item}}</li></ul></div><script src="./node_modules/vue/dist/vue.js"></script><script src="./node_modules/axios/dist/axios.js"></script><script>new Vue({el:"#app",data(){return{users:[]}},mounted() {this.getUserList();},methods: {//获取用户列表getUserList(){axios.get("http://localhost:8080/api/user/getUserList").then(response =>{console.info(response);this.users = response.data.data;}).catch(function(error){console.info(error);})}},})</script>
</body>
</html>
2、服务端提供接口代码
package com.example.testajaxdemo.controller;import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;import java.util.ArrayList;
import java.util.List;@Controller
@RequestMapping("/api/user")
@CrossOrigin(origins = "*")
public class UserController {@RequestMapping(value = "/getUserList", method = RequestMethod.GET)@ResponseBodypublic ResultBean<List<String>> getUserList(){List<String> userlist = new ArrayList<>();userlist.add("张三");userlist.add("李四");userlist.add("王五");userlist.add("小明");return ResultBean.success(userlist);}
}