当前位置: 首页 > news >正文

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页面,实现数据库数据的访问

前文讲解&#xff0c;项目已经实现了数据库Dao数据接口&#xff0c;并通过spring security数据实现了对系统资源的保护。本文重点讲解Dao数据接口页面的实现&#xff0c;其中涉及页面导航栏、菜单栏及页面信息栏3各部分。 1、创建html页面 前文讲解中&#xff0c;资源目录已经…...

Go中带标签的break/continue以及goto的差别

带标签的 continue&#xff1a; 直接跳到标签所标记的最外层循环的下一个迭代&#xff0c;忽略当前迭代剩余的代码。 带标签的 break&#xff1a; 直接跳出标签所标记的最外层循环&#xff0c;继续执行该循环之后的代码。 goto 关键字 goto 可以无条件地跳转到程序中指定的标…...

SaaS当然是一门好生意了啊

&#xff08;1&#xff09;SaaS关键特征 1、应用架构&#xff1a;多租户 2、部署&#xff1a;公有IaaS部署 3、商业模式&#xff1a;年度订阅续费 &#xff08;2&#xff09;用户云注册、用户在线付费 用户云注册、用户在线付费&#xff0c;站在中国乙方利益视角&#xff0c;多…...

ZooKeeper单机服务器启动

ZooKeeper服务器的启动&#xff0c;大体可以分为以下五个主要步骤&#xff1a;配置文件解析、初始化数据管理器、初始化网络I/O管理器、数据恢复和对外服务。下图所示是单机版ZooKeeper服务器的启动流程图。 预启动 预启动的步骤如下。 (1)统一由QuorumPeerMain作为启动类。 …...

Jenkins自动发送飞书消息

前言 公司办公软件用的是飞书套壳&#xff0c;本文主要介绍如何通过飞书机器人发送Jenkins构建的进度和消息。 方法 前置条件 创建一个飞书机器人搭建好Jenkins创建好构建任务 过程 根据飞书开发者平台的接口文档&#xff0c;用shell脚本封装一套调用飞书机器人发送消息接…...

Centos 7 出现 write error (disk full?)

问题 mysql 导入任务时&#xff0c;由于导出的 sql 文件是在很大 &#xff08;30G&#xff09;&#xff0c;利用 SQLDumpSpliter 切割工具 切成几个 1G 大小的 sql 文件 结果在导入大半天&#xff0c;突然报错 &#xff08;另一个服务器上更惨&#xff0c;都导入两天快完成的…...

音视频实时通话解决方案

1、问题提出 想要实现音视频通话,对于大部分人可能会觉得很难,但是实际上,有些事情并没有大家想的那样困难,只要功夫深,铁杵磨成针。 机缘巧合下,在业务中,我也遇到了一个业务场景需要实现音视频通话,我们不可能自己从零开始干,我本次用到的核心是WebRTC。 2、WebRT…...

WPF的范围控件Slider

WPF的范围控件Slider Slider 名称说明Orientation在竖直滑动条和水平滑动条之间切换TickPlacement决定刻度显示的位置&#xff0c;默认情况下&#xff0c;TickPlacement被设置为None&#xff0c;并且不显示刻度标记&#xff0c;如果是水平滑动条&#xff0c;可在上面放置刻度…...

前端框架Vue

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

基于Servlet实现的管理系统(包含服务器源码+数据库)

资料下载链接 介绍 基于Servlet框架的管理系统 简洁版 &#xff1b; 实现 登录 、 注册 、 增 、 删 、 改 、 查 &#xff1b; 可继续完善增加前端、校验、其他功能等&#xff1b; 可作为 Servlet项目 开发练习基础模型&#xff1b; 课程设计 、 毕业设计 开发基础&…...

Android JUnit测试完成程序自动退出决方法

对于一些Android JUnit测试的开发人员来说&#xff0c;程序自动退出是一个经常面临的困扰。下面从多个方面给出解决方法。 一、检查测试代码 首先&#xff0c;我们应该仔细检查我们的测试代码&#xff0c;确保它没有错误导致程序退出。我们可以使用调试工具来帮助我们找出错误…...

【FAQ】安防监控视频云存储平台EasyNVR频繁离线的原因排查与解决

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

ClickHouse(二十二):Clickhouse SQL DML操作及导入导出数据

进入正文前&#xff0c;感谢宝子们订阅专题、点赞、评论、收藏&#xff01;关注IT贫道&#xff0c;获取高质量博客内容&#xff01; &#x1f3e1;个人主页&#xff1a;含各种IT体系技术&#xff0c;IT贫道_Apache Doris,大数据OLAP体系技术栈,Kerberos安全认证-CSDN博客 &…...

Vue 2自定义指令入门

Vue 2自定义指令入门 Vue自定义指令允许我们在DOM元素上添加自己想要的行为来扩展Vue的功能。 一个自定义指令需要一个名称和一个定义对象。在定义对象中&#xff0c;你可以使用一些钩子函数来控制指令的行为&#xff1a; bind&#xff1a;在指令被绑定到元素上时使用&#…...

【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图书商城系统实战开发-总结经验之后端开发 简介 在这篇博客中&#xff0c;我将总结经验分享后端开发Django图书商城系统的过程。在开发过程中&#xff0c;我遇到了各种挑战和问题&#xff0c;并且通过实践获得了宝贵的经验和教训。通过本文&#xff0c;我希望能帮助读者…...

LeetCode[1288]删除被覆盖区间

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

QT connect使用简单介绍

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

【云原生】kuberneter中Helm入门到实践

引言 helm是k8s的包管理工具&#xff0c;使用helm&#xff0c;可以使用更为简化和系统化的方式对k8s应用进行部署、升级。 helm是CNCF已毕业的项目&#xff0c;社区也是相当活跃的&#xff0c;在 https://artifacthub.io/ 上&#xff0c;能找到很多现成的helm chart&#xff…...

智慧工地云平台源码,基于微服务架构+Java+Spring Cloud +UniApp +MySql

智慧工地管理云平台系统&#xff0c;智慧工地全套源码&#xff0c;java版智慧工地源码&#xff0c;支持PC端、大屏端、移动端。 智慧工地聚焦建筑行业的市场需求&#xff0c;提供“平台网络终端”的整体解决方案&#xff0c;提供劳务管理、视频管理、智能监测、绿色施工、安全管…...

macOS多出来了:Google云端硬盘、YouTube、表格、幻灯片、Gmail、Google文档等应用

文章目录 问题现象问题原因解决办法 问题现象 macOS启动台&#xff08;Launchpad&#xff09;多出来了&#xff1a;Google云端硬盘、YouTube、表格、幻灯片、Gmail、Google文档等应用。 问题原因 很明显&#xff0c;都是Google家的办公全家桶。这些应用并不是通过独立安装的…...

GitHub 趋势日报 (2025年06月08日)

&#x1f4ca; 由 TrendForge 系统生成 | &#x1f310; https://trendforge.devlive.org/ &#x1f310; 本日报中的项目描述已自动翻译为中文 &#x1f4c8; 今日获星趋势图 今日获星趋势图 884 cognee 566 dify 414 HumanSystemOptimization 414 omni-tools 321 note-gen …...

全志A40i android7.1 调试信息打印串口由uart0改为uart3

一&#xff0c;概述 1. 目的 将调试信息打印串口由uart0改为uart3。 2. 版本信息 Uboot版本&#xff1a;2014.07&#xff1b; Kernel版本&#xff1a;Linux-3.10&#xff1b; 二&#xff0c;Uboot 1. sys_config.fex改动 使能uart3(TX:PH00 RX:PH01)&#xff0c;并让boo…...

是否存在路径(FIFOBB算法)

题目描述 一个具有 n 个顶点e条边的无向图&#xff0c;该图顶点的编号依次为0到n-1且不存在顶点与自身相连的边。请使用FIFOBB算法编写程序&#xff0c;确定是否存在从顶点 source到顶点 destination的路径。 输入 第一行两个整数&#xff0c;分别表示n 和 e 的值&#xff08;1…...

什么是Ansible Jinja2

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

深度学习习题2

1.如果增加神经网络的宽度&#xff0c;精确度会增加到一个特定阈值后&#xff0c;便开始降低。造成这一现象的可能原因是什么&#xff1f; A、即使增加卷积核的数量&#xff0c;只有少部分的核会被用作预测 B、当卷积核数量增加时&#xff0c;神经网络的预测能力会降低 C、当卷…...

QT3D学习笔记——圆台、圆锥

类名作用Qt3DWindow3D渲染窗口容器QEntity场景中的实体&#xff08;对象或容器&#xff09;QCamera控制观察视角QPointLight点光源QConeMesh圆锥几何网格QTransform控制实体的位置/旋转/缩放QPhongMaterialPhong光照材质&#xff08;定义颜色、反光等&#xff09;QFirstPersonC…...

安全突围:重塑内生安全体系:齐向东在2025年BCS大会的演讲

文章目录 前言第一部分&#xff1a;体系力量是突围之钥第一重困境是体系思想落地不畅。第二重困境是大小体系融合瓶颈。第三重困境是“小体系”运营梗阻。 第二部分&#xff1a;体系矛盾是突围之障一是数据孤岛的障碍。二是投入不足的障碍。三是新旧兼容难的障碍。 第三部分&am…...

C语言中提供的第三方库之哈希表实现

一. 简介 前面一篇文章简单学习了C语言中第三方库&#xff08;uthash库&#xff09;提供对哈希表的操作&#xff0c;文章如下&#xff1a; C语言中提供的第三方库uthash常用接口-CSDN博客 本文简单学习一下第三方库 uthash库对哈希表的操作。 二. uthash库哈希表操作示例 u…...