其他分享
首页 > 其他分享> > 大型项目技术栈第一讲 Vue.js的使用

大型项目技术栈第一讲 Vue.js的使用

作者:互联网

Vue.js的使用 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,保证视图和数据的一致性,这种轻量级的架构让前端开发更加高效、便捷
在这里插入图片描述

1.3 VueJS 快速入门

1.3.1创建Module

在这里插入图片描述

1.3.2 然后修改名字–>Next–>完成;完成后里面是空的

1.3.3 在项目下创建js文件夹,将vuejs.js文件放入js文件夹,这个是工具

1.3.4 创建mode.html(下面就是,其也是快速入门案例)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--
直接下载并用 <script> 标签引入,Vue 会被注册为一个全局变量。

重要提示:在开发时请用开发版本,遇到常见错误它会给出友好的警告
-->
    <script src="js/vuejs-2.5.16.js"></script>
</head>
<body>

<div id="app">
    {{info}}
</div>
<script>

    new Vue({
       el:"#app",               //表示当前Vue对象管理div区域
       data:{
           info:"Vue_HelloWorld"
       }
    });
</script>
</body>
</html>

Vue调试神器vue-devtools

vue-devtools是一款基于chrome游览器的插件,用于调试vue应用,这可以极大地提高我们的调试效率

游览器输入地址“chrome://extensions/”进入扩展程序页面,点击“加载已解压的扩展程序…”按钮,选择解压好的vue-devtools文件夹。

如果看不见“加载已解压的扩展程序…”按钮,则需要勾选“开发者模式”。

在这里插入图片描述

到此添加完成,效果图如下:

在这里插入图片描述

打开vue项目,在控制台选择vue:

在这里插入图片描述

7.点击vue,查看数据

在这里插入图片描述

1.4 插值表达式

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

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

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

例如:

<body>

<div id="app">
    {{number+1}}
    <hr>
    {{flag?"东方标准":"小标"}}
</div>
<script>
    new Vue({
       el:"#app",               //表示当前Vue对象管理div区域
       data:{
           info:"Vue_HelloWorld",
           number:1,
           flag:true
       }
    });
</script>
</body>

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

<!-- 这是语句,不是达式 -->
{{ var a = 1 }}
<!-- 流控制也不会生效,请使用三元表达式 -->
{{ if (ok) { return message } }}
2. VueJS 常用系统指令

2.1 v-on

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

2.1.1 v-on:click

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
   <script src="js/vuejs-2.5.16.js"></script>
</head>
<body>

<div id="app" v-on:click="fun1('vue的点击事件触发啦!')" style="width: 200px;height: 200px;border:1px solid red;">
   {{info}}
</div>

<script>
   new Vue({
       el: "#app",
       data: {
           info:"我是div"
       },
       methods:{
           fun1:function (msg) {
               this.info=msg;
           }
       }
   });
</script>

</body>
</html>

2.1.2 v-on:keydown

<!DOCTYPE html>
<html xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
   <meta charset="utf-8"/>
   <title>事件处理 v-on示例2</title>
   <script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
   <input type="text" v-on:keydown="fun2($event)">
</div>
<script>
   new Vue({
       el: '#app',
       methods: {
           fun2: function (e) {
               //只能输入数字
               if(!(e.keyCode>=48 && e.keyCode<=57)){
                   e.preventDefault();         //阻止事件默认行为
               }
           }
       }
   });
</script>
</body>
</html>

$event-事件对象

使用不带圆括号的形式,event 对象将被自动当做实参传入:v-on:keydown=“fun2”

使用带圆括号的形式,我们需要使用 $event 变量显式传入 event 对象:v-on:keydown=“fun2($event)”

preventDefault()-阻止默认事件

2.1.3 v-on:mouseover

<!DOCTYPE html>
<html xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
   <meta charset="utf-8" />
   <title>事件处理 v-on示例3</title>
   <script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
   <div v-on:mouseover="fun1" id="div" style="background:red;">
       <textarea v-on:mouseover="fun2($event)">这是一个文件域</textarea>
   </div>
</div>
<script>
   new Vue({
       el : '#app', 
       methods : {
           fun1 : function() {
               alert("div");
           },
           fun2 : function(event) {
               alert("textarea");
               event.stopPropagation();//阻止冒泡
           }
       }
   });
</script>
</body>
</html>

2.1.4 事件修饰符

Vue.js 为 v-on 提供了事件修饰符来处理 DOM 事件细节,如:event.preventDefault() event.stopPropagation()

Vue.js通过由点(.)表示的指令后缀来调用修饰符。

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
   <script src="js/vuejs-2.5.16.js"></script>
</head>
<body>

<div id="app">
   <!--阻止默认事件-->
   <form @submit.prevent action="http://www.baidu.com">
       <input type="submit">
   </form>
   <hr>
   <!--阻止事件冒泡-->
   <div @click="fun1">
       <a @click.stop href="https://www.jd.com">京东</a>
   </div>
</div>
<script>
   new Vue({
       el:"#app",
       methods:{
           fun1:function () {
               alert("div!");
           }
       }
   })
</script>
</body>
</html>

v-on简写方式

<!-- 完整语法 -->
<a v-on:click="doSomething">...</a>
<!-- 缩写 -->
<a @click="doSomething">...</a>
<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>

<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即元素自身触发的事件先在此处理,然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>

2.1.5 按键修饰符

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

全部的按键别名:

.enter

.tab

.delete (捕获 “删除” 和 “退格” 键)

.esc

.space

.up

.down

.left

.right

.ctrl

.alt

.shift

.meta

<!DOCTYPE html>
<html xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
   <meta charset="utf-8" />
   <title>v-on 按钮修饰符</title>
   <script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
   <!--监听回车按下-->
   <input type="text" v-on:keyup.enter="fun1">
</div>
<script>
   new Vue({
       el : '#app', //表示当前vue对象接管了div区域
       methods : {
           fun1 : function() {
               location.href="https://www.baidu.com";
           }
       }
   });
</script>
</body>
</html>

2.2 v-text与v-html

<!DOCTYPE html>
<html xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
   <meta charset="utf-8" />
   <title>title</title>
   <script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
   <div v-text="content"></div>
   <div v-html="content"></div>
</div>
<script>
   new Vue({
       el : '#app', //表示当前vue对象接管了div区域
       data:{
           content:"<h1>东方标准</h1>"
       }
   });
</script>
</body>
</html>

2.3 v-bind

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

<!DOCTYPE html>
<html xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8"/>
    <title>title</title>
    <script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
    <!--错误写法-->
<!--    <font color="{{color1}}">我是font1</font>-->
    <font v-bind:color="color1">我是font</font>
    <hr>
    <font v-bind:color="color2">我是font</font>
    <hr>
    <font v-bind:color="color3">我是font</font>
    <hr>
    <!-- v-bind简写方式 -->
    <font :color="color3">我是font</font>
    <hr>
    <a v-bind:href="url">百度一下</a>
    <!--简写-->
    <a :href="url">百度一下</a>
    <!--插入值写法-->
    <a v-bind={href:"https://www.baidu.com?id="+id} >百度一下</a>
</div>
<script>

    new Vue({

        el: "#app",
        data: {
            color1:"red",
            color2:"green",
            color3:"blue",
            id:10,
            url:"https://www.baidu.com"
        }

    });

</script>
</body>
</html>

2.4 v-model

<!DOCTYPE html>
<html xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
   <meta charset="utf-8"/>
   <title>title</title>
   <script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
   username: <input type="text" v-model="user.username">
   <hr>
   address: <input type="text" v-model="user.address">
   <hr>
   <button @click="fun1">弹出Vue中的username</button>
   <button @click="fun2">弹出Vue中的address</button>
</div>
<script>

   new Vue({
       el: "#app",
       data:{
           user:{
               username:'张三',
               address:'广州'
           }

       },
       methods:{
           fun1:function () {
               alert(this.user.username);
           },
           fun2:function () {
               alert(this.user.address);
           }
       }
   });

</script>
</body>
</html>

2.5 v-for

2.5.1 操作array

<!DOCTYPE html>
<html xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
   <meta charset="utf-8"/>
   <title>title</title>
   <script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
   <!--
       item:每次遍历到的值
       index:遍历的索引 从0开始
   -->
   <ul>
       <li v-for="(item,index) in list">{{item+" "+index}}</li>
   </ul>
</div>
<script>

   new Vue({
       el: "#app",
       data:{
           list:['南昌','赣州','抚州','上饶']
       }
   });
</script>
</body>
</html>

2.5.2 操作对象

<!DOCTYPE html>
<html xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8"/>
    <title>title</title>
    <script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">

    <ul>
        <li v-for="(val,key) in user">{{key+"-"+val}}</li>
    </ul>
</div>

<script>
    new Vue({
        el: "#app",
        data:{
            user:{
                username:'zhangsan',
                password:'123',
                address:'赣州'
            }
        }
    });
</script>
</body>
</html>

2.5.3 操作对象数组

<!DOCTYPE html>
<html xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
   <meta charset="utf-8"/>
   <title>title</title>
   <script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<table border="1" align="center" id="app" width="300">
   <tr>
       <th>姓名</th>
       <th>年龄</th>
       <th>地址</th>
   </tr>
   <tr v-for="user in userList">
       <td v-for="(val,key) in user">{{val}}</td>
   </tr>
</table>

<script>

   new Vue({
       el: "#app",
       data:{
           userList:[
               {
                   username:'张三',
                   age:20,
                   address:'南昌'
               },
               {
                   username:'李四',
                   age:22,
                   address:'赣州'
               },
               {
                   username:'王五',
                   age:25,
                   address:'九江'
               }
           ]
       }

   });
</script>
</body>
</html>

2.6 v-if与v-show

v-if是根据表达式的值来决定是否渲染元素

v-show是根据表达式的值来切换元素的display css属性

<!DOCTYPE html>
<html xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
   <meta charset="utf-8"/>
   <title>title</title>
   <script src="js/vuejs-2.5.16.js"></script>
</head>
<body>

<div id="app">
   <span v-if="flag">东方标准</span>
   <hr>
   <span v-show="flag">itdfbz</span>
   <hr>
   <button @click="fun1">true</button>
   <button @click="fun2">false</button>

</div>

<script>

   new Vue({
       el: "#app",
       data: {
           flag: false
       },
       methods:{
           fun1:function () {
               this.flag=true;
           },
           fun2:function () {
               this.flag=false;
           }
       }

   });
</script>
</body>
</html>
3.VueJS生命周期(了解)

每个 Vue 实例在被创建之前都要经过一系列的初始化过程.

在这里插入图片描述

vue在生命周期中有这些状态:

Vue在实例化的过程中,会调用这些生命周期的钩子,给我们提供了执行自定义逻辑的机会。那么,在这些vue钩子中,vue实例到底执行了那些操作,我们先看下面执行的例子

<!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}}</div>
<script>
   var v = 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 showData(process, obj) {
       console.log(process);
       console.log('data 数据:' + obj.message);
       console.log('挂载的对象:');
       console.log(obj.$el);
       console.log('真实dom结构:' + document.getElementById('app').innerHTML);
       console.log('------------------');
   }
   v.message = "update Data...";
   v.$destroy();
</script>
</body>
</html>
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 数据库设计与表结构

User表:

/*Table structure for table `user` */
CREATE TABLE `user` (
 `id` INT(11) NOT NULL AUTO_INCREMENT,
 `username` VARCHAR(50) DEFAULT NULL,
 `password` VARCHAR(50) DEFAULT NULL,
 `name` VARCHAR(50) DEFAULT NULL,
 PRIMARY KEY (`id`)
) ENGINE=INNODB AUTO_INCREMENT=3 DEFAULT CHARSET=utf8;

/*Data for the table `user` */
INSERT  INTO `user`(`id`,`username`,`password`,`name`) VALUES (1,'zhangsan','123','张三');
INSERT  INTO `user`(`id`,`username`,`password`,`name`) VALUES (2,'lisi','123','李四'); 

User类:

public class User {
    
private Integer id;//主键
    private String username;//用户名
    private String password;//密码
    private String name;//姓名

//此处省略getter和setter方法 .. ..
}

5.3 服务器端

5.3.1 配置文件

5.3.1.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>com.dfbz</groupId>
   <artifactId>02_Vue</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-aop</artifactId>
           <version>${spring.version}</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-web</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-beans</artifactId>
           <version>${spring.version}</version>
       </dependency>
       <dependency>
           <groupId>org.springframework</groupId>
           <artifactId>spring-core</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>
           <type>jar</type>
           <scope>compile</scope>
       </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.5</version>
       </dependency>

       <dependency>
           <groupId>com.fasterxml.jackson.core</groupId>
           <artifactId>jackson-databind</artifactId>
           <version>2.9.5</version>
       </dependency>

   </dependencies>

</project>

5.3.1.2 web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
        xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee
                     http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
        version="3.1"
        metadata-complete="true">
   <!-- 手动指定 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>springmvc</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>springmvc</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>

5.3.1.3 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.dfbz">
       <!-- 制定扫包规则 ,只扫描使用@Controller 注解的 JAVA 类 -->
       <context:include-filter type="annotation"
                               expression="org.springframework.stereotype.Controller"/>
   </context:component-scan>
   <mvc:annotation-driven></mvc:annotation-driven>
</beans>

5.3.1.4 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: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/context http://www.springframework.org/schema/context/spring-context.xsd">
    <!-- 配置 spring 创建容器时要扫描的包 -->
    <context:component-scan base-package="com.dfbz">
        <!--制定扫包规则,不扫描@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"/>
        <!-- 加载 mybatis 的全局配置文件 -->
        <property name="configLocation" value="classpath:SqlMapConfig.xml"/>
    </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.dfbz.dao"/>
    </bean>
    <tx:annotation-driven/>
    <!-- (事务管理)transaction manager, use JtaTransactionManager for global tx -->
    <bean id="transactionManager"
          class="org.springframework.jdbc.datasource.DataSourceTransactionManager">
        <property name="dataSource" ref="dataSource"/>
    </bean>
</beans>

5.3.1.5 db.properties

jdbc.driver=com.mysql.jdbc.Driver
jdbc.url=jdbc:mysql://localhost:3306/vue?useUnicode=true&characterEncoding=UTF-8
jdbc.username=root
jdbc.password=admin

5.3.2 Controller

package com.dfbz.controller;

import com.dfbz.domain.User;
import com.dfbz.service.UserService;
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;

@RequestMapping("/user")
@ResponseBody
@Controller
public class UserController {

   @Autowired
   private UserService userService;

   @RequestMapping("/findAll")
   public List<User> findAll(){
       return userService.findAll();
   }

   @RequestMapping("/findById")
   public User findById(Integer id){
       return userService.findById(id);
   }

   @RequestMapping("/update")
   public void update(@RequestBody User user){
       userService.update(user);
   }
}

5.3.3 Service

package com.dfbz.service;

import com.dfbz.domain.User;

import java.util.List;

public interface UserService {

    public List<User> findAll();

    User findById(Integer id);

    void update(User user);
}

package com.dfbz.service.impl;

import com.dfbz.dao.UserDao;
import com.dfbz.domain.User;
import com.dfbz.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;

import java.util.List;

@Service
@Transactional
public class UserServiceImpl implements UserService{

    @Autowired
    private UserDao userDao;

    @Override
    public List<User> findAll() {
        return userDao.findAll();
    }

    @Override
    public User findById(Integer id) {
        return userDao.findById(id);
    }

    @Override
    public void update(User user) {
        userDao.update(user);
    }
}

5.3.4 Dao

package com.dfbz.service;

import com.dfbz.domain.User;

import java.util.List;

public interface UserService {

   public List<User> findAll();

   User findById(Integer id);

   void update(User user);
}

5.4 客户端

5.4.1 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定制版">
   <!-- Tell the browser to be responsive to screen width -->
   <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">

   <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
   <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
   <!--[if lt IE 9]>
   <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>
   <![endif]-->

   <!-- 页面meta /-->

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

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

<div class="wrapper">

   <!-- 页面头部 -->
   <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="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="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="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="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="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="img/user2-160x160.jpg" class="user-image" alt="User Image">
                           <span class="hidden-xs">张猿猿</span>
                       </a>
                       <ul class="dropdown-menu">
                           <!-- User image -->
                           <li class="user-header">
                               <img src="img/user2-160x160.jpg" class="img-circle" alt="User Image">

                               <p>
                                   张猿猿 - 数据管理员
                                   <small>最后登录 11:20AM</small>
                               </p>
                           </li>
                           <!-- Menu Body
                   <li class="user-body">
                       <div class="row">
                           <div class="col-xs-4 text-center">
                               <a href="#">Followers</a>
                           </div>
                           <div class="col-xs-4 text-center">
                               <a href="#">Sales</a>
                           </div>
                           <div class="col-xs-4 text-center">
                               <a href="#">Friends</a>
                           </div>
                       </div>
                   </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="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>
           <!-- 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>

                       <li id="admin-register">
                           <a href="all-admin-register.html">
                               <i class="fa fa-circle-o"></i> 注册
                           </a>
                       </li>

                       <li id="admin-404">
                           <a href="all-admin-404.html">
                               <i class="fa fa-circle-o"></i> 404页
                           </a>
                       </li>

                       <li id="admin-500">
                           <a href="all-admin-500.html">
                               <i class="fa fa-circle-o"></i> 500页
                           </a>
                       </li>

                       <li id="admin-blank">
                           <a href="all-admin-blank.html">
                               <i class="fa fa-circle-o"></i> 空白页
                           </a>
                       </li>

                       <li id="admin-datalist">
                           <a href="user.html">
                               <i class="fa fa-circle-o"></i> 数据列表页
                           </a>
                       </li>

                       <li id="admin-dataform">
                           <a href="all-admin-dataform.html">
                               <i class="fa fa-circle-o"></i> 表单页
                           </a>
                       </li>

                       <li id="admin-profile">
                           <a href="all-admin-profile.html">
                               <i class="fa fa-circle-o"></i> 个人中心
                           </a>
                       </li>

                       <li id="admin-invoice">
                           <a href="all-admin-invoice.html">
                               <i class="fa fa-circle-o"></i> 发票
                           </a>
                       </li>

                       <li id="admin-invoice-print">
                           <a href="all-admin-invoice-print.html">
                               <i class="fa fa-circle-o"></i> 发票打印
                           </a>
                       </li>

                   </ul>
               </li>



               <li class="treeview">
                   <a href="#">
                       <i class="fa fa-pie-chart"></i> <span>图表Charts</span>
                       <span class="pull-right-container">
                       <i class="fa fa-angle-left pull-right"></i>
                   </span>
                   </a>
                   <ul class="treeview-menu">

                       <li id="charts-chartjs">
                           <a href="all-charts-chartjs.html">
                               <i class="fa fa-circle-o"></i> ChartJS
                           </a>
                       </li>

                       <li id="charts-morris">
                           <a href="all-charts-morris.html">
                               <i class="fa fa-circle-o"></i> Morris Charts
                           </a>
                       </li>

                       <li id="charts-flot">
                           <a href="all-charts-flot.html">
                               <i class="fa fa-circle-o"></i> Flot Charts
                           </a>
                       </li>

                       <li id="charts-inline">
                           <a href="all-charts-inline.html">
                               <i class="fa fa-circle-o"></i> Inline Charts
                           </a>
                       </li>

                   </ul>
               </li>



               <li class="treeview">
                   <a href="#">
                       <i class="fa fa-laptop"></i> <span>UI界面元素</span>
                       <span class="pull-right-container">
                       <i class="fa fa-angle-left pull-right"></i>
                   </span>
                   </a>
                   <ul class="treeview-menu">

                       <li id="elements-general">
                           <a href="all-elements-general.html">
                               <i class="fa fa-circle-o"></i> 标准 General
                           </a>
                       </li>

                       <li id="elements-icons">
                           <a href="all-elements-icons.html">
                               <i class="fa fa-circle-o"></i> 图标 Icons
                           </a>
                       </li>

                       <li id="elements-buttons">
                           <a href="all-elements-buttons.html">
                               <i class="fa fa-circle-o"></i> 按钮 Buttons
                           </a>
                       </li>

                       <li id="elements-sliders">
                           <a href="all-elements-sliders.html">
                               <i class="fa fa-circle-o"></i> 滑块 Sliders
                           </a>
                       </li>

                       <li id="elements-timeline">
                           <a href="all-elements-timeline.html">
                               <i class="fa fa-circle-o"></i> 时间线 Timeline
                           </a>
                       </li>

                       <li id="elements-modals">
                           <a href="all-elements-modals.html">
                               <i class="fa fa-circle-o"></i> 对话框样式 Modals
                           </a>
                       </li>

                       <li id="elements-widgets">
                           <a href="all-elements-widgets.html">
                               <i class="fa fa-circle-o"></i> 窗体小部件 widgets
                           </a>
                       </li>

                   </ul>
               </li>



               <li class="treeview">
                   <a href="#">
                       <i class="fa fa-edit"></i> <span>表单 Forms</span>
                       <span class="pull-right-container">
                       <i class="fa fa-angle-left pull-right"></i>
                   </span>
                   </a>
                   <ul class="treeview-menu">

                       <li id="form-general">
                           <a href="all-form-general.html">
                               <i class="fa fa-circle-o"></i> 基础表单元素
                           </a>
                       </li>

                       <li id="form-advanced">
                           <a href="all-form-advanced.html">
                               <i class="fa fa-circle-o"></i> 高级表单元素
                           </a>
                       </li>

                       <li id="form-editors">
                           <a href="all-form-editors.html">
                               <i class="fa fa-circle-o"></i> 编辑器
                           </a>
                       </li>

                   </ul>
               </li>



               <li class="treeview">
                   <a href="#">
                       <i class="fa fa-table"></i> <span>表格 tables</span>
                       <span class="pull-right-container">
                       <i class="fa fa-angle-left pull-right"></i>
                   </span>
                   </a>
                   <ul class="treeview-menu">

                       <li id="tables-simple">
                           <a href="all-tables-simple.html">
                               <i class="fa fa-circle-o"></i> 简单表格
                           </a>
                       </li>

                       <li id="tables-data">
                           <a href="all-tables-data.html">
                               <i class="fa fa-circle-o"></i> 数据表格
                           </a>
                       </li>

                   </ul>
               </li>



               <li class="treeview">
                   <a href="#">
                       <i class="fa fa-cube"></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="order-manage">
                           <a href="all-order-manage-list.html">
                               <i class="fa fa-circle-o"></i> 全部订单
                           </a>
                       </li>

                       <li id="order-cancel">
                           <a href="all-order-cancel-list.html">
                               <i class="fa fa-circle-o"></i> 退款
                           </a>
                       </li>

                   </ul>
               </li>



               <li class="treeview">
                   <a href="#">
                       <i class="fa fa-book"></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="travellog-manage">
                           <a href="all-travellog-manage-list.html">
                               <i class="fa fa-circle-o"></i> 游记列表
                           </a>
                       </li>

                       <li id="travellog-review">
                           <a href="all-travellog-review-list.html">
                               <i class="fa fa-circle-o"></i> 游记点评
                           </a>
                       </li>

                       <li id="travellog-setting">
                           <a href="all-travellog-setting-edit.html">
                               <i class="fa fa-circle-o"></i> 游记设置
                           </a>
                       </li>

                   </ul>
               </li>



               <li class="treeview">
                   <a href="#">
                       <i class="fa fa-cogs"></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="system-setting">
                           <a href="all-system-setting-edit.html">
                               <i class="fa fa-circle-o"></i> 系统设置
                           </a>
                       </li>

                   </ul>
               </li>



               <!-- 菜单 /-->

               <li id="admin-documentation"><a href="documentation.html" target="_blank"><i class="fa fa-book"></i> <span>AdminLTE汉化文档</span></a></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" id="app">

           <!-- .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="text-center sorting">姓名</th>
                               <th class="text-center">操作</th>
                           </tr>
                           </thead>
                           <tbody>
                           <tr v-for="(item,index) in userList">
                               <td>
                                   <input name="ids" type="checkbox">
                               </td>
                               <td>{{item.id}}</td>
                               <td>{{item.username}} </td>
                               <td>{{item.password}}</td>
                               <td>{{item.name}}</td>
                               <td class="text-center">
                                   <button type="button" class="btn bg-olive btn-xs">订单</button>
                                   <button type="button" class="btn bg-olive btn-xs">详情</button>
                                   <button type="button" class="btn bg-olive btn-xs" @click="findById(item.id)">编辑</button>
                               </td>
                           </tr>

                           </tbody>

                           <!--
                       <tfoot>
                       <tr>
                       <th>Rendering engine</th>
                       <th>Browser</th>
                       <th>Platform(s)</th>
                       <th>Engine version</th>
                       <th>CSS grade</th>
                       </tr>
                       </tfoot>-->
                       </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 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>
                                       <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.name">
                                               </div>
                                           </div>
                                       </div>
                                       <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.password">
                                               </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>
               <!--模态窗口/-->


           </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="http://www.itcast.cn">研究院研发部</a>.</strong> All rights reserved.
   </footer>
   <!-- 底部导航 /-->

</div>


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

new Vue({
   el:"#app",
   data:{
       userList:[],
       user:{}
   },
   methods:{
       findAll:function(){
           var url = "/user/findAll.do";
           //axios:是一个独立的框架,它不是vue的一部分
           var _this = this;//通过这个中转数据
           axios.get(url).then(function (response) {
               console.log(response)
               //给对象列表赋值
               _this.userList = response.data
           }).catch(function (reason) {
               console.log(reson)
           })
       },
       //根据id查询用户
       findById:function(id){
           //alert(id)
           //异步请求数据
           var url = "/user/findById.do";
           //axios:是一个独立的框架,它不是vue的一部分
           var _this = this;//通过这个中转数据
           axios.get(url,{
               params:{
                   id: id
               }
           }).then(function (response) {
               console.log(response)
               _this.user = response.data

           }).catch(function (reason) {
               console.log(reson)
           })
           //让模态窗口显示
           $("#myModal").modal("show")
       },
       update: function () {
           //alert(this.user.name);
           //异步请求数据
           var url = "/user/update.do";
           //axios:是一个独立的框架,它不是vue的一部分
           var _this = this;//通过这个中转数据
           axios.post(url,_this.user).then(function (response) {
               _this.findAll();
           }).catch(function (reason) {
               console.log(reson)
           })
       }
   },
   //生命周期的钩子
   created: function () {
       this.findAll();
   }
})

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);
    });
});
```

5.4.2 user.js文件

new Vue({
   el:"#app",
   data:{
       userList:[],
       user:{}
   },
   methods:{
       findAll:function(){
           var url = "/user/findAll.do";
           //axios:是一个独立的框架,它不是vue的一部分
           var _this = this;//通过这个中转数据
           axios.get(url).then(function (response) {
               console.log(response)
               //给对象列表赋值
               _this.userList = response.data
           }).catch(function (reason) {
               console.log(reson)
           })
       },
       //根据id查询用户
       findById:function(id){
           //alert(id)
           //异步请求数据
           var url = "/user/findById.do";
           //axios:是一个独立的框架,它不是vue的一部分
           var _this = this;//通过这个中转数据
           axios.get(url,{
               params:{
                   id: id
               }
           }).then(function (response) {
               console.log(response)
               _this.user = response.data

           }).catch(function (reason) {
               console.log(reson)
           })
           //让模态窗口显示
           $("#myModal").modal("show")
       },
       update: function () {
           //alert(this.user.name);
           //异步请求数据
           var url = "/user/update.do";
           //axios:是一个独立的框架,它不是vue的一部分
           var _this = this;//通过这个中转数据
           axios.post(url,_this.user).then(function (response) {
               _this.findAll();
           }).catch(function (reason) {
               console.log(reson)
           })
       }
   },
   //生命周期的钩子
   created: function () {
       this.findAll();
   }
})

标签:function,大型项目,vue,Vue,js,axios,user,org
来源: https://blog.51cto.com/u_14627411/3044738