学习目标
第一章-VueJS介绍与快速入门
知识点-VueJS介绍
1.目标
2.路径
- 什么是VueJS
- VueJS特点
- MVVM模式
3.讲解
3.1什么是VueJS
渐进式:循序渐进,vue是一个功能非常强大的前端js框架,其中包含了很多组件(A B C D E),因此,在使用vue时,可以根据用户的需要循序渐进的引入到项目中使用。
框架:类库 功能比较完善 软件的半成品
Vue.js是一个渐进式JavaScript 框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定到组合的视图组件(数据双向绑定view-model)。它不仅易于上手,还便于与第三方库或既有项目整合。
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,保证视图和数据的一致性,这种轻量级的架构让前端开发更加高效、便捷.
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
- 创建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>
-
-
插值表达式
- 用在标签体中 展示数据
- 插值表达式可以执行运算 但是不能编写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
- ...
- 注意:
- vue的系统指令作为HTML标签属性使用
- vue事件绑定的函数写在vue实例的methods中
- vue事件绑定的函数如果没有参数 小括号()可以省略
知识点- v-text与v-html
1.目标
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.目标
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.目标
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.目标
2.路径
- 什么是VueJS生命周期
- vuejs生命周期的演示
3.讲解
3.1.什么是VueJS生命周期
生命周期:指的就是对象从创建到销毁的过程 类似人的一生
vue生命周期:vue从创建到销毁的过程 自动完成
生命周期函数 -- 钩子函数
每个 Vue 实例在被创建到销毁都要经过一系列的初始化过程——例如,需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数,这给了用户在不同阶段添加自己的代码的机会。
-
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.目标
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方式
- Post方式
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方式(原始方式)
为方便起见,为所有支持的请求方法提供了别名
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之后进行引入
- 使用
- axios.get("请求地址?请求参数").then(response=>{}).catch(error=>{});
- 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>
<!--删除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格式响应给浏览器
案例三:删除联系人
一,案例需求
点击确定删除之后, 再重新查询所有全部展示,
二,思路分析
-
点击删除按钮,弹出确认框,如果选择确定 则发送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数据
案例四:更新联系人【作业】
一,案例需求
二,思路分析
-
在list.html页面点击修改按钮跳转到update.html页面
<a class="btn btn-default btn-sm" :href="'update.html?id='+linkman.id">修改</a>
-
在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
- 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的生命周期【了解】
- beforeCreate
- created:表示vue实例创建完成,已经初始化好了data和methods,因此一般需要页面打开就显示数据 在这里发送ajax请求,绑定数据
- beforeMount
- mounted
- beforeDestroy
- 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=>{});
-
前后端分离【重点】
-
前端:html页面
请求在什么时候进行发送!!!
- 获取请求参数
- 发起ajax请求
- 获取后台响应的json数据,绑定数据到页面展示或页面跳转
-
后台:Servlet
- 获取请求参数
- 调用业务处理
- 响应json数据
-
-
练习
- 完成综合案例【查询、增加、删除】
- vue常用系统指令
- 完成综合案例【更新】