1.新建maven项目bookmanage
image.png
image.png
image.png
image.png
2.新建项目成功后在pom.xml中修改JDK版本,并添加项目所需依赖
<properties>
<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
<maven.compiler.source>1.8</maven.compiler.source>
<maven.compiler.target>1.8</maven.compiler.target>
</properties>
<dependencies>
<!--Java工具集合的依赖-->
<dependency>
<groupId>cn.hutool</groupId>
<artifactId>hutool-all</artifactId>
<version>4.2.1</version>
</dependency>
<!--jdbc的mysql驱动依赖-->
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<version>5.1.38</version>
</dependency>
<!--单元测试依赖-->
<dependency>
<groupId>junit</groupId>
<artifactId>junit</artifactId>
<version>4.11</version>
<scope>test</scope>
</dependency>
</dependencies>
Maven Projects视图:
Maven Projects视图
3.src源码根据MVC模式划分子包
- entity包:存放实体类
- dao包:存放各个实体的DAO接口
- controller包:存放各个布局文件对应的控制器类
- utils包:存放工具类
3.main下新建resources,将其设为资源目录,其下划分各个子目录
- config:用来存放一些配置文件,如db.setting
- css:用来存放样式表文件
- fxml:用来存放布局文件
- img:用来存放图片
为了做出一个主界面主体框架效果,先建立必须的几个文件,如图:
项目目录结构图
4.启动主类代码MainApp.java,注意各个文件名和代码对应
public class MainApp extends Application {
@Override
public void start(Stage primaryStage) throws Exception {
primaryStage.setTitle("Book Manage System");
FXMLLoader fxmlLoader = new FXMLLoader(getClass().getResource("/fxml/main.fxml"));
Parent root = fxmlLoader.load();
Scene scene = new Scene(root);
//界面最大化
primaryStage.setMaximized(true);
//logo设置
primaryStage.getIcons().add(new Image("/img/logo.png"));
primaryStage.setScene(scene);
primaryStage.show();
}
public static void main(String[] args) {
launch(args);
}
}
5.主控制器MainController.java
import javafx.collections.ObservableList;
import javafx.fxml.FXML;
import javafx.fxml.FXMLLoader;
import javafx.fxml.Initializable;
import javafx.scene.Node;
import javafx.scene.layout.AnchorPane;
import javafx.scene.layout.StackPane;
import java.net.URL;
import java.util.ResourceBundle;
public class MainController implements Initializable {
@FXML
private StackPane mainContainer;
@Override
public void initialize(URL location, ResourceBundle resources) {
}
//显示默认主页数据
public void listDefault() throws Exception {
switchView("default.fxml");
}
//显示图书类别数据
public void listType() throws Exception {
switchView("type.fxml");
}
//显示图书数据
public void listBook() throws Exception {
switchView("book.fxml");
}
//封装一个切换视图的方法:用来根据fxml文件切换视图内容
private void switchView(String fileName) throws Exception {
//清除主面板之前内容
ObservableList<Node> list = mainContainer.getChildren();
mainContainer.getChildren().removeAll(list);
//读取新的布局文件加入主面板
AnchorPane anchorPane = new FXMLLoader(getClass().getResource("/fxml/" + fileName)).load();
mainContainer.getChildren().add(anchorPane);
}
}
6.主布局文件main.fxml
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.geometry.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.effect.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.text.*?>
<?import javafx.scene.image.ImageView?>
<?import javafx.scene.image.Image?>
<BorderPane
xmlns:fx="http://javafx.com/fxml"
fx:controller="com.soft1841.book.controller.MainController">
<top>
<AnchorPane prefHeight="80.0">
<!--点击这个文字显示默认主页数据-->
<Label text="图书后台管理系统" onMouseClicked="#listDefault"
AnchorPane.topAnchor="20" AnchorPane.leftAnchor="10">
<!--字体特效-->
<effect>
<Reflection bottomOpacity="0.2" fraction="0.5" topOffset="-5.0"/>
</effect>
<font>
<Font name="System Bold" size="26.0"/>
</font>
</Label>
<ImageView fitWidth="45" fitHeight="45" AnchorPane.topAnchor="15" AnchorPane.rightAnchor="120">
<Image url="/img/me.png"/>
</ImageView>
<Button text="退出系统" AnchorPane.topAnchor="20" AnchorPane.rightAnchor="20"/>
</AnchorPane>
</top>
<center>
<!--分割面板-->
<SplitPane>
<!--左侧的导航菜单部分-->
<AnchorPane minWidth="200">
<!--采用风琴面板实现-->
<Accordion AnchorPane.leftAnchor="0.0"
AnchorPane.rightAnchor="0.0"
AnchorPane.topAnchor="0.0">
<panes>
<!--由标题面板组成,里面嵌入VBox,实现一级目录和二级目录效果-->
<TitledPane alignment="TOP_LEFT" text="类别管理">
<VBox minHeight="100" spacing="10">
<!--点击该按钮,右侧切换图书类别数据-->
<Button text="图书类别" onAction="#listType"/>
<Button text="分类统计"/>
</VBox>
</TitledPane>
<TitledPane alignment="TOP_LEFT" text="图书管理">
<VBox minHeight="100" spacing="10">
<!--点击该按钮,右侧切换图书数据-->
<Button text="图书信息" onAction="#listBook"/>
<Button text="统计分析"/>
</VBox>
</TitledPane>
<TitledPane alignment="TOP_LEFT" text="用户管理">
<VBox minHeight="130" spacing="10">
<Button text="管理员信息"/>
<Button text="读者信息"/>
<Button text="统计分析"/>
</VBox>
</TitledPane>
<TitledPane alignment="TOP_LEFT" text="借阅管理">
<VBox minHeight="130" spacing="10">
<Button text="借阅查询"/>
<Button text="统计分析"/>
</VBox>
</TitledPane>
<TitledPane alignment="TOP_LEFT" text="系统维护">
<VBox minHeight="130" spacing="10">
<Button text="系统初始化"/>
<Button text="数据备份"/>
<Button text="主题设置"/>
</VBox>
</TitledPane>
</panes>
</Accordion>
</AnchorPane>
<!--右侧的主体内容部分,采用StackPane实现一种卡片切换效果-->
<StackPane fx:id="mainContainer" minWidth="1060">
<!--加载外部的fxml文件,显示默认的主体内容-->
<fx:include source="default.fxml"/>
<padding>
<Insets top="10" left="30" bottom="5" right="10"/>
</padding>
</StackPane>
<padding>
<Insets top="10"/>
</padding>
</SplitPane>
</center>
</BorderPane>
7.default.fxml,默认的主界面主体内容,暂时先放一个图片占位
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.image.ImageView?>
<?import javafx.scene.image.Image?>
<AnchorPane xmlns="http://javafx.com/javafx"
xmlns:fx="http://javafx.com/fxml"
fx:controller="com.soft1841.book.controller.MainController">
<ImageView AnchorPane.topAnchor="20" AnchorPane.leftAnchor="20">
<Image url="/img/book.jpg"/>
</ImageView>
</AnchorPane>
8.type.fxml,图书类别数据展示,暂时先放一个文本标签占位
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.control.Label?>
<AnchorPane xmlns="http://javafx.com/javafx"
xmlns:fx="http://javafx.com/fxml"
fx:controller="com.soft1841.book.controller.MainController">
<Label text="图书类别数据显示"/>
</AnchorPane>
9.book.fxml,图书信息数据展示,暂时先放一个ListView占位
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.control.ListView?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.image.ImageView?>
<?import javafx.scene.image.Image?>
<AnchorPane xmlns="http://javafx.com/javafx"
xmlns:fx="http://javafx.com/fxml"
fx:controller="com.soft1841.book.controller.MainController">
<ListView prefWidth="600" prefHeight="300">
<HBox spacing="30">
<Label text="测试书籍"/>
<Label text="匿名"/>
<Label text="价格:88.8"/>
<ImageView fitWidth="100" fitHeight="100">
<Image url="/img/book.jpg"/>
</ImageView>
</HBox>
<HBox spacing="30">
<Label text="测试书籍"/>
<Label text="匿名"/>
<Label text="价格:88.8"/>
<ImageView fitWidth="100" fitHeight="100">
<Image url="/img/book.jpg"/>
</ImageView>
</HBox>
<HBox spacing="30">
<Label text="测试书籍"/>
<Label text="匿名"/>
<Label text="价格:88.8"/>
<ImageView fitWidth="100" fitHeight="100">
<Image url="/img/book.jpg"/>
</ImageView>
</HBox>
</ListView>
</AnchorPane>
运行说明
- 启动主界面,整体是BorderPane布局
- 顶部显示一些基本信息,点击左侧“图书后台管理系统”文字可以实现“主页”的效果
- 中间部分由SplitPane分割成左右两块
- 左侧为一个风琴面板+标题面板,实现左侧导航效果
- 右侧一个StackPane,由左侧点击不同的功能选项切换不同的布局文件,实现卡片效果,暂时只做了“图书类别”、“图书信息”两个
运行效果图:
-
启动界面
启动界面 -
点击左侧“类别管理”下的“图书类别”功能
图书类别 -
点击左侧“图书管理”下的“图书信息”功能
图书信息 -
点击左上角“图书后台管理系统”文字,可切换到默认主页
image.png
附需要用到的图:
book.jpg logo.png me.png
v1.0版功能演示:https://www.screencast.com/t/RpD8lvLP
网友评论