Vue系列之 => 结合ajax完成列表增删查
<!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>
Vue系列之 => 结合ajax完成列表增删查的更多相关文章
- 如何在Vue中使用Mockjs模拟数据的增删查改
之前一直使用json-server在前端开发时,搭建本地数据接口测试,但有时又需要将做好的项目放于 github page上做项目演示.在本地时,json server很好使用,但一旦放在github ...
- Django，ajax实现表格增删查改，Django内置分页功能。
1.工程目录 2.urls.py """Django_ajax URL Configuration The `urlpatterns` list routes URLs ...
- Vue系列（二）：发送Ajax、JSONP请求、Vue生命周期及实例属性和方法、自定义指令与过渡
上一篇:Vue系列(一):简介.起步.常用指令.事件和属性.模板.过滤器 一. 发送AJAX请求 1. 简介 vue本身不支持发送AJAX请求,需要使用vue-resource.axios等插件实现 ...
- 一套手写ajax加一般处理程序的增删查改
倾述下感受:8天16次驳回.这个惨不忍睹. 好了不说了,说多了都是泪. 直接上代码 : 这个里面的字段我是用动软生成的,感觉自己手写哪些字段太浪费时间了,说多了都是泪 ajax.model层的代码: ...
- Vue系列（一）：简介、起步、常用指令、事件和属性、模板、过滤器
一. Vue.js简介 1. Vue.js是什么 Vue.js也称为Vue,读音/vju:/,类似view,错误读音v-u-e 是一个轻量级MVVM(Model-View-ViewModel)框架,和 ...
- Vue系列（三）：组件及数据传递、路由、单文件组件、vue-cli脚手架
上一篇:Vue系列(二):发送Ajax.JSONP请求.Vue生命周期及实例属性和方法.自定义指令与过渡 一. 组件component 1. 什么是组件? 组件(Component)是 Vue.js ...
- 手写 Vue 系列 之 Vue1.x
前言 前面我们用 12 篇文章详细讲解了 Vue2 的框架源码.接下来我们就开始手写 Vue 系列,写一个自己的 Vue 框架,用最简单的代码实现 Vue 的核心功能,进一步理解 Vue 核心原理. ...
- Vue系列：在vux的popup组件中使用百度地图遇到显示不全的问题
问题描述: 将百度地图封装成一个独立的组件BMapComponent,具体见 Vue系列:如何将百度地图包装成Vue的组件(http://www.cnblogs.com/strinkbug/p/576 ...
- WPF技术触屏上的应用系列（五）: 图片列表异步加载、手指进行缩小、放大、拖动 、惯性滑入滑出等效果
原文:WPF技术触屏上的应用系列(五): 图片列表异步加载.手指进行缩小.放大.拖动 .惯性滑入滑出等效果 去年某客户单位要做个大屏触屏应用,要对档案资源进行展示之用.客户端是Window7操作系统, ...
随机推荐
- 分析占用了大量 CPU 处理时间的是Java 进程中哪个线程
下面是详细步骤: 1. 首先确定进程的 ID ,可以使用 jps -v 或者 top 命令直接查看 2. 查看该进程中哪个线程占用大量 CPU,执行 top -H -p [PID] 结果如下: 可以发 ...
- 类的copy和deepcopy
- (instancetype)initWithName:(NSString *)name age:(NSUInteger)age sex:(CYLSex)sex { if(self = [super ...
- 【Python】【面试必看】Python笔试题
前言 现在面试测试岗位,一般会要求熟悉一门语言(python/java),为了考验求职者的基本功,一般会出 2 个笔试题,这些题目一般不难,主要考察基本功.要是给你一台电脑,在编辑器里面边写边调试,没 ...
- 前端 HTML body标签相关内容 常用标签 表单标签 form 表单控件分类
表单控件分类 input标签: input标签 type属性的text,password,button按钮,submit按钮 input标签placeholder属性 标签上显示内容 input标签 ...
- WordPress禁用插件另类方法不用进后台
刚刚一小美女说她在WordPress后台启用了一个插件后出现了问题,网站前端和后端都不能打开了,ytkah查看了一下是有个插件api和另一个插件冲突了,但要怎么禁用呢?有两个办法可以解决 1.直接删除 ...
- centos安装Django之三:安装python
这是centos安装Django系列第三篇,安装python.centos系统已经自带了python2.6,但是它被系统很多程序所依赖,不建议删除.我们可以使用以下命令来查看我们使用的Python版本 ...
- 转场动画UINavigationControllerDelegate
从iOS7开始,苹果更新了自定义ViewController转场的API,这些新增的类和接口让很多人困惑,望而却步.本文就从这些API入口,让读者理清这些API错综复杂的关系. 几个protocol ...
- 通过Tesseract实现简单的OCR
Tesseract 简介 Tesseract 的 OCR 引擎最先由 HP 实验室于 1985 年开始研发,至 1995 年时已经成为 OCR 业内最准确的三款识别引擎之一.然而,HP 不久便决定放弃 ...
- 对Python源码加密及反编译前后对比
关于python的加密 目前软件开发商对 Python 加密时可能会有两种形式,一种是对python转成的exe进行 保护,另一种是直接对.py或者.pyc文件进行保护,下面将列举两种形式的保护流程. ...
- eos 空投列表网址 及 工具网站列表
https://eosdrops.io https://www.shensi.com/#/eos eos 区块链浏览器: https://eostracker.io/ https://eospark. ...