vuejs简单入门

1 VueJS 概述与快速入门1.1 VueJS介绍Vue.js是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。它不仅易于上手，还便于与第三方库或既有项目整合。官网:https://cn.vuejs.org/1.2 MVVM模式MVVM是Model-View-ViewModel的简写。它本质上就是MVC 的改进版。

学无止路

3588人浏览 · 2022-03-14 17:45:29

学无止路 · 2022-03-14 17:45:29 发布

1 VueJS 概述与快速入门

1.1 VueJS介绍

Vue.js是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑
定和组合的视图组件。它不仅易于上手，还便于与第三方库或既有项目整合。
官网:https://cn.vuejs.org/

1.2 MVVM模式

MVVM是Model-View-ViewModel的简写。它本质上就是MVC 的改进版。MVVM 就是将其中的View 的状态和行为
抽象化，让我们将视图 UI 和业务逻辑分开MVVM模式和MVC模式一样，主要目的是分离视图（View）和模型（Model） Vue.js 是一个提供了 MVVM 风格的双向数据绑定的 Javascript 库，专注于View 层。它的核心是 MVVM 中的 VM，也就是 ViewModel。 ViewModel负责连接 View 和 Model，保证视图和数据的一致性，这种轻量级的架构让前端开发更加高效、便捷。如图所示：在这里插入图片描述
vue解决的问题，如图所示：

1.3 VueJS 快速入门

1.打开IDEA如图所示的界面，选择Project，New Project。在这里插入图片描述
2.选择Maven工程，创建骨架。点击Next如图所示：
3.填写项目名称，点击Next。如图所示：
4.点击Finish，如图所示：
5.pom.xml的代码，如图所示：
6.项目结构，如图所示：
演示的代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>快速入门</title>
		<script src="js/vuejs-2.5.16.js"></script>
	</head>
	<body>
		<div id="app">
			<!--vue的插值表达式，把date中定义的数据显示到此处-->
			{{message}}
		</div>
	</body>
	<script>
		// view model
		// 创建vue对象
		new  Vue({
			el:'#app', // 表示当前vue对象接管id为app区域
			data:{
				message:'hello vue' 		// 注意不要写分号结尾
			}
		});
	</script>
</html>

如图所示：在这里插入图片描述
部署Tomcat服务器，如图所示：

通过浏览器访问：http://localhost:8080/demo1.html。如图所示：

1.4 插值表达式

数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值，Mustache 标签将会被替代为对应数据对
象上属性的值。无论何时，绑定的数据对象上属性发生了改变，插值处的内容都会更新。
Vue.js 都提供了完全的 JavaScript 表达式支持。

{{ number + 1 }} 
{{ ok ? 'YES' : 'NO' }}

这些表达式会在所属 Vue 实例的数据作用域下作为 JavaScript 被解析。有个限制就是，每个绑定都只能包含单个
表达式，所以下面的例子都不会生效。

<!-- 这是语句，不是表达式 -->
{{ var a = 1 }} 
<!-- 流控制也不会生效，请使用三元表达式 --> 
{{ if (ok) { return message } }}

演示的代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>快速入门</title>
		<script src="js/vuejs-2.5.16.js"></script>
	</head>
	<body>
		<div id="app">
			<!--vue的插值表达式，把date中定义的数据显示到此处-->
			{{message}}
			<!--三元运算符-->
			{{fasle ? "ok":"no"}}
			<!--数字运算-->
			{{ number + 1 }}
			<!--插值表达式不支持-->
			<!--{{ var a = 1;}}
			{{if(a = 10(){} }}-->
		</div>
	</body>
	<script>
		// view model
		// 创建vue对象
		new  Vue({
			el:'#app', // 表示当前vue对象接管id为app区域
			data:{
				message:'hello vue',		// 注意不要写分号结尾
				number:100
			}
		});
	</script>
</html>

如图所示：在这里插入图片描述

2 VueJS 常用系统指令

2.1 v-on

可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript代码。

2.1.1 v-on:click

演示的代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>v-on:click</title>
		<script src="js/vuejs-2.5.16.js"></script>
	</head>
	<body>
		<div id="app">
			{{message}}
			<button v-on:click="fun1('good')">点击改变</button>
		</div>
	</body>
	<script>
		// view model
		new Vue({
			el:"#app",  // 表示当前vue对象接管了div区域
			data:{
				message:'hello vue'  // /注意不要写分号结尾
			},
			methods:{
				fun1:function (msg) {
					alert("hello");
					this.message = msg;
				}
			}
		});
	</script>
</html>

如图所示：在这里插入图片描述

2.1.2 v-on:keydown

演示的代码如下：

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<title>v-on:keydown</title>
	<script src="js/vuejs-2.5.16.js"></script>
</head>

<body>
<div id="app">
	Vue:<input type="text" v-on:keydown="fun($event)">
	<hr/>
	传统JS：<input type="text"  onkeydown="showKeyCode()"/>
</div>
</body>
<script>
	// view model
	new Vue({
		el:"#app",
		methods:{
			/* $event 它是vue中的事件对象  和我们传统js的event对象是一样的  */
			fun:function(event){
				var keyCode = event.keyCode;
				if(keyCode < 48  || keyCode > 57){
					//不让键盘的按键起作用
					event.preventDefault();
				}
			}
		}
	});


	// 传统js的键盘按下事件
	function showKeyCode(){
		// event对象和我们的document对象以及window对象是一样的，可以不用定义直接使用
		var keyCode = event.keyCode;
		if(keyCode < 48  || keyCode > 57){
			// 不让键盘的按键起作用
			event.preventDefault();
		}
		// alert(keyCode);
		// if(event.keyCode == 13){
		//     alert("你按的是回车");
		// }
	}
</script>

如图所示：在这里插入图片描述
演示的代码如下：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>v-on:keydown</title>
		<script src="js/vuejs-2.5.16.js"></script>
	</head>
	<body>
	<div id="app">
		<input type="text"v-on:keydown="fun2('good',$event)">
	</div>
	</body>
	<script>
		// view model
		new Vue({ el:'#app',  // 表示当前vue对象接管了div区域
		  methods:{ 
			fun2:function(msg,event){
				if(! ((event.keyCode >= 48 && event.keyCode <= 57) || event.keyCode == 8 || event.keyCode == 46)){
					event.preventDefault(); 
				}
			}
		  }
		});
	</script>
</html>

如图所示：在这里插入图片描述

2.1.3 v-on:mouseover

演示的代码如下：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>v-on:mouseover</title>
		<style>
			#div {
				background-color: red;
			}
		</style>
		<script src="js/vuejs-2.5.16.js"></script>
	</head>

	<body>
	<div id="app">
		<div v-on:mouseover="fun1" id="div">
			<textarea v-on:mouseover="fun2($event)">这是一个文件域</textarea>
		</div>
	</div>
	</body>
	<script>
		// view model
		new Vue({ el:'#app', // 表示当前vue对象接管了div区域
			methods:{
			fun1:function(){
				alert("div");
			},
			fun2:function(event){
				alert("textarea");
				event.stopPropagation();		// 阻止冒泡
		 	}
		}
		});
	</script>
</html>

如图所示：在这里插入图片描述
演示的代码如下：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>v-on:mouseover</title>
	<style>
		#div {
			background-color: red;
			width:300px;
			height:300px;
		}
	</style>
	<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
	<div @mouseover="fun1" id="div">
		<textarea @mouseover="fun2($event)">这是一个文件域</textarea>
	</div>
	<!--<div onmouseover="divmouseover()" id="div">
        <textarea onmouseover="textareamouseover()">这是一个文件域</textarea>
    </div>-->
</div>
</body>
<script>
	// view model
	/**
	 * @事件名称  就是v-on:事件名称的简写方式
	 * @mouseover它就等同于v-on:mouseover
	 */
	new Vue({
		el:"#app",
		methods:{
			fun1:function(){
				alert("鼠标悬停在div上了");
			},
			fun2:function(event){
				alert("鼠标悬停在textarea上了");
				event.stopPropagation();
			}
		}
	});
	// 传统的js方式
	function divmouseover(){
		alert("鼠标移动到了div上了");
	}

	function textareamouseover(){
		alert("鼠标移动到了textarea上了");
		event.stopPropagation();
	}
</script>
</html>

如图所示：在这里插入图片描述

2.1.4 事件修饰符

Vue.js 为 v-on 提供了事件修饰符来处理 DOM 事件细节，如：event.preventDefault() 或 event.stopPropagation()。
Vue.js通过由点(.)表示的指令后缀来调用修饰符。
.stop
prevent
capture
self
once
演示的代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>v-on:事件修饰符</title>
		<style>
			#div {
				background-color: red;
				width:300px;
				height:300px;
			}
		</style>
		<script src="js/vuejs-2.5.16.js"></script>
	</head>
	<body>
		<div id="app">
			<form @submit.prevent action="http://www.csdn.com" method="post" >
				<input type="submit" value="提交">
			</form>
			<!--<form action="http://www.csdn.com" method="post" onsubmit="return checkForm()">
				<input type="submit" value="提交">
			</form>-->
			<hr/>
			<div @mouseover="fun1" id="div">
				<textarea @mouseover.stop="fun2($event)">这是一个文件域</textarea>
			</div>
		</div>
	</body>
	<script>
		// view model
		new Vue({
			el:"#app",
			methods:{
                fun1:function(){
                    alert("鼠标悬停在div上了");
                },
                fun2:function(event){
                    alert("鼠标悬停在textarea上了");
                }
			}
		});

		// 传统js方式
		function checkForm(){
		    alert(1);
		    // 表单验证必须有一个明确的boolean类型返回值
			// 在应用验证方法时必须加上return方法名称
			return false;
		}
	</script>
</html>

如图所示：在这里插入图片描述
演示的代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>v-on:事件修饰符</title>
		<style>
			#div {
				background-color: red;
				width:300px;
				height:300px;
			}
		</style>
		<script src="js/vuejs-2.5.16.js"></script>
	</head>
	<body>
    <div id="app">
        <form @submit.prevent action="http://www.csdn.cn" method="get">
            <input type="submit" value="提交"/> </form>
        <div @click="fun1">
        <a @click.stop href="http://www.csdn.cn">csdn</a>
        </div>
    </div>
	</body>
	<script>
		// view model
		new Vue({
			el:"#app",   // 表示当前vue对象接管了div区域
			methods:{
                fun1:function(){
                    alert("鼠标悬停在div上了");
                }
			}
		});

	</script>
</html>

如图所示：在这里插入图片描述

2.1.5 按键修饰符

Vue 允许为 v-on 在监听键盘事件时添加按键修饰符
全部的按键别名：在这里插入图片描述
演示的代码如下：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>v-on:按键修饰符</title>

		<script src="js/vuejs-2.5.16.js"></script>
	</head>

	<body>
		<div id="app">
			Vue:<input type="text" @keydown.enter="fun1">
		</div>
	</body>
	<script>
		// view model
		new Vue({
			el:"#app",  // 表示当前vue对象接管了div区域
			methods:{
			    fun1:function(){
			        alert("按下的是回车");
				}
			}
		});
	</script>
</html>

如图所示：在这里插入图片描述

<p><!-- Alt + C --> 
<input @keyup.alt.67="clear">
 <!-- Ctrl + Click --> 
 <div @click.ctrl="doSomething">Do something</div>

v-on简写方式

<!-- 完整语法 -->
<a v-on:click="doSomething">...</a> 
<!-- 缩写 -->
<a @click="doSomething">...</a>

2.2 v-text与v-html

演示的代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>v-text与v-html</title>
		<script src="js/vuejs-2.5.16.js"></script>
	</head>
	<body>
		<div id="app">
			<div v-text="message"></div>
			<div v-html="message"></div>
			<!--<div id="div1"></div>
			<div id="div2"></div>-->
		</div>
	</body>
	<script>
		// view model
		new Vue({
			el:"#app",
			data:{
			    message:"<h1>Hello Vue</h1>"
			}
		});

		// 传统js的innerText和innerHTML
		window.onload = function(){
		    document.getElementById("div1").innerHTML="<h1>Hello</h1>";
            document.getElementById("div2").innerText="<h1>Hello</h1>";
		}
	</script>
</html>

如图所示：在这里插入图片描述

2.3 v-bind

插值语法不能作用在 HTML 特性上，遇到这种情况应该使用 v-bind指令。
演示的代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>v-text与v-html</title>
		<script src="js/vuejs-2.5.16.js"></script>
	</head>
	<body>
	<div id="app">
		<font size="5" v-bind:color="ys1">CSDN</font>
		<font size="5" :color="ys2">Csdn</font> <hr>
		<a v-bind={href:"http://www.csdn.cn/index/"+id}>csdn</a>
	</div>
	</body>
	<script>
		// view model
		new Vue({
			el:"#app",
			data:{
			    ys1:"red",
				ys2:"green",
				id:1
			}
		});
	</script>
</html>

如图所示：在这里插入图片描述
v-bind简写方式如下：

<!-- 完整语法 --> 
<a v-bind:href="url">...</a> 
<!-- 缩写 --> 
<a :href="url">...</a>

2.4 v-model

演示的代码如下：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>v-model</title>
		<script src="js/vuejs-2.5.16.js"></script>
	</head>
	<body>
	<div id="app">
		姓名:<input type="text" id="username" v-model="user.username"><br>
		密码:<input type="password" id="password" v-model="user.password"><br>
		<input type="button" @click="fun" value="获取">
	</div>
	</body>
	<script>
		// view model
		new Vue({
			el:"#app",   // 表示当前vue对象接管了div区域
			data:{
				user:{username:"",password:""}
			},
			methods:{
				fun:function(){
					alert(this.user.username+" "+this.user.password);
					this.user.username="Adair";
					this.user.password="123456";
				}
			}
		})
	</script>
</html>

如图所示：在这里插入图片描述

2.5 v-for

操作array
演示的代码如下：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>v-model</title>
		<script src="js/vuejs-2.5.16.js"></script>
	</head>
	<body>
	<<div id="app">
		<ul>
			<li v-for="(item,index) in list">{{item+" "+index}}
			</li>
		</ul>
	</div>
	</body>
	<script>
		// view model
		new Vue({
			el:"#app",   // 表示当前vue对象接管了div区域
			data:{list:[1,2,3,4,5,6]
			}
		})
	</script>
</html>

如图所示：在这里插入图片描述
操作对象
演示的代码如下：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>v-model</title>
		<script src="js/vuejs-2.5.16.js"></script>
	</head>
	<body>
	<<div id="app">
		<ul>
			<li v-for="(value,key) in product">{{key}}--{{value}}</li>
		</ul>
	</div>
	</body>
	<script>
		// view model
		new Vue({
			el:"#app",   // 表示当前vue对象接管了div区域
			data:{
				product:{id:1,pname:"电视机",price:6000}
			}
		})
	</script>
</html>

如图所示：在这里插入图片描述
操作对象数组
演示的代码如下：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>v-model</title>
		<script src="js/vuejs-2.5.16.js"></script>
	</head>
	<body>
	<<div id="app">
		<table border="1">
			<tr>
				<td>序号</td>
				<td>名称</td>
				<td>价格</td>
			</tr>
			<tr v-for="p in products">
				<td>{{p.id}} </td>
				<td>{{p.pname}} </td>
				<td>{{p.price}} </td>
			</tr>
		</table>
	</div>
	</body>
	<script>
		// view model
		new Vue({
			el:"#app",   // 表示当前vue对象接管了div区域
			data:{
				products:[{id:1,pname:"电视机",price:6000},{id:2,pname:"电冰箱",price:8000}, {id:3,pname:"电风扇",price:600}]
			}
		})
	</script>
</html>

如图所示：在这里插入图片描述

2.6 v-if与v-show

v-if是根据表达式的值来决定是否渲染元素。
v-show是根据表达式的值来切换元素的display css属性。
演示的代码如下：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>v-if与v-show</title>
		<script src="js/vuejs-2.5.16.js"></script>
	</head>
	<body>
	<div id="app">
		<span v-if="flag">学无止路</span>
		<span v-show="flag">csdn</span>
		<button @click="toggle">切换</button>
	</div>
	</body>
	<script>
		// view model
		new Vue({
			el:"#app",   // 表示当前vue对象接管了div区域
			data: {
				flag:false
			},
			methods:{
				toggle:function (){
					this.flag =! this.flag;
				}
			}
		})
	</script>
</html>

如图所示：在这里插入图片描述

3 VueJS生命周期

每个Vue实例在被创建之前都要经过一系列的初始化过程。在这里插入图片描述
vue在生命周期中有这些状态，
beforeCreate,created,beforeMount,mounted,beforeUpdate,updated,beforeDestroy,destroyed。Vue
在实例化的过程中，会调用这些生命周期的钩子，给我们提供了执行自定义逻辑的机会。那么，在这些vue钩子
中，vue实例到底执行了那些操作，我们先看下面执行的例子
演示的代码如下：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>vuejs生命周期</title>
		<script src="js/vuejs-2.5.16.js"></script>
	</head>
	<body>
		<div id="app">
			{{message}}
		</div>
	</body>
	<script>
		var vm = new Vue({
			el: "#app",
			data: {
				message: 'hello world'
			},
			beforeCreate: function() {
				console.log(this);
				showData('创建vue实例前', this);
			},
			created: function() {
				showData('创建vue实例后', this);
			},
			beforeMount: function() {
				showData('挂载到dom前', this);
			},
			mounted: function() {
				showData('挂载到dom后', this);
			},
			beforeUpdate: function() {
				showData('数据变化更新前', this);
			},
			updated: function() {
				showData('数据变化更新后', this);
			},
			beforeDestroy: function() {
				vm.test = "3333";
				showData('vue实例销毁前', this);
			},
			destroyed: function() {
				showData('vue实例销毁后', this);
			}
		});

		function realDom() {
			console.log('真实dom结构：' + document.getElementById('app').innerHTML);
		}

		function showData(process, obj) {
			console.log(process);
			console.log('data 数据：' + obj.message)
			console.log('挂载的对象：')
			console.log(obj.$el)
			realDom();
			console.log('------------------')
			console.log('------------------')
		}
		// vm.message = "good...";
		vm.$destroy();
	</script>
</html>

如图所示：在这里插入图片描述
运行的结果如图所示：
vue对象初始化过程中，会执行到beforeCreate,created,beforeMount,mounted 这几个钩子的内容
beforeCreate ：数据还没有监听，没有绑定到vue对象实例，同时也没有挂载对象。
created ：数据已经绑定到了对象实例，但是还没有挂载对象。
beforeMount: 模板已经编译好了，根据数据和模板已经生成了对应的元素对象，将数据对象关联到了对象的el属性，el属性是一个HTMLElement对象，也就是这个阶段，vue实例通过原生的createElement等方法来创建这个html片段，准备注入到我们vue实例指明的el属性所对应的挂载点。
mounted:将el的内容挂载到了el，相当于我们在jquery执行了(el).html(el),生成页面上真正的dom，上面我们就会发现dom的元素和我们el的元素是一致的。在此之后，我们能够用方法来获取到el元素下的dom对象，并进行各种操作当我们的data发生改变时，会调用beforeUpdate和updated方。
beforeUpdate ：数据更新到dom之前，我们可以看到$el对象已经修改，但是我们页面上dom的数据还没有发生改变。
updated: dom结构会通过虚拟dom的原则，找到需要更新页面dom结构的最小路径，将改变更新到dom上面，完成更新。
beforeDestroy,destroed :实例的销毁，vue实例还是存在的，只是解绑了事件的监听还有watcher对象数据与view的绑定，即数据驱动。

4 VueJS ajax

4.1 vue-resource

vue-resource是Vue.js的插件提供了使用XMLHttpRequest或JSONP进行Web请求和处理响应的服务。当vue更新到2.0之后，作者就宣告不再对vue-resource更新，而是推荐的axios，在这里大家了解一下vue-resource就可以。
vue-resource的github: https://github.com/pagekit/vue-resource。

4.2 axios

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js中axios的github:https://github.com/axios/axios

4.2.1 引入axios

首先就是引入axios,如果你使用es6，只需要安装axios模块之后

import axios from 'axios';
 // 安装方法
npm install axios
//或bower
install axios

当然也可以用script引入的代码如下：

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

4.2.2 get请求

演示的代码如下：

// 通过给定的ID来发送请求
axios.get('/user?ID=12345') 
.then(function(response){ 
console.log(response);
 })
 .catch(function(err){
  console.log(err); 
  }); 
  // 以上请求也可以通过这种方式来发送 
  axios.get('/user',{ 
  params:{ 
  ID:12345 
  }
  })
  .then(function(response){
   console.log(response); 
   })
   .catch(function(err){
    console.log(err); 
   });

4.2.3 post请求

演示的代码如下：

axios.post('/user',{
 firstName:'Fred',
 lastName:'Flintstone'
 })
 .then(function(res){ 
 console.log(res); 
 })
 .catch(function(err){ 
 console.log(err); 
});

为方便起见，为所有支持的请求方法提供了别名的代码如下：

axios.request(config)
axios.get(url[, config])
axios.delete(url[, config])
axios.head(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])

5 综合案例

5.1 案例需求

完成用户的查询与修改操作

5.2 数据库设计与表结构

演示的代码如下：

CREATE DATABASE vuejsdemo;
USE vuejsdemo;

DROP TABLE IF EXISTS `user`;
CREATE TABLE `user` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `age` int(11) DEFAULT NULL,
  `username` varchar(20) DEFAULT NULL,
  `PASSWORD` varchar(50) DEFAULT NULL,
  `email` varchar(50) DEFAULT NULL,
  `sex` varchar(20) DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=9 DEFAULT CHARSET=utf8;

INSERT INTO `user` VALUES ('1', '25', 'Adair', '123', '1578533828@qq.com', '男 ');
INSERT INTO `user` VALUES ('2', '31', 'Mars', '123', '1578533828@qq.com', '女');
INSERT INTO `user` VALUES ('3', '17', 'Litao', '213', '1578533828@qq.com', '女');
INSERT INTO `user` VALUES ('4', '40', '高管', '213', '1578533828@qq.com', 'female');
INSERT INTO `user` VALUES ('5', '28', '李总', '312', '1578533828@qq.com', 'male');
INSERT INTO `user` VALUES ('6', '34', '王董', '312', '1578533828@qq.com', 'male');
INSERT INTO `user` VALUES ('7', '55', '孙老板', '4321', '1578533828@qq.com', '男');
INSERT INTO `user` VALUES ('8', '19', '陈秘书', '4321', '1578533828@qq.com', '女');

如图所示：在这里插入图片描述

5.3 创建项目工程

1.打开IDEA如图所示的界面，选择Projects和New Project。在这里插入图片描述
2.选择Maven和JDK版本，创建骨架，点击Next。如图所示：
3.填写项目，点击Next。如图所示：
4.点击Finish，如图所示：
5.pom.xml的代码如下：

<?xml version="1.0" encoding="UTF-8"?>

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
  <modelVersion>4.0.0</modelVersion>
  <groupId>com.txw</groupId>
  <artifactId>vue_demo</artifactId>
  <version>1.0-SNAPSHOT</version>
  <packaging>war</packaging>
  <properties>
    <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
    <maven.compiler.source>1.8</maven.compiler.source>
    <maven.compiler.target>1.8</maven.compiler.target>
    <spring.version>5.0.2.RELEASE</spring.version>
    <slf4j.version>1.6.6</slf4j.version>
    <log4j.version>1.2.12</log4j.version>
    <mybatis.version>3.4.5</mybatis.version>
  </properties>
  <dependencies> 
    <!-- spring -->
    <dependency>
      <groupId>org.aspectj</groupId>
      <artifactId>aspectjweaver</artifactId>
      <version>1.6.8</version>
    </dependency>
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-context</artifactId>
      <version>${spring.version}</version>
    </dependency>
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-context-support</artifactId>
      <version>${spring.version}</version>
    </dependency>
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-orm</artifactId>
      <version>${spring.version}</version>
    </dependency>
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-test</artifactId>
      <version>${spring.version}</version>
    </dependency>
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-webmvc</artifactId>
      <version>${spring.version}</version>
    </dependency>
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-tx</artifactId>
      <version>${spring.version}</version>
    </dependency>
    <dependency>
      <groupId>junit</groupId>
      <artifactId>junit</artifactId>
      <version>4.12</version>
      <scope>test</scope>
    </dependency>
    <dependency>
      <groupId>javax.servlet</groupId>
      <artifactId>javax.servlet-api</artifactId>
      <version>3.1.0</version>
      <scope>provided</scope>
    </dependency>
    <dependency>
      <groupId>javax.servlet.jsp</groupId>
      <artifactId>jsp-api</artifactId>
      <version>2.0</version>
      <scope>provided</scope>
    </dependency>
    <dependency>
      <groupId>jstl</groupId>
      <artifactId>jstl</artifactId>
      <version>1.2</version>
    </dependency>
    <!-- log start -->
    <dependency>
      <groupId>log4j</groupId>
      <artifactId>log4j</artifactId>
      <version>${log4j.version}</version>
    </dependency>
    <dependency>
      <groupId>org.slf4j</groupId>
      <artifactId>slf4j-api</artifactId>
      <version>${slf4j.version}</version>
    </dependency>
    <dependency>
      <groupId>org.slf4j</groupId>
      <artifactId>slf4j-log4j12</artifactId>
      <version>${slf4j.version}</version>
    </dependency> 
    <!-- log end -->
    <dependency>
      <groupId>org.mybatis</groupId>
      <artifactId>mybatis</artifactId>
      <version>${mybatis.version}</version>
    </dependency>
    <dependency>
      <groupId>org.mybatis</groupId>
      <artifactId>mybatis-spring</artifactId>
      <version>1.3.0</version>
    </dependency>
    <dependency>
      <groupId>c3p0</groupId>
      <artifactId>c3p0</artifactId>
      <version>0.9.1.2</version>
    </dependency>
    <dependency>
      <groupId>com.github.pagehelper</groupId>
      <artifactId>pagehelper</artifactId>
      <version>5.1.2</version>
    </dependency>
    <dependency>
      <groupId>mysql</groupId>
      <artifactId>mysql-connector-java</artifactId>
      <version>5.1.5</version>
    </dependency>
    <dependency>
      <groupId>com.fasterxml.jackson.core</groupId>
      <artifactId>jackson-core</artifactId>
      <version>2.9.0</version>
    </dependency>
    <dependency>
      <groupId>com.fasterxml.jackson.core</groupId>
      <artifactId>jackson-databind</artifactId>
      <version>2.9.0</version>
    </dependency>
    <dependency>
      <groupId>com.fasterxml.jackson.core</groupId>
      <artifactId>jackson-annotations</artifactId>
      <version>2.9.0</version>
    </dependency>
  </dependencies>
</project>

如图所示：在这里插入图片描述
项目结构如图所示：

5.4 配置文件

1.web.xml的代码如下：

<!DOCTYPE web-app PUBLIC
 "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN"
 "http://java.sun.com/dtd/web-app_2_3.dtd" >
<web-app>
<display-name></display-name>

 <!--手动指定spring配置文件位置 -->
<context-param>
<param-name>contextConfigLocation</param-name>
<param-value>classpath:applicationContext.xml</param-value>
</context-param>
<!-- 配置spring提供的监听器，用于启动服务时加载容器 。该间监听器只能加载WEB-INF目录中名称为applicationContext.xml的配置文件-->
<listener>
<listener-class>
  org.springframework.web.context.ContextLoaderListener
</listener-class>
</listener>
<!-- 配置spring mvc的核心控制器 -->
<servlet>
<servlet-name>springmvcDispatcherServlet</servlet-name>
<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
<!-- 配置初始化参数，用于读取springmvc的配置文件 -->
<init-param>
  <param-name>contextConfigLocation</param-name>
  <param-value>classpath:springmvc.xml</param-value>
</init-param>
<!-- 配置servlet的对象的创建时间点：应用加载时创建。取值只能是非0正整数，表示启动顺序 -->
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>springmvcDispatcherServlet</servlet-name>
<url-pattern>*.do</url-pattern>
</servlet-mapping>
<!-- 配置springMVC编码过滤器 -->
<filter>
<filter-name>CharacterEncodingFilter</filter-name>
<filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
<!-- 设置过滤器中的属性值 -->
<init-param>
  <param-name>encoding</param-name>
  <param-value>UTF-8</param-value>
</init-param>
<!-- 启动过滤器 -->
<init-param>
  <param-name>forceEncoding</param-name>
  <param-value>true</param-value>
</init-param>
</filter>
<!-- 过滤所有请求 -->
<filter-mapping>
<filter-name>CharacterEncodingFilter</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>

<welcome-file-list>
<welcome-file>index.html</welcome-file>
<welcome-file>index.htm</welcome-file>
<welcome-file>index.jsp</welcome-file>
<welcome-file>default.html</welcome-file>
<welcome-file>default.htm</welcome-file>
<welcome-file>default.jsp</welcome-file>
</welcome-file-list>
</web-app>

如图所示：加粗样式
2.springmvc.xml的代码如下：

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
       xmlns:mvc="http://www.springframework.org/schema/mvc"
       xmlns:context="http://www.springframework.org/schema/context"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xsi:schemaLocation="http://www.springframework.org/schema/beans
http://www.springframework.org/schema/beans/spring-beans.xsd
http://www.springframework.org/schema/mvc
http://www.springframework.org/schema/mvc/spring-mvc.xsd
http://www.springframework.org/schema/context
http://www.springframework.org/schema/context/spring-context.xsd">
    <!-- 配置创建spring容器要扫描的包 -->
    <context:component-scan base-package="com.txw.controller"></context:component-scan>

    <mvc:annotation-driven></mvc:annotation-driven>
</beans>

如图所示：在这里插入图片描述
3.applicationContext.xml的代码如下：

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xmlns:aop="http://www.springframework.org/schema/aop"
       xmlns:tx="http://www.springframework.org/schema/tx"
       xmlns:context="http://www.springframework.org/schema/context"
       xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd
                            http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx.xsd
                            http://www.springframework.org/schema/aop http://www.springframework.org/schema/aop/spring-aop.xsd
                            http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context.xsd">
    <!-- 配置spring创建容器时要扫描的包 -->
    <context:component-scan base-package="com.txw">
        <!--制定扫包规则，不扫描@Controller注解的JAVA类，其他的还是要扫描 -->
        <context:exclude-filter type="annotation"
                                expression="org.springframework.stereotype.Controller"/>
    </context:component-scan>
    <!-- 加载配置文件 -->
    <context:property-placeholder location="classpath:db.properties"/>
    <!-- 配置MyBatis的Session工厂 -->
    <bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
        <!-- 数据库连接池 -->
        <property name="dataSource" ref="dataSource"/>
    </bean>
    <!-- 配置数据源 -->
    <bean id="dataSource" class="com.mchange.v2.c3p0.ComboPooledDataSource">
        <property name="driverClass" value="${jdbc.driver}"></property>
        <property name="jdbcUrl" value="${jdbc.url}"></property>
        <property name="user" value="${jdbc.username}"></property>
        <property name="password" value="${jdbc.password}"></property>
    </bean>
    <!-- 配置Mapper扫描器 -->
    <bean class="org.mybatis.spring.mapper.MapperScannerConfigurer">
        <property name="basePackage" value="com.txw.dao"/>
    </bean>
    <!-- 配置事务管理器 -->
    <bean id="transactionManager" class="org.springframework.jdbc.datasource.DataSourceTransactionManager">
        <property name="dataSource" ref="dataSource"/>
    </bean>
    <!-- 配置事务的通知 -->
    <tx:advice id="txAdvice" transaction-manager="transactionManager">
    	<tx:attributes>
    		<tx:method name="*" propagation="REQUIRED" read-only="false"/>
    		<tx:method name="find*" propagation="SUPPORTS" read-only="true"/>
    	</tx:attributes>
    </tx:advice>
    <!-- 配置aop -->
    <aop:config>
    	<aop:pointcut expression="execution(* com.txw.service.impl.*.*(..))" id="pt1"/>
    	<aop:advisor advice-ref="txAdvice" pointcut-ref="pt1"/>
    </aop:config>
</beans>

如图所示：在这里插入图片描述
4.db.properties的代码如下：

jdbc.driver=com.mysql.jdbc.Driver
jdbc.url=jdbc:mysql://192.168.56.10:3306/vuejsdemo
jdbc.username=root
jdbc.password=123456

如图所示：在这里插入图片描述

5.5 实体类

演示的代码如下：

package com.txw.domain;

import java.io.Serializable;
/**
 * 用户的实体类 {@link User}
 * @author Adair
 * @date 2022/3/14 下午 1:42
 * @email 1578533828@qq.com
 */
@SuppressWarnings("all")   // 注解警告信息
public class User  implements Serializable {

    private Integer id;
    private String username;
    private String password;
    private Integer age;
    private String sex;
    private String email;

    public Integer getId() {
        return id;
    }

    public void setId(Integer id) {
        this.id = id;
    }

    public String getUsername() {
        return username;
    }

    public void setUsername(String username) {
        this.username = username;
    }

    public String getPassword() {
        return password;
    }

    public void setPassword(String password) {
        this.password = password;
    }

    public Integer getAge() {
        return age;
    }

    public void setAge(Integer age) {
        this.age = age;
    }

    public String getSex() {
        return sex;
    }

    public void setSex(String sex) {
        this.sex = sex;
    }

    public String getEmail() {
        return email;
    }

    public void setEmail(String email) {
        this.email = email;
    }

    @Override
    public String toString() {
        return "User{" +
                "id=" + id +
                ", username='" + username + '\'' +
                ", password='" + password + '\'' +
                ", age=" + age +
                ", sex='" + sex + '\'' +
                ", email='" + email + '\'' +
                '}';
    }
}

如图所示：在这里插入图片描述

5.6 持久层

演示的代码如下：

package com.txw.dao;

import com.txw.domain.User;
import org.apache.ibatis.annotations.Select;
import org.apache.ibatis.annotations.Update;
import java.util.List;
/**
 * 用户的持久层接口 {@link IUserDao}
 * @author Adair
 * @date 2022/3/14 下午 2:12
 * @email 1578533828@qq.com
 */
@SuppressWarnings("all")   // 注解警告信息
public interface IUserDao {

    /**
     * 查询用户列表
     * @return
     */
    @Select("select * from user")
    List<User> findAll();

    /**
     * 根据id查询
     * @param userId
     * @return
     */
    @Select("select * from user where id = #{userId}")
    User findById(Integer userId);

    /**
     * 更新用户
     * @param user
     */
    @Update("update user set username=#{username},password=#{password},age=#{age},sex=#{sex},email=#{email} where id=#{id}")
    void updateUser(User user);
}

如图所示：在这里插入图片描述

5.7 业务层

1.演示的代码如下：

package com.txw.service;

import com.txw.domain.User;
import java.util.List;
/**
 * 用户的业务层 {@link IUserService}
 * @author Adair
 * @email 1578533828@qq.com
 */
@SuppressWarnings("all")   // 注解警告信息
public interface IUserService {

    /**
     * 查询用户列表
     * @return
     */
    List<User> findAll();

    /**
     * 根据id查询
     * @param userId
     * @return
     */
    User findById(Integer userId);

    /**
     * 更新用户
     * @param user
     */
    void updateUser(User user);
}

如图所示：在这里插入图片描述
2.演示的代码如下：

package com.txw.service.impl;

import com.txw.dao.IUserDao;
import com.txw.domain.User;
import com.txw.service.IUserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import java.util.List;
/**
 * 用户业务层的实现 {@link IUserServiceImpl}
 * @author Adair
 * @date 2022/3/14 下午 2:25
 * @email 1578533828@qq.com
 */
@Service 
@SuppressWarnings("all")   // 注解警告信息
public class IUserServiceImpl implements IUserService {

    @Autowired
    private IUserDao userDao;

    /**
     * 查询用户列表
     * @return
     */
    @Override
    public List<User> findAll() {
        return userDao.findAll();
    }

    /**
     * 根据id查询
     * @param userId
     * @return
     */
    @Override
    public User findById(Integer userId) {
        return userDao.findById(userId);
    }

    /**
     * 更新用户
     * @param user
     */
    @Override
    public void updateUser(User user) {
        userDao.updateUser(user);
    }
}

如图所示：在这里插入图片描述
测试的代码如下：

package com.txw.test;

import com.txw.domain.User;
import com.txw.service.IUserService;
import org.junit.Test;
import org.junit.runner.RunWith;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.test.context.ContextConfiguration;
import org.springframework.test.context.junit4.SpringJUnit4ClassRunner;
import java.util.List;
/**
 * 用户的业务层测试 {@link UserTest}
 * @author Adair
 * @date 2022/3/14 下午 2:45
 * @email 1578533828@qq.com
 */
@SuppressWarnings("all")   // 注解警告信息
@RunWith(SpringJUnit4ClassRunner.class)
@ContextConfiguration(locations = "classpath:applicationContext.xml")
public class UserTest {

    @Autowired
    private IUserService userService;

    /**
     * 测试查询用户列表
     */
    @Test
    public void testFindAll(){
        List<User> users = userService.findAll();
        System.out.println(users);
    }

    /**
     * 测试根据id查询
     */
    @Test
    public void testFindById(){
        User user = userService.findById(1);
        System.out.println(user);
    }
    /**
     * 查询更新用户
     */
    @Test
    public void testUpdateUser(){
        User user = userService.findById(1);
        System.out.println("修改之前的用户" + user);
        user.setAge(26);
        userService.updateUser(user);
        user = userService.findById(1);
        System.out.println("修改之后的用户" + user);
    }
}

如图所示：在这里插入图片描述

5.8 user.html

演示的代码如下：

<!DOCTYPE html>
<html>
<head>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <title>数据 - AdminLTE2定制版</title>
    <meta name="description" content="AdminLTE2定制版">
    <meta name="keywords" content="AdminLTE2定制版">
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">

    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>


    <link rel="stylesheet" href="/vue_demo/plugins/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="/vue_demo/plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="/vue_demo/plugins/ionicons/css/ionicons.min.css">
    <link rel="stylesheet" href="/vue_demo/plugins/iCheck/square/blue.css">
    <link rel="stylesheet" href="/vue_demo/plugins/morris/morris.css">
    <link rel="stylesheet" href="/vue_demo/plugins/jvectormap/jquery-jvectormap-1.2.2.css">
    <link rel="stylesheet" href="/vue_demo/plugins/datepicker/datepicker3.css">
    <link rel="stylesheet" href="/vue_demo/plugins/daterangepicker/daterangepicker.css">
    <link rel="stylesheet" href="/vue_demo/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css">
    <link rel="stylesheet" href="/vue_demo/plugins/datatables/dataTables.bootstrap.css">
    <link rel="stylesheet" href="/vue_demo/plugins/treeTable/jquery.treetable.css">
    <link rel="stylesheet" href="/vue_demo/plugins/treeTable/jquery.treetable.theme.default.css">
    <link rel="stylesheet" href="/vue_demo/plugins/select2/select2.css">
    <link rel="stylesheet" href="/vue_demo/plugins/colorpicker/bootstrap-colorpicker.min.css">
    <link rel="stylesheet" href="/vue_demo/plugins/bootstrap-markdown/css/bootstrap-markdown.min.css">
    <link rel="stylesheet" href="/vue_demo/plugins/adminLTE/css/AdminLTE.css">
    <link rel="stylesheet" href="/vue_demo/plugins/adminLTE/css/skins/_all-skins.min.css">
    <link rel="stylesheet" href="/vue_demo/css/style.css">
    <link rel="stylesheet" href="/vue_demo/plugins/ionslider/ion.rangeSlider.css">
    <link rel="stylesheet" href="/vue_demo/plugins/ionslider/ion.rangeSlider.skinNice.css">
    <link rel="stylesheet" href="/vue_demo/plugins/bootstrap-slider/slider.css">
    <link rel="stylesheet" href="/vue_demo/plugins/bootstrap-datetimepicker/bootstrap-datetimepicker.css">
</head>

<body class="hold-transition skin-purple sidebar-mini">

<div class="wrapper" id="app">

    <!-- 页面头部 -->
    <header class="main-header">
        <!-- Logo -->
        <a href="all-admin-index.html" class="logo">
            <!-- mini logo for sidebar mini 50x50 pixels -->
            <span class="logo-mini"><b>数据</b></span>
            <!-- logo for regular state and mobile devices -->
            <span class="logo-lg"><b>数据</b>后台管理</span>
        </a>

        <!-- Header Navbar: style can be found in header.less -->
        <nav class="navbar navbar-static-top">
            <!-- Sidebar toggle button-->
            <a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button">
                <span class="sr-only">Toggle navigation</span>
            </a>

            <div class="navbar-custom-menu">
                <ul class="nav navbar-nav">
                    <!-- Messages: style can be found in dropdown.less-->
                    <li class="dropdown messages-menu">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                            <i class="fa fa-envelope-o"></i>
                            <span class="label label-success">4</span>
                        </a>
                        <ul class="dropdown-menu">
                            <li class="header">你有4个邮件</li>
                            <li>
                                <!-- inner menu: contains the actual data -->
                                <ul class="menu">
                                    <li>
                                        <!-- start message -->
                                        <a href="#">
                                            <div class="pull-left">
                                                <img src="/vue_demo/img/user2-160x160.jpg" class="img-circle" alt="User Image">
                                            </div>
                                            <h4>
                                                系统消息
                                                <small><i class="fa fa-clock-o"></i> 5 分钟前</small>
                                            </h4>
                                            <p>欢迎登录系统?</p>
                                        </a>
                                    </li>
                                    <!-- end message -->
                                    <li>
                                        <a href="#">
                                            <div class="pull-left">
                                                <img src="/vue_demo/img/user3-128x128.jpg" class="img-circle" alt="User Image">
                                            </div>
                                            <h4>
                                                团队消息
                                                <small><i class="fa fa-clock-o"></i> 2 小时前</small>
                                            </h4>
                                            <p>你有新的任务了</p>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <div class="pull-left">
                                                <img src="/vue_demo/img/user4-128x128.jpg" class="img-circle" alt="User Image">
                                            </div>
                                            <h4>
                                                Developers
                                                <small><i class="fa fa-clock-o"></i> Today</small>
                                            </h4>
                                            <p>Why not buy a new awesome theme?</p>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <div class="pull-left">
                                                <img src="/vue_demo/img/user3-128x128.jpg" class="img-circle" alt="User Image">
                                            </div>
                                            <h4>
                                                Sales Department
                                                <small><i class="fa fa-clock-o"></i> Yesterday</small>
                                            </h4>
                                            <p>Why not buy a new awesome theme?</p>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <div class="pull-left">
                                                <img src="/vue_demo/img/user4-128x128.jpg" class="img-circle" alt="User Image">
                                            </div>
                                            <h4>
                                                Reviewers
                                                <small><i class="fa fa-clock-o"></i> 2 days</small>
                                            </h4>
                                            <p>Why not buy a new awesome theme?</p>
                                        </a>
                                    </li>
                                </ul>
                            </li>
                            <li class="footer"><a href="#">See All Messages</a></li>
                        </ul>
                    </li>
                    <!-- Notifications: style can be found in dropdown.less -->
                    <li class="dropdown notifications-menu">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                            <i class="fa fa-bell-o"></i>
                            <span class="label label-warning">10</span>
                        </a>
                        <ul class="dropdown-menu">
                            <li class="header">你有10个新消息</li>
                            <li>
                                <!-- inner menu: contains the actual data -->
                                <ul class="menu">
                                    <li>
                                        <a href="#">
                                            <i class="fa fa-users text-aqua"></i> 5 new members joined today
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <i class="fa fa-warning text-yellow"></i> Very long description here that
                                            may not
                                            fit into the page and may cause design problems
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <i class="fa fa-users text-red"></i> 5 new members joined
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <i class="fa fa-shopping-cart text-green"></i> 25 sales made
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <i class="fa fa-user text-red"></i> You changed your username
                                        </a>
                                    </li>
                                </ul>
                            </li>
                            <li class="footer"><a href="#">View all</a></li>
                        </ul>
                    </li>
                    <!-- Tasks: style can be found in dropdown.less -->
                    <li class="dropdown tasks-menu">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                            <i class="fa fa-flag-o"></i>
                            <span class="label label-danger">9</span>
                        </a>
                        <ul class="dropdown-menu">
                            <li class="header">你有9个新任务</li>
                            <li>
                                <!-- inner menu: contains the actual data -->
                                <ul class="menu">
                                    <li>
                                        <!-- Task item -->
                                        <a href="#">
                                            <h3>
                                                Design some buttons
                                                <small class="pull-right">20%</small>
                                            </h3>
                                            <div class="progress xs">
                                                <div class="progress-bar progress-bar-aqua" style="width: 20%"
                                                     role="progressbar" aria-valuenow="20" aria-valuemin="0"
                                                     aria-valuemax="100">
                                                    <span class="sr-only">20% Complete</span>
                                                </div>
                                            </div>
                                        </a>
                                    </li>
                                    <!-- end task item -->
                                    <li>
                                        <!-- Task item -->
                                        <a href="#">
                                            <h3>
                                                Create a nice theme
                                                <small class="pull-right">40%</small>
                                            </h3>
                                            <div class="progress xs">
                                                <div class="progress-bar progress-bar-green" style="width: 40%"
                                                     role="progressbar" aria-valuenow="20" aria-valuemin="0"
                                                     aria-valuemax="100">
                                                    <span class="sr-only">40% Complete</span>
                                                </div>
                                            </div>
                                        </a>
                                    </li>
                                    <!-- end task item -->
                                    <li>
                                        <!-- Task item -->
                                        <a href="#">
                                            <h3>
                                                Some task I need to do
                                                <small class="pull-right">60%</small>
                                            </h3>
                                            <div class="progress xs">
                                                <div class="progress-bar progress-bar-red" style="width: 60%"
                                                     role="progressbar" aria-valuenow="20" aria-valuemin="0"
                                                     aria-valuemax="100">
                                                    <span class="sr-only">60% Complete</span>
                                                </div>
                                            </div>
                                        </a>
                                    </li>
                                    <!-- end task item -->
                                    <li>
                                        <!-- Task item -->
                                        <a href="#">
                                            <h3>
                                                Make beautiful transitions
                                                <small class="pull-right">80%</small>
                                            </h3>
                                            <div class="progress xs">
                                                <div class="progress-bar progress-bar-yellow" style="width: 80%"
                                                     role="progressbar" aria-valuenow="20" aria-valuemin="0"
                                                     aria-valuemax="100">
                                                    <span class="sr-only">80% Complete</span>
                                                </div>
                                            </div>
                                        </a>
                                    </li>
                                    <!-- end task item -->
                                </ul>
                            </li>
                            <li class="footer">
                                <a href="#">View all tasks</a>
                            </li>
                        </ul>
                    </li>
                    <!-- User Account: style can be found in dropdown.less -->
                    <li class="dropdown user user-menu">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                            <img src="/vue_demo/img/user2-160x160.jpg" class="user-image" alt="User Image">
                            <span class="hidden-xs">Adair</span>
                        </a>
                        <ul class="dropdown-menu">
                            <!-- User image -->
                            <li class="user-header">
                                <img src="/vue_demo/img/user2-160x160.jpg" class="img-circle" alt="User Image">

                                <p>
                                    Adair - 数据管理员
                                    <small>最后登录 11:20AM</small>
                                </p>
                            </li>

                            <!-- Menu Footer-->
                            <li class="user-footer">
                                <div class="pull-left">
                                    <a href="#" class="btn btn-default btn-flat">修改密码</a>
                                </div>
                                <div class="pull-right">
                                    <a href="#" class="btn btn-default btn-flat">注销</a>
                                </div>
                            </li>
                        </ul>
                    </li>

                </ul>
            </div>
        </nav>
    </header>
    <!-- 页面头部 /-->

    <!-- 导航侧栏 -->
    <aside class="main-sidebar">
        <!-- sidebar: style can be found in sidebar.less -->
        <section class="sidebar">
            <!-- Sidebar user panel -->
            <div class="user-panel">
                <div class="pull-left image">
                    <img src="/vue_demo/img/user2-160x160.jpg" class="img-circle" alt="User Image">
                </div>
                <div class="pull-left info">
                    <p>Adair</p>
                    <a href="#"><i class="fa fa-circle text-success"></i> 在线</a>
                </div>
            </div>
            <!-- search form -->
            <!--<form action="#" method="get" class="sidebar-form">
        <div class="input-group">
            <input type="text" name="q" class="form-control" placeholder="搜索...">
            <span class="input-group-btn">
            <button type="submit" name="search" id="search-btn" class="btn btn-flat"><i class="fa fa-search"></i>
            </button>
          </span>
        </div>
    </form>-->
            <!-- /.search form -->


            <!-- sidebar menu: : style can be found in sidebar.less -->
            <ul class="sidebar-menu">
                <li class="header">菜单</li>

                <li id="admin-index"><a href="all-admin-index.html"><i class="fa fa-dashboard"></i> <span>首页</span></a>
                </li>

                <!-- 菜单 -->


                <li class="treeview">
                    <a href="#">
                        <i class="fa fa-folder"></i> <span>用户管理</span>
                        <span class="pull-right-container">
                        <i class="fa fa-angle-left pull-right"></i>
                    </span>
                    </a>
                    <ul class="treeview-menu">

                        <li id="admin-login">
                            <a href="all-admin-login.html">
                                <i class="fa fa-circle-o"></i> 查询所有用户
                            </a>
                        </li>

                    </ul>
                </li>

                <!-- 菜单 /-->
            </ul>
        </section>
        <!-- /.sidebar -->
    </aside>
    <!-- 导航侧栏 /-->

    <!-- 内容区域 -->
    <!-- @@master = admin-layout.html-->
    <!-- @@block = content -->

    <div class="content-wrapper">

        <!-- 内容头部 -->
        <section class="content-header">
            <h1>
                数据管理
                <small>数据列表</small>
            </h1>
            <ol class="breadcrumb">
                <li><a href="#"><i class="fa fa-dashboard"></i> 首页</a></li>
                <li><a href="#">数据管理</a></li>
                <li class="active">数据列表</li>
            </ol>
        </section>
        <!-- 内容头部 /-->

        <!-- 正文区域 -->
        <section class="content">

            <!-- .box-body -->
            <div class="box box-primary">
                <div class="box-header with-border">
                    <h3 class="box-title">列表</h3>
                </div>

                <div class="box-body">

                    <!-- 数据表格 -->
                    <div class="table-box">

                        <!--工具栏-->
                        <div class="pull-left">
                            <div class="form-group form-inline">
                                <div class="btn-group">
                                    <button type="button" class="btn btn-default" title="新建"><i
                                            class="fa fa-file-o"></i> 新建
                                    </button>
                                    <button type="button" class="btn btn-default" title="删除"><i
                                            class="fa fa-trash-o"></i> 删除
                                    </button>
                                    <button type="button" class="btn btn-default" title="开启"><i class="fa fa-check"></i>
                                        开启
                                    </button>
                                    <button type="button" class="btn btn-default" title="屏蔽"><i class="fa fa-ban"></i>
                                        屏蔽
                                    </button>
                                    <button type="button" class="btn btn-default" title="刷新"><i
                                            class="fa fa-refresh"></i> 刷新
                                    </button>
                                </div>
                            </div>
                        </div>
                        <div class="box-tools pull-right">
                            <div class="has-feedback">
                                <input type="text" class="form-control input-sm" placeholder="搜索">
                                <span class="glyphicon glyphicon-search form-control-feedback"></span>
                            </div>
                        </div>
                        <!--工具栏/-->

                        <!--数据列表-->
                        <table id="dataList" class="table table-bordered table-striped table-hover dataTable">
                            <thead>
                            <tr>
                                <th class="" style="padding-right:0px;">
                                    <input id="selall" type="checkbox" class="icheckbox_square-blue">
                                </th>
                                <th class="sorting_asc">ID</th>
                                <th class="sorting_desc">用户名</th>
                                <th class="sorting_asc sorting_asc_disabled">密码</th>
                                <th class="sorting_desc sorting_desc_disabled">性别</th>
                                <th class="sorting">年龄</th>
                                <th class="text-center sorting">邮箱</th>
                                <th class="text-center">操作</th>
                            </tr>
                            </thead>
                            <tbody>

                            <tr v-for="u in userList">
                                <td><input name="ids" type="checkbox"></td>
                                <td>{{u.id}}</td>
                                <td>{{u.username}}
                                </td>
                                <td>{{u.password}}</td>
                                <td>{{u.sex}}</td>
                                <td>{{u.age}}</td>
                                <td class="text-center">{{u.email}}</td>
                                <td class="text-center">
                                    <button type="button" class="btn bg-olive btn-xs">详情</button>
                                    <button type="button" class="btn bg-olive btn-xs" @click="findById(u.id)">编辑</button>
                                </td>
                            </tr>

                            </tbody>
                            <!--模态窗口-->
                            <div class="tab-pane" id="tab-model">

                                <div id="myModal" class="modal modal-primary" role="dialog">
                                    <div class="modal-dialog modal-lg">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                    <span aria-hidden="true">&times;</span></button>
                                                <h4 class="modal-title">用户信息</h4>
                                            </div>
                                            <div class="modal-body">

                                                <div class="box-body">
                                                    <div class="form-horizontal">


                                                        <div class="form-group">
                                                            <label class="col-sm-2 control-label">用户名:</label>
                                                            <div class="col-sm-5">
                                                                <input type="text" class="form-control" v-model="user.username">
                                                            </div>
                                                        </div>
                                                        <div class="form-group">
                                                            <label class="col-sm-2 control-label">密码:</label>
                                                            <div class="col-sm-5">
                                                                <input type="text" class="form-control" v-model="user.password">
                                                            </div>
                                                        </div>
                                                        <div class="form-group">
                                                            <label class="col-sm-2 control-label">性别:</label>
                                                            <div class="col-sm-5">
                                                                <input type="text" class="form-control" v-model="user.sex">
                                                            </div>
                                                        </div>
                                                        <div class="form-group">
                                                            <label class="col-sm-2 control-label">年龄:</label>
                                                            <div class="col-sm-5">
                                                                <input type="text" class="form-control" v-model="user.age">
                                                            </div>
                                                        </div>
                                                        <div class="form-group">
                                                            <label class="col-sm-2 control-label">邮箱:</label>
                                                            <div class="col-sm-5">
                                                                <input type="text" class="form-control" v-model="user.email">
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>

                                            </div>
                                            <div class="modal-footer">
                                                <button type="button" class="btn btn-outline" data-dismiss="modal">关闭</button>
                                                <button type="button" class="btn btn-outline" data-dismiss="modal" @click="update">修改</button>
                                            </div>
                                        </div>
                                        <!-- /.modal-content -->
                                    </div>

                                    <!-- /.modal-dialog -->
                                </div>
                                <!-- /.modal -->
                            </div>
                            <!--模态窗口/-->
                        </table>
                        <!--数据列表/-->

                        <!--工具栏-->
                        <div class="pull-left">
                            <div class="form-group form-inline">
                                <div class="btn-group">
                                    <button type="button" class="btn btn-default" title="新建"><i
                                            class="fa fa-file-o"></i> 新建
                                    </button>
                                    <button type="button" class="btn btn-default" title="删除"><i
                                            class="fa fa-trash-o"></i> 删除
                                    </button>
                                    <button type="button" class="btn btn-default" title="开启"><i class="fa fa-check"></i>
                                        开启
                                    </button>
                                    <button type="button" class="btn btn-default" title="屏蔽"><i class="fa fa-ban"></i>
                                        屏蔽
                                    </button>
                                    <button type="button" class="btn btn-default" title="刷新"><i
                                            class="fa fa-refresh"></i> 刷新
                                    </button>
                                </div>
                            </div>
                        </div>
                        <div class="box-tools pull-right">
                            <div class="has-feedback">
                                <input type="text" class="form-control input-sm" placeholder="搜索">
                                <span class="glyphicon glyphicon-search form-control-feedback"></span>
                            </div>
                        </div>
                        <!--工具栏/-->



                    </div>
                    <!-- 数据表格 /-->


                </div>
                <!-- /.box-body -->

                <!-- .box-footer-->
                <div class="box-footer">
                    <div class="pull-left">
                        <div class="form-group form-inline">
                            总共2 页，共14 条数据。 每页
                            <select class="form-control">
                                <option>1</option>
                                <option>2</option>
                                <option>3</option>
                                <option>4</option>
                                <option>5</option>
                            </select> 条
                        </div>
                    </div>

                    <div class="box-tools pull-right">
                        <ul class="pagination">
                            <li>
                                <a href="#" aria-label="Previous">首页</a>
                            </li>
                            <li><a href="#">上一页</a></li>
                            <li><a href="#">1</a></li>
                            <li><a href="#">2</a></li>
                            <li><a href="#">3</a></li>
                            <li><a href="#">4</a></li>
                            <li><a href="#">5</a></li>
                            <li><a href="#">下一页</a></li>
                            <li>
                                <a href="#" aria-label="Next">尾页</a>
                            </li>
                        </ul>
                    </div>

                </div>
                <!-- /.box-footer-->


            </div>

        </section>
        <!-- 正文区域 /-->

    </div>
    <!-- @@close -->
    <!-- 内容区域 /-->

    <!-- 底部导航 -->
    <footer class="main-footer">
        <div class="pull-right hidden-xs">
            <b>Version</b> 1.0.8
        </div>
        <strong>Copyright &copy; 2014-2017 <a href="https://blog.csdn.net/weixin_40055163?spm=1010.2135.3001.5343">研究院研发部</a>.</strong> All rights reserved.
    </footer>
    <!-- 底部导航 /-->

</div>
<script src="/vue_demo/plugins/jQuery/jquery-2.2.3.min.js"></script>
<script src="/vue_demo/plugins/jQueryUI/jquery-ui.min.js"></script>
<script>
    $.widget.bridge('uibutton', $.ui.button);
</script>
<script src="/vue_demo/plugins/bootstrap/js/bootstrap.min.js"></script>
<script src="/vue_demo/plugins/raphael/raphael-min.js"></script>
<script src="/vue_demo/plugins/morris/morris.min.js"></script>
<script src="/vue_demo/plugins/sparkline/jquery.sparkline.min.js"></script>
<script src="/vue_demo/plugins/jvectormap/jquery-jvectormap-1.2.2.min.js"></script>
<script src="/vue_demo/plugins/jvectormap/jquery-jvectormap-world-mill-en.js"></script>
<script src="/vue_demo/plugins/knob/jquery.knob.js"></script>
<script src="/vue_demo/plugins/daterangepicker/moment.min.js"></script>
<script src="/vue_demo/plugins/daterangepicker/daterangepicker.js"></script>
<script src="/vue_demo/plugins/daterangepicker/daterangepicker.zh-CN.js"></script>
<script src="/vue_demo/plugins/datepicker/bootstrap-datepicker.js"></script>
<script src="/vue_demo/plugins/datepicker/locales/bootstrap-datepicker.zh-CN.js"></script>
<script src="/vue_demo/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js"></script>
<script src="/vue_demo/plugins/slimScroll/jquery.slimscroll.min.js"></script>
<script src="/vue_demo/plugins/fastclick/fastclick.js"></script>
<script src="/vue_demo/plugins/iCheck/icheck.min.js"></script>
<script src="/vue_demo/plugins/adminLTE/js/app.min.js"></script>
<script src="/vue_demo/plugins/treeTable/jquery.treetable.js"></script>
<script src="/vue_demo/plugins/select2/select2.full.min.js"></script>
<script src="/vue_demo/plugins/colorpicker/bootstrap-colorpicker.min.js"></script>
<script src="/vue_demo/plugins/bootstrap-wysihtml5/bootstrap-wysihtml5.zh-CN.js"></script>
<script src="/vue_demo/plugins/bootstrap-markdown/js/bootstrap-markdown.js"></script>
<script src="/vue_demo/plugins/bootstrap-markdown/locale/bootstrap-markdown.zh.js"></script>
<script src="/vue_demo/plugins/bootstrap-markdown/js/markdown.js"></script>
<script src="/vue_demo/plugins/bootstrap-markdown/js/to-markdown.js"></script>
<script src="/vue_demo/plugins/ckeditor/ckeditor.js"></script>
<script src="/vue_demo/plugins/input-mask/jquery.inputmask.js"></script>
<script src="/vue_demo/plugins/input-mask/jquery.inputmask.date.extensions.js"></script>
<script src="/vue_demo/plugins/input-mask/jquery.inputmask.extensions.js"></script>
<script src="/vue_demo/plugins/datatables/jquery.dataTables.min.js"></script>
<script src="/vue_demo/plugins/datatables/dataTables.bootstrap.min.js"></script>
<script src="/vue_demo/plugins/chartjs/Chart.min.js"></script>
<script src="/vue_demo/plugins/flot/jquery.flot.min.js"></script>
<script src="/vue_demo/plugins/flot/jquery.flot.resize.min.js"></script>
<script src="/vue_demo/plugins/flot/jquery.flot.pie.min.js"></script>
<script src="/vue_demo/plugins/flot/jquery.flot.categories.min.js"></script>
<script src="/vue_demo/plugins/ionslider/ion.rangeSlider.min.js"></script>
<script src="/vue_demo/plugins/bootstrap-slider/bootstrap-slider.js"></script>
<script src="/vue_demo/plugins/bootstrap-datetimepicker/bootstrap-datetimepicker.js"></script>
<script src="/vue_demo/plugins/bootstrap-datetimepicker/locales/bootstrap-datetimepicker.zh-CN.js"></script>
<script src="/vue_demo/js/vuejs-2.5.16.js"></script>
<script src="/vue_demo/js/axios-0.18.0.js"></script>
<script src="/vue_demo/js/user.js"></script>
<script>
    $(document).ready(function () {
        // 选择框
        $(".select2").select2();

        // WYSIHTML5编辑器
        $(".textarea").wysihtml5({
            locale: 'zh-CN'
        });
    });

    // 设置激活菜单
    function setSidebarActive(tagUri) {
        var liObj = $("#" + tagUri);
        if (liObj.length > 0) {
            liObj.parent().parent().addClass("active");
            liObj.addClass("active");
        }
    }

    $(document).ready(function () {

        // 激活导航位置
        setSidebarActive("admin-datalist");

        // 列表按钮
        $("#dataList td input[type='checkbox']").iCheck({
            checkboxClass: 'icheckbox_square-blue',
            increaseArea: '20%'
        });
        // 全选操作
        $("#selall").click(function () {
            var clicks = $(this).is(':checked');
            if (!clicks) {
                $("#dataList td input[type='checkbox']").iCheck("uncheck");
            } else {
                $("#dataList td input[type='checkbox']").iCheck("check");
            }
            $(this).data("clicks", !clicks);
        });
    });
</script>
</body>
</html>

如图所示：在这里插入图片描述

5.9 user.js

演示的代码如下：

new Vue({
    el:"#app",
    data:{
        user:{
            id:"",
            username:"",
            password:"",
            email:"",
            age:"",
            sex:""
        },
        userList:[]
    },
    methods:{
        findAll:function(){
            // 在当前方法中定义一个变量，表明是vue对象
            var _this = this;
            axios.get('/vue_demo/user/findAll.do')
                .then(function (response) {
                    // 响应数据给userList赋值
                    _this.userList = response.data;
                    console.log(response);
                })
                .catch(function (error) {
                    console.log(error);
                })
        },
        findById:function (userid) {
            // 在当前方法中定义一个变量，表明是vue对象
            var _this = this;
            axios.get('/vue_demo/user/findById.do',{params:{id:userid}})
                .then(function (response) {
                    // 响应数据给userList赋值
                    _this.user = response.data;
                    $("#myModal").modal("show");
                })
                .catch(function (error) {
                    console.log(error);
                })
        },
        update:function (user) {							// post请求
            // 在当前方法中定义一个变量，表明是vue对象
            var _this = this;
            axios.post('/vue_demo/user/updateUser.do', _this.user)
                .then(function (response) {
                    _this.findAll();
                })
                .catch(function (error) {
                    console.log(error);
                });
        }
    },
    // 当我们页面加载的时候触发请求，查询所有
    created:function() {
        this.findAll();
    }
});

如图所示：在这里插入图片描述

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^