ssm+maven搭建及扩展修改（五.后台返回值封装）

在前几节的基本架构搭建内容基础上，添加封装：想自己搭一套简单了可以去看看。

上一节：前后端分离-下篇

这节修改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>

修改结束。。。。。。

最后展示下效果：

返回数据：

页面样式及数据：