第七周总结-vue脚手架整合SSM-路由配置

使用axios异步

<template>
<div><h1>用户列表</h1>
<table border="1">
    <tr>
        <td>编号</td>
        <td>姓名</td>
        <td>年龄</td>
        <td>生日</td>
        <td>操作</td>
    </tr>
    <tr v-for="user in users">
    <td>{{user.id}}</td>
    <td>{{user.name}}</td>
    <td>{{user.age}}</td>
    <td>{{user.bir}}</td>
    <td><a href="javascript:;" @click="delRow(user.id)">删除</a><a :href="'#/user/edit?id='+user.id">修改</a></td>
    </tr>
</table>
<router-link to="/user/add">添加</router-link>
<router-view></router-view>
</div>

</template>
<script>
export default{
    name:"User",
    data(){
        return {
    users:[]
        }
    },
    components:{},
    methods: {

        findAll(){
    this.$http.get("http://localhost:8080/users").then((res)=>{
            console.log(res.data);
            this.users=res.data.results;
        })
        },
        delRow(id){
            console.log(id)
            this.$http.delete("http://localhost:8080/users/"+id).then(res=>{
                console.log(res)
                if(res.data.success){
                this.findAll()
                }
            })
        }
    },
    created() {
        this.findAll();
    },
    watch:{
        $route:{
            handler:function(val,oldVal){
                console.log(val)
                if(val.path=="/user")
                {
                    this.findAll()
                }
            },
            //深度观察监听
            deep:true
        }
    }

}
</script>
<style></style>