高颜值数据库项目实战MySQL+JavaFX+Fxml+CSS（完整精讲解版+源代码）(四）

最新推荐文章于 2023-03-15 14:51:37 发布

轻夏

最新推荐文章于 2023-03-15 14:51:37 发布

阅读量985

点赞数 2

分类专栏：极致通俗完整项目文章标签： mysql css javafx intellij idea

本文链接：https://blog.csdn.net/weixin_44155966/article/details/105056261

版权

极致通俗同时被 2 个专栏收录

38 篇文章 2 订阅

订阅专栏

完整项目

24 篇文章 8 订阅

订阅专栏

4：高颜值JavaFX数据库-九讲之四

项目效果图
功能点实现
内部优化
类结构示例
为菜单栏添加事件
后记

高颜值数据库项目实战MySQL+JavaFX+Fxml+CSS（完整精讲解版+源代码）(一）

高颜值数据库项目实战MySQL+JavaFX+Fxml+CSS（完整精讲解版+源代码）(二）

高颜值数据库项目实战MySQL+JavaFX+Fxml+CSS（完整精讲解版+源代码）(三）

[高颜值数据库项目实战MySQL+JavaFX+Fxml+CSS（完整精讲解版+源代码）(四）]（当前位置）

高颜值数据库项目实战MySQL+JavaFX+Fxml+CSS（完整精讲解版+源代码）(五）

高颜值数据库项目实战MySQL+JavaFX+Fxml+CSS（完整精讲解版+源代码）(六）

高颜值数据库项目实战MySQL+JavaFX+Fxml+CSS（完整精讲解版+源代码）(七）

高颜值数据库项目实战MySQL+JavaFX+Fxml+CSS（完整精讲解版+源代码）(八）

高颜值数据库项目实战MySQL+JavaFX+Fxml+CSS（完整精讲解版+源代码）(九）

更多项目逐句吐血精讲在这里，加油ヾ(◍°∇°◍)ﾉﾞ！！

项目效果图

功能点实现

实现学生信息的录入
实现学生信息的修改
实现学生信息的更新
实现学生信息的删除
添加快捷键使用，方便快速管理
使用javafx+fxml+css控制ui样式
实现以javafx内部api调用绘制字体特效，无需额外资源调度
实现软件图标自定义，增加软件美观度
实现拖动窗口即可移动，使更加人性化
实现软件英文化，增加可交流性
禁用窗口缩放功能，防止ui碰撞
添加作者、主页、关闭按钮
增加事务弹窗，给予正确提示及错误解决方案

内部优化

使用分装思想，将功能块拆分，设立CreateMenu类，统一添加
封装错误与信息提示框，统一布局格式
封装数据库连接类，无需重复调度
采用Lambda表达式绑定事件，无需重写类
使用fxml模块化设计标签，方便增改
采用css设置样式，统一管理
去除不必要的类public，增加软件安全性
利用SceneBuilder绘制生成fxml控件，提升编写效率
采用不同尺寸图标格式适应多种运行状态

类结构示例

在这里插入图片描述

为菜单栏添加事件

1、创建插入面板

我们采用一个新的技术，如果用代码直接写的话就非常繁琐，我们使用javafx的fxml来辅助创建，这样的话，我们就能够用html的思想来编写应用程序，是非常方便的

我们先看一下固定的模板，虽然说程序每一句都有具体的意思，但初学先按模板写下来，又掌握的快点

import的导入包，这里建议使用IDEA，IDEA会自动帮你导包，eclipse没有高亮，没有错误提示，什么都没有，也不知道是我不会弄，反正我的很难用，错了也不知道
GridPane是一个面板，是什么意思，建议参考一下史上最直观的JavaFx布局讲解，这个上面讲解了很多容器类
fx:controller是要写一个类，就是这个fxml只是实现了表面是设计，那具体的业务逻辑是什么样子的，我们还需要依附于这个fxml来建立一个java类来写内部逻辑
system.Entry是我新建了一个system的包，然后在里面建立了一个Entry类，名字都是瞎起的，大家无所谓，不过要统一
其他的参数都是边距的控制，没什么意思了，大家随便调调就知道什么意思了

这里还是强烈建议使用IDEA，因为在IDEA中可以直接使用SceneBuilder，能够很直观的看见做的界面

IDEA社区免费版下载地址，一定要选Community哦，正版越来越难破解了，幸亏我#%￥……

注意： <?xml version="1.0" encoding="UTF-8"?>第一句一定要顶格写，前面不能有空格

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.geometry.Insets?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<GridPane xmlns:fx="http://javafx.com/fxml" alignment="center" fx:controller="system.Entry"
		  hgap="10" vgap="10">
	<padding>
		<Insets top="25" right="25" bottom="10" left="25" />
	</padding>
</GridPane>

2、添加标签

在这里插入图片描述
既然要插入，我们要填写好多项目
Student Number学号、Student Name名字、Student Gender性别、Student Address地址、Student Phone电话、Student Major学科

Label里面是显示字的，就是左边那一列
TextField 是框框，人们能在里面写字
text="Student Number:"是要显示的字，我要显示的是Student Number:，大家可以随便写
column是列的意思，GridPane.columnIndex就是第几列的意思
row是行的意思，GridPane.rowIndex就是第几行的意思
stylesheets是样式的意思，就是规定是什么样子，就是做美化的，要是不美化就是上面第一幅图看到的，很丑，先写上，一会我们在写这个美化的样式，我会在source包下新建一个Title.css文件，来写美化的代码
fx:id咱们前面说过要新弄一个类为了控制内部逻辑，fxml是外表，那个类是逻辑，那怎么沟通呢，就是用fx:id来沟通的，后面的那个Number是瞎起的名字，这里写上Number，一会在那个类中就能操作Number

注意：/source/Title.css前面一定要加上/并且是从src下开始写，写全名，不能写相对路径，千万要注意，要不就死活找不到

下面就是一个例子：

<Label text="Student Number:" GridPane.columnIndex="0" stylesheets="/source/Title.css"
		   styleClass="label-oth" GridPane.rowIndex="2" />
<TextField fx:id="Number" GridPane.columnIndex="1" GridPane.rowIndex="2" />

在那个控制类中（我的是system.Entry）先声明一下，碰了头，就能用了

@FXML就是接头的意思，他俩就是一码事了，要操作什么就直接操作Number就可以了

@FXML
TextField Number;

3、举一反三写出所有的

<Label text="Student Number:" GridPane.columnIndex="0" stylesheets="/source/Title.css"
		   styleClass="label-oth" GridPane.rowIndex="2" />
<TextField fx:id="Number" GridPane.columnIndex="1" GridPane.rowIndex="2" />

<Label text="Student Name:" GridPane.columnIndex="0" stylesheets="/source/Title.css"
	   styleClass="label-oth" GridPane.rowIndex="3" />
<TextField fx:id="Name" GridPane.columnIndex="1" GridPane.rowIndex="3" />

<Label text="Student Gender:" GridPane.columnIndex="0" stylesheets="/source/Title.css"
	   styleClass="label-oth" GridPane.rowIndex="4" />
<TextField fx:id="Gender" GridPane.columnIndex="1" GridPane.rowIndex="4" />

<Label text="Student Address:" GridPane.columnIndex="0" stylesheets="/source/Title.css"
	   styleClass="label-oth" GridPane.rowIndex="5" />
<TextField fx:id="Address" GridPane.columnIndex="1" GridPane.rowIndex="5" />

<Label text="Student Phone:" GridPane.columnIndex="0" stylesheets="/source/Title.css"
	   styleClass="label-oth" GridPane.rowIndex="6" />
<TextField fx:id="Phone" GridPane.columnIndex="1" GridPane.rowIndex="6" />

<Label text="Student Major:" GridPane.columnIndex="0" stylesheets="/source/Title.css"
	   styleClass="label-oth" GridPane.rowIndex="7" />
<TextField fx:id="Major" GridPane.columnIndex="1" GridPane.rowIndex="7" />

4、我们加上标题&按钮

标题：
我们要放到最前面，不知道往哪里放的，一会给出所有的代码

<Label text="Welcome to Entry:" GridPane.columnSpan="2" stylesheets="/source/Title.css"
		   GridPane.rowIndex="0" />

按钮：

HBox是什么呢？建议参考一下史上最直观的JavaFx布局讲解，这个上面讲解了很多容器类
onAction就是鼠标点击之后干什么事情，我们要写一个SignInButtonAction类来放要干的事情
styleClass=“btn"就是在stylesheets=”/source/Title.css"中表示样式的时候用那个样式，先写上，一会写css的时候还会说的

**注意：*千万要注意，#SignInButtonAction一定要加#号不加你就%￥%……%￥￥#了，坑死我了。。。

<HBox spacing="10" alignment="bottom_left" GridPane.columnIndex="0" GridPane.rowIndex="10">
	<Button text="Sign In" onAction="#SignInButtonAction" stylesheets="/source/Title.css" styleClass="btn"/>
</HBox>

<HBox spacing="10" alignment="bottom_right" GridPane.columnIndex="1" GridPane.rowIndex="10">
	<Button text="Reset" onAction="#ResetButtonAction" stylesheets="/source/Title.css" styleClass="btn"/>
</HBox>

下面是在那个控制类里面的代码

@FXML就是接头的意思，一接头，他俩就是一码事了
- 注意：注意：千万别写构造函数，我真服了，害我好苦！！！！！！！！

@FXML
void SignInButtonAction(ActionEvent event) {
}
@FXML
void ResetButtonAction(ActionEvent event){
}

5、全部代码

好了，好了，下面是EntryFxml.fxml的全部代码了

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.geometry.Insets?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<GridPane xmlns:fx="http://javafx.com/fxml" alignment="center" fx:controller="system.Entry"
		  hgap="10" vgap="10">
	<padding>
		<Insets top="25" right="25" bottom="10" left="25" />
	</padding>

	<Label text="Welcome to Entry:" GridPane.columnSpan="2" stylesheets="/source/Title.css"
		   GridPane.rowIndex="0" />


	<Label text="Student Number:" GridPane.columnIndex="0" stylesheets="/source/Title.css"
		   styleClass="label-oth" GridPane.rowIndex="2" />
	<TextField fx:id="Number" GridPane.columnIndex="1" GridPane.rowIndex="2" />

	<Label text="Student Name:" GridPane.columnIndex="0" stylesheets="/source/Title.css"
		   styleClass="label-oth" GridPane.rowIndex="3" />
	<TextField fx:id="Name" GridPane.columnIndex="1" GridPane.rowIndex="3" />

	<Label text="Student Gender:" GridPane.columnIndex="0" stylesheets="/source/Title.css"
		   styleClass="label-oth" GridPane.rowIndex="4" />
	<TextField fx:id="Gender" GridPane.columnIndex="1" GridPane.rowIndex="4" />

	<Label text="Student Address:" GridPane.columnIndex="0" stylesheets="/source/Title.css"
		   styleClass="label-oth" GridPane.rowIndex="5" />
	<TextField fx:id="Address" GridPane.columnIndex="1" GridPane.rowIndex="5" />

	<Label text="Student Phone:" GridPane.columnIndex="0" stylesheets="/source/Title.css"
		   styleClass="label-oth" GridPane.rowIndex="6" />
	<TextField fx:id="Phone" GridPane.columnIndex="1" GridPane.rowIndex="6" />

	<Label text="Student Major:" GridPane.columnIndex="0" stylesheets="/source/Title.css"
		   styleClass="label-oth" GridPane.rowIndex="7" />
	<TextField fx:id="Major" GridPane.columnIndex="1" GridPane.rowIndex="7" />


	<HBox spacing="10" alignment="bottom_left" GridPane.columnIndex="0" GridPane.rowIndex="10">
		<Button text="Sign In" onAction="#SignInButtonAction" stylesheets="/source/Title.css" styleClass="btn"/>
	</HBox>

	<HBox spacing="10" alignment="bottom_right" GridPane.columnIndex="1" GridPane.rowIndex="10">
		<Button text="Reset" onAction="#ResetButtonAction" stylesheets="/source/Title.css" styleClass="btn"/>
	</HBox>
</GridPane>

6、CSS

不过你们现在还不能运行了，因为我们刚才没写Title.css

好了，我们在/source/Title.css建立一个，注意位置要对应，弄错地方也不行

label 是标题的样式，就是【Please Input Delete Student Number:】等的样式
label-oth就是标签的样式，就是【Student Number学号、Student Name名字、Student Gender性别、Student Address地址、Student Phone电话、Student Major学科】的样式
btn就是按钮是样式
-fx-font-size:是字体大小
-fx-font-weight:是加粗加细等样式
-fx-text-fill:是文字颜色，括号里是红、绿、蓝是深浅度，从0~255
其他的你随便调调就看出效果了，不好描述，也没什么意义，用的时候查就行

.label {
    -fx-font-size: 40;
    -fx-font-weight: bold;
    -fx-text-fill: rgb(110, 110, 110);
}
.label-oth {
    -fx-font-size: 20;
    -fx-font-weight: lighter;
    -fx-text-fill: rgb(50, 50, 50);
}
.btn {
    -fx-font-size: 18;
    -fx-font-weight: bold;
    -fx-pref-width: 120;
    -fx-pref-height: 28;
    -fx-text-fill: rgb(100, 100, 100);
    -fx-border-radius: 8;
    -fx-background-radius: 8;
}

7、最后的添加

我们在Entry中添加createNode函数，这就跟前面的创建标签对应上了

FXMLLoader.load(getClass().getResource就按固定格式记吧，什么类加载反射乱七八糟，先不管，注意后面的路径一定要写对
…/是回到上一级目录，因为我的控制类和fxml不在一个包中，所以要先回去在进去，所以要写一个…/大家事自己的情况而定

Parent createNode() throws IOException {
	return FXMLLoader.load(getClass().getResource("../source/EntryFxml.fxml"));
}

注意：注意：千万别写构造函数，空的也不行，我真服了，害我好苦！！！！！！！！
全部的代码：

package system;

import javafx.event.ActionEvent;
import javafx.fxml.FXML;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.control.TextField;

import java.io.IOException;

public class Entry {
    @FXML
    TextField Number;
    @FXML
    TextField Name;
    @FXML
    TextField Gender;
    @FXML
    TextField Address;
    @FXML
    TextField Phone;
    @FXML
    TextField Major;

    //不能写构造函数

    @FXML
    void SignInButtonAction(ActionEvent event) {
    }
    
    @FXML
    void ResetButtonAction(ActionEvent event){
    }

    Parent createNode() throws IOException {
        return FXMLLoader.load(getClass().getResource("../source/EntryFxml.fxml"));
    }
}

OK，我点击菜单就能看见效果了
在这里插入图片描述

关注后续章节，我们会添加更多功能：