Ajax&Axios&项目
今日目标:
- 能够使用 Filter 完成登陆状态校验功能
- 能够使用 axios 发送 ajax 请求
- 熟悉 json 格式,并能使用 Fastjson 完成 java 对象和 json 串的相互转换
- 使用 axios + json 完成综合案例
1,Ajax
1.0 Ajax引入
- 异步?无感知、不会霸屏
- 异步是哪个技术发起的?js
- 原生异步怎么发送的(了解)
上图所示的效果我们经常见到,在我们输入一些关键字(例如 奥运
)后就会在下面联想出相关的内容,而联想出来的这部分数据肯定是存储在百度的服务器上,而我们并没有看出页面重新刷新,这就是 更新局部页面 的效果。再如下图:
我们在用户名的输入框输入用户名,当输入框一失去焦点,如果用户名已经被占用就会在下方展示提示的信息;在这整个过程中也没有页面的刷新,只是在局部展示出了提示信息,这就是 更新局部页面 的效果。
1.1 概述
AJAX
(Asynchronous JavaScript And XML):异步的 JavaScript 和 XML。
我们先来说概念中的 JavaScript
和 XML
,JavaScript
表明该技术和前端相关;XML
是指以此进行数据交换。而这两个我们之前都学习过。
1.1.1 作用
AJAX 作用有以下两方面:
- 与服务器进行数据交换:通过AJAX可以给服务器发送请求,服务器将数据直接响应回给浏览器。如下图
我们先来看之前做功能的流程,如下图:
- 异步交互:可以在不重新加载整个页面的情况下,与服务器交换数据并更新部分网页的技术,如:搜索联想、用户名是否可用校验,等等…
1.1.2 同步和异步
知道了局部刷新后,接下来我们再聊聊同步和异步:
- 同步发送请求过程如下
浏览器页面在发送请求给服务器,在服务器处理请求的过程中,浏览器页面不能做其他的操作。只能等到服务器响应结束后才能,浏览器页面才能继续做其他的操作。
- 异步发送请求过程如下
浏览器页面发送请求给服务器,在服务器处理请求的过程中,浏览器页面还可以做其他的操作。
1.2 快速入门
1.2.1 服务端实现
在项目的创建 com.itgaohe.web.servlet
,并在该包下创建名为 AjaxServlet
的servlet
@WebServlet("/ajaxServlet")
public class AjaxServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//1. 响应数据
response.getWriter().write("hello ajax~");
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doGet(request, response);
}
}
1.2.2 客户端实现
在 webapp
下创建名为 01-ajax-demo1.html
的页面,在该页面书写 ajax
代码
-
创建核心对象,不同的浏览器创建的对象是不同的
var xhttp; if (window.XMLHttpRequest) { xhttp = new XMLHttpRequest(); } else { // code for IE6, IE5 xhttp = new ActiveXObject("Microsoft.XMLHTTP"); }
-
发送请求
//建立连接 xhttp.open("GET", "http://localhost:8080/ajax-demo/ajaxServlet"); //发送请求 xhttp.send();
-
获取响应
xhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { // 通过 this.responseText 可以获取到服务端响应的数据 alert(this.responseText); } };
完整代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
//1. 创建核心对象
var xhttp;
if (window.XMLHttpRequest) {
xhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
//2. 发送请求
xhttp.open("GET", "http://localhost:8080/weblogin/ajaxServlet");
//此处写全路径 全路径 运行tomcat的路径+servlet请求路径
xhttp.send();
//3. 获取响应
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
alert(this.responseText);
}
};
</script>
</body>
</html>
1.2.3 测试
在浏览器地址栏输入 http://localhost:8080/ajax-demo/01-ajax-demo1.html
,在 01-ajax-demo1.html
加载的时候就会发送 ajax
请求,效果如下
我们可以通过 开发者模式
查看发送的 AJAX 请求。在浏览器上按 F12
快捷键
这个是查看所有的请求,如果我们只是想看 异步请求的话,点击上图中 All
旁边的 XHR
,会发现只展示 Type 是 xhr
的请求。如下图:
1.3 案例(不讲)
需求:在完成用户注册时,当用户名输入框失去焦点时,校验用户名是否在数据库已存在
1.3.1 分析
- 前端完成的逻辑
- 给用户名输入框绑定光标失去焦点事件
onblur
- 发送 ajax请求,携带username参数
- 处理响应:是否显示提示信息
- 给用户名输入框绑定光标失去焦点事件
- 后端完成的逻辑
- 接收用户名
- 调用service查询User。此案例是为了演示前后端异步交互,所以此处我们不做业务逻辑处理
- 返回标记
整体流程如下:
1.3.2 后端实现
在 com.itgaohe.web.servlet
包中定义名为 SelectUserServlet
的servlet。代码如下:
@WebServlet("/SelectUserServlet")
public class SelectUserServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//1. 接收用户名
String username = request.getParameter("username");
//2. 调用service查询User对象,此处不进行业务逻辑处理,直接给 flag 赋值为 true,表明用户名占用
UserService us = new UserServiceImpl();
User user = us.findUserByUsername(username);
if (user == null) {
response.getWriter().write("" + false);
} else {
response.getWriter().write("" + true);
}
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doGet(request, response);
}
}
UserService
public interface UserService {
User findUserByUsername(String username);
}
UserServiceImpl
@Override
public User findUserByUsername(String username) {
SqlSession sqlSession = MybatisUtils.getSqlSession();
UserMapper userMapper = sqlSession.getMapper(UserMapper.class);
User user = userMapper.selectUserByUsername(username);
return user;
}
UserMapper
public interface UserMapper {
//根据用户名查询
User selectUserByUsername(@Param("username")String username);
}
UserMapper.xml
<select id="selectUserByUsername" resultType="user">
select * from tb_user where username = #{username};
</select>
1.3.3 前端实现
前端完成代码如下:
//1. 给用户名输入框绑定 失去焦点事件
document.getElementById("username").onblur = function () {
//2. 发送ajax请求
// 获取用户名的值
var username = this.value;
//2.1. 创建核心对象
var xhttp;
if (window.XMLHttpRequest) {
xhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
//2.2. 发送请求
xhttp.open("GET", "http://localhost:81/weblogin/SelectUserServlet?username="+username);
xhttp.send();
//2.3. 获取响应
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
//alert(this.responseText);
//判断
if(this.responseText == "true"){
//用户名存在,显示提示信息
document.getElementById("username_err").style.display = '';
}else {
//用户名不存在 ,清楚提示信息
document.getElementById("username_err").style.display = 'none';
}
}
};
}
2,axios
Axios 对原生的AJAX进行封装,简化书写。
Axios官网是:https://www.axios-http.cn
2.1 基本使用
axios 使用是比较简单的,分为以下两步:
-
引入 axios 的 js 文件
<script src="js/axios-0.18.0.js"></script>
-
使用axios 发送请求,并获取响应结果
-
发送 get 请求
axios({ method:"get", url:"http://localhost:8080/ajax-demo1/aJAXDemo1?username=zhangsan" }).then(function (resp){ alert(resp.data); })
-
发送 post 请求
axios({ method:"post", url:"http://localhost:8080/ajax-demo1/aJAXDemo1", data:"username=zhangsan" }).then(function (resp){ alert(resp.data); });
-
axios()
是用来发送异步请求的,小括号中使用 js 对象传递请求相关的参数:
method
属性:用来设置请求方式的。取值为get
或者post
。url
属性:用来书写请求的资源路径。如果是get
请求,需要将请求参数拼接到路径的后面,格式为:url?参数名=参数值&参数名2=参数值2
。data
属性:作为请求体被发送的数据。也就是说如果是post
请求的话,数据需要作为data
属性的值。
then()
需要传递一个匿名函数。我们将 then()
中传递的匿名函数称为 回调函数,意思是该匿名函数在发送请求时不会被调用,而是在成功响应后调用的函数。而该回调函数中的 resp
参数是对响应的数据进行封装的对象,通过 resp.data
可以获取到响应的数据。
2.2 快速入门
2.2.1 后端实现
定义一个用于接收请求的servlet,代码如下:
@WebServlet("/axiosServlet")
public class AxiosServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
System.out.println("get...");
//1. 接收请求参数
String username = request.getParameter("username");
System.out.println(username);
//2. 响应数据
response.getWriter().write("hello Axios~");
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
System.out.println("post...");
this.doGet(request, response);
}
}
2.2.2 前端实现
-
引入 js 文件
<script src="js/axios-0.18.0.js"></script>
-
发送 ajax 请求
-
get 请求
axios({ method:"get", url:"http://localhost:8080/ajax-demo/axiosServlet?username=zhangsan" }).then(function (resp) { alert(resp.data); })
-
post 请求
axios({ method:"post", url:"http://localhost:8080/ajax-demo/axiosServlet", data:"username=zhangsan" }).then(function (resp) { alert(resp.data); })
-
整体页面代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script src="js/axios-0.18.0.js"></script>
<script>
//1. get
/* axios({
method:"get",
url:"http://localhost:8080/ajax-demo/axiosServlet?username=zhangsan"
}).then(function (resp) {
alert(resp.data);
})*/
//2. post 在js中{} 表示一个js对象,而这个js对象中有三个属性
axios({
method:"post",
url:"http://localhost:8080/ajax-demo/axiosServlet",
data:"username=zhangsan"
}).then(function (resp) {
alert(resp.data);
})
</script>
</body>
</html>
2.3 请求方法别名
为了方便起见, Axios 已经为所有支持的请求方法提供了别名。如下:
-
get
请求 :axios.get(url[,config])
-
delete
请求 :axios.delete(url[,config])
-
head
请求 :axios.head(url[,config])
-
options
请求 :axios.option(url[,config])
-
post
请求:axios.post(url[,data[,config])
-
put
请求:axios.put(url[,data[,config])
-
patch
请求:axios.patch(url[,data[,config])
而我们只关注 get
请求和 post
请求。
入门案例中的 get
请求代码可以改为如下:
axios.get("http://localhost:8080/ajax-demo/axiosServlet?username=zhangsan").then(function (resp) {
alert(resp.data);
});
入门案例中的 post
请求代码可以改为如下:
axios.post("http://localhost:8080/ajax-demo/axiosServlet","username=zhangsan").then(function (resp) {
alert(resp.data);
})
2.4 axios案例(不讲)
<tr>
<td>用户名</td>
<td class="inputs">
<input name="username" type="text" id="username">
<br>
<span id="username_err" class="err_msg" style="display: none">用户名不太受欢迎</span>
</td>
</tr>
<script>
document.getElementById("username").onblur = function () {
var username = document.getElementById("username").value;
axios({
method:"post",
url:"LoginServlet",
data:"username="+username
}).then(req=>{
alert(req.data)
if(req.data == true){
console.log(req.data)
//用户名存在,显示提示信息
document.getElementById("username_err").style.display = '';
}else {
//用户名不存在 ,清楚提示信息
document.getElementById("username_err").style.display = 'none';
}
})
}
</script>
3,JSON
3.1 概述
概念:JavaScript Object Notation
。JavaScript 对象表示法.
由于其语法简单,层次结构鲜明,现多用于作为数据载体,在网络中进行数据传输
为什么要用json?
JSON
1.数据格式比较简单, 易于读写, 格式都是压缩的, 占用带宽小
2.易于解析这种语言, 客户端JavaScript可以简单的通过eval()进行JSON数据的读取
3.因为JSON格式能够直接为服务器端代码使用, 大大简化了服务器端和客户端的代码开发量, 但是完成的任务不变, 且易于维护
如下是 JavaScript
对象的定义格式:
{
name:"zhangsan",
age:23,
city:"北京"
}
接下来我们再看看 JSON
的格式:
{
"name":"zhangsan",
"age":23,
"city":"北京"
}
通过上面 js 对象格式和 json 格式进行对比,发现两个格式特别像。只不过 js 对象中的属性名可以使用引号(可以是单引号,也可以是双引号);而 json
格式中的键要求必须使用双引号括起来,这是 json
格式的规定。json
格式的数据有什么作用呢?
作用:由于其语法格式简单,层次结构鲜明,现多用于作为数据载体,在网络中进行数据传输。如下图所示就是服务端给浏览器响应的数据,这个数据比较简单,如果现需要将 JAVA 对象中封装的数据响应回给浏览器的话,应该以何种数据传输呢?
大家还记得 ajax
的概念吗? 是 异步的 JavaScript 和 xml。这里的 xml就是以前进行数据传递的方式,如下:
<student>
<name>张三</name>
<age>23</age>
<city>北京</city>
</student>
再看 json
描述以上数据的写法:
{
"name":"张三",
"age":23,
"city":"北京"
}
上面两种格式进行对比后就会发现 json
格式数据的简单,以及所占的字节数少等优点。
3.2 JSON 基础语法
3.2.1 定义格式
JSON
本质就是一个字符串,但是该字符串内容是有一定的格式要求的。 定义格式如下:
var 变量名 = '{"key":value,"key":value,...}';
JSON
串的键要求必须使用双引号括起来,而值根据要表示的类型确定。value 的数据类型分为如下
- 数字(整数或浮点数)
- 字符串(使用双引号括起来)
- 逻辑值(true或者false)
- 数组(在方括号中)
- 对象(在花括号中)
- null
示例:
var jsonStr = '{"name":"zhangsan","age":23,"addr":["北京","上海","西安"]}'
3.2.2 代码演示
创建一个页面,在该页面的 <script>
标签中定义json字符串
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
//1. 定义JSON字符串
var jsonStr = '{"name":"zhangsan","age":23,"addr":["北京","上海","西安"]}'
alert(jsonStr);
</script>
</body>
</html>
通过浏览器打开,页面效果如下图所示
现在我们需要获取到该 JSON
串中的 name
属性值,应该怎么处理呢?
如果它是一个 js 对象,我们就可以通过 js对象.属性名
的方式来获取数据。JS 提供了一个对象 JSON
,该对象有如下两个方法:
parse(str)
:将 JSON串转换为 js 对象。使用方式是:var jsObject = JSON.parse(jsonStr);
stringify(obj)
:将 js 对象转换为 JSON 串。使用方式是:var jsonStr = JSON.stringify(jsObject)
代码演示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
//1. 定义JSON字符串
var jsonStr = '{"name":"zhangsan","age":23,"addr":["北京","上海","西安"]}'
alert(jsonStr);
//2. 将 JSON 字符串转为 JS 对象
let jsObject = JSON.parse(jsonStr);
alert(jsObject)
alert(jsObject.name)
//3. 将 JS 对象转换为 JSON 字符串
let jsonStr2 = JSON.stringify(jsObject);
alert(jsonStr2)
</script>
</body>
</html>
3.2.3 发送异步请求携带参数
后面我们使用 axios
发送请求时,如果要携带复杂的数据时都会以 JSON
格式进行传递,如下
axios({
method:"post",
url:"http://localhost:8080/ajax-demo/axiosServlet",
data:"username=zhangsan"
}).then(function (resp) {
alert(resp.data);
})
请求参数不可能由我们自己拼接字符串吧?肯定不用,可以提前定义一个 js 对象,用来封装需要提交的参数,然后使用 JSON.stringify(js对象)
转换为 JSON
串,再将该 JSON
串作为 axios
的 data
属性值进行请求参数的提交。如下:
var jsObject = {name:"张三"};
axios({
method:"post",
url:"http://localhost:8080/cookieAndsession/AxiosServlet",
data: JSON.stringify(jsObject)
}).then(function (resp) {
alert(resp.data);
})
// axios.post("http://localhost:81/weblogin/AxiosServlet",jsObject2).then(function (resp){
// console.log(resp.data);
// })
而 **axios**
是一个很强大的工具。我们只需要将需要提交的参数封装成 js 对象,并将该 js 对象作为 axios
的 data
属性值进行,它会自动将 js 对象转换为 JSON
串进行提交。如下:
var jsObject = {name:"张三"};
axios({
method:"post",
url:"http://localhost:8080/ajax-demo/axiosServlet",
data:jsObject //这里 axios 会将该js对象转换为 json 串的
}).then(function (resp) {
alert(resp.data);
})
// axios.get("http://localhost:81/weblogin/AxiosServlet?jsObject2="+jsObject2).then(function (resp){
// console.log(resp.data)
// })
axios自动将 js 对象转换为
JSON
串注意:
- js 提供的
JSON
对象我们只需要了解一下即可。因为axios
会自动对 js 对象和JSON
串进行想换转换。- 发送异步请求时,如果请求参数是
JSON
格式,那请求方式必须是POST
。因为JSON
串需要放在请求体中。
3.3 JSON串和Java对象的相互转换
学习完 json 后,接下来聊聊 json 的作用。以后我们会以 json 格式的数据进行前后端交互。前端发送请求时,如果是复杂的数据就会以 json 提交给后端;而后端如果需要响应一些复杂的数据时,也需要以 json 格式将数据响应回给浏览器。
在后端我们就需要重点学习以下两部分操作:
- 请求数据:JSON字符串转为Java对象
- 响应数据:Java对象转为JSON字符串
接下来给大家介绍一套 API,可以实现上面两部分操作。这套 API 就是 Fastjson
3.3.1 Fastjson 概述
Fastjson
是阿里巴巴提供的一个Java语言编写的高性能功能完善的 JSON
库,是目前Java语言中最快的 JSON
库,可以实现 Java
对象和 JSON
字符串的相互转换。
3.3.2 Fastjson 使用
Fastjson
使用也是比较简单的,分为以下三步完成
-
导入坐标
<dependency> <groupId>com.alibaba</groupId> <artifactId>fastjson</artifactId> <version>1.2.62</version> </dependency>
-
Java对象转JSON
String jsonStr = JSON.toJSONString(obj);
将 Java 对象转换为 JSON 串,只需要使用
Fastjson
提供的JSON
类中的toJSONString()
静态方法即可。 -
JSON字符串转Java对象
User user = JSON.parseObject(jsonStr, User.class);
将 json 转换为 Java 对象,只需要使用
Fastjson
提供的JSON
类中的parseObject()
静态方法即可。
3.3.3 代码演示
-
引入坐标
-
创建一个类,专门用来测试 Java 对象和 JSON 串的相互转换,代码如下:
public class FastJsonDemo { public static void main(String[] args) { //1. 将Java对象转为JSON字符串 User user = new User(); user.setId(1); user.setUsername("zhangsan"); user.setPassword("123"); String jsonString = JSON.toJSONString(user); System.out.println(jsonString);//{"id":1,"password":"123","username":"zhangsan"} //2. 将JSON字符串转为Java对象 User u = JSON.parseObject(jsonString, User.class); System.out.println(u); } }
4, 员工管理系统
新建一个模块 gaohe-demo
4.1 需求
使用Axios + JSON 完成
- 查询所有员工信息
- 新增员工
- 根据ID删除员工
- 修改员工信息(准备工作:页面、mybatis基础工程、数据库表)
4.2 查询所有功能
4.2.1 环境准备
4.2.1.1 创建项目并建好包结构 导入依赖
mapper pojo service utils web
<dependencies>
<dependency>
<groupId>junit</groupId>
<artifactId>junit</artifactId>
<version>4.11</version>
<scope>test</scope>
</dependency>
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<version>8.0.29</version>
</dependency>
<dependency>
<groupId>org.mybatis</groupId>
<artifactId>mybatis</artifactId>
<version>3.5.10</version>
</dependency>
<!--servlet-->
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>javax.servlet-api</artifactId>
<version>3.1.0</version>
<scope>provided</scope>
</dependency>
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>fastjson</artifactId>
<version>1.2.62</version>
</dependency>
</dependencies>
<build>
<plugins>
<!--Tomcat插件 -->
<plugin>
<groupId>org.apache.tomcat.maven</groupId>
<artifactId>tomcat7-maven-plugin</artifactId>
<version>2.2</version>
<configuration>
<!--端口号-->
<port>81</port>
<!--项目访问路径-->
<path>/weblogin</path>
</configuration>
</plugin>
</plugins>
</build>
4.2.1.2 引入数据库脚本
分析。
4.2.1.3 实体类emp
4.2.1.4 mybatis-config.xml
4.2.1.5 mapper&mapper.xml
public interface EmpMapper {
List<Emp> selectEmp();
}
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.itgaohe.mapper.EmpMapper">
<select id="selectEmp" resultType="emp">
select * from emp
</select>
</mapper>
4.2.1.6 sevice&impl
public interface EmpService {
List<Emp> findEmp();
}
public class EmpServiceImpl implements EmpService {
@Override
public List<Emp> findEmp() {
SqlSession sqlSession = MybatisUtils.getSqlSession();
EmpMapper mapper = sqlSession.getMapper(EmpMapper.class);
return mapper.selectEmp();
}
}
3.2.1.7 EmpServlet
- 将查询到的集合数据转换为 json 数据。我们将此过程称为 序列化;如果是将 json 数据转换为 Java 对象,我们称之为 反序列化
- 将 json 数据响应回给浏览器。这里一定要设置响应数据的类型及字符集
response.setContentType("text/json;charset=utf-8");
@WebServlet("/EmpServlet")
public class EmpServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
EmpService empService = new EmpServiceImpl();
List<Emp> emp = empService.findEmp();
String s = JSON.toJSONString(emp);
response.setContentType("text/json;charset=utf-8");//text/json
response.getWriter().write(s);
}
4.2.2 前端分析
1.引入资料中静态页面内容和emp页面
1.1 点击查询 发送点击事件 onSelect 到vue的方法区中执行
// 查询submit
onSelect() {
console.log('submit!');
}
1.2新增的弹框 是因为绑定:visible.sync=“dialogFormVisible” 默认值在vue的data数据中 定义为
dialogFormVisible: false,
代表默认是不可见的 当点击 新增用户按钮的时候 触发点击事件savedialog
// 打开新增弹框
savedialog(){
this.form = {}
this.dialogFormVisible = true
},
1.3 在弹框中 点击确定按钮发送点击事件 @click=“saveEmp”
到方法区中 执行
// 新增submit
saveEmp(){
console.log(this.form)
/*请求后台 json格式数据发送到后台*/
},
1.4 来到修改弹框部分
点击编辑按钮
<el-button type="text" @click="updateEmp(scope.row)" size="small">编辑</el-button>
触发 @click="updateEmp(scope.row)"事件,先做修改的回显操作,this.dialogUpdateVisible = true,让修改框展示。
// 修改回显
updateEmp(val) {
console.log(val)
/*控制弹框*/
this.dialogUpdateVisible = true
/*数据赋值*/
// var str = JSON.stringify(val)
// var data = JSON.parse(str)
// this.form = data
},
:visible.sync=“dialogUpdateVisible”
vue的data中 默认不显示 dialogUpdateVisible: false,
点击取消按钮 让修改框dialogUpdateVisible值为false不显示
<el-button @click="dialogUpdateVisible = false">取 消</el-button>
点击确定按钮 发送修改的提交事件updateEmpSubmit
// 修改提交
updateEmpSubmit() {
console.log(this.form)
/*请求后台 json格式数据发送到后台*/
},
1.5 点击查看 查看单条数据信息
1.6 点击删除按钮 发送删除请求
<el-button type="text" @click="deleteEmp(scope.row)" size="small">删除</el-button>
1.7 在表格部分 通过
<el-table :data="tableData" border style="width: 100%">
绑定了tableData 在vue中给 tableData赋默认值
tableData: [{
id: '1',
username: '王小虎',
addr: '上海市普陀区金沙江路 1518 弄',
phone: '1511111111',
age: '18'
}],
在vue中 做数据初始化
/*在页面被加载的时候就去请求后台*/
mounted() {
console.log("init....")
/*发起请求 获取数据 把数据交给渲染层展示*/
this.init()
/*获取用户的登录信息*/
axios.get("getSession").then(resp => {
alert(resp.data)
})
},
分析完成之后 接下来我们来完成前端查询所有的功能
4.2.3 前端代码
/*在页面被加载的时候就去请求后台*/
mounted() {
console.log("init....")
/*发起请求 获取数据 把数据交给渲染层展示*/
this.init()
/*获取用户的登录信息*/
// axios.get("getSession").then(resp => {
// alert(resp.data)
// })
},
methods: {
init() {
var _this = this;
// 初始化查询
axios.get("EmpServlet").then((res)=>{
// console.log(res.data)
_this.tableData = res.data;
})
},
4.3 新增操作
4.3.1 新增后端
EmpService
//添加
int addEmp(Emp emp);
EmpServiceImpl
@Override
public int addEmp(Emp emp) {
SqlSession sqlSession = MybatisUtils.getSqlSession();
EmpMapper mapper = sqlSession.getMapper(EmpMapper.class);
return mapper.insertEmp(emp);
}
EmpMapper
int insertEmp(Emp emp);
EmpMapper.xml
<insert id="insertEmp" parameterType="user">
insert into emp
values (#{id}, #{username}, #{password}, #{address}, #{age}, #{phone})
</insert>
接下来分析前端页面
发送添加请求 调用saveEmp()方法
此时我们先添加值 点击确定 在控制台打印一下表单数据
console.log(this.form)
接下来写axios发送请求给后台
/*请求后台 json格式数据发送到后台*/
axios.post("AddServlet",this.form).then((res)=>{
console.log(res.data)
});
编写后台AddServlet
@WebServlet("/AddServlet")
public class AddServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//接收前端发送的表单数据 json格式
BufferedReader br = request.getReader();
String data = br.readLine();
System.out.println(data);
//解析参数
Emp emp = JSON.parseObject(data, Emp.class);
EmpService es = new EmpServiceImpl();
int i = es.addEmp(emp);
//返回响应
if (i>0){
response.getWriter().write("success");
}else {
response.getWriter().write("failed");
}
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doGet(request, response);
}
}
4.3.2新增的前端
// 新增submit
saveEmp() {
console.log(this.form)
/*1.请求后台 json格式数据发送到后台*/
axios.post("AddServlet",this.form).then((res)=>{
// console.log(res.data)
if (res.data == "success"){
//2.把弹框隐藏掉
this.dialogFormVisible = false;
//3.把form清空
this.form = {};
//把后台响应回来的数据 进行判断
this.$message({
message:"新增成功",
type:"success"
});
//4.重新加载数据
this.init();
}else {
this.$message({
message:"新增失败",
type:"error"
});
}
});
},
4.4 删除操作
删除的逻辑是根据id删除
1.EmpService
//删除
int removeById(int id);
2.EmpServiceImpl
@Override
public int removeById(int id) {
SqlSession sqlSession = MybatisUtils.getSqlSession();
EmpMapper mapper = sqlSession.getMapper(EmpMapper.class);
return mapper.deleteById(id);
}
3.EmpMapper
int deleteById(@Param("id")int id);
4.EmpMapper.xml
<delete id="deleteById" parameterType="int">
delete
from emp
where id = #{id}
</delete>
5.编写后台DeleteServlet
@WebServlet("/DeleteServlet")
public class DeleteServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//接收数据
String id = request.getParameter("id");
EmpService es = new EmpServiceImpl();
int i = es.removeById(Integer.parseInt(id));
if (i>0){
response.getWriter().write("success");
}else {
response.getWriter().write("error");
}
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doGet(request, response);
}
}
6.前端页面
<el-button type="text" @click="deleteEmp(scope.row)" size="small">删除</el-button>
点击删除发送请求deleteEmp
// 删除
deleteEmp(val) {
// console.log(val)
/*请求后台 删除数据 刷新页面*/
axios.post("DeleteServlet","id="+val.id).then((res)=>{
if (res.data == "success"){
this.$message({
message:"恭喜你删除成功!",
type:"success"
});
//重新加载数据
this.init();
}else {
this.$message({
message:"删除失败!",
type:"error"
})
}
})
},
但是这样写存在一个问题 问题就是在删除的时候没有提示 容易造成数据的误删操作,为了解决这个问题,我们可以添加一个提示框,(MessageBox弹框中)
this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.$message({
type: 'success',
message: '删除成功!'
});
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
});
});
最后将我们的异步请求 放到请求成功的部分
// 删除
deleteEmp(val) {
// console.log(val)
this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
/*请求后台 删除数据 刷新页面*/
axios.post("DeleteServlet","id="+val.id).then((res)=>{
if (res.data == "success"){
this.$message({
message:"恭喜你删除成功!",
type:"success"
});
//重新加载数据
this.init();
}else {
this.$message({
message:"删除失败!",
type:"error"
})
}
})
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
});
});
},
4.5 修改操作
对于修改操作 其实分为两步 第一步是数据回显操作 第二步是修改的数据提交.
数据回显:将这条数据的原先内容自动填充到修改框中。
EmpService
//修改
int modifyById(Emp emp);
EmpServiceImpl
@Override
public int modifyById(Emp emp) {
SqlSession sqlSession = MybatisUtils.getSqlSession();
EmpMapper mapper = sqlSession.getMapper(EmpMapper.class);
return mapper.updateById(emp);
}
EmpMapper
int updateById(Emp emp);
EmpMapper.xml
<update id="updateById" parameterType="emp">
update emp
set username = #{username},
password = #{password},
phone = #{phone},
address = #{address},
age = #{age}
where id = #{id};
</update>
UpdateServlet
@WebServlet("/UpdateServlet")
public class UpdateServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
BufferedReader br = request.getReader();
String s = br.readLine();
Emp emp = JSON.parseObject(s, Emp.class);
EmpService es = new EmpServiceImpl();
int i = es.modifyById(emp);
if (i > 0) {
response.getWriter().write("success");
}else {
response.getWriter().write("error");
}
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doGet(request, response);
}
}
前端页面
1.先做数据的回显。
// 修改回显
updateEmp(val) {
console.log(val)
/*控制弹框*/
this.dialogUpdateVisible = true
//数据回显
this.form = val;
},
2.修改操作内容的提交
// 修改提交
updateEmpSubmit() {
console.log(this.form)
/*请求后台 json格式数据发送到后台*/
axios.post("UpdateServlet",this.form).then((res)=>{
if (res.data == "success"){
//隐藏弹框
this.dialogUpdateVisible = false;
// 把form清空
this.form = {};
this.$message({
message:"恭喜你修改成功",
type:"success"
})
//重新加载数据
this.init();
}else {
this.$message({
message:"修改失败QAQ",
type:"error "
})
}
})
},
bug解决
**问题1.**在修改内容的时候 修改页面内容和主页面内容绑定到一起。
这是属于vue前端数据双向绑定的问题。
解决办法:
// 修改回显
updateEmp(val) {
console.log(val)
/*控制弹框*/
this.dialogUpdateVisible = true
/*数据赋值*/
var str = JSON.stringify(val)
var data = JSON.parse(str)
this.form = data
//数据回显
// this.form = val;
},
细节问题。在新增打开弹出框的时候 先会调用到savedialog这个方法,那这个方法作用究竟是什么呢?
其实就是为了让我们在打开新增的弹出框之前将内容情况,那为什么要这么做呢?
// 打开新增弹框
savedialog() {
this.form = {}
this.dialogFormVisible = true
},
如果是把 this.form = {} 注掉
我们可以发现 先点击一次修改框 退出去再点击一次新增框 数据会填充到新增框中 这是一个bug 因为两个弹出框用的都是form 所以为了避免这样的问题 我们在打开之前 做this.form = {} 操作。