后臺管理系統(tǒng)框架搭建

1.新建maven項目bookmanage

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驅(qū)動依賴-->
    <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源碼根據(jù)MVC模式劃分子包

entity包：存放實體類
dao包：存放各個實體的DAO接口
controller包：存放各個布局文件對應(yīng)的控制器類
utils包:存放工具類

3.main下新建resources朋凉，將其設(shè)為資源目錄，其下劃分各個子目錄

config：用來存放一些配置文件醋安，如db.setting
css：用來存放樣式表文件
fxml：用來存放布局文件
img：用來存放圖片

為了做出一個主界面主體框架效果杂彭，先建立必須的幾個文件，如圖：

項目目錄結(jié)構(gòu)圖

4.啟動主類代碼MainApp.java吓揪，注意各個文件名和代碼對應(yīng)

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設(shè)置 
      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) {

    }

   //顯示默認(rèn)主頁數(shù)據(jù)
    public void listDefault() throws Exception {
        switchView("default.fxml");
    }

    //顯示圖書類別數(shù)據(jù)
    public void listType() throws Exception {
        switchView("type.fxml");
    }

    //顯示圖書數(shù)據(jù)
    public void listBook() throws Exception {
        switchView("book.fxml");
    }

    //封裝一個切換視圖的方法：用來根據(jù)fxml文件切換視圖內(nèi)容
    private void switchView(String fileName) throws Exception {
        //清除主面板之前內(nèi)容
        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">
            <!--點擊這個文字顯示默認(rèn)主頁數(shù)據(jù)-->
            <Label text="圖書后臺管理系統(tǒng)" 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="退出系統(tǒng)" AnchorPane.topAnchor="20" AnchorPane.rightAnchor="20"/>
        </AnchorPane>
    </top>
    <center>
        <!--分割面板-->
        <SplitPane>
            <!--左側(cè)的導(dǎo)航菜單部分-->
            <AnchorPane minWidth="200">
                <!--采用風(fēng)琴面板實現(xiàn)-->
                <Accordion AnchorPane.leftAnchor="0.0"
                           AnchorPane.rightAnchor="0.0"
                           AnchorPane.topAnchor="0.0">
                    <panes>
                       <!--由標(biāo)題面板組成亲怠，里面嵌入VBox，實現(xiàn)一級目錄和二級目錄效果-->
                        <TitledPane alignment="TOP_LEFT" text="類別管理">
                            <VBox minHeight="100" spacing="10">
                                <!--點擊該按鈕柠辞，右側(cè)切換圖書類別數(shù)據(jù)-->
                                <Button text="圖書類別" onAction="#listType"/>
                                <Button text="分類統(tǒng)計"/>
                            </VBox>
                        </TitledPane>
                        <TitledPane alignment="TOP_LEFT" text="圖書管理">
                            <VBox minHeight="100" spacing="10">
                                <!--點擊該按鈕团秽，右側(cè)切換圖書數(shù)據(jù)-->
                                <Button text="圖書信息" onAction="#listBook"/>
                                <Button text="統(tǒng)計分析"/>
                            </VBox>
                        </TitledPane>
                        <TitledPane alignment="TOP_LEFT" text="用戶管理">
                            <VBox minHeight="130" spacing="10">
                                <Button text="管理員信息"/>
                                <Button text="讀者信息"/>
                                <Button text="統(tǒng)計分析"/>
                            </VBox>
                        </TitledPane>
                        <TitledPane alignment="TOP_LEFT" text="借閱管理">
                            <VBox minHeight="130" spacing="10">
                                <Button text="借閱查詢"/>
                                <Button text="統(tǒng)計分析"/>
                            </VBox>
                        </TitledPane>
                        <TitledPane alignment="TOP_LEFT" text="系統(tǒng)維護(hù)">
                            <VBox minHeight="130" spacing="10">
                                <Button text="系統(tǒng)初始化"/>
                                <Button text="數(shù)據(jù)備份"/>
                                <Button text="主題設(shè)置"/>
                            </VBox>
                        </TitledPane>
                    </panes>
                </Accordion>
            </AnchorPane>

           <!--右側(cè)的主體內(nèi)容部分，采用StackPane實現(xiàn)一種卡片切換效果-->
            <StackPane fx:id="mainContainer" minWidth="1060">
                <!--加載外部的fxml文件叭首，顯示默認(rèn)的主體內(nèi)容-->
                <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习勤，默認(rèn)的主界面主體內(nèi)容，暫時先放一個圖片占位

<?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放棒，圖書類別數(shù)據(jù)展示姻报，暫時先放一個文本標(biāo)簽占位

<?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="圖書類別數(shù)據(jù)顯示"/>
</AnchorPane>

9.book.fxml己英，圖書信息數(shù)據(jù)展示间螟，暫時先放一個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布局
頂部顯示一些基本信息，點擊左側(cè)“圖書后臺管理系統(tǒng)”文字可以實現(xiàn)“主頁”的效果
中間部分由SplitPane分割成左右兩塊
左側(cè)為一個風(fēng)琴面板+標(biāo)題面板厢破，實現(xiàn)左側(cè)導(dǎo)航效果
右側(cè)一個StackPane荣瑟，由左側(cè)點擊不同的功能選項切換不同的布局文件，實現(xiàn)卡片效果摩泪，暫時只做了“圖書類別”笆焰、“圖書信息”兩個

運行效果圖：

啟動界面

啟動界面
點擊左側(cè)“類別管理”下的“圖書類別”功能

圖書類別
點擊左側(cè)“圖書管理”下的“圖書信息”功能

圖書信息
點擊左上角“圖書后臺管理系統(tǒng)”文字，可切換到默認(rèn)主頁

image.png

附需要用到的圖：

book.jpg

logo.png

me.png

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

最后編輯于：2018.12.02 19:09:42

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者

人面猴
序言：七十年代末见坑，一起剝皮案震驚了整個濱河市嚷掠，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌荞驴，老刑警劉巖不皆，帶你破解...
沈念sama閱讀 206,311評論 6贊 481
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場離奇詭異熊楼，居然都是意外死亡霹娄，警方通過查閱死者的電腦和手機，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 88,339評論 2贊 382
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進(jìn)店門鲫骗，熙熙樓的掌柜王于貴愁眉苦臉地迎上來犬耻，“玉大人，你說我怎么就攤上這事执泰≌泶牛” “怎么了？”我有些...
開封第一講書人閱讀 152,671評論 0贊 342
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵坦胶，是天一觀的道長透典。經(jīng)常有香客問我，道長顿苇，這世上最難降的妖魔是什么峭咒？我笑而不...
開封第一講書人閱讀 55,252評論 1贊 279
?港島之戀（遺憾婚禮）
正文為了忘掉前任，我火速辦了婚禮，結(jié)果婚禮上骏令，老公的妹妹穿的比我還像新娘缀台。我一直安慰自己，他們只是感情好漩氨，可當(dāng)我...
茶點故事閱讀 64,253評論 5贊 371
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布。她就那樣靜靜地躺著遗增，像睡著了一般叫惊。火紅的嫁衣襯著肌膚如雪。梳的紋絲不亂的頭發(fā)上做修，一...
開封第一講書人閱讀 49,031評論 1贊 285
城市分裂傳說
那天霍狰，我揣著相機與錄音抡草，去河邊找鬼。笑死蔗坯，一個胖子當(dāng)著我的面吹牛康震，可吹牛的內(nèi)容都是我干的。我是一名探鬼主播宾濒，決...
沈念sama閱讀 38,340評論 3贊 399
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼腿短，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了绘梦？” 一聲冷哼從身側(cè)響起橘忱，我...
開封第一講書人閱讀 36,973評論 0贊 259
萬榮殺人案實錄
序言：老撾萬榮一對情侶失蹤，失蹤者是張志新（化名）和其女友劉穎卸奉，沒想到半個月后鹦付，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體，經(jīng)...
沈念sama閱讀 43,466評論 1贊 300
?護(hù)林員之死
正文獨居荒郊野嶺守林人離奇死亡择卦，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點故事閱讀 35,937評論 2贊 323
?白月光啟示錄
正文我和宋清朗相戀三年敲长，在試婚紗的時候發(fā)現(xiàn)自己被綠了。大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片秉继。...
茶點故事閱讀 38,039評論 1贊 333
活死人
序言：一個原本活蹦亂跳的男人離奇死亡祈噪，死狀恐怖，靈堂內(nèi)的尸體忽然破棺而出尚辑，到底是詐尸還是另有隱情辑鲤，我是刑警寧澤，帶...
沈念sama閱讀 33,701評論 4贊 323
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布杠茬，位于F島的核電站月褥，受9級特大地震影響，放射性物質(zhì)發(fā)生泄漏瓢喉。R本人自食惡果不足惜宁赤，卻給世界環(huán)境...
茶點故事閱讀 39,254評論 3贊 307
男人毒藥：我在死后第九天來索命
文/蒙蒙一、第九天我趴在偏房一處隱蔽的房頂上張望栓票。院中可真熱鬧决左，春花似錦、人聲如沸走贪。這莊子的主人今日做“春日...
開封第一講書人閱讀 30,259評論 0贊 19
一樁弒父案，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽坠狡。三九已至继找，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間逃沿，已是汗流浹背婴渡。一陣腳步聲響...
開封第一講書人閱讀 31,485評論 1贊 262
情欲美人皮
我被黑心中介騙來泰國打工漩勤，沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留，地道東北人缩搅。一個月前我還...
沈念sama閱讀 45,497評論 2贊 354
代替公主和親
正文我出身青樓，卻偏偏與公主長得像触幼，于是被迫代替她去往敵國和親硼瓣。傳聞我的和親對象是個殘疾皇子，可洞房花燭夜當(dāng)晚...
茶點故事閱讀 42,786評論 2贊 345

后臺管理系統(tǒng)框架搭建

運行說明

運行效果圖：

推薦閱讀更多精彩內(nèi)容