20180419：Todolist的Mybatis的实现

最新推荐文章于 2020-07-13 15:43:43 发布

三笠·阿卡曼

最新推荐文章于 2020-07-13 15:43:43 发布

阅读量129

点赞数 1

分类专栏：日常总结

本文链接：https://blog.csdn.net/cjl_xupt/article/details/80010712

版权

日常总结专栏收录该内容

35 篇文章 0 订阅

订阅专栏

页面代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

	<title>看似简单啊</title>
	<meta http-equiv="X-UA-Compatible" content="IE-edge">
	<meta name="viewport" content="width=device-width,initial-scale=1">
	<link rel="stylesheet" type="text/css" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">
	<script type="text/javascript" src="bootstrap-3.3.7-dist/js/jquery.min.js"></script>
	<script type="text/javascript" src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>
	<script type="text/javascript" src="js/vue.js"></script>
	<script src="js/axios.min.js"></script>
	<style type="text/css">
		.top{
			margin-top: 10px;
			margin-bottom: 10px
		}
	</style>
</head>
<body>
	<div class="container" id="app">
		<div class="row top">
			<div class="col-md-6 col-md-offset-3">
				<h1 class="text-center text-muted">{{title}}</h1>
			</div>
		</div>
		<div class="row top">
			<div class="col-md-6 col-md-offset-2">
				<form role="form" class="form form-inline">
					<label class="text-muted">请输入待办事项：</label>
					<input type="text" name="name" v-model="mattermsg.name" data-toggle="tooltip" title="请输入待办事项" placeholder="待办事项">
					<span class="dropdown">
						<button type="button" class="btn btn-default btn-success" data-toggle="dropdown">	
							{{menuname}}<span class="caret"></span>
						</button>
						<ul class="dropdown-menu">
							<li><a href="#" @click="getText">出行</a></li>
							<li><a href="#" @click="getText">课程</a></li>
							<li><a href="#" @click="getText">游戏</a></li>
						</ul>
					</span>
					
					<button type="button" class="btn btn-success" @click="save">添加便签</button>
				</form>
			</div>
		</div>

		<div class="row top">
			<div class="col-md-4">
				<div class="thumbnail">
					<h3 class="text-muted text-center">出  行</h3>
					<ul class="list-unstyled">
						<li v-for="(item,index) in matter" class="text-center text-info">
						<span v-if="item.type === 'trip'">
							{{item.date}}  {{item.name}}  
							<button class="btn btn-default bg-info btn-xs" @click="remove(item)">取消</button>
						</span>	
						</li>
					</ul>
				</div>	
			</div>
			<div class="col-md-4">
				<div class="thumbnail">
					<h3 class="text-muted text-center">课  程</h3>
					<ul class="list-unstyled">
						<li v-for="(item,index) in matter" class="text-center text-info">
						<span v-if="item.type === 'course'">
							{{item.date}}  {{item.name}}  
							<button class="btn btn-default bg-info btn-xs"  @click="remove(item)">取消</button>
						</span>	
						</li>
					</ul>
				</div>	
			</div>
			<div class="col-md-4">
				<div class="thumbnail">
					<h3 class="text-muted text-center">游  戏</h3>
					<ul class="list-unstyled">
						<li v-for="(item,index) in matter" class="text-center text-info">
						<span v-if="item.type === 'game'">
							{{item.date}}  {{item.name}}  
							<button class="btn btn-default bg-info btn-xs"  @click="remove(item)">取消</button>
						</span>	
						</li>
					</ul>
				</div>	
			</div>
		</div>
	</div>
</body>
</html>
<script type="text/javascript">

	var vue=new Vue({
		el:'#app',
		data:{
			title:'TODOLIST',
			matter:[], 
			mattermsg:{}, //将数据封装到这个里面
			menuname:'请选择事项类型',
		},
		methods:{
			getText:function(e){
				this.menuname=e.target.innerText;
				if(e.target.innerText == '出行'){
					this.type='trip';
				}else if(e.target.innerText == '游戏'){
					this.type='game';
				}else{
					this.type='course';
				}
				//alert(this.mattermsg.type);
			},
			init:function(){
				axios.get('/TodolistProject/matter/select.cjl').then(function(result){
                    console.log(result);
                    if(result.status==200){
                        vue.matter=result.data;
                    }else{
                        alert('请求数据异常');
                    }
                }).catch(function(err){
                	alert('服务器异常');
                });
			},
			save:function(){
				var param=''; //利用键值对传参
				param='name='+this.mattermsg.name+'&type='+this.type;
            	axios.post('/TodolistProject/matter/save.cjl',param).then(function(result){
            		if(result.status==200){
            			alert('保存成功');
            			var tmp={};
            			vue.init();
            			//清空两个输入框
            			vue.mattermsg.name='';
             		}
            	}).catch(function(err){
            		alert('服务器异常');
            	})
			},
			remove:function(obj){
				
				var param='mid='+obj.mid;
				axios.post('/TodolistProject/matter/removematter.cjl',param).then(function(result){
					if(result.status==200){
						alert('删除成功');
						vue.init();
					}
				}).catch(function(err){
					alert('服务器异常')
				})
			}
		},
		
		
		
		mounted:function(){
			console.log('init');
			this.init();
		}
	});


</script>

效果能实现增删查：

作业心得：后续可以在每一个缩略图中加上一个表，这样看起来能好看些;

另外，建表一定要想好每一个字段的作用，不能瞎添加字段;

页面数据交互也一定要思考好，不然到后面与后台交互数据时就会出现问题。

三笠·阿卡曼

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
20180419：Todolist的Mybatis的实现

页面代码：&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt; &lt;title&gt;看似简单啊&lt;/title&gt; &amp
复制链接

扫一扫