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();
    }

運行程序,顯示界面:

0?wx_fmt=pnguploading.4e448015.gif轉存失敗重新上傳取消

 

實現功能

首先是將該用戶的數據信息顯示在界面中:

    /**
     * 初始化界面
     */
    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】可獲取本章的源碼。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章