axios的增删改查。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="../vue.js"></script>
<script src="../node_modules/axios/dist/axios.js"></script>
<style>
td,tr{
width: 50px;
height: 30px;
border: 1px solid black;
text-align: center;
line-height: 30px;
}
input{
width: 40px;height: 30px;
border:none;
outline: none;
}
</style>
</head>
<body>
<div id="box">
<table>
<tr>
<td>名字</td>
<td>
<input type="text" v-model="name">
</td>
<td>年龄</td>
<td>
<input type="text" v-model="age">
</td>
</tr>
<tr v-for='item in list' :key="item.id">
<td>
{{item.name}}
</td>
<td>
{{item.age}}
</td>
<td>
<button @click='del(item.id)'>del</button>
</td>
<td>
<button @click='update(item.id)'>update</button>
</td>
</tr>
<tr>
<td>
<button @click='add'>add</button>
</td>
<td colspan="">
{{msg}}
</td>
</tr>
</table>
</div>
<script>
new Vue({
el:'#box',
data:{
list:[],
name:'',
age:'',
msg:''
},
created() {
this.getData();
},
methods:{
init(){
this.name='';
this.age='';
},
getData(){
axios.get('http://localhost:3000/users').then((res)=>{
this.list = res.data;
})
},
add(){
if(this.name&&this.age){
axios.post('http://localhost:3000/users',{
"name": this.name,
"age": this.age,
},{
Headers:{ "Content-Type":'application/json' }
}).then((res)=>{
this.init();
this.msg='添加成功';
this.getData();
})
}else{
this.msg='输入不能为空';
}
},
del(id){
axios.delete('http://localhost:3000/users/'+id).then((res)=>{
this.getData();
})
},
update(id){
let updateMsg = {};
if( this.name){
updateMsg.name = this.name; }
if(this.age){
updateMsg.age = this.age;
} axios.patch('http://localhost:3000/users/'+id,updateMsg,{
Headers:{"Content-Type":'application/json' }
}).then((res)=>{
this.init();
this.msg='修改成功';
this.getData();
}) }
}
})
</script>
</body>
</html>
axios的增删改查。的更多相关文章
- axios和drf结合的增删改查
增删改查 查: 前端实例: mounted() { //获取所有数据 // var Base_url = 'http://paas.bktst.sh.sgcc.com.cn/t/files-check ...
- VUE2.0增删改查附编辑添加model(弹框)组件共用
Vue实战篇(增删改查附编辑添加model(弹框)组件共用) 前言 最近一直在学习Vue,发现一份crud不错的源码 预览链接 https://taylorchen709.github.io/vue- ...
- vue.js带复选框表单的增删改查
近段时间由于公司项目要求,前端开始使用VUE框架进行开发,最近刚开始学习,做了一个表单的增删改查,和大家分享一下. 页面模型代码设计如下 <template> <div id=&qu ...
- 后盾网lavarel视频项目---lavarel使用模型进行增删改查操作
后盾网lavarel视频项目---lavarel使用模型进行增删改查操作 一.总结 一句话总结: 使用模型操作常用方法 查一条:$model=Tag::find($id); 删一条:Tag::dest ...
- SpringBoot-Vue实现增删改查及分页小DEMO
前言 主要通过后端 Spring Boot 技术和前端 Vue 技术来简单开发一个demo,实现增删改查.分页功能以及了解Springboot搭配vue完成前后端分离项目的开发流程. 开发栈 前端 开 ...
- vue.js+element ui Table+spring boot增删改查
小白初学,不懂的还是太多了,找了好多资料才做出来的先记录一下 1.先用Spring boot创建一个包含了增删改查的项目 2.创建vue.js项目 3.安装Element UI (1)进入项目文件夹下 ...
- vue+express+mongodb 实现 增删改查
一.创建一个vue项目 用脚手架vue-cli搭建一个项目,数据请求用axios方式,写几个按钮用来调接口(vue这块不做多解释,不懂的可以先去官网学习vue-cli:https://cli.vuej ...
- Dapper逆天入门~强类型，动态类型，多映射，多返回值，增删改查+存储过程+事物案例演示
Dapper的牛逼就不扯蛋了,答应群友做个入门Demo的,现有园友需要,那么公开分享一下: 完整Demo:http://pan.baidu.com/s/1i3TcEzj 注 意 事 项:http:// ...
- ASP.NET从零开始学习EF的增删改查
ASP.NET从零开始学习EF的增删改查 最近辞职了,但是离真正的离职还有一段时间,趁着这段空档期,总想着写些东西,想来想去,也不是很明确到底想写个啥,但是闲着也是够 ...
随机推荐
- February 15th, 2018 Week 7th Thursday
Every orientation presupposes a disorientation. 迷失过方向,才能找到方向. Not until we are lost do we begin to u ...
- （转）Spring Boot(十七)：使用 Spring Boot 上传文件
http://www.ityouknow.com/springboot/2018/01/12/spring-boot-upload-file.html 上传文件是互联网中常常应用的场景之一,最典型的情 ...
- 设计模式のMediatorPattern（中介者模式）----行为模式
一.产生背景 从生活中的例子可以看出,不论是QQ游戏还是QQ群,它们都是充当一个中间平台,QQ用户可以登录这个中间平台与其他QQ用户进行交流,如果没有这些中间平台,我们如果想与朋友进行聊天的话,可能就 ...
- centos 防火墙的操作
systemctl start firewalld systemctl restart firewalld systemctl status firewalld systemctl enable fi ...
- ASP.NET 应用程序遭遇Server Application Unavailable问题的解决的方法
公司服务器有.NET2的应用在执行,而我使用了.NET4平台开发,本机測试没问题,扔服务器发现要么我的新平台不好使,要么.NET2的旧平台不好使,各种重新启动IIS服务和WWW服务都无济于事 当我意识 ...
- Python打包—Pyinstaller
2018-09-27 21:12:05 一 前言 在windows平台学习python的过程中,你肯定会遇到需要把.py脚本打包成.exe的情形,如此,至少有两方面的好处:第一,你的代码保密性更好 ...
- 理解 tf.Variable、tf.get_variable以及范围命名方法tf.variable_scope、tf.name_scope
tensorflow提供了通过变量名称来创建或者获取一个变量的机制.通过这个机制,在不同的函数中可以直接通过变量的名字来使用变量,而不需要将变量通过参数的形式到处传递. 1. tf.Variable( ...
- python入门学习：5.字典
python入门学习:5.字典 关键点:字典 5.1 使用字典5.2 遍历字典5.3 嵌套 5.1 使用字典 在python中字典是一系列键-值对.每个键都和一个值关联,你可以使用键来访问与之相关 ...
- 【vue】vue +element 搭建及开发中项目中，遇到的错误提示
1. import Layout from '@/views/layout/Layout'; export default [ { // 配置路由,当路径为'/activePublic',使用组件ac ...
- 【vue】钩子函数生命周期
图1 图2: 图3 相关资料:http://www.zhimengzhe.com/Javascriptjiaocheng/236707.html https://segmentfault.com ...