vue实战(一):利用vue与ajax实现增删改查：

<%@ page pageEncoding="UTF-8" language="java" %>

<%@ include file="../commons/taglib.jsp" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html lang="zh-CN">

<head>

<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

<meta name="renderer" content="webkit">

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

<meta http-equiv="Expires" content="0">

<meta http-equiv="Cache-Control" content="no-cache">

<link rel="stylesheet" href="${ctxStatic}/css/bootstrap.min.css">

<script type="text/javascript" src="${ctxStatic}/js/jquery.min.js"></script>

<script type="text/javascript" src="${ctxStatic}/js/bootstrap.min.js"></script>

<script type="text/javascript" src="${ctxStatic}/js/common.js"></script>

<script type="text/javascript" src="${ctx}/static/js/vue.js"></script>

<script type="text/javascript">

var getUrl='${ctx}/distributor/getRate';

var saveUrl= '${ctx}/distributor/saveRate';

var rate = [];

var vm ;

var rates ='';

$.ajax({

	url : getUrl,

	async : false,

	dataType: 'json',

	success: function(data2){

		rate = data2;

	}

});

console.log(rate);

$(function(){

	vm = new Vue({

		el: "#app",

		data: {

			rates : rate,

			newRate:{

				startMoney:'',

				endMoney:'',

				rate:''

			},

		    myShow:false

		} ,

		methods: {

			saveRate: function(){

				rates = JSON.stringify(this.rates);

				console.log(rates);

				$.ajax({

					url: saveUrl,

					dataType: 'json',

					type: 'post',

					data:{

						rate:rates

					},

					success:function(data){

						console.log(data)

					},

					error:function(err){

						console.log(err)

					}

				})

			},

			delRate: function(e){

				var that = e.currentTarget;

				console.log(e.currentTarget);

			    delId = that.id

                this.rates.splice(delId,1);

			},

			addRate: function() {

				this.myShow =true;

				console.log(this.rates);

			},

			sureRate :function() {

				this.myShow = false; //隐藏输入框

				rates = this.rates;

				newRate = this.newRate;

				var newStartMoney = parseInt(newRate.startMoney); //输入的开始金额

				var newEndMoney = parseInt(newRate.endMoney);// 输入的结束金额

				var new_rate = parseInt(newRate.rate);	 // 输入的返佣比例

				if(rates.length == 0){  //当一行数据都没有的时候

					if(newStartMoney > newEndMoney){

						alert("输入的startmoney必须小于endMoney");

						return false;

					}else if(new_rate <= 0 || new_rate >1){

						alert("返佣比例必须在0到1之间")

						return false;

					}else{

						var newRate2 ={

							startMoney: newRate.startMoney,

							endMoney: newRate.endMoney,

							rate: newRate.rate

						}

						rates.push(newRate2);

					}

				}else{   //有数据的时候

					var beforeEndMoney = parseInt(rates[rates.length-1].endMoney);  //前一项的结束金额

					if(newStartMoney < beforeEndMoney){

						alert("开始金额必须大于等于前一项的结束金额");

						return false;

					}else if(newStartMoney > newEndMoney){

						alert("开始金额必须小于结束金额");

						return false;

					}else if(new_rate <= 0 || new_rate >1){

						alert("返佣比例必须在0到1之间")

						return false;

					}

					else{

						var newRate2 ={ //定义一个新的对象赋值,如果直接写 newRate2 = newRate的话，newRate2 其实只是一个相当于指针的东西,只是指向了newRate的值，如果newRate的值改变了，newRate2也会改变。

							startMoney: newRate.startMoney,

							endMoney: newRate.endMoney,

							rate: newRate.rate

						}

						rates.push(newRate2);

					}

				}

				// 将输入框对象的值都设置为空,为下一次输入作准备

				this.newRate.startMoney = '';

				this.newRate.endMoney = '';

				this.newRate.rate = '';

			}

		}

	});

});

</script>

<style>

</style>

	<body id="app">

		<table>

		<thead>

			<tr>

			<th colspan="3">订单金额区间(元)</th><th colspan="1">返佣比例(%)</th><th>操作</th>

			</tr>

		</thead>

		<tbody>

			<tr v-for="rate in rates">

				<td>{{rate.startMoney}}</td>

				<td>~</td>

				<td>{{rate.endMoney}}</td>

				<td>{{rate.rate}}</td>

				<td><button @click = "delRate" id="{{$index}}">删除</button></td>  <!-- 这里的index索引方法要注意 -->

			</tr>

			<tr v-show="myShow">

				<td><input type="text" v-model="newRate.startMoney"></td>

				<td>~</td>

				<td><input type="text" v-model="newRate.endMoney"></td>

				<td><input type="text" v-model="newRate.rate"></td>

				<td><button @click = "sureRate">确定</button></td>

			</tr>

		</tbody>

		</table>

		<button @click="addRate">新增</button> <button @click="saveRate">保存</button>

	</body>

</html>

本次项目的注意点:

1:ajax 的使用不熟练

2:删除方法，可以使用索引，为每一行设置一个id属性值，然后删除总数据id属性值的那个项。

3：在新增项中，要注意js中，例如a=b中 "="  其实相当于一个指针，当b的值变化时，a也会改变(a其实并没有值)，这个时候我们要将a的具体属性值都要设置才行。

vue实战(一):利用vue与ajax实现增删改查的更多相关文章

  1. Android（java）学习笔记193：利用谷歌API对数据库增删改查（推荐使用）

    接下来我们通过项目案例来介绍:这个利用谷歌API对数据库增删改查 1.首先项目图: 2.这里的布局文件activity_main.xml: <LinearLayout xmlns:android ...

  2. ajax参考增删改查

    AJAX做增删改查详细!   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt ...

  3. C#利用WinForm调用WebServices实现增删改查

    实习导师要求做一个项目,用Winform调用WebServices实现增删改查的功能.写下这篇博客,当做是这个项目的总结.如果您有什么建议,可以给我留言.欢迎指正. 1.首先,我接到这个项目的时候,根 ...

  4. Android（java）学习笔记136：利用谷歌API对数据库增删改查（推荐使用）

    接下来我们通过项目案例来介绍:这个利用谷歌API对数据库增删改查 1. 首先项目图: 2. 这里的布局文件activity_main.xml: <LinearLayout xmlns:andro ...

  5. Vue+Mock.js模拟登录和表格的增删改查

    有三类人不适合此篇文章: "喜欢站在道德制高点的圣母婊" -- 适合去教堂 "无理取闹的键盘侠" -- 国际新闻版块欢迎你去 "有一定基础但又喜欢逼逼 ...

  6. MVC中的Ajax与增删改查

    自入手新项目以来,一直处于加班状态,博客也有两周没更,刚刚完成项目的两个模组,稍有喘息之机,写写关于项目中 的增删改查,这算是一个老生常谈的问题了,就连基本的教材书上都有.刚看书的时候,以为 没什么可 ...

  7. MVC中的Ajax与增删改查（一）

    自入手新项目以来,一直处于加班状态,博客也有两周没更,刚刚完成项目的两个模组,稍有喘息之机,写写关于项目中 的增删改查,这算是一个老生常谈的问题了,就连基本的教材书上都有.刚看书的时候,以为 没什么可 ...

  8. JDBC 1 利用Statement对数据库进行增删改查

    准备工作 1新建po类:User private int id; private String name; private String pwd; set,get方法省略 2  新建UserDao类, ...

  9. 利用Servlet做一套增删改查

    真的,稳住,考上研,利用两年逆袭.一步一步来,实在不行,最后最差也不过就是就回家种地,想想也不错. 前期准备配置 建一个动态web项目 新建Dynamic Web ProjectFile->Ne ...

随机推荐

  1. rm -f + 文件名+* 与 rm -f + 文件名* 的不同效果，大坑呀。

    rm -f catalina.2018-10-22.*    与*号间无空格 rm -f catalina.2018-10-22. *    :多了空格:

  2. c# 分析SQL语句中的表操作

    最近写了很多方向的总结和demo.基本包含了工作中的很多方面,毕竟c#已经高度封装并且提供了很多类库.前面已经总结了博文.最近2天突然感觉前面的SQL分析阻组件的确麻烦,也注意看了下.为了方便大家学习 ...

  3. zTree的核心处理逻辑

    zTree 是一个前端树形结构的插件. 使用起来很简单,我们重点关注一下插件的核心代码. 首先,zTree需要如下的数据结构: let areaData = [ { "id": & ...

  4. eventlet详解

    正真工作才发现很懒,没这么多时间写文,毕竟小白,参照大神写的,不喜勿喷 1.eventlet是什么eventlet - 具有WSGI支持的异步框架eventlet是python库函数,一个是处理和网络 ...

  5. jQuery-qrcode.js 生成带Logo 的二维码

    引入文件  jQuery-qrcode.js 地址:https://blog-static.cnblogs.com/files/kitty-blog/jquery-qrcode.js https:// ...

  6. vue.js 组件-全局组件和局部组件

    这两天学习了Vue.js 感觉组件这个地方知识点挺多的,而且很重要,所以,今天添加一点小笔记. 首先Vue组件的使用有3个步骤,创建组件构造器,注册组件,使用组件3个方面. 代码演示如下: <! ...

  7. PHP中对字符串的一些操作

    php中判断字符串在另一个字符串中是否存在(strpos): if(strpos('www.baidu.com', 'www') !== false){ // 存在 }else{ // 不存在 } p ...

  8. Python学习 ：六个标准数据类型

    一.Numbers(数字类型) 数字类型主要分为两种—— 整数(Integer)与 浮点数(Float) 整数分为整型和长整型(在Python3中已经不再区分为整型与长整型,统一称为整型) 注意:数字 ...

  9. Scrapy核心组件

    • 引擎(Scrapy)用来处理整个系统的数据流处理, 触发事务(框架核心) • 调度器(Scheduler)用来接受引擎发过来的请求, 压入队列中, 并在引擎再次请求的时候返回. 可以想像成一个UR ...

  10. BZOJ3265: 志愿者招募加强版(线性规划)

    Time Limit: 20 Sec  Memory Limit: 512 MBSubmit: 809  Solved: 417[Submit][Status][Discuss] Descriptio ...