<template>

    <div>

        <p>用户名:<input type="text" v-model="name"></p>

        <p>密码:<input type="password" v-model="pwd"></p>

        <p>年龄:<input type="text" v-model="age"></p>

        <p>爱好:<input type="text" v-model="hobby"></p>

        <p>身高:<input type="text" v-model="height"></p>

        <p>手机号:<input type="text" v-model="phone"></p>

        <input type="button" value="编辑" @click="updata()">

        <input type="button" value="删除" @click="del()">

    </div>

</template>

<script>

import axios from "axios"   //导报axios方法

export default {

    name:"django_show",

    data(){             //函数名，可以是a或b或者其他

        return{         //必须要用return来返回你要定义上方页面展示绑定的的空值，一般都是以字典格式

            name:'',

            pwd:'',

            age:'',

            hobby:'',

            height:'',

            phone:'',

        }

    },

    methods:{

        show_user(){

            let id=this.$route.params.id        //这条语句是接收路由传参，如果没有路由传参，可以let 一个名字=  new FormData()

            axios({

                url:'http://127.0.0.1:8000/day01/zs/',

                method:'get',

                params:{"id":id}    //路由传参才会用到这一条，在路由传参中这条也可以不写。。。。//如果你上方是et 一个名字= new FormData()，那么此处就可以data:FormData()

            }).then(res=>{              //.then是用来接收后端返回到前端的Response，而res代表的是后端返回的所有数据，=>是箭头函数，记住这是死格式，如果要接受后端是数据必须用箭头函数

                console.log(res.data)           //console.log是显示你需要的结果，res.data是指res中你定义的data字典，这条语句的作用是打印res.data这个字典中所有的值

                if(res.data.code==200){         //判断一下，res中data中code如果等于200，那么就执行下边的操作

                    this.name=res.data.data.name        //this.name是指上方data中return的name，让this.name来接收res中data里data.name，这样就可以渲染到页面

                    this.pwd=res.data.data.pwd

                    this.age=res.data.data.age

                    this.hobby=res.data.data.hobby

                    this.height=res.data.data.height

                    this.phone=res.data.data.phone

                }

            })

        },

        updata(){

            var from_data=new FormData()        //var一个 from_data变量名，类型为FormData，也就是列表

            from_data.append("name1",this.name)          //这条语句的意思是吧data中return的name添加到列表中的name1中，name1只是个名字

            from_data.append("pwd",this.pwd)

            from_data.append("age",this.age)

            from_data.append("height",this.height)

            from_data.append("phone",this.phone)

            from_data.append("hobby",this.hobby)

            axios({

                url:'http://127.0.0.1:8000/day01/xg/',

                method:"post",

                data:from_data

            }).then(res=>{

                if(res.data.code==200){

                    this.$router.push({path:"/django_login"})

                }else{

                    alert(res.data.code)

                }

            })

        },

        del(){

            var from_data =new FormData()

            from_data.append("name",this.name)

            axios({                                  //axios是往后端发送

                url:'http://127.0.0.1:8000/day01/sc/',

                method:"get",       //以get方式

                data:from_data      //把from_data的值发送到后端，让后端做一些相对的操作

            }).then(res=>{

                console.log

                if(res.data.code==200){

                    this.$router.push({path:"/django_login"})   //这个为如果res.data.code为200，就跳转到/django_login这个页面“this.$router.push({path:"/django_login"})”是固定格式

                }else{

                    alert("失败了傻逼")

                }

            })

        }

    },

    created(){

        this.show_user()

    }

}

</script>