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

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的具体属性值都要设置才行。