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

原创于 2021-06-07 22:36:05 发布 · 2.4k 阅读

13 ·

CC 4.0 BY-SA版权

文章标签：

#html #java #web

前端系列同时被 2 个专栏收录

7 篇文章

订阅专栏

javaEE基础

6 篇文章

订阅专栏

本文介绍了如何使用SpringBoot搭建后台管理系统，通过站长之家下载模板并定制右侧栏URL，利用Ajax实现页面刷新。重点在于修改HTML结构和设置Ajax请求，以实现UI元素的动态加载。

源码地址：https://gitee.com/nggLee/java-funny
1.进入站长之家https://sc.chinaz.com/
2.搜索后台管理模版，下载一个,本次使用的模版 https://sc.chinaz.com/moban/160629414430.htm
在这里插入图片描述

3.下载后的模版直接打开index.html,模版目录结构如下
在这里插入图片描述

4.新建一个springboot项目，项目目录如下，直接访问 http://localhost:8090/admin/
在这里插入图片描述

5.进入正题点击左侧，刷新右侧，首先修改右边栏连接地址。先确定右侧div显示内容的标签，
在这里插入图片描述

6.修改右边栏的一个url连接，点击该链接时刷新右侧。例如点击UI Elements时，首先修改该url为点击事件，例如改成如下

function openFrame(url) {
            $.ajax({
                url:"/admin/"+url,
                success:function (data) {
                    $("#page-inner").html(data);
                }
            })
 }

在这里插入图片描述