[DEBUG] springboot结合freemaker和js实现页面跳转和传值-踩坑记录

2023/3/16 更新

这次要求拓展详情按钮，所以改成下拉框，结果获取选中项的value时死活都是undefined。。。搜完发现是select的id里带特殊字符句号，所以我用$('#ID').val()获取时，会找不到。此时应该改用下面的方式，或者去掉id里的特殊字符。

var opVal = $(document.getElementById(i)).val();

对正文部分的内容做一点点修改：operateFormatter主要是修改了operateBtn部分，从单一按钮改成了select

var soid = row.id + "";
var soid2 = "selectOp." + soid;
var operateBtn = [            
    '<@shiro.hasPermission name="seq_tool:getdetails">',
    '<select id="' + soid2 + '" onChange="selectOperation(' + soid + ')">',
    '<option value="0" selected>操作</option>',
    '<option value="1" order-id="' + orderId + '">',
    '<i class="fa fa-info-circle"></i>详情</option>',
    '<option value="2">待补充</option>',
    '</select>',
    '</@shiro.hasPermission>'
];

function selectOperation(x) {
    var orderId = x + "";
    var i = "selectOp." + x + "";
	var opVal = $(document.getElementById(i)).val();
	var url;
	if (opVal == "1") {
		url = "/seq_tool/getdetails/" + orderId;
	} 
    // 日后扩展
	else if(opVal == "2"){
		return;
	}
	window.location.href = url + "?backurl="+window.location.href;
}

---

这次项目换了freemarker模板，我不熟。再加上我js真是一塌糊涂，解决一个按钮跳转问题，居然花费了一天多。。。

现在记录一下吧。

问题描述：当前网址是A，视图如下。我希望点击“详情”跳转到网址A/details，展示这条记录的详细信息。

但是始终无法跳转。debug发现前台向后台传数据ok，后台查询数据库ok，但始终无法跳转到A/details。直接输入

A/details，发现ftl文件编写和访问正确。

 踩到的坑：

1.@RestController理解错误 2. js跳转理解错误 3. ajax理解错误

知识总结：

1.@RestController

这个注解相当于@ResponseBody 和 @Controller两个注解的组合，不返回视图，只返回数据。如果一个类上加了这个注解，

那么这个类的函数都是返回不了视图的，return "redirect:/seq_tool/seq_order_details";也会只在页面上显示return的字符串。

解决方法是把类上的注解改为@Controller，然后给不返回视图，只返回数据的函数加上注解@ResponseBody。

2.js跳转问题

直接贴代码：

我的表格是用js的bootstrapTable创建的，所以在另一个文件table.js写了操作，这里隐去。

<script>
// 定义按钮：当前角色支持的操作
function operateFormatter(code, row, index) {
    var orderId = row.id;
    orderId.value = row.id;
    var operateBtn = [
        '<@shiro.hasPermission name="seq_tool:getdetails"><button class="btn btn-xs btn-primary btn-get-details" type="button" order-id="' + orderId + '" ><i class="fa fa-info-circle"></i>详情</button></@shiro.hasPermission>',
    ];
    return operateBtn.join('');
}
    
    $(function () {
        var options = {
            url: "/seq_tool/list/${user.id}",
            getDetailsUrl: "/seq_tool/getdetails/{id}",
            // title是展示在页面上的名称
            columns: [
                // 其他列
                }, {
                    field: 'operate',
                    title: '操作',
                    editable: true,
                    formatter: operateFormatter //自定义方法，添加操作按钮
                }
            ],
            modalName: "订单"
        };
        //1.初始化Table
        $.tableUtil.init(options);
        //2.初始化Button的点击事件
        $.buttonUtil.init(options);

    });
    
</script>

table.js绑定按钮操作：

/* [pxy]查看订单细节 */
$('#tablelist').on('click', '.btn-get-details', function () {
    var $this = $(this);
    var orderId = $this.attr("order-id");
    var url = options.getDetailsUrl.replace("{id}", orderId);
    window.location.href=url+"?backurl="+window.location.href;
});

后台：

@Controller
@RequestMapping("/seq_tool")
public class SeqOrderController {
    @RequiresPermissions("seq_tool:getdetails")
    @GetMapping(value="/getdetails/{orderid}")
    public String getDetails(@PathVariable("orderid")String orderid, RedirectAttributes ra) {
        // 获取了一些数据
        String oid = X.getOrderId();
        // ...
　　　　 // 为了重定向时携带数据
        ra.addFlashAttribute("orderid", oid == null ? "NULL" : oid);return "redirect:/seq_tool/seq_order_details";
    }
}

// 涉及权限控制，我把另一块写在另一个类
@Controller
public class RenderController {
    @RequiresPermissions("seq_tool")
    @GetMapping("/seq_tool/seq_order_details")
    public String getOrderDetails() {
        return "tools/seq_order_details";
    }
}

至此，顺利跳转。