如何用axios加后端数据库传值给前端
小杰笔记:
如何用axios :
第一步:编写数据库实体类
@Data @AllArgsConstructor @NoArgsConstructor public class User { private Integer id; private String name; private Integer tid; }
2:编写接口方法:
//表示是mybatis的注解类 @Mapper @Component public interface UserMapper { //查找全部元素方法 List<User> queryList(); }
3:编写server层:
public interface UserMapperImp { List<User> queryList(); }
实现类:
@Service public class Server implements UserMapperImp{ @Autowired UserMapper userMapper; @Override public List<User> queryList() { return userMapper.queryList(); } }
安装axios:npm install axios
安装完成编写html文件:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> </head> <body> <div id="app"> <button @click="getStudents" style="margin: auto;">演示</button> <table border="1" cellpadding="0" style="margin: auto;"> <tr> <td>id</td> <td>name</td> <td>tid</td> </tr> <tr v-for="Student in msg" > <td >{{Student.id}}</td> <td >{{Student.name}}</td> <td >{{Student.tid}}</td> </tr> </table> </div> </body> </html>
和JavaScript:
<script> var vm = new Vue({ el: "#app", data: { msg: null }, methods:{ getStudents: function () { var that = this; axios.get("http://localhost:8080/jie ")//自己的url .then(function (response) { that.msg = response.data; }).catch(function (reason) { alert("error"); }); } } }); </script>
显示: