此DEMO包含一下功能
- 用户界面（显示头像、学号、电话号码、性别）
- 修改密码（密码检验+两次密码是否一致的检验）
- 上传头像（这里采用的是先用io流将图片传到工程文件下，把图片路径保存到数据库中）
用户界面
用户界面
customerUI.jsp
<%@ page contentType="text/html;charset=UTF-8" %>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用户界面</title>
<link rel="stylesheet" type="text/css" href="css/customer.css">
</head>
<body>
<div class="container">
<div class="forms-grid">
<div class="login">
<div style="width:200px">
<div class="to3">
<div class="to2">
<div class="to1">
<img id="img" class="to" alt="图片加载失败" src="<%=request.getParameter("path")%>">
</div>
</div>
</div>
</div>
<form name="form1" method="post" class="login-form">
<div class="form">
<div class="form-row">
<label class="form-label">学 号：</label><%=request.getParameter("name")%>
</div>
<br>
<div class="form-row">
<label class="form-label">电 话：</label><%=request.getParameter("tel")%>
</div>
<br>
<div class="form-row">
<label class="form-label">性 别：</label><%=request.getParameter("sex")%>
</div>
<br>
<div class="form-row button-login">
<button type="button" class="btn" style="float: left" onclick="location.href='upPwdUI.jsp?name=<%=request.getParameter("name")%>'">修改密码</button>
<button type="button" class="btn" style="float: right" onclick="location.href='loadHeadimgUI.jsp?name=<%=request.getParameter("name")%>&path=<%=request.getParameter("path")%>'">上传头像</button>
</div>
</div>
</form>
</div>
</div>
</div>
</body>
</html>
本功能和JAVA项目:登录注册+表单检验是联动的，具体传值过程是由里面的CheckLogin实现的。
修改密码
修改密码界面
修改密码界面代码
upPwd.jsp
<%@ page contentType="text/html;charset=UTF-8" %>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>修改密码</title>
<link rel="stylesheet" type="text/css" href="css/login.css">
<script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
//表单检验
<script>
$(document).ready(function(){
$("input").blur(function(){
var $parent = $(this).parent();
$parent.find(".onError").remove();
if ($(this).is("#newpwd")) {
if (this.value==="") {
$parent.append("<span class='onError' style='color: red;font-size: 5px'>密码不能为空！</span>")
}
if(this.value.length < 6&&this.value.length>0){
$parent.append("<span class='formtips onError' style='color: red;font-size: 5px'>密码长度至少为六位！</span>")
}
}
if ($(this).is("#repwd")) {
var newpwd = document.getElementById("newpwd").value;
var repwd = document.getElementById("repwd").value;
if (newpwd===repwd) {
}else{
$parent.append("<span class='onError' style='color: red;font-size: 5px'>两次密码输入不一致</span>")
}
}
});
$("form").submit(function(){
$("form input").trigger("blur");
if($(".onError").length>0) return false;
});
});
</script>
</head>
<body>
<section class="forms">
<div class="container">
<div class="forms-grid">
<div class="login">
<strong>修改密码</strong>
<form action="UpdatePassword.jsp?name=<%=request.getParameter("name")%>" method="post" class="login-form">
<div class="form">
<div class="form-row">
<label class="form-label">学号 </label><%=request.getParameter("name")%><br><br><br>
<label class="form-label">新密码</label>
<label for="newpwd"></label>
<input type="text" class="form-text" id="newpwd" name="newpwd">
</div>
<div class="form-row">
<label class="form-label">重复输入密码</label>
<label for="repwd"></label>
<input type="password" class="form-text" id="repwd" name="repwd">
</div>
<div class="form-row button-login">
<button type="submit" class="btn" style="float: left" >确定</button>
<button type="reset" class="btn" style="float: right">重置</button>
</div>
</div>
</form>
</div>
</div>
</div>
</section>
</body>
</html>
修改密码功能代码
UpdatePassword.jsp
<%@ page contentType="text/html;charset=UTF-8" import="java.sql.*"%>
<html>
<head>
<title>CheckRegister</title>
</head>
<body>
<%
String username=request.getParameter("name");
String pwd= request.getParameter("repwd");
String sDBDriver = "com.mysql.jdbc.Driver";
String conStr = "jdbc:mysql://localhost:3306/webdb?useSSL=false";
String dbname = "root";
String password = "root";
Connection conn=null;
try {
Class.forName(sDBDriver);
conn = DriverManager.getConnection(conStr, dbname, password);
} catch (ClassNotFoundException | SQLException cnfe) {
cnfe.printStackTrace();
}
try{
assert conn != null;
Statement stmt=conn.createStatement();
String updatePassword="UPDATE peo19082203 SET pwd = '"+pwd+"' WHERE name = '"+username+"'";
stmt.executeUpdate(updatePassword);
out.println("<script language='javascript'>alert('修改密码成功！');window.location.href='loginUI.jsp';</script>");
}catch(SQLException e){
out.println("<script language='javascript'>alert('网络连接失败！');window.location.href='loginUI.jsp';</script>"); //处理SQLException异常
}
%>
</body>
</html>
上传图片
上传图片页面
ps：这里其实是可以做一个异步刷新来实现头像预览的，但是博主我忘记了orz。
原理讲解
-
首先是使用IO流将图片存放到工程文件下，这里为了避免图片命名重复，我统一使用的是时间戳的形式来保存
-
然后在数据库里，我们只存放图片的路径，这样不仅能提高读取速率，还能减少数据压力。
-
这里采用Servlet来实现这个功能
上传页面
loadHeadimgUI.jsp
同样的这里的图片、学号也是由customerUI传过来的
<%@ page contentType="text/html;charset=UTF-8" %>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>修改头像</title>
<link rel="stylesheet" type="text/css" href="css/customer.css">
<script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<section class="forms">
<div class="container">
<div class="forms-grid">
<div class="login">
<div style="width:200px">
<div class="to3">
<div class="to2">
<div class="to1">
<img class="to" alt="加载失败" src="<%=request.getParameter("path")%>">
</div>
</div>
</div>
</div>
<form action="uploadServlet" method="post" class="login-form" enctype="multipart/form-data">
<div class="form">
<div class="form-row" style="text-align: center">
<label class="form-label">学号 </label><%=request.getParameter("name")%><br>
<input type="hidden" value="<%=request.getParameter("name")%>" name="name" id="name">
</div>
<div class="form-row button-login" style="left: 30%">
<input type="file" name="imgName" id="imgName">
</div>
<div class="form-row button-login" style="left: 30%">
<button type="submit" class="btn">提交</button>
</div>
</div>
</form>
</div>
</div>
</div>
</section>
</body>
</html>
上传图片功能
uploadServlet.java
ps：注意我这里采用的是tomcat8.5，servlet3.0以上的版本，所以直接使用注解就能实现配置，若你的servlet版本在3.0一下，需要手动配置xml文件。
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.InputStream;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.SQLException;
import java.sql.Statement;
import java.text.SimpleDateFormat;
import java.util.Date;
import javax.servlet.ServletException;
import javax.servlet.annotation.MultipartConfig;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.Part;
/**
* Servlet implementation class uploadServlet
*/
@MultipartConfig
@WebServlet("/uploadServlet")
public class uploadServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public uploadServlet() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
String name=request.getParameter("name");
Part f = request.getPart("imgName");
//设置IO流
InputStream is = f.getInputStream();
Date d = new Date();
SimpleDateFormat sf = new SimpleDateFormat("yyyyMMddHHmmss");
//图片重命名为时间戳
String fname = sf.format(d)+".jpg";
//这个路径就是你工程文件下的存放照片的路径
String path = "C:/Users/misten/IdeaProjects/untitled2/web/image/"+fname;
fname="image/"+fname;
FileOutputStream fos = new FileOutputStream(path);
byte []b=new byte[1024*3];
int n = is.read(b,0,b.length);
while(n!=-1) {
fos.write(b,0,n);
n=is.read(b,0,b.length);
}
is.close();
fos.close();
//至此图片输入结束，开始数据库的连接
Connection conn;
try {
Class.forName("com.mysql.jdbc.Driver");
conn=DriverManager.getConnection("jdbc:mysql://localhost:3306/webdb","root","root");
Statement st;
st=conn.createStatement();
String sql="update peo19082203 set photo='"+fname+"' where name='"+name+"'";
int r;
r=st.executeUpdate(sql);
if(r==1){
response.sendRedirect("loginUI.jsp");
}else{
response.sendRedirect("indexUI.jsp");
}
} catch (SQLException | ClassNotFoundException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(request, response);
}
}
本页面所用到的css样式涉及到圆形头像处理，样式资源已经放到资源库中（如果已经审核成功的话），可0积分免费下载
扫一扫
1107
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
