freemarker调用后台方法_后台系统的设计方案

本文基于后台系统相关类和功能已经实现的前提下，设计后台系统页面原型。侧重点在于如何设计用户体验良好的管理系统。

实现方式：前端 FreeMarker+Bootstrap 后端：SpringBoot

列表页：

列表页最下端分页的设计要求：

（1）显示出所有的页数

（2）提供翻页功能，最左侧为”上一页“，最右侧为”下一页“

（3） 当前页数为第几页，则该按钮功能失效（置灰）

（4）除本页外，其他页面按钮都可跳转到相应的页面

（5）当页面为第一页时，”上一页“按钮置灰；页面为最后一个时，”下一页“按钮置灰

以上为列表页的基本需求，理解之后开始开发。

Service层功能如下：由于需要翻页，传入Pageable对象

    @Override
    public Page<OrderDTO> findList(Pageable pageable) {
    
        Page<OrderMaster> orderMasterPage = orderMasterRepository.findAll(pageable);
        List<OrderDTO> orderDTOList = OrderMaster2OrderDTOConverter.convert(orderMasterPage.getContent());
        return new PageImpl<OrderDTO>(orderDTOList,pageable,orderMasterPage.getTotalElements());


    }

首先开发控制类：

    @Autowired
    private OrderService orderService;
    /*
    描述：查询订单列表
    两个参数：(1)page代表第几页，从1页开始
            (2)size代表一页中有多少数据

     */
    @GetMapping("/list")
    public ModelAndView list(@RequestParam(value = "page", defaultValue = "1") Integer page,
                             @RequestParam(value = "size", defaultValue = "3") Integer size,
                             Map<String, Object> map){
    
        PageRequest request =  new PageRequest(page-1, size);
        Page<OrderDTO> orderDTOPage = orderService.findList(request);


        map.put("orderDTOPage", orderDTOPage);
        map.put("currentPage", page);
        map.put("size", size);
        return  new ModelAndView("order/list", map);
    }

接着开发前端页面：页面文件建在resources/templates/order目录下的list.ftl文件。

首先上

ibootstrap - Bootstrap可视化布局系统​www.ibootstrap.cn

由于系统前台布局元素较少，直接选择bootstrap生成模板。