后台管理系统框架搭建

1.新建maven项目bookmanage

image.png

image.png

image.png

image.png

2.新建项目成功后在pom.xml中修改JDK版本，并添加项目所需依赖

 
    UTF-8
    1.8
    1.8
  

  
    
    
      cn.hutool
      hutool-all
      4.2.1
    
    
    
      mysql
      mysql-connector-java
      5.1.38
    
    
    
      junit
      junit
      4.11
      test
    
  

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 list = mainContainer.getChildren();
        mainContainer.getChildren().removeAll(list);
        //读取新的布局文件加入主面板
        AnchorPane anchorPane = new FXMLLoader(getClass().getResource("/fxml/" + fileName)).load();
        mainContainer.getChildren().add(anchorPane);
    }
}

6.主布局文件main.fxml

7.default.fxml，默认的主界面主体内容，暂时先放一个图片占位

8.type.fxml，图书类别数据展示，暂时先放一个文本标签占位

9.book.fxml，图书信息数据展示，暂时先放一个ListView占位

运行说明

• 启动主界面，整体是BorderPane布局
• 顶部显示一些基本信息，点击左侧“图书后台管理系统”文字可以实现“主页”的效果
• 中间部分由SplitPane分割成左右两块
• 左侧为一个风琴面板+标题面板，实现左侧导航效果
• 右侧一个StackPane，由左侧点击不同的功能选项切换不同的布局文件，实现卡片效果，暂时只做了“图书类别”、“图书信息”两个

运行效果图：

• 启动界面

  
  
  启动界面

• 点击左侧“类别管理”下的“图书类别”功能

  
  
  图书类别

• 点击左侧“图书管理”下的“图书信息”功能

  
  
  图书信息

• 点击左上角“图书后台管理系统”文字，可切换到默认主页

  
  
  image.png

附需要用到的图：

book.jpg

logo.png

me.png

v1.0版功能演示：https://www.screencast.com/t/RpD8lvLP