<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>
django_show.vue
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:django+vue 基础框架 :vue - Python技术站