vuejs简单入门

技术2025-12-25 14

vuejs简单入门

1.VueJS 概述与快速入门1.1VueJS介绍1.2MVVM模式1.3VueJS 快速入门1.4插值表达式 2.VueJS 常用系统指令2.1v-on2.1.1v-on:click2.1.2v-on:keydown2.1.3v-on:mouseover2.1.4事件修饰符2.1.5按键修饰符 2.2v-text与v-html2.3v-bind2.4v-model2.5v-for2.6v-if与v-show 3.VueJS生命周期4.VueJS ajax4.1vue-resource4.2axios4.2.1引入axios4.2.2get请求4.2.3post请求 5.综合案例5.1案例需求5.2数据库设计与表结构5.3服务器端5.3.1配置文件5.3.2Controller5.3.3Dao5.3.4Service5.3.4ServiceImpl 5.4客户端5.4.1user.html页面5.4.2user.js页面

1.VueJS 概述与快速入门

1.1VueJS介绍

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

官网:https://cn.vuejs.org/

1.2MVVM模式

MVVM是Model-View-ViewModel的简写。它本质上就是MVC 的改进版。MVVM 就是将其中的View 的状态和行为抽象化，让我们将视图 UI 和业务逻辑分开

MVVM模式和MVC模式一样，主要目的是分离视图（View）和模型（Model）

Vue.js 是一个提供了 MVVM 风格的双向数据绑定的 Javascript 库，专注于View 层。它的核心是 MVVM 中的 VM，也就是 ViewModel。 ViewModel负责连接 View 和 Model，保证视图和数据的一致性，这种轻量级的架构让前端开发更加高效、便捷

1.3VueJS 快速入门

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>快速入门</title> <script src="js/vuejs-2.5.16.js"></script> </head> <body> <div id="app"> {{message}}  {{false?"OK":"no"}}  {{num+1}}  </div> </body> <script> //view model //创建Vue对象 new Vue({ el:"#app",//由vue接管id为app的区域 data:{ message:"Hello Vue!",//注意，此处不要加分号 num:100 } }); </script> </html>

1.4插值表达式

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

Vue.js 都提供了完全的 JavaScript 表达式支持。

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

{{ var a = 1 }}  {{ if (ok) { return message } }}

2.VueJS 常用系统指令

2.1v-on

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

2.1.1v-on:click

<!DOCTYPE html> <html xmlns:v-on="http://www.w3.org/1999/xhtml"> <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('hello')">vue的onclick</button> </div> </body> <script> new Vue({ el:"#app", data:{ message:"hello vue" }, methods:{ fun1:function (msg) { alert("hello"); this.message=msg; } } }); </script> </html>

2.1.2v-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"> vus:<input type="text" v-on:keydown="fun($event)"> <hr> 传统：<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(); } } </script> </html>

2.1.3v-on:mouseover

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>v-on:mouseover</title> <style> #div { background-color: red; height: 300px; width: 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> </body> <script> //view model /** * @事件名称就是v-on：事件名称的简写方式 * @mouseover它等于v-on:mouseover */ new Vue({ el: "#app", methods: { // $event 它是vue中的事件对象，和我们传统js的event对象是一样的 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; height: 300px; width: 300px; } </style> <script src="js/vuejs-2.5.16.js"></script> </head> <body> <div id="app"> <form @submit.prevent action="http://www.itcast.cn" method="post"> <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>

2.1.5按键修饰符

Vue 允许为 v-on 在监听键盘事件时添加按键修饰符

全部的按键别名：

.enter.tab.delete(捕获 “删除” 和 “退格” 键).esc.space.up.down.left.right.ctrl.alt.shift.meta <!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" v-on:keydown.enter="fun1"> </div> </body> <script> //view model new Vue({ el:"#app", methods:{ fun1:function () { alert("回车") } } }); </script> </html> <p> <input @keyup.alt.67="clear">  <div @click.ctrl="doSomething">Do something</div>

v-on简写方式

<a v-on:click="doSomething">...</a>  <a @click="doSomething">...</a>

2.2v-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> <script> //view model new Vue({ el:"#app", data:{ message:"<h1>Hello</h1>" } }); //传统js的innerText和innerHTML window,onload=function () { document.getElementById("div1").innerHTML="<h1>Hello</h1>" document.getElementById("div2").innerText="<h1>Hello</h1>" } </script>   </div> </body> </html>

2.3v-bind

插值语法不能作用在 HTML 特性上，遇到这种情况应该使用 v-bind指令

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>v-text与v-html在v-bind上的使用</title> <script src="js/vuejs-2.5.16.js"></script> </head> <body> <div id="app"> <font v-bind:color="ys1">传智播客</font> <font :color="ys2">传智播客</font> </div> </body> <script> //view model /** * 插值表达式不能用于html标签的属性取值 * 要想给html标签的属性设置变量的值，需要要v-bind * v-bind也可以简化写法。直接使用： */ new Vue({ el:"#app", data:{ ys1:"red", ys2:"green" } }); </script> </html>

v-bind简写方式

<a v-bind:href="url">...</a>  <a :href="url">...</a>

2.4v-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"> <form action="" method="post"> 用户名：<input type="text" name="username"v-model="user.username"><br> 密码：<input type="text" name="password"v-model="user.password"><br> </form> </div> </body> <script> //view model new Vue({ el:"#app", data:{ user:{ username:"test", password:"1324", } } }); </script> </html>

2.5v-for

操作array <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>v-for遍历数组</title> <script src="js/vuejs-2.5.16.js"></script> </head> <body> <div id="app"> <ul> <li v-for="(item,index) in arr">{{item}}={{index}}</li> </ul> </div> </body> <script> //view model new Vue({ el:"#app", data:{ arr:[1,2,3,5,8] } }); </script> </html> 操作对象 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>v-for遍历对象</title> <script src="js/vuejs-2.5.16.js"></script> </head> <body> <div id="app"> <ul> <li v-for="(key,value) in product">{{key}}={{value}}</li> </ul> </div> </body> <script> //view model new Vue({ el:"#app", data:{ product:{ id:1, name:"笔记本", price:5222 } } }); </script> </html> 操作对象数组 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>v-for遍历对象</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> <td>价格</td> </tr> <tr v-for="(product,index) in products"> <td>{{index}}</td> <td>{{product.id}}</td> <td>{{product.name}}</td> <td>{{product.price}}</td> </tr> </table> </div> </body> <script> //view model new Vue({ el:"#app", data:{ products:[ {id:1,name:"笔记本",price:5222}, {id:2,name:"手机",price:2222}, {id:3,name:"电视",price:3222}, ] } }); </script> </html>

2.6v-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">itcast</span> <button @click="toggle">切换</button> </div> </body> <script> //view model new Vue({ el:"#app", 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.1vue-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.2axios

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引入

4.2.2get请求

//通过给定的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.3post请求

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

为方便起见，为所有支持的请求方法提供了别名

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

5.综合案例

5.1案例需求

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

5.2数据库设计与表结构

CREATE DATABASE vuejsdemo; USE vuejsdemo; CREATE TABLE USER( id INT PRIMARY KEY AUTO_INCREMENT, age INT, username VARCHAR(20), PASSWORD VARCHAR(50), email VARCHAR(50), sex VARCHAR(20) )

User类

public class User { private Integer id; private String username; private String password; private String sex; private int age; private String email; 省略getter/setter ｝

5.3服务器端

5.3.1配置文件

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>org.example</groupId> <artifactId>vue1</artifactId> <version>1.0-SNAPSHOT</version> <packaging>war</packaging> <name>vue1 Maven Webapp</name> <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>  <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>  <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>  <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>

web.mxl

<?xml version="1.0" encoding="UTF-8"?> <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" version="2.5"> <display-name></display-name>  <context-param> <param-name>contextConfigLocation</param-name> <param-value>classpath:applicationContext.xml</param-value> </context-param>  <listener> <listener-class> org.springframework.web.context.ContextLoaderListener </listener-class> </listener>  <servlet> <servlet-name>springmvcDispatcherServlet</servlet-name> <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>  <init-param> <param-name>contextConfigLocation</param-name> <param-value>classpath:springmvc.xml</param-value> </init-param>  <load-on-startup>1</load-on-startup> </servlet> <servlet-mapping> <servlet-name>springmvcDispatcherServlet</servlet-name> <url-pattern>*.do</url-pattern> </servlet-mapping>  <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>

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">  <context:component-scan base-package="com.itheima.web.controller"></context:component-scan> <mvc:annotation-driven></mvc:annotation-driven> </beans>

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">  <context:component-scan base-package="com.itheima">  <context:exclude-filter type="annotation" expression="org.springframework.stereotype.Controller"/> </context:component-scan>  <context:property-placeholder location="classpath:db.properties"/>  <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>  <bean class="org.mybatis.spring.mapper.MapperScannerConfigurer"> <property name="basePackage" value="com.itheima.dao"/> </bean> <tx:annotation-driven/>  <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:config> <aop:pointcut expression="execution(* com.itheima.service.impl.*.*(..))" id="pt1"/> <aop:advisor advice-ref="txAdvice" pointcut-ref="pt1"/> </aop:config> </beans>

db.properties

jdbc.driver=com.mysql.jdbc.Driver jdbc.url=jdbc:mysql://localhost:3306/vue jdbc.username=root jdbc.password=root

5.3.2Controller

package com.itheima.web.controller; import com.itheima.domain.User; import com.itheima.service.IUserService; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestBody; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.ResponseBody; import java.util.List; @Controller @RequestMapping("/user") @ResponseBody public class UserController { @Autowired private IUserService userService; /** * 查询所有 * @return */ @RequestMapping("/findAll") public List<User> findAll(){ return userService.findAll(); } /** * 根据id查询 * @param id * @return */ @RequestMapping("/findById") public User findById(Integer id){ return userService.findById(id); } /** * 更新数据 * @param user */ @RequestMapping("/updateUser") public void updateUser(@RequestBody User user){ userService.updateUser(user); } }

5.3.3Dao

package com.itheima.dao; import com.itheima.domain.User; import org.apache.ibatis.annotations.Select; import org.apache.ibatis.annotations.Update; import java.util.List; 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.3.4Service

package com.itheima.service; import com.itheima.domain.User; import org.apache.ibatis.annotations.Select; import org.apache.ibatis.annotations.Update; import java.util.List; public interface IUserService { List<User> findAll(); User findById(Integer userId); void updateUser(User user); }

5.3.4ServiceImpl

package com.itheima.service.impl; import com.itheima.dao.IUserDao; import com.itheima.domain.User; import com.itheima.service.IUserService; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Service; import java.util.List; @Service public class UserServiceImpl implements IUserService { @Autowired private IUserDao userDao; @Override public List<User> findAll() { return userDao.findAll(); } @Override public User findById(Integer userId) { return userDao.findById(userId); } @Override public void updateUser(User user) { userDao.updateUser(user); } }

5.4客户端

5.4.1user.html页面

<!DOCTYPE html> <html> <head>  <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="/vue1/plugins/bootstrap/css/bootstrap.min.css"> <link rel="stylesheet" href="/vue1/plugins/font-awesome/css/font-awesome.min.css"> <link rel="stylesheet" href="/vue1/plugins/ionicons/css/ionicons.min.css"> <link rel="stylesheet" href="/vue1/plugins/iCheck/square/blue.css"> <link rel="stylesheet" href="/vue1/plugins/morris/morris.css"> <link rel="stylesheet" href="/vue1/plugins/jvectormap/jquery-jvectormap-1.2.2.css"> <link rel="stylesheet" href="/vue1/plugins/datepicker/datepicker3.css"> <link rel="stylesheet" href="/vue1/plugins/daterangepicker/daterangepicker.css"> <link rel="stylesheet" href="/vue1/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css"> <link rel="stylesheet" href="/vue1/plugins/datatables/dataTables.bootstrap.css"> <link rel="stylesheet" href="/vue1/plugins/treeTable/jquery.treetable.css"> <link rel="stylesheet" href="/vue1/plugins/treeTable/jquery.treetable.theme.default.css"> <link rel="stylesheet" href="/vue1/plugins/select2/select2.css"> <link rel="stylesheet" href="/vue1/plugins/colorpicker/bootstrap-colorpicker.min.css"> <link rel="stylesheet" href="/vue1/plugins/bootstrap-markdown/css/bootstrap-markdown.min.css"> <link rel="stylesheet" href="/vue1/plugins/adminLTE/css/AdminLTE.css"> <link rel="stylesheet" href="/vue1/plugins/adminLTE/css/skins/_all-skins.min.css"> <link rel="stylesheet" href="/vue1/css/style.css"> <link rel="stylesheet" href="/vue1/plugins/ionslider/ion.rangeSlider.css"> <link rel="stylesheet" href="/vue1/plugins/ionslider/ion.rangeSlider.skinNice.css"> <link rel="stylesheet" href="/vue1/plugins/bootstrap-slider/slider.css"> <link rel="stylesheet" href="/vue1/plugins/bootstrap-datetimepicker/bootstrap-datetimepicker.css"> </head> <body class="hold-transition skin-purple sidebar-mini"> <div class="wrapper" id="app">  <header class="main-header">  <a href="all-admin-index.html" class="logo">  <span class="logo-mini"><b>数据</b></span>  <span class="logo-lg"><b>数据</b>后台管理</span> </a>  <nav class="navbar navbar-static-top">  <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">  <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>  <ul class="menu"> <li>  <a href="#"> <div class="pull-left"> <img src="/vue1/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>  <li> <a href="#"> <div class="pull-left"> <img src="/vue1/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="/vue1/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="/vue1/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="/vue1/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>  <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>  <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>  <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>  <ul class="menu"> <li>  <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>  <li>  <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>  <li>  <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>  <li>  <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>  </ul> </li> <li class="footer"> <a href="#">View all tasks</a> </li> </ul> </li>  <li class="dropdown user user-menu"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> <img src="/vue1/img/user2-160x160.jpg" class="user-image" alt="User Image"> <span class="hidden-xs">张猿猿</span> </a> <ul class="dropdown-menu">  <li class="user-header"> <img src="/vue1/img/user2-160x160.jpg" class="img-circle" alt="User Image"> <p> 张猿猿 - 数据管理员 <small>最后登录 11:20AM</small> </p> </li>  <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">  <section class="sidebar">  <div class="user-panel"> <div class="pull-left image"> <img src="/vue1/img/user2-160x160.jpg" class="img-circle" alt="User Image"> </div> <div class="pull-left info"> <p>张猿猿</p> <a href="#"><i class="fa fa-circle text-success"></i> 在线</a> </div> </div>     <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>  </aside>     <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">  <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">×</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>  </div>  </div>  </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>   <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>  </div> </section>  </div>    <footer class="main-footer"> <div class="pull-right hidden-xs"> <b>Version</b> 1.0.8 </div> <strong>Copyright © 2014-2017 <a href="http://www.itcast.cn">研究院研发部</a>.</strong> All rights reserved. </footer>  </div> <script src="/vue1/plugins/jQuery/jquery-2.2.3.min.js"></script> <script src="/vue1/plugins/jQueryUI/jquery-ui.min.js"></script> <script> $.widget.bridge('uibutton', $.ui.button); </script> <script src="/vue1/plugins/bootstrap/js/bootstrap.min.js"></script> <script src="/vue1/plugins/raphael/raphael-min.js"></script> <script src="/vue1/plugins/morris/morris.min.js"></script> <script src="/vue1/plugins/sparkline/jquery.sparkline.min.js"></script> <script src="/vue1/plugins/jvectormap/jquery-jvectormap-1.2.2.min.js"></script> <script src="/vue1/plugins/jvectormap/jquery-jvectormap-world-mill-en.js"></script> <script src="/vue1/plugins/knob/jquery.knob.js"></script> <script src="/vue1/plugins/daterangepicker/moment.min.js"></script> <script src="/vue1/plugins/daterangepicker/daterangepicker.js"></script> <script src="/vue1/plugins/daterangepicker/daterangepicker.zh-CN.js"></script> <script src="/vue1/plugins/datepicker/bootstrap-datepicker.js"></script> <script src="/vue1/plugins/datepicker/locales/bootstrap-datepicker.zh-CN.js"></script> <script src="/vue1/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js"></script> <script src="/vue1/plugins/slimScroll/jquery.slimscroll.min.js"></script> <script src="/vue1/plugins/fastclick/fastclick.js"></script> <script src="/vue1/plugins/iCheck/icheck.min.js"></script> <script src="/vue1/plugins/adminLTE/js/app.min.js"></script> <script src="/vue1/plugins/treeTable/jquery.treetable.js"></script> <script src="/vue1/plugins/select2/select2.full.min.js"></script> <script src="/vue1/plugins/colorpicker/bootstrap-colorpicker.min.js"></script> <script src="/vue1/plugins/bootstrap-wysihtml5/bootstrap-wysihtml5.zh-CN.js"></script> <script src="/vue1/plugins/bootstrap-markdown/js/bootstrap-markdown.js"></script> <script src="/vue1/plugins/bootstrap-markdown/locale/bootstrap-markdown.zh.js"></script> <script src="/vue1/plugins/bootstrap-markdown/js/markdown.js"></script> <script src="/vue1/plugins/bootstrap-markdown/js/to-markdown.js"></script> <script src="/vue1/plugins/ckeditor/ckeditor.js"></script> <script src="/vue1/plugins/input-mask/jquery.inputmask.js"></script> <script src="/vue1/plugins/input-mask/jquery.inputmask.date.extensions.js"></script> <script src="/vue1/plugins/input-mask/jquery.inputmask.extensions.js"></script> <script src="/vue1/plugins/datatables/jquery.dataTables.min.js"></script> <script src="/vue1/plugins/datatables/dataTables.bootstrap.min.js"></script> <script src="/vue1/plugins/chartjs/Chart.min.js"></script> <script src="/vue1/plugins/flot/jquery.flot.min.js"></script> <script src="/vue1/plugins/flot/jquery.flot.resize.min.js"></script> <script src="/vue1/plugins/flot/jquery.flot.pie.min.js"></script> <script src="/vue1/plugins/flot/jquery.flot.categories.min.js"></script> <script src="/vue1/plugins/ionslider/ion.rangeSlider.min.js"></script> <script src="/vue1/plugins/bootstrap-slider/bootstrap-slider.js"></script> <script src="/vue1/plugins/bootstrap-datetimepicker/bootstrap-datetimepicker.js"></script> <script src="/vue1/plugins/bootstrap-datetimepicker/locales/bootstrap-datetimepicker.zh-CN.js"></script> <script src="/vue1/js/vuejs-2.5.16.js"></script> <script src="/vue1/js/axios-0.18.0.js"></script> <script src="/vue1/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.4.2user.js页面

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

Processed: 0.015, SQL: 9