公告

31-Vue

学习目标

第一章-VueJS介绍与快速入门

知识点-VueJS介绍

1.目标

了解vue

2.路径

什么是VueJS
VueJS特点
MVVM模式

3.讲解

3.1什么是VueJS

渐进式：循序渐进，vue是一个功能非常强大的前端js框架，其中包含了很多组件(A B C D E)，因此，在使用vue时，可以根据用户的需要循序渐进的引入到项目中使用。

框架：类库功能比较完善软件的半成品

Vue.js是一个渐进式JavaScript 框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定到组合的视图组件(数据双向绑定view-model)。它不仅易于上手，还便于与第三方库或既有项目整合。

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

3.2特点

易用
灵活
高效

3.3MVVM模式

MVVM是Model-View-ViewModel的简写。它本质上就是MVC 的改进版。

MVVM 就是将其中的View 的状态和行为抽象化，让我们将视图UI 和业务逻辑分开. MVVM模式和MVC模式一样，主要目的是分离视图（View）和模型（Model）Vue.js 是一个提供了 MVVM 风格的双向数据绑定的 Javascript 库，专注于View 层。它的核心是 MVVM 中的 VM，也就是 ViewModel。在代码编写中，也可以理解为就是我们创建的vue对象。 ViewModel负责连接 View 和 Model，保证视图和数据的一致性，这种轻量级的架构让前端开发更加高效、便捷.

1552546278610

4.小结

vue概念：VUE是一个渐进式的JavaScript框架，主要用于实现数据和视图的绑定。
MVVM模型：model view viewModel 通过VM可以实现视图和模型的双向数据绑定，VM就是可以理解为编码中vue对象。

案例-VueJs快速入门

1.需求

使用vue，对message赋值，并把值显示到页面

2.步骤

添加vue.js到项目中
在页面中引入vue.js
创建vue实例，声明message变量并赋值，使用插值表达式在页面展示

3.实现

创建工程(war|JavaScript),导入vuejs

1552546458928

创建index01.html(引入vuejs,定义div,创建vue实例)

<!DOCTYPE html>
<html lang="en">
<head>
    
    <title>Title</title>
    <script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
    <div id="app">
        <!--插值表达式 用于获取vue中声明的数据 绑定到页面显示  使用在标签体中-->
        <!--插值表达式可以执行运算  ，但是不能声明语句-->
        {{message}}
        {{num+1}}
        {{flag?"成功":"失败"}}
        <!-- 错误示例：{{var i=0;}}-->
    </div>
    <!--
    * vue使用步骤：
    *   1.在项目中引入vue.js文件
    *   2.在html页面中引入vue
    *   3.创建vue实例
    -->
<script>
var vm = new Vue({
		//声明vue使用的区域
		el:"#app",
		//声明数据
		data:{
		    message:"hello vue",
            num:100,
            flag:true
		},
		//声明函数
		methods:{

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

data ：用于定义数据。

methods：用于定义的函数，可以通过 return 来返回函数值。

4.小结

vue使用步骤：

将vue.js加入到项目
在html页面中引入vue的js文件

在script脚本中创建vue对象声明数据和函数以及指定vue使用区域

<!--创建vue实例 声明数据-->
<script>
    var vm = new Vue({
        //指定vue使用的区域  不可以指定为body
        el:"#app",
        //声明数据  1.可以封装请求参数  2.接收响应数据
        data:{
            message:"Hello Vue",
            flag:true,
            num:100
        },
        //声明函数
        methods: {

        }
    });
</script>

插值表达式
1. 用在标签体中展示数据
2. 插值表达式可以执行运算但是不能编写js语句

第二章-VueJS 常用系统指令【重点】

知识点-常用的事件【重点】

1.目标

掌握常用的事件

2.路径

@click
@keydown
@mouseover

3.讲解

3.1@click

说明: 点击事件(等同于v-on:click)

【需求】：点击按钮事件，改变message的值

index02.html

<!DOCTYPE html>
<html lang="en">
<head>
    
    <title>Title</title>
    <script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
    <div id="app">
        {{message}}<br>
        
        <!--点击事件
            语法：<标签 v-on:事件名="函数()"></标签>
            注意：①v-on可以简写为@  ②函数如果没有参数传递 ()可以省略  ③vue中事件绑定的函数写在vue声明的methods中
         -->
        <button v-on:click="fun01()">改变message的内容</button><br>
        <button @click="fun01()">改变message的内容</button><br>
        <button @click="fun01">改变message的内容</button><br>
    </div>

<script>
    var vm = new Vue({
            //声明vue使用的区域
            el:"#app",
            //声明数据
            data:{
                message:"hello vue"
            },
            //声明函数
            methods:{
                fun01:function () {
                    //vm.message="Hello SZ117"
                    //this = vm 指的是vue实例对象
                    this.message="Hello SZ117";
                }
            }
        });
</script>
</body>
</html>

3.2@keydown

说明: 键盘按下事件(等同于v-on:keydown)

【需求】：当文本输入框有键按下，在控制台输出"键盘按下"。

index02.html

<!DOCTYPE html>
<html lang="en">
<head>
    
    <title>Title</title>
    <script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
    <div id="app">
        <input type="text" name="username" @keydown="fun02()"><br>
    </div>

<script>
    var vm = new Vue({
            //声明vue使用的区域
            el:"#app",
            //声明数据
            data:{
                message:"hello vue"
            },
            //声明函数
            methods:{
                fun02:function (e) {
                    console.log("键盘按下！");
                }
            }
        });
</script>
</body>
</html>

3.3@mouseover

说明:鼠标移入区域事件(等同于v-on:mouseover)

【需求1】：给指定区域大小的div中添加样式，鼠标移到div中，弹出窗口。

index02.html

<!DOCTYPE html>
<html lang="en">
<head>
    
    <title>Title</title>
    <script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
    <div id="app">
        <div style="width: 200px;height: 200px;border: 1px solid black" @mouseover="fun03"></div>
    </div>

<script>
    var vm = new Vue({
            //声明vue使用的区域
            el:"#app",
            //声明数据
            data:{
                message:"hello vue"
            },
            //声明函数
            methods:{
                fun03:function () {
                    alert("鼠标移入！");
                }
            }
        });
</script>
</body>
</html>

4.小结

事件规则: 将js中的on换为@或v-on就可以实现事件绑定
语法：<标签 @事件名="函数()"></标签>
- onclick --> @click
- onkeydown --> @keydown
- onmouseover --> @mouseover
- ...
注意：
1. vue的系统指令作为HTML标签属性使用
2. vue事件绑定的函数写在vue实例的methods中
3. vue事件绑定的函数如果没有参数小括号()可以省略

知识点- v-text与v-html

1.目标

掌握v-text与v-html的使用

2.讲解

v-text：输出文本内容，不会解析html元素 js：innerText jQuery：text()

v-html：输出文本内容，会解析html元素 js：innerHTML jQuery：html()

用在标签的属性里面

【需求】：分别使用v-text, v-html 赋值 <h1>hello world<h1> ，查看页面输出内容。

<!DOCTYPE html>
<html lang="en">
<head>
    
    <title>Title</title>
    <script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
    <div id="app">
        <!--
            v-text：输出文本到标签体中 不会解析html标签
            v-html：输出文本到标签体中 会解析html标签
            注意：
                1.vue系统指令作为html标签属性使用
                2.vue系统指令可以直接获取vue中声明的数据data
        -->

        <p v-text="message"></p>
        <p v-html="message"></p>
    </div>


    <script>
    	var vm = new Vue({
    		//指定vue使用的区域  不可以指定为body
    		el:"#app",
    		//声明数据  1.可以封装请求参数  2.接收响应数据
    		data:{
    			message:"<h1>Hello Word</h1>"
    		},
    		//声明函数
    		methods: {

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

3.小结

v-text：输出文本到标签体中，不会解析html标签
v-html：输出文本到标签体中，会解析html标签
注意
- vue指令作为html标签的属性使用
- vue指令可以直接获取vue中声明的数据

知识点-v-bind和v-model【重点】

1.目标

掌握v-bind和v-model

2.路径

v-bind
v-model

3.讲解

3.1v-bind

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

【需求】：使用vue定义变量ys，对页面中的字体标签color属性赋值。

使用vue定义变量info，对页面中的超链接href属性赋值。

<!DOCTYPE html>
<html lang="en">
<head>
    
    <title>Title</title>
    <script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
    <div id="app">

        <!--
            问题：html标签自带属性无法直接获取vue中声明的数据data
            解决：使用v-bind指令帮助html标签自带属性可以获取vue中声明的数据
            使用：v-bind:color  简写 :color
        -->

        <font v-bind:color="ys">中国威武</font><br>
        <a :href="info">百度一下</a><br>

    </div>

    <script>
    	var vm = new Vue({
    		//指定vue使用的区域  不可以指定为body
    		el:"#app",
    		//声明数据  1.可以封装请求参数  2.接收响应数据
    		data:{
                ys:"red",
                info:"http://www.baidu.com"
    		},
    		//声明函数
    		methods: {

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

3.2v-model 【非常重要】

用于数据的绑定,数据的获取

【需求】：使用vue赋值json(对象)数据，并显示到页面的输入框中（表单回显）. 点击按钮，改变json数据，验证同时输入框的内容也发生改变。

<!DOCTYPE html>
<html lang="en">
<head>
    
    <title>Title</title>
    <script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
    <div id="app">
	 <!--
            v-model：实现数据双向绑定  可以将数据绑定到视图显示，一旦视图显示发送改变，数据也跟着改变
                注意：v-model用在输入框中
        -->
        username：<input type="text" v-model="user.username"><br>
        password：<input type="text" v-model="user.password"><br>

        {{user}}<br>

    </div>

    <script>
    	var vm = new Vue({
    		//指定vue使用的区域  不可以指定为body
    		el:"#app",
    		//声明数据  1.可以封装请求参数  2.接收响应数据
    		data:{
                //这个user就可以表示后台响应的数据
                //这个user同时也可以表示获取页面数据  作为请求参数
                user:{
                    "username":"zs",
                    "password":"123"
                }
    		},
    		//声明函数
    		methods: {

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

4.小结

v-bind：为html标签自带属性绑定获取vue中声明的数据简写：
v-model：使用在输入框中，实现数据和视图的双向绑定，一旦数据发生改变，视图显示也会变，如果视图显示发生改变，数据也会跟着变。

知识点-v-for,v-if,v-show

1.目标

掌握v-for,v-if,v-show的使用

2.路径

v-for
v-if
v-show

3.讲解

3.1 v-for【重点】

用于操作array/集合，遍历

语法: v-for="(元素,index) in 数组/集合"

【需求】：使用v-for遍历数组，并把数据遍历到页面上的

标签中。

<!DOCTYPE html>
<html lang="en">
<head>
    
    <title>Title</title>
    <script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
    <div id="app">

        <!--需求1：将数组中的数据遍历出来在li标签中显示-->
        <ul>
            <!--
                语法：<标签 v-for="(element,index) in 要遍历的集合|数组"></标签>
                v-for:遍历  每遍历一次 就输出一行li 遍历出来的数组元素 在标签体中通过插值表达式获取
            -->
            <li v-for="(element,index) in arr">{{element}}</li>
        </ul>
        <!--需求2：将后台响应的用户集合数据在页面上通过表格显示-->
        <table width="200px" border="1px" cellpadding="0" cellspacing="0">
            <tr>
                <td>姓名</td>
                <td>年龄</td>
            </tr>
            <tr v-for="(user,index) in users">
                <td>{{user.username}}</td>
                <td>{{user.age}}</td>
            </tr>
        </table>

    </div>

    <script>
    	var vm = new Vue({
    		//指定vue使用的区域  不可以指定为body
    		el:"#app",
    		//声明数据  1.可以封装请求参数  2.接收响应数据
    		data:{
                arr:["张三","李四","王五"],
                users:[
                    {"username":"zs","age":18},
                    {"username":"ls","age":28},
                    {"username":"ww","age":38},
                ]
    		},
    		//声明函数
    		methods: {

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

3.2v-if【重点】与v-show

v-if是根据表达式的值来决定是否渲染元素(标签都没有了)

v-show是根据表达式的值来切换元素的css属性 display(标签还在)

【需求】：使用vue赋值flag变量（boolean类型），用来判断

元素中的内容是否显示。

<!DOCTYPE html>
<html lang="en">
<head>
    
    <title>Title</title>
</head>
<body>
<div id="app">
    <!--
        v-if:控制元素的显示和隐藏     属性值为true|false
        v-show:控制元素的显示和隐藏   属性值为true|false
        注意：当属性值为true时，使用v-if或v-show 标签都会正常显示
             当属性值为false是，使用v-if或v-show 标签都不会显示   但是v-if是直接删除了标签，而v-show是设置标签的css样式display=none使标签隐藏
    -->
    <h1>Hello VUE</h1>
    <h1 v-if="flag">Hello VUE</h1>
    <h1 v-show="flag">Hello VUE</h1>

</div>

<script src="js/vuejs-2.5.16.js"></script>
<script>
    var vm = new Vue({
        //指定vue使用的区域
        el: "#app",
        //vue声明的数据 表示前端要传递的参数和后台响应的数据
        data: {
            flag:false
        },
        //vue中声明的函数
        methods: {}
    });
</script>
</body>
</html>

4.小结

v-for:作为标签的属性使用, 遍历

<标签 v-for="(元素,索引) in 数组|集合">{{元素}}</标签>
元素和索引的名称可以随便起

v-if和v-show: 作为标签的属性使用的, 决定了标签是否展示

<标签 v-if="boolean类型的值"></标签>

//1.v-if或v-show里面是true, 正常展示
//2.v-if里面是false,   不展示,连显示内容的标签一并删除
//3.v-show里面是false，不展示，将展示内容的标签css属性display设置为none隐藏

vue常用指令小结：

v-on：事件绑定简写@ <标签 @事件名称="函数()"></标签>
v-text：输出文本内容到标签体中不会解析html标签 <标签 v-text="..."></标签>
v-html：输出文本内容到标签体中会解析html标签 <标签 v-html="..."></标签>
v-bind：为html标签自带属性绑定数据简写: <标签 :标签属性="..."></标签>
v-model：用于输入框实现数据双向绑定 <标签 v-model="..."></标签>
v-for：遍历数据 <标签 v-for="(元素,索引) in 数组|集合">{{元素}}</标签>
v-if：控制标签显示和隐藏 <标签 v-if="boolean类型的值"></标签>
v-show：控制标签显示和隐藏 <标签 v-show="boolean类型的值"></标签>

注意：

		1. ==vue指令作为html标签属性使用==
		2. ==vue指令可以直接获取vue中声明的数据进行使用==

第三章-VueJS生命周期【了解】

知识点--VueJS生命周期

1.目标

了解vue生命周期

2.路径

什么是VueJS生命周期
vuejs生命周期的演示

3.讲解

3.1.什么是VueJS生命周期

生命周期：指的就是对象从创建到销毁的过程类似人的一生

vue生命周期：vue从创建到销毁的过程自动完成

生命周期函数 -- 钩子函数

每个 Vue 实例在被创建到销毁都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。

1552550270204

beforeCreate ：数据还没有监听，没有绑定到vue对象实例，同时也没有挂载对象
created ：数据已经绑定到了对象实例，但是还没有挂载对象（使用ajax可在此方法中查询数据，调用函数）
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,destroyed :实例的销毁，vue实例还是存在的，只是解绑了事件的监听、还有watcher对象数据
与view的绑定，即数据驱动

3.2.vuejs生命周期的演示

<!DOCTYPE html>
<html lang="en">
<head>
    
    <title>Title</title>
</head>
<body>
<div id="app">
    <span id="spanId">{{message}}</span>
</div>

<script src="js/vuejs-2.5.16.js"></script>
<!--
    vue生命周期：指的就是vue实例从创建到销毁的过程！【自动】
	初始化：
		new Vue():开始创建vue实例
		beforeCreate：vue实例创建完成之前，初始化了vue中的事件和生命周期函数
		created：vue实例创建完成  初始化data和methods
			     如果我希望页面一打开就加载数据 在crated时向后台发起请求就是最早的时机  因为在这里可以进行数据的绑定
	服务：
		beforeMount：挂载之前   页面模板已经编译完成，但是数据data还没有填充
		mounted：挂载完成  数据已经填充到了页面
		beforeUpdate：更新之前
		updated：更新完成
	销毁：
		当调用了 vm.$destroy() 开始销毁vue实例
		beforeDestroy：销毁之前
		destroyed：销毁完成
-->
<script>
    var vm = new Vue({
        //指定vue使用的区域
        el: "#app",
        //vue声明的数据 表示前端要传递的参数和后台响应的数据
        data: {
            message: "Hello SZ116"
        },
        //vue中声明的函数
        methods: {},
        //vue生命周期函数 写在methods后面 ，不要将vue生命周期函数写到methods中了！！！
        beforeCreate:function () {
            console.log("beforeCreate...");
            console.log("message="+this.message);
        },
        //重点  这个时候表示vue实例已经创建成功，是 最早的时机，可以向后台发起ajax请求 实现数据绑定显示
        created:function () {
            console.log("created...");
            console.log("message="+this.message);
        },
        beforeMount:function () {
            console.log("beforeMount...");
            console.log("message="+document.getElementById("spanId").innerHTML);
        },
        mounted:function () {
            console.log("mounted...");
            console.log("message="+document.getElementById("spanId").innerHTML);
        },
        beforeDestroy:function () {
            console.log("beforeDestroy...");
        },
        destroyed:function () {
            console.log("destroyed...");
        }

    });

    //手动销毁
    vm.$destroy();
</script>
</body>
</html>

结果

4.小结

一般情况下我们会在created或者mounted进行初始化(请求服务器获得数据绑定)，实际上往往就是在created这个阶段。

vue生命周期：指的就是vue实例从创建到销毁的过程！【自动】
生命周期函数==钩子函数
	初始化：
		new Vue():开始创建vue实例
		beforeCreate：vue实例创建完成之前，初始化了vue中的事件和生命周期函数
		created：vue实例创建完成  初始化data和methods
			     如果我希望页面一打开就加载数据 在crated时向后台发起请求就是最早的时机  因为在这里可以进行数据的绑定
	服务：
		beforeMount：挂载之前   页面模板已经编译完成，但是数据data还没有填充
		mounted：挂载完成  数据已经填充到了页面
		beforeUpdate：更新之前
		updated：更新完成
	销毁：
		当调用了 vm.$destroy() 开始销毁vue实例
		beforeDestroy：销毁之前
		destroyed：销毁完成

第四章-VueJS ajax【重点】

知识点-VueJS ajax

1.目标

掌握vue的ajax的使用

2.路径

了解vue-resource
axios
- 什么是axios
- axios的语法
- axios的使用

3.讲解

3.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

Get方式

1552552968981

Post方式

1552552988792

3.2.axios【重点】

3.2.1什么是axios

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中

简单理解：axios就是vue中提供实现ajax请求的库，使用它就可以发送ajax请求。

注: Promise 对象用于表示一个异步操作的最终状态（完成或失败），以及其返回的值。

axios的github:https://github.com/axios/axios

中文说明: https://www.kancloud.cn/yunye/axios/234845

3.2.2axios的语法

get请求

// 为给定 ID 的 user 创建请求
axios.get('/user?ID=12345')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

// 可选地，上面的请求可以这样做
axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

post请求

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

axios方式(原始方式)

1552553529807

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

axios.get("url?请求参数").then().catch();
axios.post("url",{}).then().catch();

2.3axios的使用

需求:使用axios读取user.json文件的内容，并在页面上输出内容

步骤:

准备user.json文件
在html页面引入vue和axios的js文件【注意：axios的引入要在vue的后面】
在vue的data中声明一个变量用于接收响应的数据
使用axios发送ajax请求获取响应数据绑定到data中声明的变量上，使用插值表达式或vue指令将数据绑定到页面展示

axios基本使用

<!DOCTYPE html>
<html lang="en">
<head>
    
    <title>Title</title>
    <!--注意：axios的引入要在vue的后面-->
    <script src="js/vuejs-2.5.16.js"></script>
    <script src="js/axios-0.18.0.js"></script>
</head>
<body>
    <div id="app">
        {{users}}
    </div>
<script>
var vm = new Vue({
		//声明vue使用的区域
		el:"#app",
		//声明数据
		data:{
            users:[]
		},
		//声明函数
		methods:{

		},
        created:function () {
            //1.发送ajax请求
            //1.1：使用普通函数进行请求成功处理  this不表示vue实例
            /*axios.get("js/user.json").then(function (response) {
                console.log(response);
                //response表示后台响应的json格式数据  代表响应信息
                //将response转为字符串格式显示
                console.log(JSON.stringify(response));
                //response表示响应信息  response.data：才具体表示后台的响应数据
                console.log(response.data);
                //在axios中  如果使用的是普通函数 function(response){}  this不表示vue实例
                vm.users = response.data;
            });*/

            //1.2：使用箭头函数进行请求成功处理  this表示的就是vue实例
            //如果出现编写箭头函数报错  原因一般是你当前工具中配置的js版本较低 选择ES6+即可
            //settings--language--JavaScript--ECMAScript6+
            /*axios.get("js/user.json").then(response=>{
                //在axios中  使用箭头函数时  此时this表示的就是vue实例 基于ES6的新特性
                this.users = response.data;
            });*/

            //1.3：使用axios发送post请求
            axios.post("js/user.json").then(response=>{
                this.users = response.data;
            });

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

axios使用细节

<!DOCTYPE html>
<html lang="en">
<head>
    
    <title>Title</title>
    <!--注意：axios的引入要在vue的后面-->
    <script src="js/vuejs-2.5.16.js"></script>
    <script src="js/axios-0.18.0.js"></script>
</head>
<body>
    <div id="app">
        {{users}}
    </div>
<script>
var vm = new Vue({
		//声明vue使用的区域
		el:"#app",
		//声明数据
		data:{
            users:[]
		},
		//声明函数
		methods:{

		},
        created:function () {
            //1.参数传递
            //get请求方式参数传递  一般在url后使用?进行参数拼接
            /*axios.get("js/user.json?username=zs").then(response=>{
                this.users = response.data;
            });*/
            //post请求方式参数传递
            /*axios.post("js/user.json", {"username":"ls"}).then(response=>{
                //response表示后台响应的信息  response.data才表示后台处理真正响应的数据
                this.users=response.data;
            });*/
            //2.异常处理  如果代码没有异常或者说不想进行异常处理 可以不需要使用catch()
            axios.post("js/user.json1", {"username":"ls"}).then(response=>{
                //response表示后台响应的信息  response.data才表示后台处理真正响应的数据
                this.users=response.data;
            }).catch(error=>{
                //error.response :表示错误信息
                console.log(error.response);
                alert("服务器异常！");
            });

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

4.小结

axios是vue发送ajax请求的一个库，注意使用axios时，在vue之后进行引入
使用
1. axios.get("请求地址?请求参数").then(response=>{}).catch(error=>{});
2. axios.post("请求地址",{请求参数}).then(response=>{}).catch(error=>{});

第五章-综合案例

案例一显示所有联系人案例

一，案例需求

页面Html+VUE(axios) --> 后台(响应json)
查询数据库里面所有的联系人, 展示在页面

二, 思路分析

在list.html中发起ajax请求

//希望页面一打开就加载数据显示  所以在vue生命周期函数created时发送ajax请求，获取数据

//1.获取参数【没有省略】
//2.发起ajax请求  使用vue的axios
axios.get("linkMan?method=findAll").then(response=>{
    //3.请求成功处理
    //response.data=result对象    result.flag：表示请求处理结果 成功还是失败
    if(response.data.flag){
        	//数据绑定
       		this.linkmans = response.data.result;
       }else{
           alert(response.data.message);
       }
});

后台LinkManServlet接收请求处理响应json数据

//1.获取请求参数【没有】
//2.调用业务处理
//3.响应json   【重点】
//3.1：将数据封装到result对象中
//3.2：将result对象转为json响应给浏览器

将所有联系人数据绑定到视图html展示使用v-for遍历和插值表达式{{}}输出到标签体中显示

三, 代码实现

1.准备工作

数据库的创建

CREATE TABLE linkman (
  id int primary key auto_increment,
  name varchar(50),
  sex varchar(50),
  age int,
  address varchar(50),
  qq varchar(50),
  email varchar(50)
);

INSERT INTO `linkman`  (`id`, `name`, `sex`, `age`, `address`, `qq`, `email`) VALUES
(null, '张三', '男', 11, '广东', '766335435', '766335435@qq.com'),
(null, '李四', '男', 12, '广东', '243424242', '243424242@qq.com'),
(null, '王五', '女', 13, '广东', '474574574', '474574574@qq.com'),
(null, '赵六', '女', 18, '广东', '77777777', '77777777@qq.com'),
(null, '钱七', '女', 15, '湖南', '412132145', '412132145@qq.com'),
(null, '王八', '男', 25, '广西', '412132775', '412132995@qq.com');

JavaBean的创建

public class LinkMan implements Serializable{
    private int id;
    private String name;
    private String sex;
    private int age;
    private String address;
    private String qq;
    private String email;
}

jar包
工具类
配置文件
页面

2.代码

list.html

<!DOCTYPE html>
<!-- 网页使用的语言 -->
<html lang="zh-CN">
<head>
    <!-- 指定字符集 -->
    
    <!-- 使用Edge最新的浏览器的渲染方式 -->
    
    <!-- viewport视口：网页可以根据设置的宽度自动进行适配，在浏览器的内部虚拟一个容器，容器的宽度与设备的宽度相同。
    width: 默认宽度与设备的宽度相同
    initial-scale: 初始的缩放比，为1:1 -->
    
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap模板</title>

    <!-- 1. 导入CSS的全局样式 -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!-- 2. jQuery导入，建议使用1.9以上的版本 -->
    <script src="js/jquery-2.1.0.min.js"></script>
    <!-- 3. 导入bootstrap的js文件 -->
    <script src="js/bootstrap.min.js"></script>
    <style type="text/css">
        td, th {
            text-align: center;
        }
    </style>
    <script src="js/vuejs-2.5.16.js"></script>
    <script src="js/axios-0.18.0.js"></script>
</head>
<body>
<div class="container" id="app">
    <h3 style="text-align: center">显示所有用户</h3>
    <table border="1" class="table table-bordered table-hover">
        <tr class="success">
            <th>编号</th>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
            <th>籍贯</th>
            <th>QQ</th>
            <th>邮箱</th>
            <th>操作</th>
        </tr>
        <!--使用v-for遍历后台响应的联系人集合数据  每遍历一次 就输出一行联系人信息-->
        <tr v-for="(linkman,index) in linkmans">
            <td>{{linkman.id}}</td>
            <td>{{linkman.name}}</td>
            <td>{{linkman.sex}}</td>
            <td>{{linkman.age}}</td>
            <td>{{linkman.address}}</td>
            <td>{{linkman.qq}}</td>
            <td>{{linkman.email}}</td>
            <td><a class="btn btn-default btn-sm" href="修改联系人.html">修改</a>&nbsp;
                <!--删除href属性 不让超链接跳转  通过点击事件绑定函数 完成发送ajax请求删除-->
                <a class="btn btn-default btn-sm" @click="deleteById(linkman.id)">删除</a>
            </td>
        </tr>

        <tr>
            <td colspan="8" align="center"><a class="btn btn-primary" href="add.html">添加联系人</a></td>
        </tr>
    </table>
</div>

<script>
    var vm = new Vue({
            //声明vue使用的区域
            el:"#app",
            //声明数据
            data:{
                linkmans:[]
            },
            //声明函数
            methods:{},
            created:function () {
                //1.获取参数【没有省略】
                //2.发起ajax请求  使用vue的axios
                axios.get("linkMan?method=findAll").then(response=>{
                    //3.请求成功处理
                    //response.data=result对象    result.flag：表示请求处理结果 成功还是失败
                    if(response.data.flag){
                        //数据绑定
                        this.linkmans = response.data.result;
                    }else{
                        alert(response.data.message);
                    }
                });
            }
        });
</script>
</body>
</html>

LinkManServlet

package com.itheima.web;

import com.itheima.bean.LinkMan;
import com.itheima.bean.PageBean;
import com.itheima.bean.Result;
import com.itheima.service.LinkManService;
import com.itheima.utils.JsonUtils;
import org.apache.commons.beanutils.BeanUtils;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.lang.reflect.InvocationTargetException;
import java.lang.reflect.Method;
import java.util.List;
import java.util.Map;

@WebServlet(value = "/linkMan")
public class LinkManServlet extends HttpServlet {

    //查询所有联系人 http://localhost:8080/day28/linkMan?method=findAll
    //增加联系人 http://localhost:8080/day28/linkMan?method=add
    //删除联系人 http://localhost:8080/day28/linkMan?method=delete

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        try {
            //0.处理请求响应中文乱码
            request.setCharacterEncoding("UTF-8");
            response.setContentType("text/html;charset=UTF-8");
            //1.获取method参数 判断要进行具体哪一种操作
            String methodStr = request.getParameter("method");
            //特点：①每个方法名都和method参数名称相同  ②每个方法的参数都是一样的
            //优化：根据method参数值去调用相应的方法执行处理请求   使用反射：Method对象.invoke(Object o,params...);
            //1.获取字节码对象
            Class c = this.getClass();
            //2.根据方法名称获取指定的Method对象
            //getMethod()：获取的是public修饰的方法    getDeclaredMethod()：获取当前类中任意修饰符修饰的方法
            Method method = c.getMethod(methodStr, HttpServletRequest.class, HttpServletResponse.class);
            //3.使用Method对象调用方法
            method.invoke(this,request,response);
        } catch (Exception e) {
            e.printStackTrace();
        }

    }
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doPost(request, response);
    }

    //查询联系人
    public void findAll(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        try {
            System.out.println("查询所有联系人");
            //1.获取请求参数
            //2.调用业务处理
            LinkManService linkManService = new LinkManService();
            List<LinkMan> list = linkManService.findAll();
            System.out.println("list = " + list);
            //3.响应json  【重点】
            //3.1：将数据封装到result对象中
            Result result = new Result(true,"查询所有联系人成功！",list);
            //3.2：将result对象转为json响应给浏览器
            JsonUtils.printResult(response,result);
        } catch (Exception e) {
            e.printStackTrace();
            Result result = new Result(false,"服务器异常！");
            JsonUtils.printResult(response,result);
        }
    }
}

四,小结

前端实现

注意：ajax请求在什么时候发送在created()生命周期函数时发送

发送ajax请求，请求处理成功进行数据绑定

//1.发起ajax请求
axios.get("linkMan?method=findAll").then(response=>{
    //2.请求成功进行处理  response：后台响应信息  response.data：表示的是后台响应的数据
    //response.data = result对象   response.data.flag=result对象中的flag属性 表示请求成功还是失败
    if(response.data.flag){
        //请求处理成功  进行数据绑定
        this.linkmans = response.data.result;
    }else{
        //请求处理失败  就弹出提示
        alert(response.data.message);
    }
});

使用v-for遍历数据将联系人信息显示到页面上

后台实现

Servlet中响应json格式数据

//3.1：将list集合封装到Result对象中
Result result = new Result(true, "查询成功！", list);
//3.2：将result对象转为json格式响应给客户端浏览器   注意：经常有同学将result写成request
JsonUtils.printResult(response,result);

案例二:添加联系人

一,案例需求

点击添加联系人跳转添加联系人页面
在添加联系人页面，点击提交按钮,把数据提交到服务器,保存到数据库
在添加完成，可以查看到新添加的联系人信息

二,思路分析

在add.html页面引入vue和axios

在点击提交按钮时发送ajax请求

<!--将提交按钮改为普通按钮 type="button"  通过点击事件绑定函数进行提交-->
<input class="btn btn-primary" type="button" @click="add" value="提交" />

data:{
    linkman:{}
},
methods:{
    add:function(){
        //1.获取请求参数 【要添加的联系人信息  使用v-model将页面上填写的联系人信息绑定到data中声明的linkman变量上面】
        //2.发起ajax请求 使用post方式发起请求
        axios.post("linkMan?method=add",this.linkman).then(response=>{
            //3.处理响应数据
            if(response.data.flag){
               	//添加完成 跳转到list.html页面
                location.href = "list.html";
               }else{
                   //添加失败  弹窗提示
                   alert(response.data.message);
               }
        });
    }
}

LinkManServlet

//1.获取请求参数  【要添加的联系人信息】 注意：json格式参数   直接封装到LinkMan对象中
//2.调用业务处理  
//3.响应json数据
//将处理结果封装到Result对象中以json格式响应给客户端浏览器

   
   

### 三,代码实现

+ add.html

```html
<!-- HTML5文档-->
<!DOCTYPE html>
<!-- 网页使用的语言 -->
<html lang="zh-CN">
<head>
    <!-- 指定字符集 -->
    
    <!-- 使用Edge最新的浏览器的渲染方式 -->
    
    <!-- viewport视口：网页可以根据设置的宽度自动进行适配，在浏览器的内部虚拟一个容器，容器的宽度与设备的宽度相同。
    width: 默认宽度与设备的宽度相同
    initial-scale: 初始的缩放比，为1:1 -->
    
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>添加用户</title>

    <!-- 1. 导入CSS的全局样式 -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!-- 2. jQuery导入，建议使用1.9以上的版本 -->
    <script src="js/jquery-2.1.0.min.js"></script>
    <!-- 3. 导入bootstrap的js文件 -->
    <script src="js/bootstrap.min.js"></script>
    <script src="js/vuejs-2.5.16.js"></script>
    <script src="js/axios-0.18.0.js"></script>
</head>
<body>
<div class="container" id="app">
    {{linkman}}
    <center><h3>添加用户页面</h3></center>
    <form action="user" method="post">
        <input type="hidden" name="method" value="add"/>
        <div class="form-group">
            <label for="name">姓名：</label>
            <input type="text" class="form-control" id="name" name="name" v-model="linkman.name" placeholder="请输入姓名">
        </div>

        <div class="form-group">
            <label>性别：</label>
            <input type="radio" name="sex" v-model="linkman.sex" value="男" checked="checked"/>男
            <input type="radio" name="sex" v-model="linkman.sex" value="女"/>女
        </div>

        <div class="form-group">
            <label for="age">年龄：</label>
            <input type="text" class="form-control" id="age" name="age" v-model="linkman.age" placeholder="请输入年龄">
        </div>

        <div class="form-group">
            <label for="address">籍贯：</label>
            <select name="address" v-model="linkman.address" class="form-control" id="jiguan">
                <option value="广东">广东</option>
                <option value="广西">广西</option>
                <option value="湖南">湖南</option>
            </select>
        </div>

        <div class="form-group">
            <label for="qq">QQ：</label>
            <input type="text" class="form-control" name="qq" v-model="linkman.qq" placeholder="请输入QQ号码"/>
        </div>

        <div class="form-group">
            <label for="email">Email：</label>
            <input type="text" class="form-control" name="email" v-model="linkman.email" placeholder="请输入邮箱地址"/>
        </div>

        <div class="form-group" style="text-align: center">
            <!--需要将提交按钮 改为普通按钮button  表示点击提交按钮发送ajax请求-->
            <input class="btn btn-primary" type="button" @click="addUser" value="提交" />
            <input class="btn btn-default" type="reset" value="重置" />
            <input class="btn btn-default" type="button" value="返回" />
        </div>
    </form>
</div>
    <script>
    var vm = new Vue({
            //声明vue使用的区域
            el:"#app",
            //声明数据
            data:{
                linkman:{}
            },
            //声明函数
            methods:{
                addUser:function () {
                    //1.获取参数  this.linkman
                    //2.发送ajax请求
                    axios.post("linkMan?method=add",this.linkman).then(response=>{
                        //3.请求成功 跳转到list.html，请求失败 弹窗提示
                        if(response.data.flag){
                            location.href = "list.html";
                        }else{
                            alert(response.data.message);
                        }
                    });
                }
            }
        });
    </script>
</body>
</html>

LinkManServlet

package com.itheima.web;

import com.itheima.bean.LinkMan;
import com.itheima.bean.PageBean;
import com.itheima.bean.Result;
import com.itheima.service.LinkManService;
import com.itheima.utils.JsonUtils;
import org.apache.commons.beanutils.BeanUtils;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.lang.reflect.InvocationTargetException;
import java.lang.reflect.Method;
import java.util.List;
import java.util.Map;

@WebServlet(value = "/linkMan")
public class LinkManServlet extends HttpServlet {

    //查询所有联系人 http://localhost:8080/day28/linkMan?method=findAll
    //增加联系人 http://localhost:8080/day28/linkMan?method=add
    //删除联系人 http://localhost:8080/day28/linkMan?method=delete
	//增加联系人
    public void add(HttpServletRequest request, HttpServletResponse response) throws IOException {
        try {
            System.out.println("增加联系人");
            //1.获取请求参数 【要添加的联系人信息  联系人对象】
            LinkMan linkMan = JsonUtils.parseJSON2Object(request, LinkMan.class);
            //2.调用业务处理
            LinkManService linkManService = new LinkManService();
            int rows = linkManService.add(linkMan);
            //3.响应json 无论添加成功还是失败 都重新查询数据库 显示所有联系人信息
            Result result = null;
            if(rows>0){
                //3.1:将响应数据封装到result对象
                result= new Result(true,"添加成功！");
            }else{
                result= new Result(false,"添加失败！");
            }
            //3.2：将result对象转为json响应给浏览器
            JsonUtils.printResult(response,result);
        } catch (Exception e) {
            e.printStackTrace();
            Result result = new Result(false,"服务器异常！");
            JsonUtils.printResult(response,result);
        }
    }
}

四,小结

前台要添加的联系人信息获取：使用v-model进行数据绑定
后台获取要添加的联系人参数：JsonUtils.parseJSON2Object(request, LinkMan.class);
后台响应json数据：将响应数据封装到result对象，然后以json格式响应给浏览器

案例三:删除联系人

一,案例需求

1571569201344

点击确定删除之后, 再重新查询所有全部展示,

二,思路分析

点击删除按钮，弹出确认框，如果选择确定则发送ajax请求进行删除

//1.获取请求参数 【要删除的联系人id】
//2.发送ajax请求
//3.根据响应结果处理  删除成功：跳转到list.html页面  删除失败：弹窗提示

后台Servlet响应json数据

三,代码实现

list.html

<a class="btn btn-default btn-sm" @click="deleteById(linkman.id)">删除</a>

<script src="js/vuejs-2.5.16.js"></script>
<script src="js/axios-0.18.0.js"></script>
<script>
    var vm = new Vue({
            //声明vue使用的区域
            el:"#app",
            //声明数据
            data:{
                linkmans:[]
            },
            //声明函数
            methods:{
                deleteById:function (id) {
                    var flag = confirm("确定要删除吗？");
                    if(flag){
                        //1.获取参数  【要删除的联系人id】
                        //2.发起ajax请求
                        axios.get("linkMan?method=delete&id="+id).then(response=>{
                            //3.删除成功 跳转到list.html页面，删除失败 弹窗提示
                            if(response.data.flag){
                                location.href = "list.html";
                            }else{
                                alert(response.data.message);
                            }
                        });
                    }
                }
            }
        });
</script>
</body>

LinkManServlet

@WebServlet(value = "/linkMan")
public class LinkManServlet extends HttpServlet {

    //查询所有联系人 http://localhost:8080/day28/linkMan?method=findAll
    //增加联系人 http://localhost:8080/day28/linkMan?method=add
    //删除联系人 http://localhost:8080/day28/linkMan?method=delete
    
    //删除联系人
    public void delete(HttpServletRequest request, HttpServletResponse response) throws IOException {
        try {
            System.out.println("删除联系人");
            //1.获取请求参数 【要删除的联系人id】
            String id = request.getParameter("id");
            //2.调用业务处理
            LinkManService linkManService = new LinkManService();
            int rows = linkManService.delete(Integer.parseInt(id));
            //3.响应json 无论删除成功还是失败 都重新查询所有联系人数据 展示
            Result result = null;
            if(rows>0){
                //3.1:将响应数据封装到result对象
                result= new Result(true,"删除成功！");
            }else{
                result= new Result(false,"删除失败！");
            }
            //3.2：将result对象转为json响应给浏览器
            JsonUtils.printResult(response,result);
        } catch (Exception e) {
            e.printStackTrace();
            Result result = new Result(false,"服务器异常！");
            JsonUtils.printResult(response,result);
        }
    }
}

四,小结

点击删除 弹出确定框

<a class="btn btn-default btn-sm" @click="deleteById(linkman.id)">删除</a>

在确定框里面点击了确定请求LinkManServlet 携带method=delete&id=xxx

在LinkManServlet的delete方法里面进行请求处理

//1.获得id
//2.调用业务删除
//3.响应json数据

综合案例整理总结如何使用VUE实现项目前后端分离！

工具类JsonUtils

package com.itheima.utils;

import com.alibaba.fastjson.JSON;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;


public class JsonUtils {

    /**
     * 响应结果  将后台要响应的数据转为json响应给浏览器
     * @param response
     * @param obj
     * @throws IOException
     */
    public static void printResult(HttpServletResponse response, Object obj) throws IOException {
        //设置服务器响应的内容类型
        response.setContentType("application/json;charset=utf-8");
        //response.getWriter.print(JSON.toJSONString(obj));
        JSON.writeJSONString(response.getWriter(),obj);
    }

    /**
     * 把json转成对象 接收前台json格式的请求参数封装成指定类型的java对象
     * @param request
     * @param tClass
     * @param <T>
     * @return
     * @throws IOException
     */
    public static <T> T parseJSON2Object(HttpServletRequest request, Class<T> tClass) throws IOException{
        // 使用axios正常的post请求传参数  后台使用request.getParameter()方法无法正常获取！
        // 把表单数据参数封装到javabean对象   从请求信息的流中读取传递参数 封装到对应的javabean中
        return JSON.parseObject(request.getInputStream(),tClass);
    }
}

统一后台数据响应格式实体类Result

//原因：响应对象，集合，boolean，int(-1  1)  前端不方便处理，没有统一格式，项目不好维护
public class Result {
    private boolean flag;   //请求处理是否成功
    private String msg;     //处理返回消息描述(成功描述  错误信息)
    private Object result;  //请求要求返回的数据

    /**
     * 成功处理响应
     * @param msg
     * @param data
     * @return
     */
    public static Result success( String msg, Object data){
        return new Result(true,msg,data);
    }

    /**
     * 失败处理响应
     * @param msg
     * @return
     */
    public static Result fail( String msg,Object data){
        return new Result(false,msg,data);
    }


    public Result() {
    }

    public Result(boolean flag, String msg, Object data) {
        this.flag = flag;
        this.msg = msg;
        this.data = data;
    }
}

前后端分离：

前端：html页面

注意：知道在什么时候发起ajax请求！！！

获取请求参数
发起ajax请求，
获得json数据，绑定数据到页面或进行页面跳转

后台：Servlet

接收请求参数，
调用业务处理，
响应json数据

案例四:更新联系人【作业】

一,案例需求

1571569357806

1571569369845

二,思路分析

在list.html页面点击修改按钮跳转到update.html页面

<a class="btn btn-default btn-sm" :href="'update.html?id='+linkman.id">修改</a>&nbsp;

在update.html页面获取传入的id

//要引入getParameter.js文件
var id = getParameter("id");

根据id查询数据库在created函数中发送ajax请求获取该id对应的联系人信息绑定到（v-model）表单项中

 created:function () {
     //发送ajax请求 根据id获取对应联系人信息       
}
//使用v-model将要修改的联系人信息绑定到表单项上

为提交按钮绑定点击事件发送ajax请求到后台

<input class="btn btn-primary" type="button" @click="update()" value="提交" />

三,代码实现

list.html

1571207832129

update.html

<script>
    var uid = getParameter("uid");
    //创建vue实例
    var vue = new Vue({
        el: "#app",
        data: {
            linkMan: {}
        },
        methods: {
            update:function () {
                axios.post('linkMan?method=update', this.linkMan).then(response=>{
                    if (response.data.flag){
                        location.href = "list.html";
                    }else{
                        alert(response.data.message)
                    }
                });
            }
        },
        created:function () {
            axios.get('linkMan?method=findByUid&uid='+uid).then(response=>{
                if(response.data.flag){
                    this.linkMan = response.data.result;
                }else{
                    alert(response.data.message);
                }
            })
        }
    });

</script>

LinkManServlet

    //根据id查询
    public void findByUid(HttpServletRequest request, HttpServletResponse response) throws IOException {
        ObjectMapper objectMapper = new ObjectMapper();
        String data=null;
        ResultInfo resultInfo = null;
        try {
            //1.调用业务 获得List<linkMan>
            int uid = Integer.parseInt(request.getParameter("uid"));
            LinkMan linkMan =  linkManService.findByUid(uid);
            //2.转成json
            resultInfo = new ResultInfo(true,linkMan,"查询成功");
        } catch (Exception e) {
            e.printStackTrace();
            resultInfo = new ResultInfo(false,"查询失败");
        }finally {
            data = objectMapper.writeValueAsString(resultInfo);
            response.getWriter().print(data);
        }
    }
    //更新联系人
    private void update(HttpServletRequest request, HttpServletResponse response) throws IOException {
            try {
            //1.获得请求参数,封装成LinkMan对象
            LinkMan linkMan = JsonUtils.parseJSON2Object(request, LinkMan.class);

            //2.调用业务, 进行新增
            linkManService.add(linkMan);
            //3.封装Result, 响应
            Result result = new Result(true, "更新成功");
            JsonUtils.printResult(response,result);
        } catch (Exception e) {
            e.printStackTrace();
            //3.封装Result, 响应
            Result result = new Result(false, "更新失败");
            JsonUtils.printResult(response,result);
        }
    }

linkManService

    public LinkMan findByUid(int uid) throws Exception {
        return linkManDao.findByUid(uid);
    }

    public void update(LinkMan linkMan) throws Exception {
        linkManDao.update(linkMan);
    }

linkManDao

    public LinkMan findByUid(int uid) throws Exception {
        String sql = "SELECT * FROM linkman where id = ?";
        return queryRunner.query(sql,new BeanHandler<LinkMan>(LinkMan.class),uid);
    }

    public void update(LinkMan linkMan) throws Exception {
        String sql  ="UPDATE linkman SET name = ?,sex =?,age = ?,address = ?,qq =?,email = ? WHERE id = ?";
        Object[] params= {
                linkMan.getName(),
                linkMan.getSex(), linkMan.getAge(),
                linkMan.getAddress(), linkMan.getQq(),
                linkMan.getEmail(),linkMan.getId()
        };
        queryRunner.update(sql,params);

    }

四,小结

总结

vue概念：vue是一个渐进式的前端js框架，可以使用数据和视图的双向绑定。

vue快速入门【重点】

<body>
    <div id="app">
        
    </div>
	<!--1.引入vue的js文件-->
    <script src="js/vuejs-2.5.16.js"></script>
    <script>
        //2.创建vue实例
            new Vue({
                //声明vue使用的区域
                el:"#app",
                //声明数据 接收参数和接收后台响应的数据
                data:{},
                //声明函数
                methods:{},
                //vue生命周期函数
                created:function(){
                    
                }
                
            });
    </script>
</body>

vue常用系统指令【重点】

1.v-on或@	：事件绑定   eg：@click="函数名"
2.v-text	 ：文本输出 输出到标签体中 不会解析html标签
3.v-html	 ：文本输出 输出到标签体中 会解析html标签
4.v-bind	 ：为html标签自带属性绑定vue实例中声明的变量  简写: 
5.v-model	 ：实现视图和数据的双向绑定  一般用在输入框中
6.v-for		 ：遍历数据 <tr v-for="(element,index) in 数组/集合"></tr>
7.v-if		 ：控制标签显示和隐藏 当获取的数据为false，则标签删除不显示 
8.v-show	 ：控制标签显示和隐藏 当获取的数据为false，则标签不显示 进行隐藏
注意：1.vue指令作为html标签属性使用 2.vue指令可以直接获取data中声明的变量

vue的生命周期【了解】
1. beforeCreate
2. created：表示vue实例创建完成，已经初始化好了data和methods，因此一般需要页面打开就显示数据在这里发送ajax请求，绑定数据
3. beforeMount
4. mounted
5. beforeDestroy
6. destroyed

vue axios实现ajax请求【重点】

//1.引入vue和axios【axios的引入要在vue的后面】
//2.发送ajax请求
axios.get("请求地址?参数1&参数2").then(response=>{}).catch(error=>{});
axios.post("请求地址",{请求参数}).then(response=>{}).catch(error=>{});

前后端分离【重点】
1. 前端：html页面
  
  请求在什么时候进行发送！！！
  1. 获取请求参数
  2. 发起ajax请求
  3. 获取后台响应的json数据，绑定数据到页面展示或页面跳转
2. 后台：Servlet
  1. 获取请求参数
  2. 调用业务处理
  3. 响应json数据
练习
1. 完成综合案例【查询、增加、删除】
2. vue常用系统指令
3. 完成综合案例【更新】

posted on 2022-04-24 23:13 ofanimon 阅读(52) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

学习目标

第一章-VueJS介绍与快速入门

知识点-VueJS介绍

1.目标

2.路径

3.讲解

3.1什么是VueJS

3.2特点

3.3MVVM模式

4.小结

案例-VueJs快速入门

1.需求

2.步骤

3.实现

4.小结

第二章-VueJS 常用系统指令【重点】

知识点-常用的事件【重点】

1.目标

2.路径

3.讲解

3.1@click

3.2@keydown

3.3@mouseover

4.小结

知识点- v-text与v-html

1.目标

2.讲解

3.小结

知识点-v-bind和v-model【重点】

1.目标

2.路径

3.讲解

3.1v-bind

3.2v-model 【非常重要】

4.小结

知识点-v-for,v-if,v-show

1.目标

2.路径

3.讲解

3.1 v-for【重点】

3.2v-if【重点】与v-show

4.小结

vue常用指令小结：

第三章-VueJS生命周期【了解】

知识点--VueJS生命周期

1.目标

2.路径

3.讲解

3.1.什么是VueJS生命周期

3.2.vuejs生命周期的演示

4.小结

第四章-VueJS ajax【重点】

知识点-VueJS ajax

1.目标

2.路径

3.讲解

3.1vue-resource【了解】

3.2.axios【重点】

3.2.1什么是axios

3.2.2axios的语法

2.3axios的使用

4.小结

第五章-综合案例

案例一显示所有联系人案例

一，案例需求

二, 思路分析

三, 代码实现

1.准备工作

2.代码

四,小结

案例二:添加联系人

一,案例需求

二,思路分析

四,小结

案例三:删除联系人

一,案例需求

二,思路分析

三,代码实现

四,小结

综合案例整理总结 如何使用VUE实现项目前后端分离！

综合案例整理总结如何使用VUE实现项目前后端分离！