<!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的增删改查。的更多相关文章

  1. axios和drf结合的增删改查

    增删改查 查: 前端实例: mounted() { //获取所有数据 // var Base_url = 'http://paas.bktst.sh.sgcc.com.cn/t/files-check ...

  2. VUE2.0增删改查附编辑添加model(弹框)组件共用

    Vue实战篇(增删改查附编辑添加model(弹框)组件共用) 前言 最近一直在学习Vue,发现一份crud不错的源码 预览链接 https://taylorchen709.github.io/vue- ...

  3. vue.js带复选框表单的增删改查

    近段时间由于公司项目要求,前端开始使用VUE框架进行开发,最近刚开始学习,做了一个表单的增删改查,和大家分享一下. 页面模型代码设计如下 <template> <div id=&qu ...

  4. 后盾网lavarel视频项目---lavarel使用模型进行增删改查操作

    后盾网lavarel视频项目---lavarel使用模型进行增删改查操作 一.总结 一句话总结: 使用模型操作常用方法 查一条:$model=Tag::find($id); 删一条:Tag::dest ...

  5. SpringBoot-Vue实现增删改查及分页小DEMO

    前言 主要通过后端 Spring Boot 技术和前端 Vue 技术来简单开发一个demo,实现增删改查.分页功能以及了解Springboot搭配vue完成前后端分离项目的开发流程. 开发栈 前端 开 ...

  6. vue.js+element ui Table+spring boot增删改查

    小白初学,不懂的还是太多了,找了好多资料才做出来的先记录一下 1.先用Spring boot创建一个包含了增删改查的项目 2.创建vue.js项目 3.安装Element UI (1)进入项目文件夹下 ...

  7. vue+express+mongodb 实现 增删改查

    一.创建一个vue项目 用脚手架vue-cli搭建一个项目,数据请求用axios方式,写几个按钮用来调接口(vue这块不做多解释,不懂的可以先去官网学习vue-cli:https://cli.vuej ...

  8. Dapper逆天入门~强类型，动态类型，多映射，多返回值，增删改查+存储过程+事物案例演示

    Dapper的牛逼就不扯蛋了,答应群友做个入门Demo的,现有园友需要,那么公开分享一下: 完整Demo:http://pan.baidu.com/s/1i3TcEzj 注 意 事 项:http:// ...

  9. ASP.NET从零开始学习EF的增删改查

           ASP.NET从零开始学习EF的增删改查           最近辞职了,但是离真正的离职还有一段时间,趁着这段空档期,总想着写些东西,想来想去,也不是很明确到底想写个啥,但是闲着也是够 ...

随机推荐

  1. 安利一波：Adobe 2019全家桶 破解版

    之前发过一篇Photoshop破解的文章,今天把笔记本换了个系统,发现之前那个amtlib.dll替换破解的方式不适用于最新版的Adobe 2019 CC系列了,刚好看到群里有大佬分享了一个全家桶,给 ...

  2. 【存储】RAID磁盘阵列选择

    RAID磁盘阵列(Redundant Arrays of Inexpensive Disks) 一个基本思想:将多个容量较小.相对廉价的磁盘进行有机组合,从而以较低的成本获得与昂贵大容量磁盘相当的容量 ...

  3. 阿里中间件——消息中间件Notify和MetaQ

    3.1.Notify Notify是淘宝自主研发的一套消息服务引擎,是支撑双11最为核心的系统之一,在淘宝和支付宝的核心交易场景中都有大量使用.消息系统的核心作用就是三点:解耦,异步和并行.下面让我以 ...

  4. Java面试知识点之线程篇（三）

    前言:这里继续对java线程相关知识点进行总结,不能间断. 1.yield()方法 yield()的作用是让步.它能让当前线程由“运行状态”进入到“就绪状态”,从而让其它具有相同优先级的等待线程获取执 ...

  5. PHP 缓存技术（一）

    移除光盘

  6. BAT美团滴滴java面试大纲（带答案版）之四：多线程Lock

    每天学习一点点 编程PDF电子书.视频教程免费下载:http://www.shitanlife.com/code 这是多线程的第二篇. 多线程就像武学中对的吸星大法,理解透了用好了可以得道成仙,俯瞰芸 ...

  7. 【P1941】 飞扬的小鸟

    题目描述 游戏界面是一个长为 nn,高为 mm 的二维平面,其中有 kk 个管道(忽略管道的宽度). 小鸟始终在游戏界面内移动.小鸟从游戏界面最左边任意整数高度位置出发,到达游戏界面最右边时,游戏完成 ...

  8. C学习笔记-一些知识

    memset可以方便的清空一个结构类型的变量或数组. 如: struct sample_struct { ]; int iSeq; int iType; }; 对于变量 struct sample_s ...

  9. Scala学习(九)练习

    文件正则表达式&练习 1. 编写一小段Scala代码,将某个文件中的行倒转顺序,将最后一行作为第一行,依此类推 程序代码: import scala.io.Source import java ...

  10. WPF效果（GIS二维篇）

    距离上次发东西已经过去了貌似不知多少天了,突然发现自己懒得总结了.这毛病感觉不好,还得写点东西来充实一下自己,不然这样整天浑浑噩噩的过日子,也太平淡了,不管怎么说,起码得给自己的经历留下点东西吧.闲话 ...