Java实战之管家婆记账系统（21）——用户信息界面及功能实现

本节概要

本节主要说明修改用户头像和用户密码的功能。通过点击用户原有的头像触发鼠标事件来达到对用户头像的修改，而用户密码就是更新用户新输入的密码即可。

 

创建界面

在view包下创建userInformationFrame.fxml文件，通过Scene Builder设计界面，界面中各个控件的属性和事件方法参考下面的代码：

<?xml version="1.0" encoding="UTF-8"?>
​
<?import javafx.geometry.Insets?>
<?import javafx.scene.control.*?>
<?import javafx.scene.Cursor?>
<?import javafx.scene.image.ImageView?>
<?import javafx.scene.layout.*?>
<AnchorPane prefHeight="600.0" prefWidth="600.0" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1"
            fx:controller="AccountSystem.controller.UserInformationFrameController">
    <children>
        <VBox alignment="CENTER" prefHeight="600.0" prefWidth="600.0">
            <children>
                <HBox alignment="CENTER" prefHeight="100.0" prefWidth="200.0">
                    <children>
                        <ImageView fx:id="userImage" fitHeight="143.0" fitWidth="118.0"
                                   onMouseClicked="#alterImageViewEvent" pickOnBounds="true" preserveRatio="true">
                            <cursor>
                                <Cursor fx:constant="HAND"/>
                            </cursor>
                        </ImageView>
                    </children>
                </HBox>
                <HBox alignment="CENTER" prefHeight="100.0" prefWidth="200.0" spacing="40.0">
                    <children>
                        <Label text="名    字"/>
                        <TextField fx:id="nameTextField"/>
                    </children>
                </HBox>
                <HBox alignment="CENTER" prefHeight="100.0" prefWidth="200.0" spacing="40.0">
                    <children>
                        <Label text="账号ID"/>
                        <TextField fx:id="idTextField" prefHeight="30.0" prefWidth="193.0"/>
                    </children>
                </HBox>
                <HBox alignment="CENTER_LEFT" prefHeight="86.0" prefWidth="618.0" spacing="50.0">
                    <children>
                        <Label text="密    码"/>
                        <PasswordField fx:id="passwordTextField" prefHeight="30.0" prefWidth="186.0"/>
                        <CheckBox fx:id="alterPasswordCheckBox" mnemonicParsing="false"
                                  onAction="#alterPasswordCheckBoxEvent" text="修改密码"/>
                    </children>
                    <VBox.margin>
                        <Insets left="160.0"/>
                    </VBox.margin>
                </HBox>
                <VBox fx:id="alterPasswordVBox" alignment="CENTER" prefHeight="200.0" prefWidth="100.0" spacing="20.0"
                      visible="false">
                    <children>
                        <Separator prefWidth="200.0"/>
                        <HBox alignment="CENTER" prefHeight="100.0" prefWidth="200.0" spacing="40.0">
                            <children>
                                <Label text="新密码"/>
                                <PasswordField fx:id="newPasswordTextField"/>
                            </children>
                        </HBox>
                        <HBox alignment="CENTER" prefHeight="100.0" prefWidth="200.0" spacing="40.0">
                            <children>
                                <Label text="确认密码"/>
                                <PasswordField fx:id="confirmNewPasswordTextField"/>
                            </children>
                        </HBox>
                        <HBox alignment="CENTER" prefHeight="100.0" prefWidth="200.0" spacing="40.0">
                            <children>
                                <Button fx:id="alterButton" mnemonicParsing="false" onAction="#alterButtonEvent"
                                        text="修改"/>
                                <Button fx:id="cancelButton" mnemonicParsing="false" onAction="#cancelButtonEvent"
                                        text="取消"/>
                            </children>
                        </HBox>
                    </children>
                </VBox>
            </children>
        </VBox>
    </children>
</AnchorPane>

接着是在controller包下创建与之对应的控制器类UserInformationFrameController.java，并从Scene Builder中复制该界面组件对象和事件方法代码到该类中：

package AccountSystem.controller;
​
import AccountSystem.bean.Session;
import AccountSystem.bean.User;
import AccountSystem.dao.UserDao;
import AccountSystem.tools.SimpleTools;
import javafx.event.ActionEvent;
import javafx.fxml.FXML;
import javafx.scene.control.Alert;
import javafx.scene.control.CheckBox;
import javafx.scene.control.PasswordField;
import javafx.scene.control.TextField;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.input.MouseEvent;
import javafx.scene.layout.VBox;
import javafx.stage.FileChooser;
​
import java.io.File;
​
/**
 * 用户信息界面控制器
 *
 * @author lck100
 */
public class UserInformationFrameController {
​
    private UserDao userDao = new UserDao();
    private SimpleTools simpleTools = new SimpleTools();
​
    @FXML
    private TextField idTextField;
​
    @FXML
    private PasswordField passwordTextField;
​
    @FXML
    private VBox alterPasswordVBox;
​
    @FXML
    private ImageView userImage;
​
    @FXML
    private TextField nameTextField;
​
    @FXML
    private PasswordField newPasswordTextField;
​
    @FXML
    private PasswordField confirmNewPasswordTextField;
​
    @FXML
    private CheckBox alterPasswordCheckBox;
​
    /**
     * 点击图片更改图片
     *
     * @param mouseEvent 事件
     */
    public void alterImageViewEvent(MouseEvent mouseEvent) {
       
    }
​
    /**
     * ”修改“按钮的事件监听器
     *
     * @param event 事件
     */
    public void alterButtonEvent(ActionEvent event) {
       
    }
​
    /**
     * ”取消“按钮的监听器
     *
     * @param event 事件
     */
    public void cancelButtonEvent(ActionEvent event) {
      
    }
​
    /**
     * ”修改密码“复选框监听器
     *
     * @param event 事件
     */
    public void alterPasswordCheckBoxEvent(ActionEvent event) {
      
    }
}

接着是在MainApp.java中创建方法加载FXML资源文件显示界面：

    /**
     * 操作结果：“用户信息”查询结果界面
     */
    public Scene initUserInformationFrame() {
        try {
            FXMLLoader loader = new FXMLLoader();
            loader.setLocation(MainApp.class.getResource("view/userInformationFrame.fxml"));
            AnchorPane page = (AnchorPane) loader.load();
​
            Stage mainFrameStage = new Stage();
            mainFrameStage.setTitle("用户信息");
            mainFrameStage.setResizable(true);
            mainFrameStage.setAlwaysOnTop(false);
            mainFrameStage.initModality(Modality.APPLICATION_MODAL);
            mainFrameStage.initOwner(primaryStage);
            Scene scene = new Scene(page);
            mainFrameStage.setScene(scene);
​
            mainFrameStage.showAndWait();
            return scene;
        } catch (IOException e) {
            e.printStackTrace();
        }
        return null;
    }

最后是在MainPageController.java中的菜单项事件方法中加载显示界面：

    /**
     * “用户信息”菜单项的事件监听器
     *
     * @param actionEvent 事件
     */
    @FXML
    public void userInfoMenuItemEvent(ActionEvent actionEvent) {
        // 打开用户信息界面
        mainApp.initUserInformationFrame();
        // 刷新主界面
        initialize();
    }

运行程序，显示界面：

转存失败重新上传取消

 

实现功能

首先是将该用户的数据信息显示在界面中：

    /**
     * 初始化界面
     */
    public void initialize() {
        // 获取用户信息
        User user = userDao.selectUserById(Session.getUser().getUserId());
        userImage.setImage(new Image("file:/" + user.getUserImagePath()));
        nameTextField.setText(user.getUserName());
        idTextField.setText(String.valueOf(user.getUserId()));
        passwordTextField.setText(user.getUserPassword());
    }

然后可以通过选中”修改密码“复选框实现修改密码界面的显示。

    /**
     * ”修改密码“复选框监听器
     *
     * @param event 事件
     */
    public void alterPasswordCheckBoxEvent(ActionEvent event) {
        if (alterPasswordCheckBox.isSelected()) {
            alterPasswordVBox.setVisible(true);
        } else {
            alterPasswordVBox.setVisible(false);
        }
    }

接下来就是修改按钮的功能实现，将用户输入的新密码更新在数据库表中：

    /**
     * ”修改“按钮的事件监听器
     *
     * @param event 事件
     */
    public void alterButtonEvent(ActionEvent event) {
        if (newPasswordTextField.getText().length() == 0) {
            SimpleTools.informationDialog(Alert.AlertType.WARNING, "提示", "警告", "新密码不能为空！");
        }
        if (confirmNewPasswordTextField.getText().length() == 0) {
            SimpleTools.informationDialog(Alert.AlertType.WARNING, "提示", "警告", "确认密码不能为空！");
        }
        if (SimpleTools.MD5(newPasswordTextField.getText()).equals(SimpleTools.MD5(confirmNewPasswordTextField.getText()))) {
            String password = SimpleTools.MD5(confirmNewPasswordTextField.getText());
            boolean b = userDao.updateUser(new User(Session.getUser().getUserId(), Session.getUser().getUserName(), password, Session.getUser().getUserImagePath()));
            if (b) {
                boolean isSuccess = SimpleTools.informationDialog(Alert.AlertType.INFORMATION, "提示", "信息", "密码修改成功！");
                if (isSuccess) {
                    alterPasswordVBox.setVisible(false);
                    alterPasswordCheckBox.setSelected(false);
                }
            } else {
                SimpleTools.informationDialog(Alert.AlertType.ERROR, "提示", "错误", "密码修改失败！");
            }
        } else {
            SimpleTools.informationDialog(Alert.AlertType.WARNING, "提示", "警告", "新密码和确认密码必须相同！");
        }
​
    }

其中调用了SimpleTools类中的MD5()方法，该方法是对用户密码进行加密的方法，属于不可逆，即不可能通过加密后的结果反推密码，只能通过对新输入字符串也进行MD5加密然后与数据库结果进行比较判断密码是否正确。

本事件处理方法中使用了updateUser()方法来更新用户信息并对更新结果进行判断。

”取消“按钮可以隐藏修改密码的界面组件：

    /**
     * ”取消“按钮的监听器
     *
     * @param event 事件
     */
    public void cancelButtonEvent(ActionEvent event) {
        alterPasswordVBox.setVisible(false);
        alterPasswordCheckBox.setSelected(false);
    }

最后就是更改用户头像了，即可以点击用户头像来从电脑本地选择新的头像来改变头像。

是通过图片组件ImageView的鼠标点击事件来实现的。

所以完整代码如下：

    /**
     * 点击图片更改图片
     *
     * @param mouseEvent 事件
     */
    public void alterImageViewEvent(MouseEvent mouseEvent) {
        String importPath = null;
        //实例化文件选择器
        FileChooser fileChooser = new FileChooser();
        //设置默认文件过滤器
        fileChooser.setSelectedExtensionFilter(new FileChooser.ExtensionFilter("图片", "jpg", "jpeg", "png"));
        //打开文件选择框，并得到选中的文件
        File result = fileChooser.showOpenDialog(null);
        // 判断用户是否选中文件
        if (result != null) {
            importPath = result.getAbsolutePath();
            // 数据库保存路径需要进行转义，否则斜杠会消失
            String s = importPath.replaceAll("\\\\", "\\\\\\\\");
            userImage.setImage(new Image("file:/" + importPath));
            // 封装要更新的实体类对象
            User user = new User(Session.getUser().getUserId(), Session.getUser().getUserName(), Session.getUser().getUserPassword(), s);
            userDao.updateUser(user);
        }
    }

测试功能：

 

 

可搜索微信公众号【Java实例程序】或者扫描下方二维码关注公众号获取更多。

注意：在公众号后台回复【20200423】可获取本章的源码。