Vue ajax (axios)

最新推荐文章于 2024-06-17 18:10:25 发布

Heartack

最新推荐文章于 2024-06-17 18:10:25 发布

阅读量253

点赞数 1

本文链接：https://blog.csdn.net/qq_22189479/article/details/90452971

版权

axios-0.18.0.js可以导入jar

<dependency>
    <groupId>org.webjars.npm</groupId>
    <artifactId>axios</artifactId>
    <version>0.18.0</version>
</dependency>

vuejs-2.5.16.js可以导入

dependency>
    <groupId>org.webjars.bowergithub.vuejs</groupId>
    <artifactId>vue</artifactId>
    <version>2.5.16</version>
</dependency>

 <script src="webjars/vue/dist/vue.min.js"></script>
  <script src="webjars/axios/0.18.0/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
    <table border="1">
        <tr>
            <td>{{name}}</td>
        </tr>
        <tr v-for="u in userList">
            <td>{{u.id}}</td>
            <td>{{u.username}}</td>
            <td>{{u.password}}</td>
            <td>{{u.sex}}</td>
            <td>{{u.age}}</td>
            <td>{{u.email}}</td>
        </tr>
    </table>
</div>
<script>
    new Vue({
        el:'#app',
        data:{
            name:"wjc",
            user: {id:"",username:"aaa",password:"",age:"",sex:"",email:""},
            userList:[]
        },
        methods:{
            //查询所有
            findAll:function () {
                var _this=this;
                axios.post('http://localhost:8080/findAll').then(function (response) {
                        _this.userList = response.data;//响应数据给userList赋值
                        console.log( _this.userList);
                    })
                    .catch(function (error) {
                        console.log(error);
                    })
            }
        },
         findById:function (userid) {
            //在当前方法中定义一个变量，表明是vue对象
            var _this = this;
            axios.get('http://localhost:8080/findById',{params:{id:userid}})
                .then(function (response) {
                    _this.user = response.data;//响应数据给userList赋值
                    $("#myModal").modal("show");
                })
                .catch(function (error) {
                    console.log(error);
                })
        },
        update:function (user) {//post请求
            //在当前方法中定义一个变量，表明是vue对象
            var _this = this;
            axios.post('http://localhost:8080/updateUser', _this.user)
                .then(function (response) {
                    _this.findAll();
                })
                .catch(function (error) {
                    console.log(error);
                });
        }
        created:function() {//当我们页面加载的时候触发请求，查询所有
            this.findAll();
        }
    })
</script>
</body>

Heartack

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
3
评论
Vue ajax (axios)

axios-0.18.0.js可以导入jar<dependency> <groupId>org.webjars.npm</groupId> <artifactId>axios</artifactId> <version>0.18.0</version></dependency&gt...
复制链接

扫一扫