<!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="./lib/jquery2.1.4.min.js"></script>

     <script src="./lib/Vue2.5.17.js"></script>

     <script src="https://cdn.bootcss.com/vue-resource/1.5.1/vue-resource.min.js"></script>

     <link rel="stylesheet" href="./lib/bootstrap-3.3.7-dist/css/bootstrap.css">

 </head>

 <style>

 </style>

 <body>

     <div id="app">

         <div class="panel panel-primary">

             <div class="panel-heading">

                 <h3 class="panel-title">Panel title</h3>

             </div>

             <div class="panel-body form-inline">

                 <label for="name">name:

                     <input type="text" class="form-control" v-model="name">

                 </label>

                 <input type="button" class="btn btn-primary" value="add" @click="add">

             </div>

         </div>

         <table class="table table-hover">

             <thead>

                 <tr>

                     <th>ID</th>

                     <th>Name</th>

                     <th>Ctime</th>

                     <th>Do</th>

                 </tr>

             </thead>

             <tbody>

                 <tr v-for="item in list" :key="item.id">

                     <td>{{ item.id }}</td>

                     <td>{{ item.name }}</td>

                     <td>{{ item.Ctime }}</td>

                     <td>

                         <a href="#" @click.prevent="del(item.id)">Del</a>

                     </td>

                 </tr>

             </tbody>

         </table>

     </div>

     <script>

         // 通过vue-resource设置根域名

         Vue.http.options.root = 'http://192.168.10.10';

         //全局启用emulateJSON选项

         Vue.http.options.emulateJSON = true;

         var vm = new Vue({

             el: '#app',

             data: {

                 name: '',

                 list: [{

                         id: 1,

                         name: 'shop1',

                         Ctime: new Date()

                     },

                     {

                         id: 2,

                         name: 'shop2',

                         Ctime: new Date()

                     }

                 ]

             },

             created() { //页面加载的时候调用getAllList

                 this.getAllList();

             },

             methods: {

                 getAllList() {

                     this.$http.get('cgi-bin/vuedata.py?action=querylist').then(result => {

                         if (result.status === 200) {

                             var listres = JSON.parse(result.bodyText)['message'];

                             this.list = listres;

                         } else {

                             alert('数据请求失败');

                         }

                     })

                 },

                 add() {

                     //第三个参数{emulateJSON:true} 配置到全局

                     this.$http.post('cgi-bin/vuedata.py', {

                         name: this.name

                     }).then(result => {

                         if (result.status === 200) {

                             //添加成功后再调用一次查询请求

                             this.getAllList();

                             this.name = "";

                         } else {

                             alert('添加失败');

                         }

                     })

                 },

                 del(id) {

                     this.$http.get('cgi-bin/vuedata.py' + id).then(result => {

                         if (result.status === 200) {

                             this.getAllList()

                         } else {

                             alert('删除失败')

                         }

                     })

                 }

             }

         })

     </script>

 </body>

 </html>
<!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="./lib/jquery2.1.4.min.js"></script>
<script src="./lib/Vue2.5.17.js"></script>
<script src="https://cdn.bootcss.com/vue-resource/1.5.1/vue-resource.min.js"></script>
<link rel="stylesheet" href="./lib/bootstrap-3.3.7-dist/css/bootstrap.css">
</head>
<style>
</style>
<body>
<div id="app">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body form-inline">
<label for="name">name:
<input type="text" class="form-control" v-model="name">
</label>
<input type="button" class="btn btn-primary" value="add" @click="add">
</div>
</div>
<table class="table table-hover">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Ctime</th>
<th>Do</th>
</tr>
</thead>
<tbody>
<tr v-for="item in list" :key="item.id">
<td>{{ item.id }}</td>
<td>{{ item.name }}</td>
<td>{{ item.Ctime }}</td>
<td>
<a href="#" @click.prevent="del(item.id)">Del</a>
</td>
</tr>
</tbody>
</table>
</div>
<script>
// 通过vue-resource设置根域名
Vue.http.options.root = 'http://192.168.10.10';
//全局启用emulateJSON选项
Vue.http.options.emulateJSON = true;
var vm = new Vue({
el: '#app',
data: {
name: '',
list: [{
id: ,
name: 'shop1',
Ctime: new Date()
},
{
id: ,
name: 'shop2',
Ctime: new Date()
}
]
},
created() { //页面加载的时候调用getAllList
this.getAllList();
},
methods: {
getAllList() {
this.$http.get('cgi-bin/vuedata.py?action=querylist').then(result => {
if (result.status === ) {
var listres = JSON.parse(result.bodyText)['message'];
this.list = listres;
} else {
alert('数据请求失败');
}
})
},
add() {
//第三个参数{emulateJSON:true} 配置到全局
this.$http.post('cgi-bin/vuedata.py', {
name: this.name
}).then(result => {
if (result.status === ) {
//添加成功后再调用一次查询请求
this.getAllList();
this.name = "";
} else {
alert('添加失败');
}
})
},
del(id) {
this.$http.get('cgi-bin/vuedata.py' + id).then(result => {
if (result.status === ) {
this.getAllList()
} else {
alert('删除失败')
}
})
}
}
})
</script>
</body>
</html>
<!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="./lib/jquery2.1.4.min.js"></script>
<script src="./lib/Vue2.5.17.js"></script>
<script src="https://cdn.bootcss.com/vue-resource/1.5.1/vue-resource.min.js"></script>
<link rel="stylesheet" href="./lib/bootstrap-3.3.7-dist/css/bootstrap.css">
</head>
<style>
</style>
<body>
<div id="app">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body form-inline">
<label for="name">name:
<input type="text" class="form-control" v-model="name">
</label>
<input type="button" class="btn btn-primary" value="add" @click="add">
</div>
</div>
<table class="table table-hover">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Ctime</th>
<th>Do</th>
</tr>
</thead>
<tbody>
<tr v-for="item in list" :key="item.id">
<td>{{ item.id }}</td>
<td>{{ item.name }}</td>
<td>{{ item.Ctime }}</td>
<td>
<a href="#" @click.prevent="del(item.id)">Del</a>
</td>
</tr>
</tbody>
</table>
</div>
<script>
// 通过vue-resource设置根域名
Vue.http.options.root = 'http://192.168.10.10';
//全局启用emulateJSON选项
Vue.http.options.emulateJSON = true;
var vm = new Vue({
el: '#app',
data: {
name: '',
list: [{
id: ,
name: 'shop1',
Ctime: new Date()
},
{
id: ,
name: 'shop2',
Ctime: new Date()
}
]
},
created() { //页面加载的时候调用getAllList
this.getAllList();
},
methods: {
getAllList() {
this.$http.get('cgi-bin/vuedata.py?action=querylist').then(result => {
if (result.status === ) {
var listres = JSON.parse(result.bodyText)['message'];
this.list = listres;
} else {
alert('数据请求失败');
}
})
},
add() {
//第三个参数{emulateJSON:true} 配置到全局
this.$http.post('cgi-bin/vuedata.py', {
name: this.name
}).then(result => {
if (result.status === ) {
//添加成功后再调用一次查询请求
this.getAllList();
this.name = "";
} else {
alert('添加失败');
}
})
},
del(id) {
this.$http.get('cgi-bin/vuedata.py' + id).then(result => {
if (result.status === ) {
this.getAllList()
} else {
alert('删除失败')
}
})
}
}
})
</script>
</body>
</html>

Vue系列之 => 结合ajax完成列表增删查的更多相关文章

  1. 如何在Vue中使用Mockjs模拟数据的增删查改

    之前一直使用json-server在前端开发时,搭建本地数据接口测试,但有时又需要将做好的项目放于 github page上做项目演示.在本地时,json server很好使用,但一旦放在github ...

  2. Django，ajax实现表格增删查改，Django内置分页功能。

    1.工程目录 2.urls.py """Django_ajax URL Configuration The `urlpatterns` list routes URLs ...

  3. Vue系列（二）：发送Ajax、JSONP请求、Vue生命周期及实例属性和方法、自定义指令与过渡

    上一篇:Vue系列(一):简介.起步.常用指令.事件和属性.模板.过滤器 一. 发送AJAX请求 1. 简介 vue本身不支持发送AJAX请求,需要使用vue-resource.axios等插件实现 ...

  4. 一套手写ajax加一般处理程序的增删查改

    倾述下感受:8天16次驳回.这个惨不忍睹. 好了不说了,说多了都是泪. 直接上代码 : 这个里面的字段我是用动软生成的,感觉自己手写哪些字段太浪费时间了,说多了都是泪 ajax.model层的代码: ...

  5. Vue系列（一）：简介、起步、常用指令、事件和属性、模板、过滤器

    一. Vue.js简介 1. Vue.js是什么 Vue.js也称为Vue,读音/vju:/,类似view,错误读音v-u-e 是一个轻量级MVVM(Model-View-ViewModel)框架,和 ...

  6. Vue系列（三）：组件及数据传递、路由、单文件组件、vue-cli脚手架

    上一篇:Vue系列(二):发送Ajax.JSONP请求.Vue生命周期及实例属性和方法.自定义指令与过渡 一. 组件component 1. 什么是组件? 组件(Component)是 Vue.js ...

  7. 手写 Vue 系列 之 Vue1.x

    前言 前面我们用 12 篇文章详细讲解了 Vue2 的框架源码.接下来我们就开始手写 Vue 系列,写一个自己的 Vue 框架,用最简单的代码实现 Vue 的核心功能,进一步理解 Vue 核心原理. ...

  8. Vue系列：在vux的popup组件中使用百度地图遇到显示不全的问题

    问题描述: 将百度地图封装成一个独立的组件BMapComponent,具体见 Vue系列:如何将百度地图包装成Vue的组件(http://www.cnblogs.com/strinkbug/p/576 ...

  9. WPF技术触屏上的应用系列（五）: 图片列表异步加载、手指进行缩小、放大、拖动 、惯性滑入滑出等效果

    原文:WPF技术触屏上的应用系列(五): 图片列表异步加载.手指进行缩小.放大.拖动 .惯性滑入滑出等效果 去年某客户单位要做个大屏触屏应用,要对档案资源进行展示之用.客户端是Window7操作系统, ...

随机推荐

  1. ios多播委托

    在现实中回调的需求也分两种 一对一的回调. 一对多的回调. 对于一对一的回调,在IOS中使用delegate.block都能实现.而一对多的回调基本就是通知中心了. 假如现在有一个需求,我们以图片下载 ...

  2. 认识程序的执行：从高级语言到二进制，以java为例

    java 高级编程语言,面向对象*.java是源码文件*.class是字节码文件,一种中间文件. JDK包含的基本组件包括: javac – 编译器,将源程序转成字节码 jar – 打包工具,将相关的 ...

  3. finecms如何调用多个栏目的子栏目

    前面我们说到了finecms如何调用多个指定栏目的内容,finecms如何调用多个栏目的子栏目呢?用下面的代码就可以实现了,其中id是具体的栏目id,用“,”逗号隔开 {list action=cat ...

  4. BBS项目

    一.需求分析 1.首页(显示文章) 文章详情 点赞,点踩 文章评论(子评论,评论的展示) 登录功能(图片验证码) 注册功能(基于form验证,ajax) 个人站点(不同人不同样式,文章过滤) 后台管理 ...

  5. 4A

    #include <iostream> using namespace std; int main() { int a; cin>>a; if((a>=4) && ...

  6. python web框架介绍对比

    Django Python框架虽然说是百花齐放,但仍然有那么一家是最大的,它就是Django.要说Django是Python框架里最好的,有人同意也有人 坚决反对,但说Django的文档最完善.市场占 ...

  7. Hadoop生态集群之HDFS

    一.HDFS是什么 HDFS是hadoop集群中的一个分布式的我文件存储系统.他将多台集群组建成一个集群,进行海量数据的存储.为超大数据集的应用处理带来了很多便利. 和其他的分布式文件存储系统相比他有 ...

  8. zabbix 配合钉钉群机器人（webhook） 报警

    首先建钉钉群,添加一个自定义机器人拿到webhook zabbix添加一个报警媒介 搞一个shell脚本来启动Python脚本(直接用zabbix调Python脚本不行,不知道什么原因) vim di ...

  9. zabbix 自定义监控文本内容

    需求:监控服务器硬盘使用率是否有超过80%的 需要监控的文本 root@zabbix zabbix]# cat /etc/zabbix/scripts/data/monitor_disk.txt &q ...

  10. python浮窗

    import wx; app = wx.App(); win = wx.Frame(None,title="老穆视频",pos=(900,20),size=(300,60),sty ...