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
  • 相关阅读:
    从Oracle提供两种cube产品说开
    Sql Server DWBI的几个学习资料
    Unload Oracle data into text file
    初学Java的几个tips
    我常用的Oracle知识点汇总
    benefits by using svn
    如何在windows上使用putty来显示远端linux的桌面
    building commercial website using Microsoft tech stack
    Understand Thread and Lock
    Update google calendar by sunbird
  • 原文地址:https://www.cnblogs.com/qq128/p/12071996.html
Copyright © 2011-2022 走看看