文章目录
- Ⅰ.修改userinfo.jsp 实现修改页面跳转
- Ⅱ.创建 userUpdate.jsp 修改页面
- Ⅲ.完善 dbHelper类，添加用户修改方法
- Ⅳ.创建 upDataServlet，实现用户信息修改功能
- Ⅴ.效果展示
用户信息界面操作 ---- 用户信息修改
Ⅰ.修改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属性中实现展示)。 - 其中还有一个难点，就是让具有的爱好在对应的复选框上进行勾选。由于爱好是以字符串的形式传输的，所以还是采用分割数组的方式处理，并且在
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类，添加用户修改方法
这里包含了三部分：
- 在进入修改界面的时候，会
展示出修改之前的用户信息 - 实现
用户修改功能的方法 - 在进行用户信息修改的时候我们对其添加了
限制 --- 手机号的前三位，并且保证修改信息中号码一栏为数字。
/**
* 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);
}
}
返回顶部
Ⅴ.效果展示
修改前：
修改后：
返回顶部
