zoukankan      html  css  js  c++  java
  • django+vue 基础框架 :vue

    <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
  • 相关阅读:
    学习资料(干货汇集)
    Android安全系列之:如何在native层保存关键信息
    IntelliJ IDEA 2019 快捷键终极大全,速度收藏!
    【转】45个实用的JavaScript技巧、窍门和最佳实践
    Android中jsoup的混淆规则【转】
    Android WebServer相关项目
    【转】实战nanoHTTPD嵌入android app(3)
    【.net 深呼吸】程序集的热更新
    【WCF】使用“用户名/密码”验证的合理方法
    【Win 10 应用开发】应用预启动
  • 原文地址:https://www.cnblogs.com/qq128/p/12071996.html
Copyright © 2011-2022 走看看