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 { @Override protected 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对象：对象名.key
json对象：{"key":value,"key":value}
json对象数组：[
{"key":value,"key":value},
{"key":value,"key":value}
]
使用json对象：对象名.key
JSON 语法规则
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-59999
private 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 {
@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)
}
//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 时间戳可以构建Date
let date=new Date(oldVal);
return `${date.getFullYear()}-${date.getMonth()+1}-${date.getDate()}`;
}
},//局部过滤器
解决方案②：使用@JsonFormat处理
楼栋列表分页显示
楼栋列表的分页显示，我们的侧重点主要是解决异步axios.get如何发送参数，以及el-page如何处理分页数据的显示。具体操作如下所示：
- axios.get处理分页请求
- el-pager处理分页显示
多条件查询楼栋信息
