如何用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>

显示：

 

posted @ 2021-03-22 13:55  小杰i  阅读(205)  评论(0)  编辑  收藏  举报