统一前后台数据交互格式

公司前后台数据交互的格式是统一的,前台对jquery的ajax方法进行了一些封装,也就是说开发的时候并不是自己去调用$.ajax方法,而是调用统一的方法去处理.

我感觉还是比较方便的..确实可以少写一些代码(因为通用代码被封装了),而且管理起来比较方便,统一..然后观察了一些网上的其他网站...发现很多网站都是这么做的...于是我也想自己动手来试试....我自己是使用springmvc与fastjson来实现的...下面分享一下我的经验.

网上例子:

首先先来找个网上的例子:

这个页面的地址是https://www.bugclose.com/login.html 是我随便找的一个例子.

仔细观察上面2张图片,我们可以发现几个特点:

1.前台错误提示的样式是一样的,不同的错误的弹出框是一模一样的,只是里面的文字换了而已.

2.2次请求返回的数据格式基本是一样的.

我的思考:

第一张图片里的输出信息是来自root.email,第二张图片里的输出信息是来自errorMessage.

如果我把2种错误输出信息都写到errorMessage里.那我js是不是可以有个通用的请求方法

 1 function commonAjax(data, url, callBack){
 2     $.ajax({
 3         contentType : ‘application/json‘,
 4         url : url,
 5         data : data,
 6         type : ‘POST‘,
 7         success : function(response){
 8             if(response.success == true){
 9                 callBack();//请求成功,就调用后续方法
10             } else{
11                 alert(response.errorMessage);//请求失败,用前端框架输出错误信息
12             }
13         }
14     });
15 }

大家不要吐槽上面这段JS有什么什么错误(我前端不是很好....我只是表达下大致意思..)

这个网站的所有页面只要有弹框提示错误信息,都可以用这个方法.这样我觉得可以省不少力气,不用每次自己去写ajax,而且做到了统一,下次需求要求输出errorcode,或者换个提示样式的时候都只要修改一个地方就行了.不用每个页面都去改一遍.

另外这种封装我觉得是可行的.一般做个页面肯定会用一个前端框架.提示信息的样式一定是统一的.不会这里用alert那里用框架自带的消息框.

利用SpringMVC与fastjson实现前后台数据格式统一

公司是用SpringMVC与jackson来做统一的...我不太喜欢和别人代码一样,另外公司的实现代码比较多...我这里只是写个demo,用不着那么多功能...所以我自己用springmvc与fastjson来做了一次尝试.

首先我要介绍一些背景(据我所知):

SpringMVC有内置的converter可以解析http请求.但是功能比较简单.json字符串默认是不支持的.

前台一般页面写的都是JS代码,传过来的数据一般都是json格式.而fastjson可以方便的将json字符串转化成java对象.

既然如此.我们要做的就是去实现一个converter,将前台传送过来的字符串解析成java对象.

幸运的是fastjson自带了这个一个converter. 叫做FastJsonHttpMessageConverter. 所以只要配置这个converter就行了.

在Springmvc的配置XML中加入下面这段代码就可以了.

 1 <mvc:annotation-driven>
 2         <mvc:message-converters>
 3             <bean
 4                 class="com.labofjet.web.CustomerFastJsonHttpMessageConverter">
 5                 <property name="features">
 6                     <list>
 7                         <value>WriteMapNullValue</value>
 8                         <value>SortField</value>
 9                     </list>
10                 </property>
11             </bean>
12         </mvc:message-converters>
13     </mvc:annotation-driven>

我的class是我自己写的一个converter..继承了FastJsonHttpMessageConverter.feature是FastJsonHttpMessageConverter允许的一些特性.不写也可以.另外mvc:message-converters这个标签貌似对springmvc的版本有些要求.反正我http://www.springframework.org/schema/mvc/spring-mvc-3.0.xsd是验证不通过的..我用的是http://www.springframework.org/schema/mvc/spring-mvc-4.0.xsd....mvc:message-converters这个标签允许配置多个converter(看有个s就知道肯定允许多个).我这里只写了一个converter.对我来说足够了.因为我的目标就是前后台数据格式统一,所以只需要这么一个converter..哪天要加XML格式的时候我再加一个XML的converter就可以了.

然后要用到2个注解:@ResponseBody和@RequestBody..分别对应AbstractHttpMessageConverter中的writeInternal与readInternal方法...对应向HTTP响应写入数据与从HTTP请求中读取数据返回java对象.

converter可以有多个,所以到底哪个converter来处理呢? 这要看converter支持什么类型的MediaType.

如上图,这次请求的ContentType是blablabla.......(看截图红色区域)

而fastjson允许的MediaType是:

1     public FastJsonHttpMessageConverter(){
2         super(new MediaType("application", "json", UTF8), new MediaType("application", "*+json", UTF8));
3     }

所以我的commonAjax方法里需要指明

contentType : ‘application/json‘

这样才能被fastjson的converter解析...当然你也可以自己写一个converter去映射N种MediaType.

这样做了以后前后台json格式的数据都可以被fastjson的converter去处理了.然后我们来定义一个统一的数据格式:

 1 package com.labofjet.web;
 2
 3 import java.util.HashMap;
 4 import java.util.Map;
 5
 6 import com.alibaba.fastjson.JSON;
 7 import com.alibaba.fastjson.JSONObject;
 8 import com.labofjet.exception.BaseException;
 9
10 /**
11  * 用于前后台数据交互时候格式的统一
12  *
13  * @author [email protected]
14  *
15  */
16 public class ContextDTO {
17     private boolean success;
18     private Map<String, Object> data;
19     private BaseException exception;
20
21     public boolean getSuccess() {
22         return success;
23     }
24
25     public void setSuccess(boolean success) {
26         this.success = success;
27     }
28
29     public Map<String, Object> getData() {
30         return data;
31     }
32
33     public void setData(Map<String, Object> data) {
34         this.data = data;
35     }
36
37     public BaseException getException() {
38         return exception;
39     }
40
41     public void setException(BaseException exception) {
42         this.exception = exception;
43     }
44
45     public <T> T getDTOFromData(String name, Class<T> dtoClass){
46         JSONObject o = (JSONObject) data.get(name);
47         return JSON.parseObject(o.toJSONString(), dtoClass);
48     }
49
50     public void putData(String name, Object obj){
51         if(data == null){
52             data = new HashMap<String, Object>();
53         }
54         data.put(name, obj);
55     }
56 }

假设我的通用格式是这个..

然后我有个和某些业务相关的DTO(我这里随便找了个entity...只是测试用....举个例子而已..大家无视没用的注解....)

package com.labofjet.entity;

import javax.persistence.Embedded;
import javax.persistence.EmbeddedId;
import javax.persistence.Entity;
import javax.persistence.NamedStoredProcedureQueries;
import javax.persistence.NamedStoredProcedureQuery;
import javax.persistence.ParameterMode;
import javax.persistence.StoredProcedureParameter;

import org.apache.commons.lang3.builder.ToStringBuilder;

@Entity
@NamedStoredProcedureQueries({
        @NamedStoredProcedureQuery(name = "User.plus1", procedureName = "plus1inout", parameters = {
                @StoredProcedureParameter(mode = ParameterMode.IN, name = "arg", type = Integer.class),
                @StoredProcedureParameter(mode = ParameterMode.OUT, name = "res", type = Integer.class) }),
        @NamedStoredProcedureQuery(name = "User.mytest", procedureName = "mytest") })
public class A {
    @EmbeddedId
    APK id;

    String age;

    @Embedded
    AComponent acomponent;

    int b;

    public AComponent getAcomponent() {
        return acomponent;
    }

    public void setAcomponent(AComponent acomponent) {
        this.acomponent = acomponent;
    }

    public String getAge() {
        return age;
    }

    public void setAge(String age) {
        this.age = age;
    }

    public APK getId() {
        return id;
    }

    public void setId(APK id) {
        this.id = id;
    }

    /**
     * @return the b
     */
    public int getB() {
        return b;
    }

    /**
     * @param b the b to set
     */
    public void setB(int b) {
        this.b = b;
    }

    @Override
    public int hashCode() {
        // TODO Auto-generated method stub
        System.out.println("Ahash");
        return super.hashCode();
    }

    @Override
    public boolean equals(Object obj) {
        // TODO Auto-generated method stub
        System.out.println("Aequals");
        return super.equals(obj);
    }

    @Override
    public String toString() {
        return ToStringBuilder.reflectionToString(this);
    }
}

package com.labofjet.entity;

import java.io.Serializable;

public class APK implements Serializable{
    String id;
    String name;
    public String getId() {
        return id;
    }
    public void setId(String id) {
        this.id = id;
    }
    public String getName() {
        return name;
    }
    public void setName(String name) {
        this.name = name;
    }

    public APK() {
        // TODO Auto-generated constructor stub
    }

    public APK(String id, String name){
        this.id = id;
        this.name = name;
    }

    @Override
    public int hashCode() {
        // TODO Auto-generated method stub
        System.out.println("APKhash");
        return super.hashCode();
    }

    @Override
    public boolean equals(Object obj) {
        // TODO Auto-generated method stub
        System.out.println("APKequals");
        return super.equals(obj);
    }

}

然后我在controller里的测试代码

1     @RequestMapping("/test15")
2     @ResponseBody
3     public Object index15(@RequestBody ContextDTO context) {
4         A a = context.getDTOFromData("aName", A.class);
5         ContextDTO dto = new ContextDTO();
6         dto.putData("aDataName", a);
7         dto.setSuccess(true);
8         return dto;
9     }

前台请求:

后台返回给前台的数据

后台获取到的数据

是不是很简单呀....

时间: 2024-10-15 17:32:22

统一前后台数据交互格式的相关文章

Json数据交互格式介绍和比较

1.什么是数据交互格式? 就是客户端和服务端进行信息传输的格式(xml和json),双方约定用什么格式进行传输,然后解析得到自己想要的值 xml扩展标记语言,属于重量级(第一占宽带.第二解析难) json属于轻量级的数据交互格式(不占宽带,解析很简单) 2.xml和json优缺点 xml优点:格式统一,符合标准:容易与其它系统进行远程交互,数据共享比较方便 xml缺点:xml文件庞大,文件格式复杂,传输占宽带:   服务器和客户短需要话费大量代码来解析xml,导致服务器和客户端代码变得异常复杂且

AJAX+REA实现前后台数据交互的加密解密

AJAX+REA实现前后台数据交互的加密解密 1.创建js文件Encryption.js /**  * 加密解密  */ /** RSA加密用 生成key */ function bodyRSA(){ /** 1024位的key参数写130,2014位的key参数写260 */ setMaxDigits(130); /** ajax 调用后台方法,取回公钥 */ var keyR ;     $.ajax({      url: "/GHGL/Key/pk",//请求后台的url,本例

用PHP和Ajax进行前后台数据交互——以用户登录为例

很多网站中都有用户登录系统,要完成用户的注册和登陆,就一定要用到前后台的数据交互.在这里以简单的用户注册和登陆为例介绍一下前后台交互的大致流程. 首先,我们来做一个简单的登陆界面. 这里为了方便我使用了bootstrap插件 <form class="form-horizontal"> <div class="form-group"> <label>用户名</label> <input type="te

JQuery + XML作为前后台数据交换格式实践

JQuery + xml作为前后台数据交换 JQuery提供良好的异步加载接口AJAX,可以局部更新页面数据, http://api.jquery.com/category/ajax/ xml作为一种轻量数据格式,被浏览器js引擎普遍支持,同json格式,但是没有json那么精简. 使用AJAX+xml数据格式来实现动态页面,有以下好处: 1. 松耦合, 页面HTML和数据彻底分离, 即表示层 和 数据层分开, 有利前台样式定制. 不同于以往后台脚本嵌套HTML标签,并输出数据到标签的合适位置,

JQuery + JSON作为前后台数据交换格式实践

JQuery + JSON作为前后台数据交换 JQuery提供良好的异步加载接口AJAX,可以局部更新页面数据, http://api.jquery.com/category/ajax/ JSON作为一种轻量数据格式,被浏览器js引擎普遍支持,同xml格式. 使用AJAX+JSON数据格式来实现动态页面,有以下好处: 1. 松耦合, 页面HTML和数据彻底分离, 即表示层 和 数据层分开, 有利前台样式定制. 不同于以往后台脚本嵌套HTML标签,并输出数据到标签的合适位置, 来实现动态页面,表示

springMVC前后台数据交互

假设项目需求是在springMVC框架下,后台要传送一个list到前台,那我们就要做以下几个步骤: 1 在web.xml文件中进行springMVC的配置: <?xml version="1.0" encoding="UTF-8"?> <web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://

在Java中Highcharts前后台数据交互传输

最近在项目中要添加一个Highcharts数据图表显示.看过官方的Ajax交互事例,可惜好像使用的是PHP语言,而且没有显示后台的代码.百度查看了很多前辈们的事例,发现没一样是我所要的效果...最后还是自己试着写写.今天却成功了!我后台用的是SSH框架.在此把此经验分享给大家. Highcharts其实还是满简单的,有点像一个框架一样,因为步骤单一而简单,只要自己在各个步骤中改一改自己想要的效果就出来了,在此我就不介绍这方面的知识了,有兴趣的可以上中文官方查看事例或学习.Highcharts中文

asp.net使用easyUI 前后台数据交互

// 1. asp页面使用EasyUI框架需要的Css样式和JS <script src="../script/jquery-easyui-1.4.5/jquery.min.js" type="text/javascript" charset = "utf-8"></script> <script src="../script/jquery-easyui-1.4.5/jquery.easyui.min.js

Jquery+PHP实现简单的前后台数据交互实现注册登录,添加留言功能

页面样式应用了BootStrap框架. 首先看登录页(登录页用于账号登录,也可以跳转到注册账号页): <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>用户登录--杰瑞教育图书管理系统</title> <link rel="stylesheet" type="text/css" href="