Springboot 实践(7)springboot添加html页面,实现数据库数据的访问
前文讲解,项目已经实现了数据库Dao数据接口,并通过spring security数据实现了对系统资源的保护。本文重点讲解Dao数据接口页面的实现,其中涉及页面导航栏、菜单栏及页面信息栏3各部分。
1、创建html页面
前文讲解中,资源目录已经建设完成,如图1所示;右键点击“assets”文件夹,弹出菜单中选择“new” → “HTML”,输入页面名称“mainfunction.html”,点击“finish”按钮,完成创建。
图1、项目目录
mainfunction.html创建完成之后,在浏览器中输入“http://localhost:2885/assets/mainfunction.html”地址,可以正确访问页面,如图2所示
图2、mainfunction.html初始页面
2、配置导航栏
(1)本人从事软件开发多年,经历项目较多,写了很多类似导航栏、菜单栏等配置生成工具文件,此处利用工具“createNav.js”,自动配置导航栏。导航栏配置信息如下:
var navData={
logoImg:"../assets/img/mysql.png",
name:"MySQL管理工具",
navArr:[
{id:"nav1",img:"../assets/img/MySQL3.png",name:"链接配置"},
{id:"nav2",img:"../assets/img/MySQL1.png",name:"创建数据库"},
{id:"nav3",img:"../assets/img/MySQL2.png",name:"添加任务"}
],
btnArr:[
{id:"exit",img:"../assets/img/退出.svg",name:"退出系统"},
{id:"username",img:"../assets/img/管理员.svg",name:"magic33416563"}
]
};
(2)添加页面编码格式
Mainfunction.html中添加“<meta charset="UTF-8">”语句,避免中文乱码。
(3)添加css样式文件
Mainfunction.html中添加“<link rel="stylesheet" type="text/css" href="css/demo.css">”常用css样式。
(4)添加js文件
Mainfunction.html中添加
“<script type="text/javascript" src="js/jquery.min.js"></script>”、
“<script type="text/javascript" src="js/createNav.js"></script>”
(5)拷贝 工具“createNav.js”使用的图标
导航栏配置完成之后,刷新浏览器地址栏,查看页面样式如下:
图3、maimfunction.html导航栏页面
备注:工具“createNav.js”,学友们关注博主,联系博主获取。createNav.js中带有导航栏功能按键代码,再次不做赘述,学友们根据需求自行修改,以完善各自的特定功能。
3、配置菜单栏
(1)此处利用工具“createMenu.js”,配置生成菜单栏。菜单栏配置信息如下:
var menuStyle={
width:"260px", //菜单栏宽度
position:{
top:"60px", //菜单栏位置
left:"0px"
},
bgImage:"../assets/img/lbj.jpg"
};
var arrow={arrow:"../assets/img/左侧聚合图标.svg",
arrow1:"../assets/img/左侧下拉图标.svg"};
var data=[
{menu:"用户管理系统", //数据库名称
name:"fhgc", //数据库缩写
icon:"../assets/img/防洪工程数据库栏目图标.svg", //使用图标
submenu:[
{menu:"用户",icon:"../assets/img/点.png",tableName:"rcvmin"}, //子菜单名称 ,子菜单图标,一般信息表名称
{menu:"部门",icon:"../assets/img/点.png",tableName:"lkcdnm"},
{menu:"日志",icon:"../assets/img/点.png",tableName:"rscmin"},
]
}
];
(2)添加“createMenu.js”文件
(3)拷贝 工具“createMenu.js”使用的图标
菜单栏配置完成之后,刷新浏览器地址栏,查看页面样式如下:
图3、mainfunction.html导航栏页面
备注:工具“createMenu.js”,学友们关注博主,联系博主获取。
3、添加datagrid信息栏
针对菜单栏具备多个菜单,每个菜单对应一张数据库表的情况,我们采用一个table.html访问不同的库表的功能;显示内容根据选取菜单进行替换。
(1)首先在mainfunction.html中添加iframe元素,用于链接table.html
在mainfunction.html内body中添加如下代码:
<div id="tableFather" style="position:absolute;top:60px;left:260px;width:86.3%;height:90.5%;overflow:hidden;">
<table id='table'>
</table>
</div>
(2)配置菜单功能
打开createMenu.js文件,找到subMenuClick()函数,配置不同菜单栏现实的页面,函数详细代码如下:
function subMenuClick(){
$(".submenu").on("click",function(){
switch(this.id){
case "日志":
$("#mainContent").attr("src","../assets/orangelogTable.html");
break;
case "用户":
break;
case "部门":
break;
default:
break;
}
});
}
配置完成之后,点击菜单“日志”,页面显示如下:
图4、配置菜单页面
“用户”、“部门”等其他页面,学友们可以根据上述步骤进行添加,在此不做赘述,此文到此结束。
下文讲解springboot集成Oauth2.0授权包,对接spring security接口,进一步完善系统的授权机制,实现用户密码加密、授权过去以及“记住我”等功能,敬请等待。
相关文章:

Springboot 实践(7)springboot添加html页面,实现数据库数据的访问
前文讲解,项目已经实现了数据库Dao数据接口,并通过spring security数据实现了对系统资源的保护。本文重点讲解Dao数据接口页面的实现,其中涉及页面导航栏、菜单栏及页面信息栏3各部分。 1、创建html页面 前文讲解中,资源目录已经…...
Go中带标签的break/continue以及goto的差别
带标签的 continue: 直接跳到标签所标记的最外层循环的下一个迭代,忽略当前迭代剩余的代码。 带标签的 break: 直接跳出标签所标记的最外层循环,继续执行该循环之后的代码。 goto 关键字 goto 可以无条件地跳转到程序中指定的标…...

SaaS当然是一门好生意了啊
(1)SaaS关键特征 1、应用架构:多租户 2、部署:公有IaaS部署 3、商业模式:年度订阅续费 (2)用户云注册、用户在线付费 用户云注册、用户在线付费,站在中国乙方利益视角,多…...

ZooKeeper单机服务器启动
ZooKeeper服务器的启动,大体可以分为以下五个主要步骤:配置文件解析、初始化数据管理器、初始化网络I/O管理器、数据恢复和对外服务。下图所示是单机版ZooKeeper服务器的启动流程图。 预启动 预启动的步骤如下。 (1)统一由QuorumPeerMain作为启动类。 …...
Jenkins自动发送飞书消息
前言 公司办公软件用的是飞书套壳,本文主要介绍如何通过飞书机器人发送Jenkins构建的进度和消息。 方法 前置条件 创建一个飞书机器人搭建好Jenkins创建好构建任务 过程 根据飞书开发者平台的接口文档,用shell脚本封装一套调用飞书机器人发送消息接…...
Centos 7 出现 write error (disk full?)
问题 mysql 导入任务时,由于导出的 sql 文件是在很大 (30G),利用 SQLDumpSpliter 切割工具 切成几个 1G 大小的 sql 文件 结果在导入大半天,突然报错 (另一个服务器上更惨,都导入两天快完成的…...

音视频实时通话解决方案
1、问题提出 想要实现音视频通话,对于大部分人可能会觉得很难,但是实际上,有些事情并没有大家想的那样困难,只要功夫深,铁杵磨成针。 机缘巧合下,在业务中,我也遇到了一个业务场景需要实现音视频通话,我们不可能自己从零开始干,我本次用到的核心是WebRTC。 2、WebRT…...
WPF的范围控件Slider
WPF的范围控件Slider Slider 名称说明Orientation在竖直滑动条和水平滑动条之间切换TickPlacement决定刻度显示的位置,默认情况下,TickPlacement被设置为None,并且不显示刻度标记,如果是水平滑动条,可在上面放置刻度…...

前端框架Vue
Vue 学习路线 学习HTML、CSS和JavaScript基础知识:Vue是基于JavaScript的框架,所以首先需要掌握HTML、CSS和JavaScript的基础知识,包括DOM操作、事件处理、变量和函数等。 学习Vue的基本概念:了解Vue的核心概念,如Vu…...

基于Servlet实现的管理系统(包含服务器源码+数据库)
资料下载链接 介绍 基于Servlet框架的管理系统 简洁版 ; 实现 登录 、 注册 、 增 、 删 、 改 、 查 ; 可继续完善增加前端、校验、其他功能等; 可作为 Servlet项目 开发练习基础模型; 课程设计 、 毕业设计 开发基础&…...
Android JUnit测试完成程序自动退出决方法
对于一些Android JUnit测试的开发人员来说,程序自动退出是一个经常面临的困扰。下面从多个方面给出解决方法。 一、检查测试代码 首先,我们应该仔细检查我们的测试代码,确保它没有错误导致程序退出。我们可以使用调试工具来帮助我们找出错误…...

【FAQ】安防监控视频云存储平台EasyNVR频繁离线的原因排查与解决
有用户反馈,在使用EasyNVR时会出现通道频繁离线的情况。针对该反馈我们立即进行了排查。 安防视频监控汇聚EasyNVR视频集中存储平台,是基于RTSP/Onvif协议的安防视频平台,可支持将接入的视频流进行全平台、全终端分发,分发的视频流…...

ClickHouse(二十二):Clickhouse SQL DML操作及导入导出数据
进入正文前,感谢宝子们订阅专题、点赞、评论、收藏!关注IT贫道,获取高质量博客内容! 🏡个人主页:含各种IT体系技术,IT贫道_Apache Doris,大数据OLAP体系技术栈,Kerberos安全认证-CSDN博客 &…...

Vue 2自定义指令入门
Vue 2自定义指令入门 Vue自定义指令允许我们在DOM元素上添加自己想要的行为来扩展Vue的功能。 一个自定义指令需要一个名称和一个定义对象。在定义对象中,你可以使用一些钩子函数来控制指令的行为: bind:在指令被绑定到元素上时使用&#…...
【Sklearn】基于AdaBoost算法的数据分类预测(Excel可直接替换数据)
【Sklearn】基于AdaBoost算法的数据分类预测(Excel可直接替换数据) 1.模型原理2.模型参数3.文件结构4.Excel数据5.下载地址6.完整代码7.运行结果1.模型原理 AdaBoost(Adaptive Boosting)是一种集成学习算法,它通过组合多个弱分类器来构建一个更强大的分类器。下面是AdaBo…...

Docker+Selenium Grid搭建自动化测试平台
安装docker yum install -y yum-utils device-mapper-persistent-data lvm2 yum-config-manager –add-repo http://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo yum install docker-ce -y Create a Docker Network docker network create grid 下载镜像 hu…...
Django图书商城系统实战开发-总结经验之后端开发
Django图书商城系统实战开发-总结经验之后端开发 简介 在这篇博客中,我将总结经验分享后端开发Django图书商城系统的过程。在开发过程中,我遇到了各种挑战和问题,并且通过实践获得了宝贵的经验和教训。通过本文,我希望能帮助读者…...

LeetCode[1288]删除被覆盖区间
难度:Medium 题目: 给你一个区间列表,请你删除列表中被其他区间所覆盖的区间。 只有当 c < a 且 b < d 时,我们才认为区间 [a,b) 被区间 [c,d) 覆盖。 在完成所有删除操作后,请你返回列表中剩余区间的数目。 示…...

QT connect使用简单介绍
如图,首先 connect是线程安全的。其次它有很多重载,当然最重要的还是QT4连接和QT5连接的区别,这个函数重载表示connect函数也是支持lambda函数的。 connect(const QObject *sender, PointerToMemberFunction signal, Functor functor)connec…...

【云原生】kuberneter中Helm入门到实践
引言 helm是k8s的包管理工具,使用helm,可以使用更为简化和系统化的方式对k8s应用进行部署、升级。 helm是CNCF已毕业的项目,社区也是相当活跃的,在 https://artifacthub.io/ 上,能找到很多现成的helm chartÿ…...

智慧工地云平台源码,基于微服务架构+Java+Spring Cloud +UniApp +MySql
智慧工地管理云平台系统,智慧工地全套源码,java版智慧工地源码,支持PC端、大屏端、移动端。 智慧工地聚焦建筑行业的市场需求,提供“平台网络终端”的整体解决方案,提供劳务管理、视频管理、智能监测、绿色施工、安全管…...
macOS多出来了:Google云端硬盘、YouTube、表格、幻灯片、Gmail、Google文档等应用
文章目录 问题现象问题原因解决办法 问题现象 macOS启动台(Launchpad)多出来了:Google云端硬盘、YouTube、表格、幻灯片、Gmail、Google文档等应用。 问题原因 很明显,都是Google家的办公全家桶。这些应用并不是通过独立安装的…...
GitHub 趋势日报 (2025年06月08日)
📊 由 TrendForge 系统生成 | 🌐 https://trendforge.devlive.org/ 🌐 本日报中的项目描述已自动翻译为中文 📈 今日获星趋势图 今日获星趋势图 884 cognee 566 dify 414 HumanSystemOptimization 414 omni-tools 321 note-gen …...

全志A40i android7.1 调试信息打印串口由uart0改为uart3
一,概述 1. 目的 将调试信息打印串口由uart0改为uart3。 2. 版本信息 Uboot版本:2014.07; Kernel版本:Linux-3.10; 二,Uboot 1. sys_config.fex改动 使能uart3(TX:PH00 RX:PH01),并让boo…...
是否存在路径(FIFOBB算法)
题目描述 一个具有 n 个顶点e条边的无向图,该图顶点的编号依次为0到n-1且不存在顶点与自身相连的边。请使用FIFOBB算法编写程序,确定是否存在从顶点 source到顶点 destination的路径。 输入 第一行两个整数,分别表示n 和 e 的值(1…...

什么是Ansible Jinja2
理解 Ansible Jinja2 模板 Ansible 是一款功能强大的开源自动化工具,可让您无缝地管理和配置系统。Ansible 的一大亮点是它使用 Jinja2 模板,允许您根据变量数据动态生成文件、配置设置和脚本。本文将向您介绍 Ansible 中的 Jinja2 模板,并通…...

深度学习习题2
1.如果增加神经网络的宽度,精确度会增加到一个特定阈值后,便开始降低。造成这一现象的可能原因是什么? A、即使增加卷积核的数量,只有少部分的核会被用作预测 B、当卷积核数量增加时,神经网络的预测能力会降低 C、当卷…...
QT3D学习笔记——圆台、圆锥
类名作用Qt3DWindow3D渲染窗口容器QEntity场景中的实体(对象或容器)QCamera控制观察视角QPointLight点光源QConeMesh圆锥几何网格QTransform控制实体的位置/旋转/缩放QPhongMaterialPhong光照材质(定义颜色、反光等)QFirstPersonC…...

安全突围:重塑内生安全体系:齐向东在2025年BCS大会的演讲
文章目录 前言第一部分:体系力量是突围之钥第一重困境是体系思想落地不畅。第二重困境是大小体系融合瓶颈。第三重困境是“小体系”运营梗阻。 第二部分:体系矛盾是突围之障一是数据孤岛的障碍。二是投入不足的障碍。三是新旧兼容难的障碍。 第三部分&am…...
C语言中提供的第三方库之哈希表实现
一. 简介 前面一篇文章简单学习了C语言中第三方库(uthash库)提供对哈希表的操作,文章如下: C语言中提供的第三方库uthash常用接口-CSDN博客 本文简单学习一下第三方库 uthash库对哈希表的操作。 二. uthash库哈希表操作示例 u…...