美文网首页后端
后台管理系统框架搭建

后台管理系统框架搭建

作者: 陶然然_niit | 来源:发表于2018-12-02 18:28 被阅读1537次

    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

    相关文章

      网友评论

        本文标题:后台管理系统框架搭建

        本文链接:https://www.haomeiwen.com/subject/uuojcqtx.html