小杰笔记：
如何用axios ：
第一步：编写数据库实体类
@Data
@AllArgsConstructor
@NoArgsConstructor
public class User {
private Integer id;
private String name;
private Integer tid;
}
2：编写接口方法：
//表示是mybatis的注解类
@Mapper
@Component
public interface UserMapper {
//查找全部元素方法
List queryList();
}
3：编写server层：
public interface UserMapperImp {
List queryList();
}
实现类：
@Service
public class Server implements UserMapperImp{
@Autowired
UserMapper userMapper;
@Override
public List queryList() {
return userMapper.queryList();
}
}
安装axios：npm install axios
安装完成编写html文件：
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<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>idtd>
<td>nametd>
<td>tidtd>
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>
Original: https://www.cnblogs.com/yunjie0930/p/14565718.html
Author: 小杰i
Title: 如何用axios加后端数据库传值给前端
原创文章受到原创版权保护。转载请注明出处：https://www.johngo689.com/576418/
转载文章受原作者版权保护。转载请注明原作者出处！