Java课程设计_聊天室_我的报告

1. 团队课程设计博客连接

JAVA团队课程设计博客--聊天室

2. 我的负责模块或任务说明

2.1 我的负责模块

• 使用JavaFx进行图形界面设计；
• 和数据库交互实现登陆、注册、聊天记录存取和我的信息修改。
• 利用css美化JavaFx界面。

2.2 任务说明

• 首先设计登陆和注册界面，并设置相应的按钮动做，待数据库成型后，能够进行必定交互，实现页面登陆和帐号注册。
• 再者设计简易我的界面，设计各模块须要使用的相应的组件，组装咱们的群聊界面。
• 设计我的信息界面和修改我的信息界面，和数据库交互，实现我的信息的存储和修改。
• 再设计相关相关好友组件，并插入到好友列表中，以及设计相应的聊天框，并用于后续实时调用插入到聊天窗口中。

3. 本身的代码提交记录截图

4. 本身负责模块或任务详细说明

4.1 登陆按钮代码：

• 分析：首先链接数据库，判断数据库中是否存在该方法，若存在则再判断该帐号是否已是在线状态，若是为在线则登陆成功，并将数据库中该id帐号设置成在线，则下一个帐户若是再登陆该帐号，则给出已在线提示。若是号码密码对应不一致，则输出提示并从新输入。

4.2 注册时自动生成一个惟一的帐号：

4.2.1 注册按钮监听器代码

• 分析：首先获取注册框中的填写信息，当发现两次密码输入不一致或密码框中为空，则弹窗提示错误信息并清空密码框让用户从新填写。若未发现以上状况，则调用自动生成惟一帐号的代码，生成一个惟一的id号，弹窗将帐号信息传输给用户。

4.2.2 自动生成一个惟一的帐号代码：

• 分析：先用随机类Random生成一个随机的五位数id号，而后连接数据库判断该id号是否已经存在，若以存在，则从新生成一个id，不然退出生成帐号循环，并返回该id号。

4.2.3 生成聊天信息框：

• 分析：由于想到在进行聊天时常常须要生成一个消息框，因此专门写了一个生成带有id号和消息框的有排版规则的。先生成一个VBox(垂直布局)，并将并将传入方法中的消息分装在TextArea组件中，根据消息框中的内容消息调整TextArea组件的宽高，并将存id的Label组件和TextArea组件加到VBox上，当判断jud等于1时，即为我的信息，设置布局靠右显示，不然靠左显示。最后返回VBox。

4.3 设置拖拽窗口的监听器

• 分析：经过设置拖拽监听器来计算实时的顶层容器stage位置，并实时更新stage位置，来实现拖拽的效果。经过外部传入一个Node的一个根结点，能够实现经过计算根结点的位置来实时跟新根结点所带的总体的拖拽位置。

4.4 界面设计展现：

• 登陆框

• 注册框

• 群聊界面

• 我的信息界面：

4.4.1 这里给出一个布局初始化的代码：

/**
     * 初始化界面各组件的位置信息，大小
     */
    private void initInterface() {
        // 好友列表
        friendsListView = new ListView<Label>(friends);
        /**
         * 群聊界面的布局和组件
         */
        chatPane = new Pane();

        chatPane.setPrefHeight(750);
        chatPane.setPrefWidth(800);
        chatPane.setLayoutX(200);
        chatPane.setLayoutY(50);

        chatBoxListView.setPrefWidth(800);
        chatBoxListView.setPrefHeight(600);
        chatBoxListView.setLayoutX(0);
        chatBoxListView.setLayoutY(0);

        messageEditingTextArea.setPrefWidth(800);
        messageEditingTextArea.setPrefHeight(150);
        messageEditingTextArea.setLayoutX(0);
        messageEditingTextArea.setLayoutY(600);
        messageEditingTextArea.setWrapText(true);

        sendOutButton.setLayoutX(730);
        sendOutButton.setLayoutY(700);

        closeLabel.setLayoutX(970);
        closeLabel.setLayoutY(0);

        minimizeLabel.setLayoutX(940);
        minimizeLabel.setLayoutY(0);

        chatPane.getChildren().addAll(messageEditingTextArea, chatBoxListView, sendOutButton);

        friendsListView.setLayoutX(0);
        friendsListView.setLayoutY(50);
        friendsListView.setPrefWidth(200);
        friendsListView.setPrefHeight(760);

        menuBar.setLayoutX(5);
        menuBar.setLayoutY(5);
        personalMenu.getItems().addAll(myInformationMenuItem, switchAccountMenuItem, new SeparatorMenuItem(), exitAccountMenuItem);
        menuBar.getMenus().add(personalMenu);


        anchorPane.getChildren().addAll(friendsListView, menuBar, closeLabel, minimizeLabel);
        anchorPane.getChildren().add(chatPane);
    }

4.5 CSS 美化代码

.root {
    -fx-background-color: linear-gradient(#518acb, #51bfff);
}

.menu-bar{
    -fx-background-color: linear-gradient(#518acb, #51bfff);
}

.text-area {
    -fx-text-fill: linear-gradient(#000000, #120008); /*字体颜色*/
    -fx-background-color: linear-gradient(#6edfff, #6edfff);
    -fx-highlight-text-fill: linear-gradient(#291b11, #401d1c);
}

.text-area .scroll-pane .content {
    -fx-background-color: lightblue;
}

.button {
    -fx-background-color: linear-gradient(to right, #1cfffa, #4698ff);
}
-label {
    -fx-background-color: linear-gradient(to right, #61a2b1, #ff1309);
}

.list-view .scroll-bar:vertical,
.list-view .scroll-bar:horizontal{
    -fx-opacity: 0;
    -fx-padding: -7;
}

• root设置的是根结点即Scene的背景颜色。
• TextArea设置了字体颜色和背景颜色。
• 设置button和label背景为渐变色。
• 最后设置了ListView 的相关垂直滚动条的样式。

5. 课程设计感想

• 由于此次课程设计是一个团队的课程设计，因此在和队员模块交互和结合上显得异常重要，也算在团队开发中有了一点经验，之后在进行团队项目开发前，不只要有明确的分工，还要进行定时的讨论和交互处理，这样到后面的实现就不会显得那么的尴尬，会浪费不少时间在结合代码上。
• 再者此次也算是我第一次比较较为具体的写GUI方面的代码，由于以前都是很基础的入门，至关多的组件的使用都不懂，因此在规划和学习上花了很多的时间。固然界面的全部的代码都是经过本身的设计后一个个计算并敲出来的，相对于使用Scene Builder自动生成来讲，不言而喻速度上有不少欠缺，以致于到后期有一些后端已经完成的代码没法在前端展现和实现交互。因此利用此次学习JavaFx的经验，继续深刻学习javaFx的相关界面设计，相信触类旁通，会为其余的页面设计的学习产生很好的影响。
• 虽然说最后的界面设计出来的效果也并不理想，可是学习了JavaFx仍是颇有成就感的。
• 我的展望：后续但愿能以这次UI设计为鉴，为后续界面设计开启新篇章，可以优化UI界面的加载速度，且继续学习javaFx相关知识，使用FXML和FxController结合实现MVC模式的框架。