1 同步请求和异步请求
客户端给java后台程序发送请求，发送请求的方式有两种：
- 同步请求
- 同步请求发送方式：
1 浏览器地址栏，输入url：http://localhost:8080/web-app/xxxServlet
2
3 删除
4 javascript:location.href=“http://localhost:8080/web-app/xxxServle”; - 同步请求缺点：用户体验度不好，发送同步请求，整个浏览器页面都会全部重新加载一次（全页刷新一次）
- 同步请求发送方式：
- 异步请求***
- 异步交互优点：提升用户体验度，请求在响应之后不是整个页刷新，仅仅刷新响应数据影响的区域，看起来就是局部刷新
- 异步交互缺点：无形之中增加服务器处理请求压力
- 异步交互实现方式：
- 原生态js完成异步交互。核心对象XmlHttpRequest对象。不主流：繁琐，处理各种浏览器兼容问题
浏览器：Firefox chrome edge
- ajax技术：JQuery
- Vue框架：resources技术。vue-resource: Vue.js的插件，已经不维护，vue官方推荐异步交互使用其竞品axios实现
- Vue竞品：axios
1 axios
在Vue.js中发送网络请求本质还是ajax，我们可以使用插件方便操作。
axios是vue中提供的用来发送请求给服务器的组件。Vue 2.0 之后，就不再对 vue-resource 更新。Vue 官方推荐使用其竞品：axios 。后续项目的模型趋于前后端分离，所以几乎所有的请求都是异步交互的方式。
axios入门案例：
-
引入axios.js：axios是vue中提供的用来发送请求给服务器的组件
即可 -
搭建Vue开发结构并通过按钮单击事件发送异步请求
-
controller接收请求
@WebServlet(name = "HelloServlet", value = "/HelloServlet")public class HelloServlet extends HttpServlet {@Overrideprotected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {//1.取 请求协议携带参数String msg = request.getParameter("msg");System.out.println("请求提交的msg值是："+msg);//2.调 model的方法，获取model返回数据String result="处理完毕";//3.变化：异步交互不支持转发和重定向！！！异步交互只能依靠响应体response.getWriter.write()响应response.getWriter().write(result);} } -
axios接收响应结果并在html中显示
细节
控制器接收到异步请求后，与之前同步请求的处理方式几乎一样：只是异步交互的结果，不能直接依靠存request和转发机制给html页面显示。所以我们在异步交互过程中，较为麻烦的事情就是：需要开发人员自己通过response对象封装响应协议给客户端使用。
2 JSON
1、Json简介
JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。它基于 ECMAScript) (欧洲计算机协会制定的js规范)的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。 易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。JSON是JavaScript原生格式，这意味着在JavaScript中处理JSON数据不需要任何特殊的API或工具包。JSON 数据的书写方式是名称/值对，类似 JavaScript 对象属性。
名称/值对由（双引号中的）字段名构成，其后是冒号，再其后是值："firstName":"Bill"
js对象 ：{key:value,key:value}
使用js对象：对象名.keyjson对象：{"key":value,"key":value}
json对象数组：[{"key":value,"key":value},{"key":value,"key":value}
]
使用json对象：对象名.keyJSON 语法规则JSON的属性名称要求以“双引号”包裹 映射用冒号（“：”）表示。”名称”:值并列的数据之间用逗号（“，”）分隔。名称1:值1,名称2:值2映射的集合（对象）用大括号（“{}”）表示。{名称1:值1,名称2:值2}并列数据的集合（数组）用方括号(“[]”)表示。
注意：JSON 名称需要双引号，JavaScript 名称不需要。
2、Json对象
语法：
var json = {键 : 值,键 : 值,.....}
案例：使用json字符串对象保存一条用户信息
3、JSON对象和JSON字符串的转换
在数据传输过程中，JSON是以字符串的形式传递的，而JS操作的是JSON对象，所以，JSON对象和JSON字符串之间的相互转换是关键。json字符串:let jsonstr='{"username":"张三","age":"18","sex":"男","address":"武汉"}';
json对象:let jsonstr={"username":"张三","age":"18","sex":"男","address":"武汉"};
转换方法 说明
JSON.parse(jsonstr) JSON字符串转化 为 JSON对象
JSON.stringify(jsonObject ) JSON对象转化 JSON字符串
思考：如何使用json存储多条用户信息？
JSON对象的数组处理即可。
4、json数组
如果在要json中存储多条数据，可以在json中添加数组。JSON 数组在方括号中书写，类似 JavaScript，数组能够包含对象
案例：使用json数组保存多条信息
在上面的例子中，对象 “users” 是一个数组。它包含了三个对象。每个对象代表一个人的一条记录。
思考：如何取出上图中json对象中所有用户的数据
<script>//1.定义json对象数组，保存多个用户信息let jsonArr=[{"id":1,"name":"jack","sex":'男',age:21},{"id":2,"name":"tom","sex":'男',age:31},{"id":3,"name":"lucy","sex":'女',age:24},{"id":4,"name":"lily","sex":'女',age:20}];//2.遍历json对象数组，显示所有的数据jsonArr.forEach(user=>{//3.在浏览器控制台输出用户信息console.log(user.id,user.name,user.sex,user.age);})
</script>
3 axios入门案例进阶：利用ResponseResult和Json优化控制器响应结果
在浏览器和服务器交互的项目模型中，控制器接收异步请求，请求处理完毕后，统一由Response对象返回响应结果。那么，此处控制器将请求处理结果以什么格式返回给浏览器合适呢？
因此，在项目开发规范中，我们首先应该约定java程序端和网页端响应交互的格式，此处我们约定格式如下：
ResponseResult.java：
@Data
public class ResponseResult<T> {//响应状态码：公司自己约定好的码 20000 -程序没有问题 40000-49999 50000-59999private int status;//服务器给浏览器响应消息private String msg;//服务器给浏览器需要显示数据：通常都是查询数据库的结果 Book List<Book>private T data;public ResponseResult() {}public ResponseResult(int status, String msg) {this.status = status;this.msg = msg;}public ResponseResult(int status, String msg, T data) {this(status, msg);this.data = data;}public ResponseResult(int status, T data) {this.status=status;this.data = data;}public static ResponseResult<Void> SUCCESS = new ResponseResult<>(200, "成功");public static ResponseResult<Void> INTENER_ERROR = new ResponseResult<>(500, "服务器错误");public static ResponseResult<Void> NOT_FOUND = new ResponseResult<>(404, "未找到");public static ResponseResult<Void> success(String msg){return new ResponseResult<>(200,msg);}
}
响应格式约定好之后，我们在控制器处理请求后的响应代码就要修正了：
@WebServlet(name = "HelloServlet", value = "/HelloServlet")
public class HelloServlet extends HttpServlet {@Overrideprotected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {//设置客户端接收的数据解析格式response.setContentType("application/json;charset=utf-8");//1.取 请求协议携带参数String msg = request.getParameter("msg");System.out.println("请求提交的msg值是："+msg);//2.调 model的方法，获取model返回数据//3-1 请求处理的结果封装为ResponseResult对象ResponseResult<String> rr = null;try {String result="处理完毕";//处理成功rr=new ResponseResult<>(20000,null,result);//public xx(int,String)} catch (Exception e) {e.printStackTrace();//处理失败rr=new ResponseResult<>(50001,e.getMessage());public xx(int,String)}//3.变化：异步交互不支持转发和重定向！！！异步交互只能依靠响应体response.getWriter.write()响应//3-2 响应结果对象依靠response回送给前端使用response.getWriter().write(rr);}
}
但是最后一行代码：相应协议的write(rr)对象时，程序就会爆红。我们的IO只能操作字符或字节，没有办法直接输出java对象。怎么解决呢？
我们可以把Java对象转换为json格式的字符串，将这个json格式的字符串响应给浏览器后，再通过JavaScript的JSON.parse(json字符串)将json字符串转换成json对象。这样就“完美”解决响应体的输出问题了！！！
-
pom.xml：导入json转换需要的依赖
com.fasterxml.jackson.core jackson-databind 2.9.0 com.fasterxml.jackson.core jackson-core 2.9.0 com.fasterxml.jackson.core jackson-annotations 2.9.0 -
Servlet中利用jackson依赖提供的ObjectMapper就可以轻松完成java对象---->JSON字符串
@WebServlet(name = “HelloServlet”, value = “/HelloServlet”)
public class HelloServlet extends HttpServlet {
@Override
protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//设置客户端接收的数据解析格式
response.setContentType(“application/json;charset=utf-8”);
//1.取 请求协议携带参数
String msg = request.getParameter(“msg”);
System.out.println(“请求提交的msg值是：”+msg);//2.调 model的方法，获取model返回数据//3-1 请求处理的结果封装为ResponseResult对象ResponseResult<String> rr = null;try {String result="处理完毕";//处理成功rr=new ResponseResult<>(20000,null,result);//public xx(int,String)} catch (Exception e) {e.printStackTrace();//处理失败rr=new ResponseResult<>(50001,e.getMessage());public xx(int,String)}ObjectMapper mapper=new ObjectMapper();String jsonStr = mapper.writeValueAsString(rr);System.out.println(jsonStr);response.getWriter().write(jsonStr);}}
启动服务器测试代码，我们可以看到控制台输出的java对象转换结果
{"status":20000,"msg":null,"data":"处理完毕"}
那么我们在html页面处理响应的代码也要修正了，具体如下：
<body><div id="app">服务器响应的结果：{{result}}</div>
</body>
<script>new Vue({el:"#app",data(){return {result:''}},created(){axios.get("/web/HelloServlet",{ params: {msg:"hello"}}).then(response=>{let objJson=response.data;console.log(objJson)if(objJson.status===20000){//请求处理成功this.result=objJson.data;}else{//处理失败了alert(objJson.msg);}});}});
</script>
通过console.log(objJson)跟踪浏览器控制台输出的结果，我们发现，response对象的响应体就是一个ResponseResult对象
4 axios.post
综合案例
楼栋列表展示
-
GetNoticeListServlet.java：处理请求并响应
@Override
protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
ResponseResult<PageInfo> result=null;
try {
//1.取
String keyword = request.getParameter(“keyword”);
String pageNumStr = request.getParameter(“pageNum”);
String pageSizeStr = request.getParameter(“pageSize”);Integer pageNum=1;//默认查询第一页if(!StringUtils.isNullOrEmpty(pageNumStr)){pageNum=Integer.parseInt(pageNumStr);}Integer pageSize=3;//默认显示3条if(!StringUtils.isNullOrEmpty(pageSizeStr)){pageSize=Integer.parseInt(pageSizeStr);}//2.调 思考：是用代理对象//2-1 实例化工厂TransactionalProxyFactory<NoticeServiceImpl> factory=new TransactionalProxyFactory<>(new NoticeServiceImpl());//2-2 获取代理对象NoticeServiceImpl proxy = factory.getTxProxyInstance();PageInfo<Notice> pageInfo = proxy.getPageBy(keyword,pageNum,pageSize);//3.java对象统一使用ResponseResult封装响应结果，而且必须json字符串格式result=new ResponseResult<>(20000,pageInfo);} catch (Exception e) {e.printStackTrace();result=new ResponseResult<>(50000,"程序异常："+e.getMessage());}//json序列化：java对象--->json字符串格式ObjectMapper mapper=new ObjectMapper();String jsonStr = mapper.writeValueAsString(result);response.setContentType("application/json;charset=utf-8");response.getWriter().write(jsonStr);}
building/list.html页面处理响应结果并显示
el-table显示数据时，怎么控制数据显示的方式：
<el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" stripe@selection-change="handleSelectionChange"><el-table-column type="selection" width="120"></el-table-column><!-- 调用过滤器：{{}} 和 v-bind:属性 --><el-table-column label="楼栋编号" width="220"><template slot-scope="scope">{{ scope.row.bno }}</template></el-table-column><!--
el-table 数据循环内部完成，显示数据时，通常都是el-table-column 使用 prop指定属性名 完成显示
自定义数据显示方式：<template slot-scope="scope"> 虚拟标签 scope获取迭代对象 scope.row就是当前循环对象
--><el-table-column prop="typeId" label="楼栋类型" width="220"></el-table-column><el-table-column label="建成时间" prop="completed" width="220"></el-table-column><el-table-column label="描述信息" show-overflow-tooltip width="320"><template slot-scope="scope"><span v-html="scope.row.remark"></span></template></el-table-column><el-table-column label="操作" width="180"><template slot-scope="scope"><el-button circle icon="el-icon-edit"@click="handleEdit(scope.$index, scope.row)"></el-button><el-button circle icon="el-icon-delete" type="danger"@click="handleDelete(scope.$index, scope.row)"></el-button></template></el-table-column>
</el-table>
楼栋列表日期显示格式问题
解决方案①：使用vue过滤器处理
filters:{dateFormat(oldVal){ //解决表格显示日期时间戳//js 时间戳可以构建Datelet date=new Date(oldVal);return `${date.getFullYear()}-${date.getMonth()+1}-${date.getDate()}`;}
},//局部过滤器
解决方案②：使用@JsonFormat处理
楼栋列表分页显示
楼栋列表的分页显示，我们的侧重点主要是解决异步axios.get如何发送参数，以及el-page如何处理分页数据的显示。具体操作如下所示：
- axios.get处理分页请求
- el-pager处理分页显示
多条件查询楼栋信息
