后台管理系统布局以及跳转，点击菜单局部刷新，右侧显示对应界面

完整版教程：https://blog.csdn.net/Lining_s/article/details/117676170
1.整体布局如下

右侧菜单的html 代码，使用了Thymeleaf 模版，这是左测的菜单栏，左侧的所有菜单最外层是一个div;

       <li class="nav-item">
                <a href="javascript:;"><i class="my-icon nav-icon icon_1"></i><span>网站配置</span><i class="my-icon nav-more"></i></a>
                <ul>
                    <li><a href="javascript:void(0);"><i class="my-icon nav-icon icon-shezhichilun" style="margin-top: 10px;"></i> <span>网站设置</span></a></li>
                    <li><a href="javascript:void(0);" ><i class="my-icon nav-icon icon-shezhichilun" style="margin-top: 10px;"></i><span>友情链接</span></a></li>
                    <li th:href="@{/sysDict.page}" data-skip-view="/pages/sysDict/sysDict.html" onclick="skipPage(this)"><a href="javascript:void(0);"><i class="my-icon nav-icon icon-shezhichilun" style="margin-top: 10px;"></i><span>数据字典</span></a></li>
                </ul>
            </li>

2.点击左侧的某一个菜单时，假设为 数据字典菜单–>绑定了 skipPage(obj) 函数，如下

function skipPage(obj){
    var href = $(obj).attr("href"); //获取请求的url
    var pageName = $(obj).attr("data-skip-view");//即将跳转的界面名称
    var data ={"viewName":pageName}; 
    //ajax 请求
    $.ajax({
        url:href,
        data:data,
        type:"post",
        success:function (data) {
            $("#right").html(data);  //请求的界面数据在右侧显示
        }
    });

3.注意后端代码需要返回数据局是界面,这里用modelAndview

@Slf4j
@Controller
@Api("后台->网站配置接口")
public class SystemController {

    @Autowired
    private SysDictService sysDictService;

    /**
     * 工具类 modelAnd
     * @param viewName
     * @param map
     * @param mv
     * @return
     */
    private  ModelAndView modeView(String viewName, Map<String,Object> map, ModelAndView mv){
        mv.setViewName(viewName);
        for (Map.Entry<String, Object> entry : map.entrySet()) {
            mv.addObject(entry.getKey(),entry.getValue());
        }
        return mv;
    }

   /**
     * 
     * @param mv
     * @param viewName 即将跳转的界面
     * @return
     */
    @PostMapping("sysDict.page")
    @ApiOperation("跳转到数据字典界面")
    private  ModelAndView hello(ModelAndView mv,
                                @RequestParam(value = "viewName",required = true)String viewName){
        HashMap<String,Object> map = new HashMap<>();
        map.put("page","1");
        //常量配置 10 
        map.put("limit",PAGESIZE); 
        PageUtils pageUtils = sysDictService.queryPage(map);
        map.clear();
        map.put("list",pageUtils.getList());
        modeView(viewName,map,mv);
        return mv;
       }
    ｝

4.大致效果图如下

点击新增按钮： 新增按钮的html代码，同样绑定skipPage（obj）

<button th:href="@{/sysDictAdd.page}" data-skip-view="pages/sysDict/sysDictAdd.html" onclick="skipPage(this)" class="btn btn-success " type="button">