zoukankan      html  css  js  c++  java
  • [DEBUG] springboot结合freemaker和js实现页面跳转和传值-踩坑记录

    这次项目换了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";
        }
    }

    至此,顺利跳转。

  • 相关阅读:
    屏幕尺寸相关
    关于sqlite的数据库操作
    Service服务
    BroadcastReceiver广播接收器
    将博客搬至CSDN
    win7+WinDbg调试系统内核
    驱动
    驱动开发,走起!!哈哈
    动态链接库DLL
    2013年12月24号感受
  • 原文地址:https://www.cnblogs.com/pxy7896/p/12660208.html
Copyright © 2011-2022 走看看