day11-Ajax&Axios&JSON&项目

最新推荐文章于 2024-08-27 16:00:51 发布

Cx330_zhahui

最新推荐文章于 2024-08-27 16:00:51 发布

阅读量421

点赞数 3

分类专栏： mysql&javaweb&Mybatis 文章标签： ajax json 前端

本文链接：https://blog.csdn.net/qq_74289024/article/details/140078837

版权

mysql&javaweb&Mybatis 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

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 分析

前端完成的逻辑
1. 给用户名输入框绑定光标失去焦点事件 onblur
2. 发送 ajax请求，携带username参数
3. 处理响应：是否显示提示信息
后端完成的逻辑
1. 接收用户名
2. 调用service查询User。此案例是为了演示前后端异步交互，所以此处我们不做业务逻辑处理
3. 返回标记

整体流程如下：

在这里插入图片描述

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 = {} 操作。

在这里插入图片描述

Cx330_zhahui

关注

3
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
day11-Ajax&Axios&JSON&项目

AJAX(Asynchronous JavaScript And XML)：异步的 JavaScript 和 XML。我们先来说概念中的JavaScript和XMLJavaScript表明该技术和前端相关；XML是指以此进行数据交换。而这两个我们之前都学习过。。JavaScript 对象表示法.由于其语法简单，层次结构鲜明，现多用于作为数据载体，在网络中进行数据传输为什么要用json？JSON1.数据格式比较简单, 易于读写, 格式都是压缩的, 占用带宽小。
复制链接

扫一扫