java web 简单版网上书城-注册登录
java web 简单版网上书城-注册登录
利用Java web 做一个简单的网上商城
环境搭建
- 导入基本项目
项目基础地址：
https://github.com/LGH-cmd/booksystem
找到wei-xhh-booksystem-basic导入eclipse
如图
运行首页
基本导入成功，接下来在这个的基础上进行
- 数据库环境搭建
-
新建数据库booksystem
-
建用户表
在项目地址中文件夹booksystem-basic-data中有sql文件
Mysql Workerbench中 File ->Run SQL Script,选择对应的sql地址
点记Run 刷新
项目基础搭建完成
完成用户注册
- 在model包创建用户实体类User
public class User {
private int id; // 编号
private String username; // 用户名
private String password; // 密码
private String email; // 邮箱
private String gender; // 性别
public User() {
}
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 getEmail() {
return email;
}
public void setEmail(String email) {
this.email = email;
}
public String getGender() {
return gender;
}
public void setGender(String gender) {
this.gender = gender;
}
}
- 在util包中创建JdbcUtil类
我的MySQL是8.0的，连接的jar包也为8.0，注册驱动时与5.0稍有改动，不过可以看相应的jar包里面的文件夹，我们要找Driver,如图
找到该类右键，Copy Qualified Name 复制改路径
public class JdbcUtil {
public static Connection getConnection() throws Exception {
//注册驱动
Class.forName("com.mysql.cj.jdbc.Driver.class");
//创建连接
String url =
"jdbc:mysql://localhost:3306/booksystem?serverTimezone=UTC&characterEncoding=utf-8";
Connection conn = DriverManager.getConnection(url,
"root", "025431");
return conn;
}
}
- dao包中创建UserDao类
注册用户：即需要在数据库创建用户信息
编写注册方法
public void register(User user) throws Exception {
//获取连接
Connection conn = JdbcUtil.getConnection();
//插入用户数据
String sql = "insert into t_user(username, password,
email, gender) values(?,?,?,?)";
PreparedStatement prps = conn.prepareStatement(sql);
prps.setString(1, user.getUsername());
prps.setString(2, user.getPassword());
prps.setString(3, user.getEmail());
prps.setString(4, user.getGender());
prps.execute();
//关闭连接
conn.close();
}
- 在web包中创建user包，并创建RegisterServlet类
@WebServlet("/registerServlet")
public class <u>RegisterServlet</u> extends HttpServlet {
private UserDao userDao = new UserDao();
@Override
protected void doGet(HttpServletRequest req,
HttpServletResponse resp) throws ServletException, IOException {
// TODO Auto-generated method stub
this.doPost(req, resp);
}
@Override
protected void doPost(HttpServletRequest req,
HttpServletResponse resp) throws ServletException, IOException {
// TODO Auto-generated method stub
req.setCharacterEncoding("UTF-8");
//获得注册数据
String userName = req.getParameter("username");
String passWord = req.getParameter("password");
String email = req.getParameter("email");
String gender = req.getParameter("gender");
//封装到User
User user = new User();
user.setUsername(userName);
user.setPassword(passWord);
user.setEmail(email);
user.setGender(gender);
//注册
try {
userDao.register(user);
//注册成功后跳转到登录页面
resp.sendRedirect(req.getContextPath() +
"/login.jsp");
} catch (Exception e) {
// TODO Auto-generated catch block
e.printStackTrace();
resp.setContentType("text/html;charset=utf-8");
resp.getWriter().write("系统异常，请联系管理员
10086");
}
}
记得在注册页面中表单跳转action
注册功能完成
注册的表单验证
注册要求：
1 用户名必填，且不能重复
2 密码不能小于6位
3 确认密码要和原始密码一致
4 邮箱地址必填，必须是正确的邮箱格式
在register.jsp页面添加注册校验规则
使用了表单校验插件
在项目地址中文件夹booksystem-basic-data中有对应js文件,将两个js文件放入js文件夹中
(jquery.validate.js,messages_zh.js)
<!-- 表单校验插件 -->
<script type="text/javascript"
src="js/jquery.validate.js"></script>
<!-- 中文提示插件 -->
<script type="text/javascript" src="js/messages_zh.js"></script>
<script type="text/javascript">
$(function(){
$("#signupForm").validate({
//校验规则
rules:{
username:{
required:true,//必填
},
password:{
required:true,
minlength :6 //最小长度为6
},
confirmPwd:{
equalTo:"#password" //与id为password的输入框的值一样
},
email:{
required:true,
email:true //校验邮箱格式
},
},
//错误提示信息（mesages也可以不写，使用默认的提示信息）
messages:{
username:{
required:"请输入用户名",
},
password:{
required:"请输入密码",
minlength :"密码长度不能小于6位" //最小长度为6
},
confirmPwd:{
equalTo:"两次输入密码不一致" //与id为password的输入框的值一样
},
email:{
required:"请输入邮箱地址",
email:"邮箱格式不正确" //校验邮箱格式
}
}
})
})
</script>
用户名重复校验
-
在UserDao中新增方法，判断用户名是否重复
返回true表示校验通过，可以注册
返回false表示校验失败，用户名重复，不能注册
-
在register.jsp页面添加检查用户名重复的校验规则
- 在user包中创建CheckNameServlet类
@WebServlet("/checkNameServlet")
public class <u>CheckNameServlet</u> extends HttpServlet {
private UserDao userDao = new UserDao();
@Override
protected void doGet(HttpServletRequest req,
HttpServletResponse resp) throws ServletException, IOException {
// TODO Auto-generated method stub
this.doPost(req, resp);
}
@Override
protected void doPost(HttpServletRequest req,
HttpServletResponse resp) throws ServletException, IOException {
//获取请求的用户名
String userName = req.getParameter("username");
try {
boolean flag = userDao.checkName(userName);
if(flag){
resp.getWriter().write("true"); //校验通过
}else{
resp.getWriter().write("false"); //校验失败，需要更换用户名注册
}
} catch (Exception e) {
// TODO Auto-generated catch block
e.printStackTrace();
resp.getWriter().write("false");
}
}
}
用户注册后当然就登录了
用户登录
- 在UserDao类中添加方法
//登录，账号密码正确
public User login(String userName, String password) throws
Exception {
Connection conn = JdcUtil.getConnection();
String sql = "select * from t_user where username=?
and password=?";
PreparedStatement prps = conn.prepareStatement(sql);
prps.setString(1, userName);
prps.setString(2, password);
ResultSet set = prps.executeQuery();
if(set.next()){
//说明登录成功，封装查询结果到User对象中，并返回对象
User u = new User();
//获取查询到的一行数据中的每一列的值
int id = set.getInt("id");
String name = set.getString("username");
String pwd = set.getString("password");
String email = set.getString("email");
String gender = set.getString("gender");
//设置查询结果到user对象中
u.setId(id);
u.setUsername(name);
u.setPassword(pwd);
u.setEmail(email);
u.setGender(gender);
//返回对象
return u;
}
//查询不到数据，返回null
return null;
}
- 在user包中创建LoginServlet类
@WebServlet("/loginServlet")
public class <u>LoginServlet</u> extends HttpServlet {
private UserDao userDao = new UserDao();
@Override
protected void doGet(HttpServletRequest req,
HttpServletResponse resp) throws ServletException, IOException {
// TODO Auto-generated method stub
this.doPost(req, resp);
}
@Override
protected void doPost(HttpServletRequest req,
HttpServletResponse resp) throws ServletException, IOException {
// TODO Auto-generated method stub
req.setCharacterEncoding("UTF-8");
String username = req.getParameter("username");
String password = req.getParameter("password");
try {
User user = userDao.login(username, password);
if(user!=null) {
//成功时重定向到index.jsp页面
resp.sendRedirect(req.getContextPath()+"/index.jsp");
}else {
//失败时转发回登录页面，给出提示信息
req.setAttribute("error", "用户名或密码错误");
req.getRequestDispatcher("login.jsp").forward(req, resp);
}
} catch (Exception e) {
// TODO Auto-generated catch block
e.printStackTrace();
resp.setContentType("text/html;charset=utf-8");
resp.getWriter().write("系统异常，请联系管理员
10086");
}
}
}
在login.jsp中添加如图
完整流程
暂时做到这里