前后台数据交互

背景

最近在做前后台的整合，我负责开发后台，完全没有前台，怎么测试呢？

编码硬耦合

PHP，JSP,ASP那种脚本里面嵌套着HTML，有时又用到各种额外的标签库
各种代码代码属于编码硬耦合，涉及的东西比较杂，前后端分离效果很差，给调试维护
都会带来不小的麻烦。

RESTful和前后端更加彻底的分离

今年2016年，人家2000年就提出来了。
维基百科REST

阮一峰 理解RESTful架构

写SpringMVC控制器的时候，用的是RESTful风格
这两天一直痛URL来测试后台功能，试想如果前后台的基本方式只有URL该是多方便的事情。
URL传少量的参数还可以，测试添加和更改对象的时候遇到了问题，怎么传递一个对象或者对象列表呢？
RESTful 能够在当前这个环境下最大化的分离前后端。依赖少，只需要关注自己

交互思路：

前台向后台传递数据：如果只有少数参数，通过get请求附加一些参数就可以了。如果数据量比较大，先将json序列化，后台再反序列化，用post请求传递数据
后台向前台传递数据：json对象，由JavaScript来负责解析和填充数据。

RESTful风格的盛行，我感觉跟ajax有莫大的关系，今天用ajax进行交互真是爽。jQuery封装的ajax更是只需要关注URL，数据部分。

##前台是如何获取请求的执行状态呢？
换句话话说，URL弄好了，数据也准备好了，但是我怎么知道我的请求成功没成功呢？状态码
第一次认识到状态码的重要性。
ajax里面维护了对状态码的跟踪

关于URL编码

阮一峰 关于URL编码

URL参数中文乱码

http://localhost:8080/ACM/pt/query.do?id=1&ptmc=估值
后台设置了Request编码为UTF-8仍然不行

1
2
3
4
5
6
7
8
@RequestMapping(value= "pt/query.do",method=RequestMethod.GET)
public @ResponseBody List<Pt> getPtbyName(HttpServletRequest request) throws UnsupportedEncodingException{
    request.setCharacterEncoding("UTF-8");
    String ptmc =request.getParameter("ptmc").trim();
    ptmc = new String(ptmc.getBytes("iso-8859-1"),"utf-8");
    
    System.out.println(ptmc);
}

不管是什么乱码，我先用一种确定的编码来读，然后再重新转码。

所谓乱码不过是字符流解析错了，ISO-8859-1 换成GB18030还是乱码，这个字符集应该还是比较特殊的

ajax和SrpingMVC交互

1
2
3
4
5
6
7
8
9
@RequestMapping(value="pt/add.do")
public @ResponseBody String addPt(@RequestBody Pt record){
int flag = this.ptService.addPt(record);
    if (flag==1) {
        return "success";
    } else {
        return "error";
    }
}

@RequestBody 可以将接收的数据（不是json而是序列化的json）和模型进行关联，所以如果字段和model字段不匹配
是无法成功的。

@ResponseBody 直接将返回的对象以json的形式发给前台。

有的资料里面，要在@RequestMapping 里面加上相应的解析规则 content=”application/json”,实验的结果是加不加都可以

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<script src="./jquery-1.11.3.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){  
        $.ajax({ 
            type:"POST", 
            url:"http://localhost:8080/ACM/manage_page/pt/add.do", 
            dataType:"json",      
            contentType:"application/json;charset=UTF-8",               
            data:JSON.stringify({"qxyId":"1","ptmc":"期货资管云688","jcpt":"阿里云"}), 
            success:function(data){ 
                alert("添加成功")
            } ,
            error:function(data){ 
                alert("添加失败")
            }
        }); 
    });  
</script>

注意： @RequestBody 接收的序列化的json，而不是直接json

跨域访问错误

本地上制作了静态页面，没有放到web服务器上面，请求时错的

本地文件，浏览器URL file:///C:/Users/siys16877/Desktop/front-end/index.html

状态码正常

控制台报错

控制台报错