今日的专业课讲后端项目的注册功能。
话不多说,上项目。
一、设计前端页面
register.jsp
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>传智书城注册页面</title>
<%--导入css和js --%>
<link rel="stylesheet" href="${pageContext.request.contextPath}/client/css/main.css" type="text/css"/>
<script type="text/javascript" src="${pageContext.request.contextPath}/client/js/form.js"></script>
<script type="text/javascript">
function changeImage() {
// 改变验证码图片中的文字
document.getElementById("img").src = "${pageContext.request.contextPath}/imageCode?time="+ new Date().getTime();
}
</script>
</head>
<body class="main">
<!-- 1.网上书城顶部 start -->
<%@include file="head.jsp"%>
<!-- 网上书城顶部 end -->
<!--2. 网上书城菜单列表 start -->
<%@include file="menu_search.jsp" %>
<!-- 网上书城菜单列表 end -->
<!-- 3.网上书城用户注册 start -->
<div id="divcontent">
<form action="${pageContext.request.contextPath}/register" method="post" onsubmit="return checkForm();">
<table width="850px" border="0" cellspacing="0">
<tr>
<td style="padding: 30px"><h1>新用户注册</h1>
<table width="70%" border="0" cellspacing="2" class="upline">
<tr>
<td style="text-align: right; width: 20%">邮箱:</td>
<td style="width: 40%">
<input type="text" class="textinput" id="email" name="email" onkeyup="checkEmail();"/>
</td>
<td colspan="2"><span id="emailMsg"></span><font color="#999999">请输入有效的邮箱地址</font></td>
</tr>
<tr>
<td style="text-align: right">用户名:</td>
<td><input type="text" class="textinput" id="username" name="username" onkeyup="checkUsername();"/>
</td>
<td colspan="2"><span id="usernameMsg"></span><font color="#999999">字母数字下划线1到10位, 不能是数字开头</font></td>
</tr>
<tr>
<td style="text-align: right">密码:</td>
<td><input type="password" class="textinput" id="password" name="password" onkeyup="checkPassword();"/></td>
<td><span id="passwordMsg"></span><font color="#999999">密码请设置6-16位字符</font></td>
</tr>
<tr>
<td style="text-align: right">重复密码:</td>
<td>
<input type="password" class="textinput" id="repassword" name="repassword" onkeyup="checkConfirm();"/>
</td>
<td><span id="confirmMsg"></span> </td>
</tr>
<tr>
<td style="text-align: right">性别:</td>
<td colspan="2">
<input type="radio" name="gender" value="男" checked="checked" /> 男
<input type="radio" name="gender" value="女" /> 女
</td>
<td> </td>
</tr>
<tr>
<td style="text-align: right">联系电话:</td>
<td colspan="2">
<input type="text" class="textinput"
style="width: 350px" name="telephone" />
</td>
<td> </td>
</tr>
<tr>
<td style="text-align: right">个人介绍:</td>
<td colspan="2">
<textarea class="textarea" name="introduce"></textarea>
</td>
<td> </td>
</tr>
</table>
<h1>注册验证</h1>
<table width="80%" border="0" cellspacing="2" class="upline">
<tr>
<td style="text-align: right; width: 20%">输入验证码:</td>
<td style="width: 50%">
<input type="text" class="textinput" />
</td>
<td> </td>
</tr>
<tr>
<td style="text-align: right; width: 20%;"> </td>
<td rowspan="2" style="width: 50%">
<img src="${pageContext.request.contextPath}/imageCode" width="180"
height="30" class="textinput" style="height: 30px;" id="img" />
<a href="javascript:void(0);" onclick="changeImage()">看不清换一张</a>
</td>
</tr>
</table>
<table width="70%" border="0" cellspacing="0">
<tr>
<td style="padding-top: 20px; text-align: center">
<input type="image" src="images/signup.gif" name="submit" border="0" width="140" height="35"/>
</td>
</tr>
</table>
</td>
</tr>
</table>
</form>
</div>
<!-- 网上书城用户注册 end -->
<!--4. 网上书城下方显示 start -->
<%@ include file="foot.jsp" %>
<!-- 网上书城下方显示 start -->
</body>
</html>
这里注意一下这句代码:
“${pageContext.request.contextPath}/register”
路径设置的是register,后面写后端Servlet的时候需要注意。
二、数据库设计
三、后端编写
1.User类(封装类)
对照数据库的表来写
package cn.itcast.itcaststore.domain;
public class User {
private int id;
private String username;
private String password;
private String gender;
private String email;
private String telephone;
private String introduce;
private String role;
private String registTime;
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public String getUsername() {
return username;
}
public void setUsername(String username) {
this.username = username;
}
public String getPassword() {
return password;
}
public void setPassword(String password) {
this.password = password;
}
public String getGender() {
return gender;
}
public void setGender(String gender) {
this.gender = gender;
}
public String getEmail() {
return email;
}
public void setEmail(String email) {
this.email = email;
}
public String getTelephone() {
return telephone;
}
public void setTelephone(String telephone) {
this.telephone = telephone;
}
public String getIntroduce() {
return introduce;
}
public void setIntroduce(String introduce) {
this.introduce = introduce;
}
public String getRole() {
return role;
}
public void setRole(String role) {
this.role = role;
}
public String getRegistTime() {
return registTime;
}
public void setRegistTime(String registTime) {
this.registTime = registTime;
}
}
2.UserDao类(数据访问层)
package cn.itcast.itcaststore.dao;
import java.sql.SQLException;
import org.apache.commons.dbutils.QueryRunner;
import org.apache.commons.dbutils.handlers.BeanHandler;
import cn.itcast.itcaststore.domain.User;
import cn.itcast.itcaststore.utils.DataSourceUtils;
public class UserDao {
//插入user
public int addUser(User user) throws SQLException{
String sql = "insert into user(username,password,gender,email,telephone,introduce) values (?,?,?,?,?,?,?)";
QueryRunner runner = new QueryRunner(DataSourceUtils.getDataSource());
int row = runner.update(sql,user.getUsername(),user.getPassword(),user.getGender(),user.getEmail()
,user.getTelephone(),user.getRole(),user.getIntroduce());
if(row == 1){
System.out.println("ok");
}
return row;
}
public User findUserByUserAndPassword(String username,String password) throws SQLException{
String sql = "select * from user where username = ? and password = ?";
QueryRunner runner = new QueryRunner(DataSourceUtils.getDataSource());
return runner.query(sql, new BeanHandler<User>(User.class),username,password);
}
}
3.UserService类(业务逻辑层)
package cn.itcast.itcaststore.service;
import java.sql.SQLException;
import cn.itcast.itcaststore.dao.UserDao;
import cn.itcast.itcaststore.domain.User;
public class UserService {
private UserDao userDao=new UserDao();
//User user = new User();
public int register(User user) throws SQLException { // 形参
int count = userDao.addUser(user);
return count;
}
public User login(String username,String password) throws SQLException{
User user = userDao.findUserByUserAndPassword(username, password);
/* if(user != null){
return user;
}*/
return user;
}
}
4.RigisterServlet
package cn.itcast.itcaststore.web.servlet.client;
import java.io.IOException;
import java.lang.reflect.InvocationTargetException;
import java.sql.SQLException;
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 org.apache.commons.beanutils.BeanUtils;
import cn.itcast.itcaststore.domain.User;
import cn.itcast.itcaststore.service.UserService;
/**
* Servlet implementation class RegisterServlet
*/
@WebServlet(name = "RegisterServlet1", urlPatterns = { "/register" })
public class RegisterServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public RegisterServlet() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
User user=new User();
//String emailString = request.getParameter("email");
try {
BeanUtils.populate(user, request.getParameterMap()); // request.getParameterMap()返回一个Map类型,Map(key,value[])
//该返回值存储着着前端所提交请求中的所有请求参数和请求参数值的映射关系。
} catch (IllegalAccessException | InvocationTargetException e) {
e.printStackTrace();
}
UserService userService=new UserService();
int count;
try {
count = userService.register(user);
if(count == 1){
response.sendRedirect(request.getContextPath()+"/client/registersuccess.jsp");
}
} catch (SQLException e) {
e.printStackTrace();
} // 实参
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(request,response);
}
}
这里pattern可以在创建Servlet的时候设置:
设置命名(此处为随意命名)->下方的URL mappings点击已有的路径->点击Edit,修改为rigister(上方jsp文件为register)
5.配置c3p0-config.xml
<?xml version="1.0" encoding="UTF-8"?>
<c3p0-config>
<default-config>
<property name="driverClass">com.mysql.jdbc.Driver</property>
<property name="jdbcUrl">jdbc:mysql://localhost:3306/itcaststore?characterEncoding=utf8</property>
<property name="user">root</property>
<property name="password">123</property>
</default-config>
</c3p0-config>