Vue-dome--后台数据管理的实现+知识要点

水深无声 2023-07-21 06:03 9阅读 0赞

# 效果图 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjg2MzgwMA_size_16_color_FFFFFF_t_70]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjg2MzgwMA_size_16_color_FFFFFF_t_70 1]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjg2MzgwMA_size_16_color_FFFFFF_t_70 2]

# dome简介 #

## dome的简介 ##

**用到了 vue+bootstrap+jquery**  
注意:bootstrap.js之前引用jquery

**功能**

1.  对数据的添加
2.  对数据的查询
3.  对数据的修改
4.  对数据的删除
5.  实现了分页查询

## 代码的实现 ##

<!DOCTYPE html>
    <html>
    
    <head>
    	<meta charset="utf-8" />
    	<title></title>
    	<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
    	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    	<script src="js/bootstrap.js"></script>
    	<link rel="stylesheet" href="./css/bootstrap.min.css">
    </head>
    
    <body>
    	<div id="app">
    
    		<table class="table table-hover tavle-striped">
    			<thead>
    				<tr>
    					<th>编号</th>
    					<th>车系</th>
    					<th>价格</th>
    					<th>日期</th>
    					<th>操作</th>
    				</tr>
    			</thead>
    			<tbody>
    
    				<div class="panel panel-primary">
    					<div class="panel-heading">
    						<h3 class="panel-title">添加品牌</h3>
    					</div>
    					<div class="panel-body form-inline">
    						<label>
    							id:
    							<input type="text" class="form-comtrol" v-model="id">
    						</label>
    						<label>
    							name:
    							<input type="text" class="form-comtrol" v-model="name" @keyup.enter="add()">
    						</label>
    						<label>
    							price:
    							<input type="text" class="form-comtrol" v-model="price" @keyup.enter="add()">
    						</label>
    						<input type="button" value="添加" class="btn btn-primary" @click="add()">
    						<label>
    							关键词搜索:
    							<input type="text" class="form-comtrol" v-focus v-model="keyws">
    						</label>
    					</div>
    				</div>
    
    				<tr v-for="item in search(keyws)" :key="item.id">
    					<td>{ { item.id}}</td>
    					<td>{ { item.name}}</td>
    					<td>{ { item.price}}</td>
    					<td>{ { item.ctime| dateFor("yyyy-mm-dd")}}</td>
    					<td>
    						<button type="button" class="btn btn-info" 	 data-toggle="modal" data-target="#myModal"
    							@click.prevent="handleEdit(item)">编辑</button>
    
    						<button type="button" class="btn btn-danger" @click.prevent="del(item.id)">危险</button>
    
    					</td>
    				</tr>
    			</tbody>
    		</table>
    		<div class="container text-center">
    
    			<ul class="pagination">
    				<li class="page-item disabled"><a class="page-link" href="#">首页</a></li>
    
    				<li class="page-item" v-for="(item, index) in pagenum" :key="list.id" @click="gopage(item) "
    					:class="item===pageno? 'disabled':''"><a class="page-link" href="#">{ { item}}</a></li>
    
    				<li class="page-item"><a class="page-link" href="#">尾页</a></li>
    			</ul>
    		</div>
    		<common-dialog title="车辆编辑">
    			<template #editlist>
    				<form class="form-horizontal" role="form">
    					<div class="form-group">
    					  <label class="col-sm-2 control-label">编号</label>
    					  <div class="col-sm-10">
    						<p class="form-control-static">{ { position.id}}</p>
    					  </div>
    					</div>
    					<div class="form-group">
    					  <label for="inputPassword" class="col-sm-2 control-label">车系</label>
    					  <div class="col-sm-10">
    						<input type="text" class="form-control" id="inputPassword" placeholder="请输入车系" v-model="position.name">
    					  </div>
    					</div>
    					<div class="form-group">
    						<label for="inputPassword" class="col-sm-2 control-label">价格</label>
    						<div class="col-sm-10">
    						  <input type="text" class="form-control" id="inputPassword" placeholder="请输入价格" v-model="position.price">
    						</div>
    					  </div>
    				  </form>
    			</template>
    			<template #submitlist>
    				<button type="button" class="btn btn-default" data-dismiss="modal" @click="closetf($event)" >关闭
    				</button>
    				<button type="button" class="btn btn-primary" @click="submitlistck">
    					提交更改
    				</button>
    			</template>
    		</common-dialog>
    	</div>
    
    
    
    
    
    </body>
    
    <script type="text/template" id="tempdialog">
    	
    	
    	<div class="modal fade " id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" 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">
    					×
    				</button>
    				<h4 class="modal-title" id="myModalLabel">
    					{ { title}}
    				
    				</h4>
    			</div>
    			<div class="modal-body" >
    				<slot name="editlist"></slot>
    			</div>
    			<div class="modal-footer">
    				<slot name="submitlist"></slot>
    			</div>
    		</div>
    	</div>
    </div>
    
    
    </script>
    <script>
    
    		//自定义全局组件
    		Vue.component('common-dialog', { 
    		props: ['title'],
    		template: '#tempdialog'
    	})
    	Vue.filter('dateFor', function (datestr, pattern = "") { 
    		var dt = new Date(datestr);
    		var y = dt.getFullYear();
    		var m = dt.getMonth();
    		var d = dt.getDate()
    		return `${ y}-${ m}-${ d}`
    
    		if (pattern.toLowerCase() === 'yyyy-mm-dd') { 
    			return `${ y}-${ m}-${ d}`
    		} else { 
    			var hh = dt.getHours()
    			var mm = dt.getMinutes()
    			var ss = dt.getSeconds()
    			return `${ y}-${ m}-${ d} ${ hh}:${ mm}:${ ss}`
    		}
    	})
    	//自定义指令 全局 定义的时候不用加v- 在调用的时候需要加上v-
    	//参数2 是个对象 指令相关的函数
    	Vue.directive('focus', { 
    		//每当指令绑定到元素的时候执行 只一次 el绑定的元素
    		bind: function (el) { 
    			//el表示绑定的元素 
    			//dom还没有插入 所以暂时没有作用
    			//el.focus();
    		},
    		//元素插入到dom上面的时候执行 触发一次
    		inserted: function (el) { 
    			el.focus();
    		},
    		//更新的时候执行 会触发多次
    		updated() { 
    
    		},
    	})
    
    	var vm = new Vue({ 
    		el: "#app",
    		data: { 
    			id: '',
    			name: '',
    			price:'',
    			keyws: '',
    			pageno: 1,
    			ismodeltf:true,
    			pagenum: '',
    			pagesize: 5,
    			position: { },
    			list: [{ 
    					id: 1,
    					name: '奔驰',
    					price: '40w',
    					ctime: new Date()
    				},
    				{ 
    					id: 2,
    					name: '宝马',
    					price: '30w',
    					ctime: new Date()
    				},
    				{ 
    					id: 3,
    					name: '玛莎拉蒂',
    					price: '140w',
    					ctime: new Date()
    				},
    				{ 
    					id: 4,
    					name: '五菱',
    					price: '6.5w',
    					ctime: new Date()
    				},
    				{ 
    					id: 5,
    					name: '比亚迪',
    					price: '15w',
    					ctime: new Date()
    				},
    				{ 
    					id: 6,
    					name: '法拉利',
    					price: '80w',
    					ctime: new Date()
    				},
    				{ 
    					id: 7,
    					name: '比亚迪-唐',
    					price: '23w',
    					ctime: new Date()
    				},
    				{ 
    					id: 8,
    					name: '奥迪A4',
    					price: '32w',
    					ctime: new Date()
    				},
    				{ 
    					id: 9,
    					name: '林肯',
    					price: '43w',
    					ctime: new Date()
    				},
    				{ 
    					id: 10,
    					name: '丰田-皇冠',
    					price: '36w',
    					ctime: new Date()
    				},
    
    				{ 
    					id: 11,
    					name: '宝马X6',
    					price: '36.8w',
    					ctime: new Date()
    				},
    				{ 
    					id: 12,
    					name: '奥迪A6',
    					price: '26.3w',
    					ctime: new Date()
    				},
    
    
    			]
    		},
    		methods: { 
    			add() { 
    				var car = { 
    					id: this.id,
    					name: this.name,
    					price:this.price,
    					ctime: new Date()
    				};
    				this.list.push(car);
    				this.id = '';
    				this.name = '';
    			},
    			del(id) { 
    				this.list.some((item, i) => { 
    					if (item.id == id) { 
    
    						this.list.splice(i, 1)
    						return true;
    					}
    				})
    
    			},
    			gopage(num) { 
    				this.pageno = num;
    			},
    
    			search(keyw) { 
    
    				/* 1 var newList=[]; this.list.forEach(item => { if(item.name.indexOf(keyw)!=-1){ newList.push(item); } }); return newList */
    				// includes 包含
    				let startIndex = (this.pageno - 1) * this.pagesize;
    				let endIndex = startIndex + this.pagesize;
    				var newList = [];
    				this.list.filter(item => { 
    					if (item.name.includes(keyw)) { 
    						newList.push(item);
    					}
    				})
    				this.pagenum = Math.ceil(newList.length / this.pagesize);
    				return newList.slice(startIndex, endIndex);
    			},
    			lists() { 
    				return Math.ceil(this.list.length / this.pagesize);
    			},
    			//点击编辑
    			handleEdit(item) { 
    				return this.position = Object.assign({ }, item);
    				console.log(typeof this.position )
    			},
    			closetf(){ 
    				console.log(event,event.currentTarget.getAttribute("data-dismiss"))
    			},
    			//提交按钮
    			submitlistck(){ 
    				let id = this.position.id;
    				//修改匹配的内容
    					this.list.forEach((item, index) => { 
    						if (id === item.id) { 
    						vm.$set(vm.list, index, this.position)
    						
    						}
    					})
    					//jq 用法
    				$('#myModal').modal('hide');
    			}
    		}
    
    	})
    </script>
    
    </html>

# dome知识点+注意点 #

## vue ##

1.  当前元素的赋值  
    return this.position = Object.assign(\{\}, item);
2.  includes 包含元素

## bootstrap ##

1.  $(’\#myModal’).modal(‘hide’); 关闭模态框

## 其他 ##

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjg2MzgwMA_size_16_color_FFFFFF_t_70]: /images/20230528/de86697a483f40669764838c55dca739.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjg2MzgwMA_size_16_color_FFFFFF_t_70 1]: /images/20230528/9b7a189bb50e402695d904633e172261.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjg2MzgwMA_size_16_color_FFFFFF_t_70 2]: /images/20230528/0936ac20dffd4e3689c1760d95e9ab60.png