記事のディレクトリ
ユーザー情報インターフェースの操作-ユーザー情報の変更
Ⅰ.userinfo.jspを変更して、ページジャンプを変更します
- 以前userinfo.jspで操作内容を設計したとき、特定の実装はありませんでした。今日は簡単なユーザー変更関数を実装しましょう。
href="userUpdate.jsp?username=<%=resultSet.getString(2)%>"「ここでは、ハイパーリンクを使用して、現在のインターフェースで変更するユーザーの名前を新しいページに転送しuserUpdate.jsて処理します。
<td>
<%--问号右边表示要传递的内容--%>
<a href="DeleteServlet?username=<%=resultSet.getString(2)%>" style="color: red">删除</a>
|
<a href="userUpdate.jsp?username=<%=resultSet.getString(2)%>" style="color:blue">修改</a>
|
<a href="#" style="color:blue">修改头像</a>
</td>
Ⅱ.userUpdate.jspを作成してページを変更します
主に次の部分が含まれています。
- まず、変更インターフェースに入ると、元のユーザー情報が表示されるので、ページ全体の構造は基本的に登録時と同じです。
- 以前のユーザー情報を表示する場合、対応する情報をデータベース（
用户名、密码、性别、年龄、爱好等）から取得する必要があり、ページ操作に基づいて、ここで使用されますjavascript（取得した値をvalue属性表示します）。 - 難しさの1つは、あなたが持っている趣味の対応するチェックボックスをチェックすることです。趣味は文字列で送信されるため、配列を分割して処理され、
checkHobby()メソッドのチェックボックスがオンになっています。現在のユーザーのホビー配列とチェックボックスのホビー配列を取得し、対応するダブルループマッチングをチェックしますchecked。
<%@ page import="java.sql.ResultSet" %>
<%@ page import="com.zte.dbHelper" %><%--
Created by IntelliJ IDEA.
User: 35192
Date: 2021/2/18
Time: 21:43
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>userUpdate</title>
</head>
<!-- 调用checkHobby()方法实现爱好复选框勾选 -->
<body onload="checkHobby()">
<!-- 利用javascript获取要修改的用户信息 -->
<%
request.setCharacterEncoding("UTF-8");
String username = request.getParameter("username");
dbHelper db = new dbHelper();
ResultSet rs = db.updataShow(username);
String id =" ";
String sex =" ";
String age =" ";
String hobby =" ";
String pwd =" ";
String phone = " ";
if(rs.next()) {
id = String.valueOf(rs.getInt(1));
age= String.valueOf(rs.getInt(4));
pwd = rs.getString(3);
sex= rs.getString(5);
hobby= rs.getString(6);
}
// 定义数组,将hobby分割为数组
String newhobby[] = new String[4];
newhobby = hobby.split(",");
%>
<div align="center">
<h1>用 户 修 改</h1>
<form action="/upDateServlet" method="post">
<table>
<tr>
<td>序号</td>
<td><%=id%></td>
</tr>
<tr>
<td>用户名：</td>
<td><input type="text" name="username" readonly value="<%=username%>"></td>
</tr>
<tr>
<td>密码：</td>
<td><input type="password" name="pwd" placeholder="请输入密码" value="<%=pwd%>"></td>
</tr>
<tr>
<td>手机号</td>
<td>
<input type="text" name="phone" placeholder="请输入手机号" maxlength="11" value="<%=phone%> ">
</td>
</tr>
<tr>
<td>性别：</td>
<td>
<%if (sex.equals("男")){
%>
<input type="radio" name="sex" value="男" checked>男
<input type="radio" name="sex" value="女">女
<%}else{
%>
<input type="radio" name="sex" value="男">男
<input type="radio" name="sex" value="女"checked>女
<%}%>
</td>
</tr>
<tr>
<td>年龄</td>
<td><input type="text" name="age" placeholder="请输入年龄" maxlength="2" value="<%=age%>"></td>
</tr>
<tr>
<td>爱好：</td>
<td>
<input type="checkbox" name="hobby" value="打游戏">电子竞技
<input type="checkbox" name="hobby" value="吃饭">美食鉴赏
<br>
<input type="checkbox" name="hobby" value="发呆">思考人生
<input type="checkbox" name="hobby" value="睡觉">养精蓄锐
</td>
</tr>
<tr align="center">
<td colspan="2">
<input type="submit" value="修改"/>
<input type="reset" value="重填"/>
</td>
</tr>
</table>
<input type="text" value="<%=hobby%>" id = "oldhobby">
</form>
</div>
<script type="text/javascript">
function checkHobby() {
var hobby = document.getElementById("oldhobby").value; # 利用爱好输入框进行过度
var newHobby = hobby.split(",");
var checkHobby = document.getElementsByName("hobby")
for (var i=0;i<newHobby.length;i++){
for (var j=0;j<checkHobby.length;j++){
if (newHobby[i] == checkHobby[j].value){
checkHobby[j].checked = "checked";
}
}
}
}
</script>
</body>
</html>
Ⅲ。dbHelperクラスを改善し、ユーザー変更メソッドを追加します
ここには3つの部分があります。
- 変更インターフェースに入ると、
展示出修改之前的用户信息 - 実現
用户修改功能方法 - ユーザー情報を変更する際に、追加して情報
限制 --- 手机号的前三位を保证変更しました号码一栏为数字。
/**
* userinfo.jsp页面操作之修改用户信息
* @param username
* @return
*/
public ResultSet updataShow(String username){
try{
getConnection();
String sql = "select*from userinfo_copy1 where username=?";
preparedStatement = connection.prepareStatement(sql);
preparedStatement.setString(1,username);
resultSet = preparedStatement.executeQuery();
}catch (Exception e){
e.printStackTrace();
}
return resultSet;
}
/**
* 修改用户信息
* @param username
* @param pwd
* @param age
* @param sex
* @param hobby
* @param phone
* @return
*/
public int upData(String username,String pwd,int age,String sex,String hobby,String phone){
try {
if(isNumeric(phone) & ( phone.startsWith("132") | phone.startsWith("188") | phone.startsWith("158") ) & phone.length()==11 ){
getConnection();
String sql = "update userinfo_copy1 set pwd=?,age=?,sex=?,hobby=?,phone=? where username=?";
preparedStatement = connection.prepareStatement(sql);
preparedStatement.setString(1,pwd);
preparedStatement.setInt(2,age);
preparedStatement.setString(3,sex);
preparedStatement.setString(4,hobby);
preparedStatement.setString(5,phone);
preparedStatement.setString(6,username);
int num =preparedStatement.executeUpdate();
if (num>0){
return 1;
}else {
return 2;
}
}else {
return 3;
}
}catch (Exception e){
e.printStackTrace();
return 0;
}
}
// 判断字符串是否为数字
public static boolean isNumeric(String str) {
Pattern pattern = Pattern.compile("^(\\-|\\+)?\\d+(\\.\\d+)?$");
Matcher isNum = pattern.matcher(str);
if (!isNum.matches()) {
return false;
}
return true;
}
Ⅳ。ユーザー情報変更機能を実現するためにupDataServletを作成する
- 操作のこの部分は、新しいユーザーを作成することと同じです。
import com.zte.dbHelper;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
@WebServlet(name = "upDateServlet",urlPatterns = "upDateServlet")
public class upDateServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("text/html;charset=UTF-8");
response.setCharacterEncoding("UTF-8");
request.setCharacterEncoding("UTF-8");
PrintWriter out = response.getWriter();
String username = request.getParameter("username");
String pwd = request.getParameter("pwd");
String sex = request.getParameter("sex");
int age = Integer.parseInt(request.getParameter("age"));
String hobby[] = request.getParameterValues("hobby");
String newHobby = "";
String phone = request.getParameter("phone");
// 将爱好数组转为字符串
for(int i=0;i<hobby.length;i++){
if(i==hobby.length-1){
newHobby += hobby[i];
}else{
newHobby += hobby[i] + ",";
}
}
dbHelper db = new dbHelper();
switch (db.upData(username,pwd,age,sex,newHobby,phone)){
case 0:
out.println("<script>");
out.println("alert('系统错误');");
out.println("window.location='userUpdata.jsp';");
out.println("</script>");
break;
case 1:
out.println("<script>");
out.println("alert('修改成功');");
out.println("window.location='userinfo.jsp';");
out.println("</script>");
break;
case 2:
out.println("<script>");
out.println("alert('修改失败');");
out.println("window.location='userUpdata.jsp';");
out.println("</script>");
break;
case 3:
out.println("<script>");
out.println("alert('手机号码格式不正确！');");
out.println("window.location='userinfo.jsp';");
out.println("</script>");
break;
}
// 刷新关闭
out.flush();
out.close();
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doPost(request,response);
}
}
Ⅴ。エフェクト表示
変更前
：変更後：
