前后端传值总结

先讲下后端给前端传值，也就是controller跳到html页面时，向html传值的过程，一般2种方法。
0.freemaker通过 <#list>打印

//直接传对象
model.addAttribute("historyList", datas);

//循环渲染
<#list historyList as a>
<tr>
<td>${a.paramGroup}</td>
<td>${a.paramKey}</td>
<td>${a.paramValue}</td>
<td>${a.createTime}</td>
<td>${a.modifyUser}</td>
</tr>
</#list>

1.用Model

//举个例子
    @RequestMapping("/toAgentInput")
    public String toAgentInput(Model model) {
        //从枚举中获取贸易列表
        TradeTypeEnum[] tradeTypes = TradeTypeEnum.values();
        ArrayList<String> tradeTypesMsg = new ArrayList<String>();
        ArrayList<String> tradeTypescode = new ArrayList<String>();
        for (TradeTypeEnum i : tradeTypes) {
            tradeTypesMsg.add(i.getMsg());
            tradeTypescode.add(i.getCode());
        }
        String tradeTypesMsgList = JSON.toJSONString(tradeTypesMsg);
        String tradeTypesCodeList = JSON.toJSONString(tradeTypescode);
        model.addAttribute("tradeTypesMsgList", tradeTypesMsgList);
        model.addAttribute("tradeTypesCodeList", tradeTypesCodeList);
        return "agentBilling/agentAdd";
    }

2.用ModelAndView

//举个例子
    @RequestMapping("/modify/{id}")
    public ModelAndView modify(@PathVariable(value = "id") String id){
        ModelAndView modelAndView = new ModelAndView("member/dataCleanModify");
        //查询操作
        modelAndView.addObject("id",id);

        //下拉框赋值
        TableEnum[] tableTypes = TableEnum.values();
        List<String> tableTypesMsg = new ArrayList<String>();
        List<String> tableTypescode = new ArrayList<String>();
        for (TableEnum i : tableTypes) {
            tableTypesMsg.add(i.getMsg());
            tableTypescode.add(i.getCode());
        }
        String tableTypesMsgList = JSON.toJSONString(tableTypesMsg);
        String tableTypesCodeList = JSON.toJSONString(tableTypescode);
        modelAndView.addObject("tableTypesMsgList",tableTypesMsgList);
        modelAndView.addObject("tableTypesCodeList",tableTypesCodeList);
        return modelAndView;
    }

这两种方法的区别，model只负责传值，最后通过return "路径"来跳转，而modelandview即传值，又转发。还有个区别时，Model是作为方法入参传进来的，而ModelAndView是自己new的。

扩展：
此外还要Map，ModelMap等都可以向前端传值
Map 为原生的储存键值的对象，自然的里面一大堆的方法可以使用。
​Model 只有寥寥几个方法只适合用于储存数据，简化了新手对于Model对象的操作和理解；
​ModelMap 继承了 LinkedMap ，除了实现了自身的一些方法，同样的继承 LinkedMap 的方法和特性；
​ModelAndView 可以在储存数据的同时，可以进行设置返回的逻辑视图，进行控制展示层的跳转。

JSON: 后端传String，基本类型这些，前端是能直接接受到的，但是如果要传对象、列表这些，那就需要用到JSON，把对象转换为JSON字符串后传给前端，然后前端再把JSON字符串转换成前端能之别的JSON对象来取值了。
示例：

//controller
String tradeTypesMsgList = JSON.toJSONString(tradeTypesMsg);

//js
  var tableTypesMsgList=JSON.parse('${tableTypesMsgList}')
  var tableTypesCodeList=JSON.parse('${tableTypesCodeList}')
  for(var i=0;i<tableTypesCodeList.length;i++){
    $("#myselect").append(
        "<option value='"+tableTypesCodeList[i]+"'>"+tableTypesMsgList[i]+"</option>"
    )
  }

JSON包：
<dependency>
     <groupId>com.alibaba</groupId>
     <artifactId>fastjson</artifactId>
     <version>x.x.x</version>
</dependency>

然后，html无法获取js中的值，所以如果一般都是js获取html的dom，然后更改这个dom。

//像这样
 $("#show").append("<tr>")
    $("#show").append("<td>"+list[i].id+"</td>")

-----------------------------------------------------分割线----------------------------------------------------
接下来讲下前端给后端传值：
1.a标签跳转链接，然后用后缀传值
2.js中用window.location.href = "/assetslist/?nid="+dataId 跳转，get方式
关于get请求，传值有两种风格，一种是 /？id=1这种风格，另一种是restful风格，一般我用的都是restful风格

//前端
    $("#show").append("<td>"+"<a href='/sumpay-operate/dataclean/modify/"+list[i].id+"'>修改"+"</a>"+"</td>")

//后端
      @RequestMapping("/modify/{id}")
    public ModelAndView modify(@PathVariable(value = "id") String id){

3.form表单传值

//前端
  <form action="/sumpay-operate/dataclean/add">
    表名：<select id="myselect" class="singleSelect" name="tableName">
    </select>  <br/>
    列名：<input type="text" name="columnName"><span>&nbsp;&nbsp;用英文逗号分隔列名,例如：MOBILE_NO,ID_NO</span> <br/>
    开始时间: <input type="text" name="startTime" maxlength="8" minlength="8"><span>&nbsp;&nbsp;注意必须输入八位时间，如:20200506</span><br/>
    结束时间： <input type="text" name="endTime" maxlength="8" minlength="8"> <span>&nbsp;&nbsp;注意必须输入八位时间，如:20200506</span><br/>
    处理类型： <input type="text" name="cleanFlag">&nbsp;&nbsp;<span>处理类型00-初始化，10-解密失败，11-国密加密不一致，12-国密加密失败</span><br/>
    单次取的数量： <input type="text" name="cleanSize">&nbsp;&nbsp;<span>单次取的数量最多为500</span><br/>
    <input type="submit" value="添加任务">
  </form>

//后端直接整个对象给它接住
    @RequestMapping("/add")
    public ModelAndView add(CleanDataOrderReq cleanDataOrderReq){
        supplementTime(cleanDataOrderReq);
        BaseResp baseResp = cleanDataFacade.addCleanDataOrder(cleanDataOrderReq);

        return toIndex();
    }

4.ajax传值有多种方式
4.1 拼到url里

$.ajax（{
    type:"get",
    url:"/sjj/1/2"
}）

4.2 data
$.ajax（{
type:"get",
url:"/sjj",
data:{"value1":"1","value2":"2"}
}）
4.3 form表单通过ajax传
$.ajax（{
type:"get",
url:"/sjj",
data:$("#myform").serialize()
}）

关于ajax中success(data)的处理，可以参考
https://www.jb51.net/article/145287.htm

对于前端表单提交，controller层中可以直接用一个对象来接受所有前端参数
对于Ajax这类把对象转换成json传过来的，controller中可以对入参加上@RequestBody 注解，直接接收

后端数据校验：

//jar包
    <dependency>
        <groupId>org.hibernate.validator</groupId>
        <artifactId>hibernate-validator</artifactId>
        <version>6.1.5.Final</version>
    </dependency>

//bean
    <bean id="validatorFactory" class="org.springframework.validation.beanvalidation.LocalValidatorFactoryBean">
        <property name="providerClass" value="org.hibernate.validator.HibernateValidator"/>
    </bean>

<mvc:annotation-driven conversion-service="conversionServiceFactory" validator="validatorFactory"/>

使用校验注解

public class User {
    
    private String id;
    
    @NotBlank(message = "用户名不能为空")
    @Length(min = 6, max = 20, message = "用户名的长度必须为6-20位")
    private String username;
    
    @NotBlank(message = "用户姓名不能为空")
    private String name;

  //入参加@Validated
  public String save(@Validated User user, BindingResult bindingResult) {
        System.out.println(user);
        return "redirect:/user/list";
    }