前后端数据交互的两种方式


前言

平常在项目测试过程中常常需要写一些小工具,方便造数据或者mock上下游的依赖等,这些工具做起来也都比较轻,主要涉及到前后端数据交互、权限控制、数据校验、业务HSF接口、DB操作。今天主要说说前后端数据交互的两种方式,写下来方便组里在平时的工作中快速的写工具。


方式一 直接通过变量交互

比如在webx中以.vm模版为桥梁进行交互。Velocity是基于Java的模版引擎,适用于变量赋值、基本数据类型、函数、逻辑运算、模版嵌套等等。

1. 前端->后端

.vm中通过form表单提交的方式将input等标签的value值传给后端,后端通过 request.getParameter(“xxx”)来获取值。

<form class="form-vertical" method="post" action="configurationCheck.htm">
    ......
    <div class="control-group">
        <label class="control-label">单号:</label>
        <div class="controls">
            <input type="input-normal" name="orderNo" value="$!orderNo" />
        </div>
    </div>
    ......
</form>

public void execute(@Param("orderNo") String orderNo, Context context) {
	String orderNo = request.getParameter("orderNo");
	......
}

2. 后端->前端

后端通过把变量放到上下文中context.put(“xxx”, xxx)来传值给前端,前端在.vm文件中使用velocity语法来取变量值$!xxx,不同的变量类型有不同的使用方式,可参看velocity语法。

#foreach($item in $!items)
<div class="label label-info">$item.itemId - $item.barcode</div> 
#end

context.put(“items”, itemVOs);


方式二 通过AJAX异步接口

通过$.ajax()的方式,我们可以任意的前端->后端、后端->前端来获取数据。

<button type="button" onclick="invokeUrl('JingweiLogAjax.do')">Send</button>
<input type="hidden" id='jingweiMsg' value="$!jingweiMsg" />
<script>
 function invokeUrl(url)
{
    var requestStr = document.getElementById('jingweiMsg').value
    $.ajax({
          url : url,
          type:'POST',
          data: {
            request:requestStr,
          }.done(function(data){
            alert(data);
      }
    });
}</script>

//JingweiLogAjax.java    
public void execute(Context context) {
	String response = null;
	try {
		String msgJson = request.getParameter("request");
		//处理逻辑
		......
                   //返回结果写到response
		PrintWriter writer = response.getWriter();
        writer.write(response);
        writer.flush();
        writer.close();
	}catch(Throwable e){
		response = "异常" + e.getMessage();
	}
}


其他

上述是前后端数据交互最基础的方式。实际在应用中不同场景可能会有一些不同的方式,实质都是将数据的交互方式和样式渲染封装了。比如

1. data-*属性

前端中可以利用data-* 属性来存储和操作数据,这些属性在页面上是不显示的,不会影响到你的页面布局和风格,并且是可读可写的。比如典型的在bootstrap table中的使用方式

<table data-toggle="table" data-url="data1.json">


2. 前后端分离

前后端分离时,往往只需要前后端对好异步接口的字段,后端拼JSON返回给前端,前端根据后端数据对页面进行动态渲染。这样.vm文件都可以如此简单:

<script>
BUI.use('page/data/portal', function (Portal) {
    new Portal({
        api: '/portal/homePage.do',
    });
});    
</script>
crystal /
Published under (CC) BY-NC-SA in categories 前端  tagged with 前后端交互