本節概要
本節主要說明修改用戶頭像和用戶密碼的功能。通過點擊用戶原有的頭像觸發鼠標事件來達到對用戶頭像的修改,而用戶密碼就是更新用戶新輸入的密碼即可。
創建界面
在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】可獲取本章的源碼。