完整版教程：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"); //获取请求的urlvar 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 {@Autowiredprivate SysDictService sysDictService;/** * 工具类 modelAnd * @param viewName * @param map * @param mv * @return */privateModelAndView 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("跳转到数据字典界面")privateModelAndView 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">