Vue+axios绑值与后台请求

(..•˘_˘•..) 版权声明:转载原创文章请以超链接形式请注明原文章出处,尊重作者,尊重原创! (..•˘_˘•..)某些网站的小编真的是眼瞎! 转载注明出处!求求你了!

<!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>
	<link href="https://www.idaobin.com/css/bootstrap-3.3.7.min.css" rel="stylesheet">
	<script src="https://www.idaobin.com/js/jquery-3.4.1.js"></script>
	<script src="https://www.idaobin.com/js/bootstrap-3.3.7.min.js"></script>
	<script src="https://www.idaobin.com/js/vue-2.6.10.js"></script>
	<script src="https://www.idaobin.com/js/axios-0.19.js"></script>
</head>

<body>
	<div id="app">
		<table class="table table-bordered" id="table">
			<thead>
				<tr>
					<td>序号</td>
					<td>学号</td>
					<td>姓名</td>
					<td>年龄</td>
					<td>操作</td>
				</tr>
			</thead>
			<tbody>
				<tr v-for="(item,index) in doctor">
					<td>{{index+1}}</td>
					<td contenteditable="true">{{item.id}}</td>
					<td contenteditable="true">{{item.name}}</td>
					<td contenteditable="true">{{item.dname}}</td>
					<td>
						<button @click="edit(item)" class="btn btn-info btn-sm" data-toggle="modal"
							data-target="#editModal">编辑</button>
					</td>
				</tr>
			</tbody>
		</table>

		<!-- 编辑学生 -->
		<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="addodalLabel"
			aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
							&times;
						</button>
						<h4 class="modal-title" id="myModalLabel">
							编辑学生 
						</h4>
					</div>
					<div class="modal-body">
						<p>
							<label>学号:</label>
							<input type="text" value="" v-model="editdata.id">
						</p>
						<p>
							<label>姓名:</label>
							<input type="text" value="" v-model="editdata.name">
						</p>
						<p>
							<label>年龄:</label>
							<input type="number" value="" v-model="editdata.dname">
						</p>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-primary" data-dismiss="modal">
							提交更改
						</button>
					</div>
				</div>
			</div>
		</div>

	</div>
</body>
<script>
	$(function () {
		vue.loadData();
	});

	var vue = new Vue({
		el: "#app",
		data: {
			//传入参数
			para: {
				user: 1001,
				pwd: 123,
				op: "home"
			},
			//后台返回的json
			doctor: {},
			//编辑数据的json
			editdata:{}
		},
		// created: function () {
		// 	this.loadData(); //页面加载
		// },
		methods: {
			loadData: function () {
				var that = this;
				axios.post('/Outpatient/Doctor', this.para, { //请求地址
					transformRequest: [
						function (data) {
							let params = '';
							for (let index in data) {
								params += index + '=' + data[index] + '&';
							}
							return params.substring(0, params.length - 1);
						}
					]
				}).then(resp => {
					//获取返回的json
					var doc = JSON.parse(resp.data.doctor);
					that.doctor = doc; //json赋值
				}).catch(error => {
					console.log('请求失败:' + error.message);
				});
			},
			//编辑方法
			edit: function (item) {
				this.editdata = {
					id: item.id,
					name: item.name,
					dname: item.dname
				};
			}
		},
	});
</script>

</html>

原文链接:https://www.idaobin.com/archives/2087.html

既然都复制粘贴转载了,就不能打赏一点…ヘ( ̄ω ̄ヘ)

支付宝 ——————- 微信
图片加载中图片加载中

发表评论

电子邮件地址不会被公开。 必填项已用*标注

18 + = 19