完整版教程: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">