此DEMO包含一下功能
- 用户界面（显示头像、学号、电话号码、性别）
- 修改密码（密码检验+两次密码是否一致的检验）
- 上传头像（这里采用的是先用io流将图片传到工程文件下，把图片路径保存到数据库中）
用户界面
customerUI.jsp
<%@ page contentType="text/html;charset=UTF-8" %>
用户界面
">
本功能和JAVA项目:登录注册+表单检验是联动的，具体传值过程是由里面的CheckLogin实现的。
修改密码修改密码界面
修改密码界面代码
upPwd.jsp
<%@ page contentType="text/html;charset=UTF-8" %>
修改密码
//表单检验
修改密码
修改密码功能代码
UpdatePassword.jsp
<%@ page contentType="text/html;charset=UTF-8" import="java.sql.*"%>
CheckRegister
<%
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("");
}catch(SQLException e){
out.println(""); //处理SQLException异常
}
%>
上传图片
上传图片页面
ps：这里其实是可以做一个异步刷新来实现头像预览的，但是博主我忘记了orz。
原理讲解
-
首先是使用IO流将图片存放到工程文件下，这里为了避免图片命名重复，我统一使用的是时间戳的形式来保存
-
然后在数据库里，我们只存放图片的路径，这样不仅能提高读取速率，还能减少数据压力。
-
这里采用Servlet来实现这个功能
上传页面
loadHeadimgUI.jsp
同样的这里的图片、学号也是由customerUI传过来的
<%@ page contentType="text/html;charset=UTF-8" %>
修改头像
">
上传图片功能
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;
@MultipartConfig
@WebServlet("/uploadServlet")
public class uploadServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
public uploadServlet() {
super();
// TODO Auto-generated constructor stub
}
@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();
}
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(request, response);
}
}
本页面所用到的css样式涉及到圆形头像处理，样式资源已经放到资源库中（如果已经审核成功的话），可0积分免费下载
