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
django+vue 基础框架 :vue的更多相关文章
- Vue基础之Vue组件
Vue基础之Vue组件 // 组件是可以复用的Vue实例! // 可以把经常重复的功能封装为组件!
- Vue基础之Vue的模板语法
Vue基础之Vue的模板语法 数据绑定 01 数据绑定最常见的形式就是使用插值表达式(两个大括号!)[也就是小胡子语法!mustache] <body> <!-- Vue.js的应用 ...
- django+vue基础框架:django one对one格式
创建app:python manage.py startapp app01(这里的app01是指名字,可以是a或b等等) 生成迁移文件:python manage.py makemigrations ...
- Vue基础框架
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <!-- 设置语言为 ...
- vue基础篇---vue组件《2》
定义全局组件 我们通过Vue的component方法来定义一个全局组件. <div id="app"> <!--使用定义好的全局组件--> <coun ...
- vue基础篇---vue组件
vue模块第一篇,因为公司马上要用到这vue开发.早就想好好看看vue了.只有实际工作中用到才会进步最快.vue其他的简单指令就不多讲了,没啥意思,网上一大堆.看w3c就ok. 组件这个我个人感觉坑蛮 ...
- vue 前端框架 目录
vue 前端框架 目录 vue-目录 ES6基础语法 vue基础语法 Vue.js的组件化思想 —上 Vue.js的组件化思想 —下 Vue + Vue-Router结合开发 SublimeSer ...
- python 全栈开发,Day89(sorted面试题,Pycharm配置支持vue语法,Vue基础语法,小清单练习)
一.sorted面试题 面试题: [11, 33, 4, 2, 11, 4, 9, 2] 去重并保持原来的顺序 答案1: list1 = [11, 33, 4, 2, 11, 4, 9, 2] ret ...
- vue - vue基础/vue核心内容(终结篇)
今天是vue基础.vue核心内容第三天,也是最后一天,后面开始进入组件化学习,整个基础内容以生命周期的结束而结束,不得不说,张天禹把这节课讲活了,开始觉得vue是一个有生命的东西,包括前面所说的很多脏 ...
随机推荐
- Docker最全教程---从理论到实战
目录 前言 随着生产力的发展尤其是弹性架构的广泛应用(比如微服务),许多一流开发者都将应用托管到了应用容器上,比如Google.微软.亚马逊.腾讯.阿里.京东和新浪. 从未来的发展方向来看,容器引擎将 ...
- 测试并整理的 Airpods Pro 刻字可用的最全特殊符号
天气符号 ☉ 文化符号 卍卐 办公室符号 № ℗ ℡ ℀ ℅ ™ © ® ‰ ¶ § 技术符号 ⇧ 打勾符号 ˇ ∨ √ 人的符号 ♀ ♂ ヅ ツ ü 星星符号 ☆ ★ ✽ 箭头符号 ↖ ↗ ↘ ...
- 题解【Vijos1159】岳麓山上打水
题面 迭代加深搜索模板题. 注意开始时要先对桶的容量从小到大排序. 达到搜索层数时使用完全背包\(\text{check}\)即可. 具体实现参考代码. #include <bits/stdc+ ...
- LED Craft Light - How To Solve: Home Decoration Lighting
Home décor usually comes with a certain period of theme or a specific style of furniture, which will ...
- ASPxDashboardViewer_OnDashboardLoaded 修改Item参数
protected void ASPxDashboardViewer_OnDashboardLoaded(object sender, DashboardLoadedWebEventArgs e) { ...
- codeforces 1269D. Domino for Young (二分图证明/结论题)
链接:https://codeforces.com/contest/1269/problem/D 题意:给一个不规则的网格,在上面放置多米诺骨牌,多米诺骨牌长度要么是1x2,要么是2x1大小,问最多放 ...
- Python MonkeyRunner 连接设备总是返回连接成功问题
device = mr.waitForConnection(1,deviceName) 当使用waitForConnection时,不管设备是否连接,device总是返回一个对象,所以没有办法通过 i ...
- HTML的内联框架(iframe)
HTML的内联框架(iframe) 第一种:打开网页就是带内联框架的页面 可以实现在自己的网页内部,打开另一个网页 语法: <!--src:地址frameborder:0为无边框:1为有边框-- ...
- Virtual Judge HDU 1241 Oil Deposits
八方向 深搜 #include <iostream> #include<cstdio> #include<cstdlib> #include<algori ...
- IntelliJ IDEA如何导入jar包
转自:https://jingyan.baidu.com/article/0f5fb0993e9e1f6d8334ead2.html 通过这种方式导入jar包,idea就能百分百识别到,如果是那种直接 ...