目录
一、项目的需求：
二、项目的思路流程：
三、项目的框架（基于JavaWeb）：
四、项目的详细搭建
在搭建项目之前，要先清楚的了解三层架构是什么：
(427条消息) JavaWeb学习——JavaEE 项目的三层架构笔记_柿子镭的博客-CSDN博客
1、数据库--建库建表
SET NAMES utf8mb4;
SET FOREIGN_KEY_CHECKS = 0;
-- ----------------------------
-- Table structure for info
-- ----------------------------
DROP TABLE IF EXISTS `info`;
CREATE TABLE `info` (
`id` int NOT NULL AUTO_INCREMENT,
`status` int NULL DEFAULT NULL,
`username` varchar(20) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL DEFAULT NULL,
`name` varchar(20) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NOT NULL,
`gender` varchar(5) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL DEFAULT NULL,
`age` int NULL DEFAULT NULL,
`phone` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL DEFAULT NULL,
`IDcard` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL DEFAULT NULL,
`email` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL DEFAULT NULL,
`img` longtext CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL,
`address` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL DEFAULT NULL,
PRIMARY KEY (`id`) USING BTREE
) ENGINE = InnoDB AUTO_INCREMENT = 3 CHARACTER SET = utf8mb4 COLLATE = utf8mb4_0900_ai_ci ROW_FORMAT = Dynamic;
-- ----------------------------
-- Table structure for status
-- ----------------------------
DROP TABLE IF EXISTS `status`;
CREATE TABLE `status` (
`id` int NOT NULL AUTO_INCREMENT,
`status` int NULL DEFAULT NULL,
`user` varchar(20) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL DEFAULT NULL,
`name` varchar(20) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL DEFAULT NULL,
`operator` varchar(20) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL DEFAULT NULL,
`suggest` text CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL,
`option` int NULL DEFAULT NULL,
PRIMARY KEY (`id`) USING BTREE
) ENGINE = InnoDB AUTO_INCREMENT = 3 CHARACTER SET = utf8mb4 COLLATE = utf8mb4_0900_ai_ci ROW_FORMAT = Dynamic;
-- ----------------------------
-- ----------------------------
-- Table structure for user
-- ----------------------------
DROP TABLE IF EXISTS `user`;
CREATE TABLE `user` (
`username` varchar(20) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NOT NULL,
`password` varchar(20) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NOT NULL,
`type` int NULL DEFAULT NULL,
PRIMARY KEY (`username`) USING BTREE
) ENGINE = InnoDB CHARACTER SET = utf8mb4 COLLATE = utf8mb4_0900_ai_ci ROW_FORMAT = Dynamic;2、JavaBean编写（以Status.java为例）
package com.pojo;
public class Status {
int id; //INFO-id
int status; //当前状态
String user; //用户昵称
String name; //用户提交的真实姓名
String operator; //操作者
String suggest; //审评意见
int option; //操作； 1-通过；2-回退；3-拒绝
public Status(){}
public Status(int id, int status, String user, String name, String operator,String suggest, int option) {
this.id = id;
this.status = status;
this.user = user;
this.name = name;
this.operator = operator;
this.suggest = suggest;
this.option = option;
}
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public String getUser() {
return user;
}
public void setUser(String user) {
this.user = user;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getOperator() {
return operator;
}
public void setOperator(String operator) {
this.operator = operator;
}
public int getStatus() {
return status;
}
public void setStatus(int status) {
this.status = status;
}
public String getSuggest() {
return suggest;
}
public void setSuggest(String suggest) {
this.suggest = suggest;
}
public int getOption() {
return option;
}
public void setOption(int option) {
this.option = option;
}
@Override
public String toString() {
return "Status{" +
"id=" + id +
", user='" + user + '\'' +
", name='" + name + '\'' +
", operator='" + operator + '\'' +
", status=" + status +
", suggest='" + suggest + '\'' +
", option=" + option +
'}';
}
}
3、Dao层（StatusDao为例）
package com.utils;
import java.sql.*;
import java.sql.Connection;
public class JDBC {
//数据库url、用户名和密码
static final String DB_URL="jdbc:mysql://127.0.0.1:3306/enrollment?autoReconnect=true&characterEncoding=UTF-8&useSSL=false&useUnicode=true&serverTimezone=UTC";
static final String USERNAME="root";
static final String PASSWORD="123456";
static final String DRIVER = "com.mysql.cj.jdbc.Driver";
public static ThreadLocal<Connection> local = new ThreadLocal<Connection>();
public static Connection getConnection() {
Connection conn = local.get();
if (conn == null) {
try {
Class.forName(DRIVER);
conn = DriverManager.getConnection(DB_URL, USERNAME, PASSWORD);
local.set(conn);
} catch (Exception e) {
e.printStackTrace();
}
}
return conn;
}
public static void closeAll(Connection conn, Statement st,ResultSet re) throws SQLException {
if(re!=null)
re.close();
if (st!=null)
st.close();
if (conn!=null){
conn.close();
//local.remove();
}
System.out.println("ok");
conn=null;
}
}package com.dao;
import com.pojo.Status;
import java.sql.SQLException;
public interface StatusDao {
/**
* 根据info-id查询当前info的状态
* @param id
* @return
*/
Status findById(int id) throws SQLException;
/**
* 添加状态，当用户提交info时，默认添加状态
* @param status
* @return
*/
void addStatus(Status status) throws SQLException;
/**
* 更新状态
* @param status
*/
void updateStatus(Status status) throws SQLException;
}
package com.dao.impl;
import com.dao.StatusDao;
import com.pojo.Status;
import com.utils.JDBC;
import org.apache.commons.dbutils.handlers.BeanHandler;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
public class StatusDaoimpl extends BaseDao implements StatusDao {
Connection con = JDBC.getConnection();
@Override
public Status findById(int id) throws SQLException {
Connection con = JDBC.getConnection();
String sql = "select * from status where id=?";
PreparedStatement stat = con.prepareStatement(sql);
stat.setInt(1,id);
ResultSet re = stat.executeQuery();
BeanHandler<Status> status = new BeanHandler<Status>(Status.class);
Status handle = status.handle(re);
con=null;
return handle;
}
@Override
public void addStatus(Status status) throws SQLException {
Connection con = JDBC.getConnection();
String sql = "insert into status(`id`,`status`,`user`, `name`,`operator`,`suggest`,`option`)values(?,?,?,?,?,?,?)";
PreparedStatement stat = con.prepareStatement(sql);
stat.setInt(1,status.getId());
stat.setInt(2,status.getStatus());
stat.setString(3,status.getUser());
stat.setString(4,status.getName());
stat.setString(5,status.getOperator());
stat.setString(6,status.getSuggest());
stat.setInt(7,status.getOption());
stat.executeUpdate();
con=null;
}
@Override
public void updateStatus(Status status) throws SQLException {
Connection con = JDBC.getConnection();
String sql = "update status set `status`=?,`user`=?,`name`=?,`operator`=?,`suggest`=?,`option`=? where id=?";
PreparedStatement stat = con.prepareStatement(sql);
stat.setInt(1,status.getStatus());
stat.setString(2,status.getUser());
stat.setString(3,status.getName());
stat.setString(4,status.getOperator());
stat.setString(5,status.getSuggest());
stat.setInt(6,status.getOption());
stat.setInt(7,status.getId());
stat.executeUpdate();
con=null;
}
}
4、Service层（以StatusService为例）
public interface StatusService {
public void addStatus(Status status) throws SQLException;
public void updateStatus(Status status) throws SQLException;
public Status findById(int id) throws SQLException;
}package com.service.impl;
import com.dao.StatusDao;
import com.dao.impl.StatusDaoimpl;
import com.pojo.Status;
import com.service.StatusService;
import java.sql.SQLException;
public class StatusServiceimpl implements StatusService {
private StatusDao statusDao = new StatusDaoimpl();
@Override
public void addStatus(Status status) throws SQLException {
statusDao.addStatus(status);
}
@Override
public void updateStatus(Status status) throws SQLException {
statusDao.updateStatus(status);
}
@Override
public Status findById(int id) throws SQLException {
return statusDao.findById(id);
}
}
5、Servlet层 （以StatusServlet为例）
package com.web;
import com.pojo.Info;
import com.pojo.Status;
import com.service.InfoService;
import com.service.StatusService;
import com.service.UserService;
import com.service.impl.InfoServiceimpl;
import com.service.impl.StatusServiceimpl;
import com.service.impl.UserServiceimpl;
import com.utils.WebUtils;
import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import java.io.File;
import java.io.IOException;
import java.sql.SQLException;
import java.util.List;
public class StatusServlet extends BaseServlet{
private UserService userService = new UserServiceimpl();
private InfoService infoService = new InfoServiceimpl();
private StatusService statusService = new StatusServiceimpl();
void updateStatus(HttpServletRequest req, HttpServletResponse resp) throws IOException, ServletException, SQLException {
String choice = req.getParameter("option");
int option = choice.equals("通过")?1:choice.equals("回退")?2:3;
int id = Integer.parseInt(req.getParameter("ID"));
String operator = req.getParameter("operator");
String suggest = req.getParameter("suggest");
Status status = statusService.findById(id);
status.setSuggest(suggest);
status.setOperator(operator);
int sta = status.getStatus();
if((sta==1 && option==2)) {
status.setStatus(0); //需要回退给用户，进行修改，再次提交
userService.updatatype(status.getUser(),0);
} else if(sta==3) {
status.setStatus(sta);
userService.updatatype(status.getUser(),9); //过了终审的用户，报名成功，type==9;
} else {
if(option==1) {
status.setStatus(sta + 1); //管理员通过，status+1
if(status.getStatus()==3) //如果终审通过（status=3），用户报名成功，不能再报名,type==9
userService.updatatype((infoService.findById(id)).getUsername(),9);
} else if(option==2) {
status.setStatus(sta - 1); //管理员回退，status-1
} else {
status.setStatus(-1); //管理员拒绝，用户报名失败，不能再报名 type==-1
userService.updatatype((infoService.findById(id)).getUsername(),-1);
}
status.setOption(1);
}
statusService.updateStatus(status);
infoService.update(status.getStatus(),id);
int userType = userService.findUserType(operator);
List<Info> info_list = infoService.queryInfos(userType);
req.setAttribute("list",info_list);
req.setAttribute("operator",operator);
req.getRequestDispatcher("/pages/info/all_info.jsp").forward(req, resp);
}
void addInfo(HttpServletRequest req,HttpServletResponse resp) throws IOException, ServletException, SQLException {
req.setCharacterEncoding("utf-8");
String username = req.getParameter("username");
Info info = new Info();
Boolean isMultipart=ServletFileUpload.isMultipartContent(req); //是否是post、二进制流格式
if(!isMultipart)
return; //如果不是二进制流格式则不上传
try{
//创建 FileItemFactoru 对象
DiskFileItemFactory diskFileItemFactory = new DiskFileItemFactory();
//创建文件上传的处理器
ServletFileUpload servletFileUpload = new ServletFileUpload(diskFileItemFactory);
// 解析请求
List<FileItem> fileItems = servletFileUpload.parseRequest(req);
for(FileItem item:fileItems){
String fieldName = item.getFieldName();
if(item.isFormField()){
//isFormField方法用于判断FileItem类对象封装的数据是一个普通文本表单字段，还是一个文件表单字段，如果是普通表单字段则返回true，否则返回false。因此，可以使用该方法判断是否为普通表单域，还是文件上传表单域。
String value = item.getString("utf-8");
System.out.println(fieldName + "->"+value);
if(fieldName.equals("name"))
info.setName(value);
else if(fieldName.equals("age"))
info.setAge(Integer.valueOf(value));
else if(fieldName.equals("gender"))
info.setGender(value);
else if(fieldName.equals("phone"))
info.setPhone(value);
else if(fieldName.equals("IDcard"))
info.setIDcard(value);
else if(fieldName.equals("email"))
info.setEmail(value);
else if(fieldName.equals("address"))
info.setAddress(value);
}else {
System.out.println(fieldName + "->"+item.getName()); // 参数1：标签name 参数2：文件的name
info.setImg("static/img/"+item.getName());
item.write(new File("D:\\求职学习\\JavaWeb\\web\\static\\img\\",item.getName()));
}
}
} catch (Exception e) {
e.printStackTrace();
}
info.setUsername(username);
info.setStatus(1);
if((userService.findUserType(username))==1) { //type=0,未报名的用户
info.setUsername(username);
infoService.addInfo(info);
int id = (infoService.findByIDcare(info.getIDcard())).getId();
statusService.addStatus(new Status(id, 1, username, info.getName(), username, "用户已提交", 1));
}else if((userService.findUserType(username))==0){ //type=0,被回退回来的报名表
int id = (infoService.findByIDcare(info.getIDcard())).getId();
info.setId(id);
infoService.updateInfo(info);
Status status = statusService.findById(id);
status.setStatus(1); //用户重新提交，status=1
status.setOperator(username);
status.setSuggest("用户已重新提交！");
statusService.updateStatus(status);
}
userService.updatatype(username,8);
req.getSession().setAttribute("username",username);
req.setAttribute("infotext", "您的报名表提交成功！请耐心等待审核....");
req.getRequestDispatcher("/pages/info/fill_success.jsp").forward(req,resp);
}
void showInfo(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException, SQLException {
HttpSession session = req.getSession();
String username = String.valueOf(session.getAttribute("username"));
Info info = infoService.findByUsername(username);
req.setAttribute("info",info);
req.getRequestDispatcher("/pages/info/show_info.jsp").forward(req,resp);
}
void getInfo(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException, SQLException {
int id = WebUtils.parseInt(req.getParameter("id"),1);
String operator = req.getParameter("operator");
Info info = infoService.findById(id);
Status status = statusService.findById(id);
int s = info.getStatus();
switch (s){
case 1:
req.setAttribute("s","初审");
break;
case 2:
req.setAttribute("s","终审");
break;
}
req.setAttribute("info",info);
req.setAttribute("operator",operator);
req.setAttribute("status",status);
req.getRequestDispatcher("/pages/info/review.jsp").forward(req,resp);
}
}
6、编写jsp页面
登录页面login.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>用户登录页面</title>
<%@ include file="/pages/common/head.jsp"%>
</head>
<body>
<div id="login_header">
<img class="logo_img" alt="" src="static/img/info.png" >
</div>
<div class="login_banner">
<div id="l_content">
<span class="login_word">欢迎登录</span>
</div>
<div id="content">
<div class="login_form">
<div class="login_box">
<div class="tit">
<h1>用户登录</h1>
<a href="pages/user/register.jsp">立即注册</a>
</div>
<div class="msg_cont">
<b></b>
<span class="errorMsg">
<%--错误信息 <%=request.getAttribute("msg")==null?"":request.getAttribute("msg") %>--%>
${ empty requestScope.msg ? "请输入用户名和密码":requestScope.msg }
</span>
</div>
<div class="form">
<form action="userServlet" method="post">
<input type="hidden" name="action" value="login" />
<label>用户名称：</label>
<input class="itxt" type="text" placeholder="请输入用户名"
autocomplete="off" tabindex="1" name="username"
value="${requestScope.username}" />
<%--数据回显 value="<%=request.getAttribute("username")==null?"":request.getAttribute("username")%>"--%>
<br />
<br />
<label>用户密码：</label>
<input class="itxt" type="password" placeholder="请输入密码"
autocomplete="off" tabindex="1" name="password" />
<br />
<br />
<input type="submit" value="登录" id="sub_btn" />
</form>
</div>
</div>
</div>
</div>
</div>
<%--静态包含页脚内容--%>
<%@include file="/pages/common/footer.jsp"%>
注册页面register.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>用户注册页面</title>
<%-- 静态包含 base标签、css样式、jQuery文件 --%>
<%@ include file="/pages/common/head.jsp"%>
<script type="text/javascript">
// 页面加载完成之后
$(function () {
$("#username").blur(function (){
// 获取用户名
var username = this.value;
$.getJSON("http://localhost:8080/INFO/userServlet","action=ajaxExistsUsername&username="+username,function (data){
if(data.existsUsername){
$("span.errorMsg").text("用户名已存在");
}else{
$("span.errorMsg").text("用户名可用")
}
})
});
// 给注册绑定单击事件
$("#sub_btn").click(function () {
// 验证用户名：必须由字母，数字下划线组成，并且长度为3到7位
//1 获取用户名输入框里的内容
var usernameText = $("#username").val();
//2 创建正则表达式对象
var usernamePatt = /^\w{3,7}$/;
//3 使用test方法验证
if (!usernamePatt.test(usernameText)) {
//4 提示用户结果
$("span.errorMsg").text("用户名不合法！");
return false;
}
// 验证密码：必须由字母，数字下划线组成，并且长度为3到7位
//1 获取用户名输入框里的内容
var passwordText = $("#password").val();
//2 创建正则表达式对象
var passwordPatt = /^\w{3,7}$/;
//3 使用test方法验证
if (!passwordPatt.test(passwordText)) {
//4 提示用户结果
$("span.errorMsg").text("密码不合法！");
return false;
}
// 验证确认密码：和密码相同
//1 获取确认密码内容
var repwdText = $("#repwd").val();
//2 和密码相比较
if (repwdText != passwordText) {
//3 提示用户
$("span.errorMsg").text("确认密码和密码不一致！");
return false;
}
// 去掉错误信息
$("span.errorMsg").text("");
});
});
</script>
<style type="text/css">
.login_form{
height:420px;
margin-top: 25px;
}
</style>
</head>
<body>
<div id="login_header">
<img class="logo_img" alt="" src="static/img/info.png" >
</div>
<div class="login_banner">
<div id="l_content">
<span class="login_word">欢迎注册</span>
</div>
<div id="content">
<div class="login_form">
<div class="login_box">
<div class="tit">
<h1>注册账号</h1>
<span class="errorMsg">
${ requestScope.msg }
</span>
</div>
<div class="form">
<form action="userServlet" method="post">
<input type="hidden" name="action" value="regist">
<label>用户名称：</label>
<input class="itxt" type="text" placeholder="请输入用户名"
value="${requestScope.username}"
autocomplete="off" tabindex="1" name="username" id="username" />
<br />
<br />
<label>用户密码：</label>
<input class="itxt" type="password" placeholder="请输入密码"
autocomplete="off" tabindex="1" name="password" id="password" />
<br />
<br />
<label>确认密码：</label>
<input class="itxt" type="password" placeholder="确认密码"
autocomplete="off" tabindex="1" name="repwd" id="repwd" />
<br />
<br />
<input type="submit" value="注册" id="sub_btn" />
</form>
</div>
</div>
</div>
</div>
</div>
<%--静态包含页脚内容--%>
<%@include file="/pages/common/footer.jsp"%>
</body>
</html>信息填写页面 fill_info.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<meta charset="UTF-8">
<title>填写信息页面</title>
<%@ include file="/pages/common/head.jsp"%>
<script type="text/javascript">
$(function (){
//给提交绑定单击事件
$("#sub_btn").click(function (){
//验证手机号
var phoneText = $("#phone").val();
var phonePatt = /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/
if(!phonePatt.test(phoneText)){
$("span.errorMsg").text("手机号不符合要求");
return false;
}
//验证身份证号
var idcardText = $("#IDcard").val();
var idcardPatt = /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9xX]$/;
if(!idcardPatt.test(idcardText)){
$("span.errorMsg").text("身份证号不符合要求");
return false;
}
// 邮箱验证：xxxxx@xxx.com
var emailText = $("#email").val();
var emailPatt ='^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$'
// /^[a-z\d]+(\.[a-z\d]+)*@([\da-z](-[\da-z])?)+(\.{1,2}[a-z]+)+$/;
if (!emailPatt.test(emailText)) {
$("span.errorMsg").text("邮箱格式不合法！");
return false;
}
// 去掉错误信息
// $("span.errorMsg").text("");
})
})
</script>
</head>
<body>
<div id="login_header">
<img class="logo_img" alt="" src="static/img/info.png" >
</div>
<div class="login_banner_1">
<div id="content_1">
<div class="login_form_1">
<div class="login_box_1">
<div class="tit">
<h1>填写信息 WELCOME 【${sessionScope.username}】</h1>
</div>
<div class="form">
<form action="statusServlet?action=addInfo&username=${sessionScope.username}" method="post" enctype="multipart/form-data">
<%-- 以二进制流的形式传输内容 enctype="multipart/form-data"--%>
<div class="left">
<label>姓名：</label>
<input class="itxt" type="text" placeholder="请输入姓名"
value="${requestScope.info.name}"
autocomplete="off" tabindex="1" name="name" id="name" />
<br />
<br />
<label>年龄：</label>
<input class="itxt" type="text" placeholder="请输入年龄"
value="${requestScope.info.age}"
autocomplete="off" tabindex="1" name="age" id="age" />
<br />
<br />
<label>性别：</label>
<input class="itxt" type="text" placeholder="请输入性别"
value="${requestScope.info.gender}"
autocomplete="off" tabindex="1" name="gender" id="gender" />
<br />
<br />
<label>手机号：</label>
<input class="itxt" type="text" placeholder="请输入手机号"
value="${requestScope.info.phone}"
autocomplete="off" tabindex="1" name="phone" id="phone" />
<br />
<br />
<label>身份证号：</label>
<input class="itxt" type="text" placeholder="请输入身份证号"
value="${requestScope.info.IDcard}"
autocomplete="off" tabindex="1" name="IDcard" id="IDcard" />
<br />
<br />
<label>电子邮件：</label>
<input class="itxt" type="text" placeholder="请输入邮箱地址"
value="${requestScope.info.email}"
autocomplete="off" tabindex="1" name="email" id="email" />
<br />
<br />
<label>通讯地址：</label>
<input class="itxt" type="text" placeholder="请输入通讯地址"
value="${requestScope.info.address}"
autocomplete="off" tabindex="1" name="address" id="address" />
<br />
<br />
</div>
<div class="right">
<label>审批意见：</label><br/>
<input class="suggesttext" type="text" placeholder="无" style="color: red; outline:none " disabled="disabled"
value="${requestScope.suggest}" autocomplete="off" tabindex="1" name="suggest" id="suggest" />
<br />
<br />
<label>上传照片：</label><br />
<div id="imgs" style="float: right; margin-right: 40px;margin-bottom:20px;width: 150px;height: 150px">
<input type="file" name="img" id="imgfiel" onchange="selectImage(this);">
<img src="${requestScope.info.img}" id="getimg" width="150px" height="150px"/>
</div>
<br>
<br />
<script type="text/javascript">
function selectImage(file){
if(!file.files || !file.files[0])
return;
var reader = new FileReader();
reader.onload = function (evt){
document.getElementById('getimg').src=evt.target.result;
image = evt.target.result;
}
reader.readAsDataURL(file.files[0]);
}
</script>
</div>
<input type="submit" value="提交" id="sub_btn" />
<span class="errorMsg">
${ requestScope.msg }
</span>
</form>
</div>
</div>
</div>
</div>
</div>
<%--静态包含页脚内容--%>
<%@include file="/pages/common/footer.jsp"%>
</body>
</html>
.......
五、结果展示：
用户登录：
用户注册：
用户报名页面：
管理员审核页面：
以用户头像不合格为例（初审人员回退用户的报名表），当用户登录账号，查看自己的报名情况，报名表不合格的用户可以根据审批意见，重新修改自己的报名表，再次提交。（但是如果被审核人员拒绝报名的用户或是报名成功的用户，不能再重新提交报名表）
1020
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
