在前几节的基本架构搭建内容基础上,添加封装:想自己搭一套简单了可以去看看。
上一节:前后端分离-下篇
这节修改3处代码,添加一个class,一个enum;
第一步:添加枚举返回状态及描述
package org.test.dataEncapsulation;
/**
* 定义响应的状态码
*/
public enum ResponseCode {
SUCCESS(200, "SUCCESS"),
ERROR(401, "ERROR"),
NEED_LOG(110, "NEED_LOG");
private int code;
private String desc;
public int getCode() {
return code;
}
public void setCode(int code) {
this.code = code;
}
public String getDesc() {
return desc;
}
public void setDesc(String desc) {
this.desc = desc;
}
ResponseCode(int code, String desc) {
this.code = code;
this.desc = desc;
}
}
第二步,添加封装的返回数据类
package org.test.dataEncapsulation;
import com.fasterxml.jackson.annotation.JsonIgnore;
import com.fasterxml.jackson.annotation.JsonInclude;
/**
* 封装后端返回的Json数据
*/
// 保证序列化json时,如果是null的对象,key也会消失
@JsonInclude(JsonInclude.Include.NON_NULL)
public class ServerResponse<T> {
// 状态码
private int status;
// 数据
private T param;
// 描述信息
private String msg;
// setter、getter方法
/**
* @return the status
*/
public int getStatus() {
return status;
}
/**
* @param status the status to set
*/
public void setStatus(int status) {
this.status = status;
}
/**
* @return the param
*/
public T getParam() {
return param;
}
/**
* @param param the param to set
*/
public void setParam(T param) {
this.param = param;
}
public String getMsg() {
return msg;
}
public void setMsg(String msg) {
this.msg = msg;
}
// 构造函数
/**
* 操作成功时,返回数据
*
* @param statu
* @param param
* @param msg
*/
public ServerResponse(int status, T param, String msg) {
this.status = status;
this.param = param;
this.msg = msg;
}
public ServerResponse(int status) {
this.status = status;
}
/**
* 操作失败时,不返回数据
*
* @param statu
* @param msg
*/
public ServerResponse(int status, String msg) {
this.status = status;
this.msg = msg;
}
// 使之不在序列化结果中
@JsonIgnore
public boolean checkIsSuccess() {
return this.status == ResponseCode.SUCCESS.getCode();
}
// 泛型方法
/**
* 成功返回数据
*
* @param msg
* @param data
* @param <T>
* @return
*/
public static <T> ServerResponse<T> createBySuccess(T param) {
return new ServerResponse<T>(ResponseCode.SUCCESS.getCode(), param, "数据返回成功");
}
public static <T> ServerResponse<T> createBySuccess(String msg, T param) {
return new ServerResponse<T>(ResponseCode.SUCCESS.getCode(), param, msg);
}
/**
* 用于校验登录信息
*
* @param <T>
* @return
*/
public static <T> ServerResponse<T> createByCheckSuccess() {
return new ServerResponse<T>(ResponseCode.SUCCESS.getCode());
}
/**
* 返回错误信息
*
* @param msg
* @param <T>
* @return
*/
public static <T> ServerResponse<T> createByError() {
return new ServerResponse<T>(ResponseCode.ERROR.getCode(), "响应成功");
}
public static <T> ServerResponse<T> createByError(String msg) {
return new ServerResponse<T>(ResponseCode.ERROR.getCode(), msg);
}
public static <T> ServerResponse<T> createByNeedLogin() {
return new ServerResponse<T>(ResponseCode.NEED_LOG.getCode(), "请先登录!");
}
}
第三步,修改service接口 IPersonService.java
//添加
ServerResponse<List<Person>> queryAll();
第四步,修改PersonServiceImpl.java
//添加
/**
* 这时可以指定具体的封装类的泛型类型
* @return
*/
public ServerResponse<List<Person>> queryAll() {
//DAO层查询数据
List<Person> studentList = personMapper.queryAll();
if (studentList.size()>0){
return ServerResponse.createBySuccess(personMapper.queryAll());
}
return ServerResponse.createByError("查询记录为空");
}
第五步,修改controller层
@RequestMapping(value = "/show")
@ResponseBody
public ServerResponse<List<Person>> showAllStudent(){
return personService.queryAll();
}
到这后台返回封装,完成了。
最后修改前端页面(个人为了稍微好看点。。。)
第一步:添加data参数,param:null
第二步:添加请求方法
getValue2(){
var _that = this;
this.axios({
method:'post',
url:'/ownkua/own/personController/show',
data:{
}
}).then(function(response) {
_that.param = response.data.param;
}).catch(function (error) {
console.log(error);
});
}
第三步:修改页面(嗯,看着舒服点。。。)
<div>
<div>
<button @click="getValue" style="height:30px;width:60px">点击</button>
<!--添加按钮-->
<button @click="getValue2" style="height:30px;width:120px">封装数据点击</button>
</div>
<div>
<div v-if="null != persons" style="font-size:36px;font-weigth: 600;">----未封装数据----</div>
<div v-for="value,key,index in persons" style="font-size:36px;font-weigth: 600;">{{value.name}}</div>
<!--展示点击响应返回的数据-->
<div v-if="null != param" style="font-size:36px;font-weigth: 600;">----封装后数据----</div>
<div v-for="value,key,index in param" style="font-size:36px;font-weigth: 600;">姓名:{{value.name}} 年龄:{{value.age}}</div>
</div>
</div>
修改结束。。。。。。
最后展示下效果:
返回数据:
页面样式及数据: