您的位置：首页 > 其它

项目3-商城-1-注册登录首页

2018-02-22 19:30 525 查看
话说：

各位读者下午好，我是小美啊。新年已算过去，春天慢慢来啦。还是那句话，学会一个技术点的感觉是快乐的，如果能够创造，会更加快乐。

上2篇博客都是为这篇博客服务的。我们这次继续用JSP+Servlet搞一个“烂大街”滴商城项目，哈哈。

目录

1.整体模样

2.数据库设计

3.注册、登录首页面

4.注册后端代码

5.总结

开发工具：IDEA

难度系数：★★☆☆☆

建议用时：2-3H

页面及验证全部自己手写奥。

1.整体模样







元芳，俺的注册、登录界面怎么样？还将就吧。

2.数据库设计

兵马未动，数据库先行。

后台会员表设计如下，与之前不同的是这次连接的是SQLServer数据库。

#创建数据库 商城
create database db_myShop;

#创建 会员信息表
表名：会员信息表
tb_user
表字段：
userId 主键 自动递增
userName  手机号 邮箱 账号 非空
userNick 非空
password
phone
email

#创建语句
create table tb_user (
userId int identity(1,1) not null,
userName varchar(50) not null,
userNick varchar(50),
pwd varchar(50),
phone varchar(50),
email varchar(50)
);

#模拟一条数据
insert into tb_user (userName,userNick,pwd,phone,email) values('xiaomei','牙齿笑了','111111','15265888898','1961184526@qq.com');


不同于MySQL，这里的主键和自动自增不再是auto_increment primary key

而是identiry(1,1)，表示 “标识”，第一个1表示开始值，第二个1表示步长。

3.注册、登录首页面

1）页面代码

2）注册-前端验证

1）页面代码

register.jsp

login.jsp

register.jsp

<%@ page import="com.hmc.dao.MemberDao" %>
<%@ page import="com.hmc.dao.MemberDaoImpl" %>
<%@ page import="com.hmc.pojo.Member" %><%--
User: Meice
Date: 2018/2/22
Time: 9:35
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>小确幸商城-注册</title>
<!-- 引入外部样式 -->
<link href="css/register.css" rel="stylesheet" type="text/css">
<!-- 引入jQuery -->
<script src="js/jquery-1.8.3.js"></script>

<!-- 前端验证  引入外部js文件-->
<script src="js/register.js"></script>
<script type="text/javascript">

</script>

</head>
<body>

<div id="registerForm" style="width:560px;">
<form action="addMember" method="get"  onsubmit=" return  checkRegisterForm()">
<table  cellpadding="10px"  >
<tr>
<td colspan="2" style="font-size:30px;font-weight:bolder;text-align: right;">
<font style="color:orange;">小</font><font style="color:green;">确</font><font style="color:blue;">幸</font>
<font style="color:red;">商城</font></td>
</tr>

<tr>
<td  colspan="2 " style="font-size:22px;margin-left: 200px;">
<div style="margin-left:215px;">会员注册</div>
</td>
<a href="login.jsp" style="text-decoration:none;">已有账号？去登录</a>
</tr>

<tr>
<td>
<span id="regInfo" style="font-size:15px;color:red;font-weight:bolder"></span>
</td>
</tr>
<tr>
<td style="width:90px" class="myRight">账户</td>
<td >
<input type="text" name="userName" id="userName" class="myInput" placeholder="手机|邮箱|用户名">
</td>
<td><span id="userNameInfo" style="font-size:15px;font-weight:bolder;color:red;"></span></td>

</tr>

<tr>
<td class="myRight">用户昵称</td>
<td>
<input type="text" name="userNick" id="userNick" class="myInput">
</td>
<td><span id="userNickInfo" style="font-size:15px;font-weight:bolder;color:red;"></span></td>
</tr>

<tr>
<td class="myRight">密码</td>
<td>
<input type="password" name="pwd" id="pwd" class="myInput">
</td>
<td><span id="pwdInfo" style="font-size:15px;font-weight:bolder;color:red;"></span></td>
</tr>

<tr>
<td class="myRight">确认密码</td>
<td>
<input type="password" name="rePwd" id="rePwd" class="myInput">
</td>
<td><span id="rePwdInfo" style="font-size:15px;font-weight:bolder;color:red;"></span></td>
</tr>

<tr>
<td class="myRight">电话</td>
<td>
<input type="text" name="phone" id="phone" class="myInput">
</td>
<td><span id="phoneInfo" style="font-size:15px;font-weight:bolder;color:red;"></span></td>
</tr>

<tr>
<td class="myRight">邮箱</td>
<td>
<input type="text" name="email" id="email" class="myInput">
</td>
<td><span id="emailInfo" style="font-size:15px;font-weight:bolder;color:red;"></span></td>

</tr>

<tr>
<td colspan="2" align="right"><input type="checkbox" name="agree" id="agree"  style="width:30px;height:22px;">

小确幸商城 <font style="color:blue">《使用条款》</font></td>
</tr>

<tr>
<td colspan="2" align="right">
<input type="submit" value="同意协议并注册" style="background-color:orange;height:38px;width:200px;">
</td>
</tr>
</table>

</form>

</div>

</body>
</html>


这里没啥说的，能否快速调整出这样的效果，有点耐心罢了。笔者已经录制了视频。

验证代码：register.js

var flag = false;
var flag2 = true;
var flag3 = true;
var flag4 = false;

//验证表单提交   因为用户可能直接enter  这个验证非空即可  准确性验证交给blur()事件
function checkRegisterForm() {
//alert("进来了！");
$(function() {

var regInfo = $("#regInfo");
var agree = document.getElementById("agree");
//alert("jQuery进来了");
if($("#userName").val().trim() == "") {
regInfo.html("请填写用户名");
}else if($("#userNick").val().trim() == "") {
regInfo.html("请填写昵称");

}else if($("#pwd").val().trim() == "") {
regInfo.html("请填写密码");

}else if($("#rePwd").val().trim() == "") {
regInfo.html("请填写确认密码");

}else if($("#pwd").val().trim() != $("#rePwd").val().trim()) {
regInfo.html("两次输入密码不一致")

}else if($("#phone").val().trim() =="") {
regInfo.html("请填写电话");
}else if($("#email").val().trim()==""){
regInfo.html("请填写邮箱");
}else  if(agree.checked == false) {
alert("同意条款后方能注册奥~");

}else{

flag = true;
}
})

if(flag == true && flag2 == true && flag3 == true){
flag4 = true;
}

return flag4;
}

//jQuery实现鼠标blur()事件验证 不能这么写
$(function() {
var regInfo = $("#regInfo");
//alert("jQuery进来了");
//用户名验证
$("#userName").blur(function() {
var reg = /[\u4e00-\u9fa5]/;
var userName = $("#userName").val().trim();
if($(this).val().trim() == ""){

$("#userNameInfo").html("请填写用户名");
}else{
$("#userNameInfo").html("");
regInfo.html("");
if(reg.test(userName)) {
$("#userNameInfo").html("用户名不能为中文");
}else{
$("#userNameInfo").html("");
}
}

//Ajax异步验证 注册名

});

//昵称验证
$("#userNick").blur(function() {
if($(this).val().trim() == "") {
$("#userNickInfo").html("请填写昵称");
}else{
$("#userNickInfo").html("");
regInfo.html("");
}

});

//密码验证
$("#pwd").blur(function() {

if($(this).val().trim() == "") {
$("#pwdInfo").html("请填写密码");

}else{

$("#pwdInfo").html("");
regInfo.html("");
}
});

//确认密码验证
$("#rePwd").blur(function() {
var rePwd = $("#pwd").val().trim();
var pwd = $(this).val().trim();
if(pwd == "") {
$("#rePwdInfo").html("请填写确认密码");
}else{
$("#rePwdInfo").html("");
regInfo.html("");
if(pwd != rePwd) {
$("#rePwdInfo").html("前后密码输入不一致");
}else{
$("#rePwdInfo").html("");
}
}
});

//电话验证
$("#phone").blur(function() {
var phone = $(this).val().trim();
if(phone == "") {
$("#phoneInfo").html("请填写电话");

}else{
$("#phoneInfo").html("");
regInfo.html("");
var reg = /^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/;
if(reg.test(phone)){
$("#phoneInfo").html("");
flag2 = true;
}else{
$("#phoneInfo").html("电话有误");
flag2 = false;
}
}

});

//邮箱验证
$("#email").blur(function() {
var email = $(this).val().trim();
if(email == "") {
$("#emailInfo").html("请填写邮箱");
}else{
$("#emailInfo").html("");
regInfo.html("");
var reg = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
if(reg.test(email)) {
$("#emailInfo").html("");
flag3 = true;
}else{
$("#emailInfo").html("邮箱非法");
flag3 = false;

}
}

});

})


不引用外部的验证，自己写的话要考虑到用户直接enter，所以分了2部分验证：onsubmit() 和鼠标blur()事件。

注意js和jQuery代码混合使用。

login.jsp

<%--
User: Meice
Date: 2018/2/22
Time: 9:35
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>小确幸商城-登录</title>
<!-- 引入外部样式 -->
<link href="css/register.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="registerForm" style="height:430px;margin-top:80px;">
<form>
<table  cellpadding="10px" align="center">
<tr>
<td colspan="2" style="font-size:30px;font-weight:bolder;">
<font style="color:orange;">小</font><font style="color:green;">确</font><font style="color:blue;">幸</font>
<font style="color:red;">商城</font></td>
</tr>

<tr>
<td  colspan="2 " align="center" style="font-size:22px">会员登录</td>
</tr>

<tr>
<td colspan="2">
<a href="register.jsp" style="text-decoration:none;">无账号？去注册</a>
</td>
</tr>
<tr>
<td style="width:90px">账户</td>
<td>
<input type="text" name="userName" id="userName" class="myInput">
</td>
</tr>

<tr>
<td>密码</td>
<td>
<input type="password" name="pwd" id="pwd" class="myInput">
</td>
</tr>

<tr>
<td>验证码</td>
<td>
<input type="text" name="code" id="code" style="height:35px;width:120px;">
</td>
</tr>

<tr>
<td colspan="2" align="center">
<input type="submit" value="登录" style="background-color:orange;height:35px;width:200px;">
</td>
</tr>
</table>

</form>

</div>

</body>
</html>


这个没啥特别的。

register.css

@CHARSET "UTF-8";

/*  设置注册整体div样式*/
#registerForm{

border:1px solid purple;
width:700px;
height:640px;
margin:auto;
padding:auto;
}

/* 设置input框样式 */
.myInput{
width:240px;
height:35px;

}

/*设置 靠右显示*/
.myRight{

text-align: right;
}


4.注册后端代码

这里才是重点。

整体代码布局如下：





有必要关注一下依赖的.jar包，因为IDEA和Eclipse还是有很大区别的。

Ctrl +Alt +Shift +S 打开管理窗口



1）DBConn工具类——连接数据库

2）pojo

3）dao daoImpl

4）测试

5）Servlet

1）DBConn工具类——连接数据库

package com.hmc.utils;

import java.sql.*;
import java.util.List;

/**
* User:Meice
* 2018/2/22  13:35
*/
public class DBConn {
//加载驱动 获取连接 关闭资源 执行查询  执行增删改

static{
try {
Class.forName("com.microsoft.sqlserver.jdbc.SQLServerDriver");
} catch (ClassNotFoundException e) {
e.printStackTrace();
}
}

//定义获取连接方法getConn()
public static  Connection getConn() {
Connection conn = null;

String url = "jdbc:sqlserver://127.0.0.1:1433;DatabaseName=db_myShop";//jdbc:mysql://localhost:3306/db_myShop
String user = "sa";
String password = "123456";
try {
conn = DriverManager.getConnection(url,user,password);
return conn;
} catch (SQLException e) {
e.printStackTrace();
return null;
}

}

//关闭资源
public static   void closeDB(ResultSet rs, PreparedStatement ps,Connection conn) {
try {
if(rs != null) {rs.close();}
if(ps != null){ps.close();}
if(conn != null){conn.close();}
} catch (SQLException e) {
e.printStackTrace();
}

}

//定义查 返回一个结果集
public static ResultSet getRs(String sql,PreparedStatement ps){
Connection conn = getConn();
try {
ps = conn.prepareStatement(sql);
//调用之前要为sql语句参数赋值  ps.setObject()
ResultSet rs = ps.executeQuery();
return rs;
} catch (SQLException e) {
e.printStackTrace();
return null;
}

}

//定义增删改 方法  Cud()
public static  int Cud(String sql,PreparedStatement ps){
Connection conn = getConn();
try {
//预编译
ps = conn.prepareStatement(sql);
int result =  ps.executeUpdate();
return result;
} catch (SQLException e) {
e.printStackTrace();
return 0;
}

}

public  static int getCud(String sql,Object[] params) {
Connection conn = getConn();
try {
PreparedStatement ps = conn.prepareStatement(sql);
//设置参数
if(params != null){
for(int i=0;i<params.length;i++) {
ps.setObject((i+1),params[i]);
}
}
int result = ps.executeUpdate();
return result;

} catch (SQLException e) {
e.printStackTrace();
return 0;
}

}

//测试
public static void main(String[] args) {
System.out.println(getConn());// 成功！ ConnectionID:1 ClientConnectionId: 032f5ec8-ed9a-41ae-80a2-62742b1f9250

}

}


2）pojo

package com.hmc.pojo;

/**
* User:Meice
* 2018/2/22    13:19
*/
public class Member {
//会员实体类

/**
* userId 主键 递增
userName  手机号 邮箱 账号
userNick
password
phone
email
*/

private int userId;
private String userName;
private String userNick;
private String password;
private String phone;
private String email;

public Member() {}
public Member(int userId,String userName,String userNick,String password,String phone,String email) {
this.userId= userId;
this.userName = userName;
this.userNick = userNick;
this.password = password;
this.phone = phone;
this.email = email;
}

public void setUserId(int userId) {
this.userId = userId;
}
public int getUserId() {
return userId;
}

public void setUserName(String userName) {
this.userName = userName;
}
public String getUserName() {
return userName;
}

public void setUserNick(String userNick) {
this.userNick = userNick;

}

public String getUserNick() {
return userNick;
}

public void setPassword (String password) {
this.password = password;
}
public String getPassword() {
return password;
}

public void setPhone(String phone) {
this.phone = phone;

}
public String getPhone() {
return phone;
}

public void setEmail(String email) {
this.email = email;
}
public String getEmail() {
return email;
}

public String toString() {
return "Member {"+userId + "  "+userName+"  "+userNick+"  "+password+"  "+phone+"  "+email+"  }";
}

}


3）dao

daoImpl

dao

package com.hmc.dao;

import com.hmc.pojo.Member;
import java.util.List;
public interface MemberDao {
//注册会员
int addMember(Member member);
int Cud(String sql,Object[] params);

//会员列表
List<Member> memberList();
//这样写 比较灵活  无论查询列表 还是根据名字查 都可以用
List<Member> memberList(String sql);

}


daoImpl

package com.hmc.dao;

import com.hmc.pojo.Member;
import com.hmc.utils.DBConn;

import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;

/**
* User:Meice
* 2018/2/22  14:52
*/
public class MemberDaoImpl  implements MemberDao {

/**
* 注册 会员

*/
@Override
public int addMember(Member member) {
Connection conn = DBConn.getConn();
String sql = "insert into tb_user (userName,userNick,pwd,phone,email) values(?,?,?,?,?)";
Object[] params = {member.getUserName(),member.getUserNick(),member.getPassword(),member.getPhone(),member.getEmail()};
int result =   DBConn.getCud(sql,params);
return result;
}

@Override
public int Cud(String sql, Object[] params) {
return 0;
}

/**
* 查询会员列表
*/
@Override
public List<Member> memberList() {

List<Member> memberList = new ArrayList<>();
Connection conn = DBConn.getConn();
String sql = "select * from tb_user";
try {
PreparedStatement ps = conn.prepareStatement(sql);
ResultSet rs = DBConn.getRs(sql,ps);
//遍历结果集合
if(rs!= null) {
while(rs.next()) {
Member member = new Member();
member.setUserName(rs.getString("userName"));
member.setUserNick(rs.getString("userNick"));
member.setPassword(rs.getString("pwd"));
member.setPhone(rs.getString("phone"));
member.setEmail(rs.getString("email"));
memberList.add(member);
}
}
return  memberList;

} catch (SQLException e) {
e.printStackTrace();
return null;
}

}

@Override
public List<Member> memberList(String sql) {
List<Member> memberList = new ArrayList<>();
Connection conn = DBConn.getConn();
try {
PreparedStatement ps = conn.prepareStatement(sql);
ResultSet rs = DBConn.getRs(sql,ps);
//遍历结果集合
if(rs!= null) {
while(rs.next()) {
Member member = new Member();
member.setUserName(rs.getString("userName"));
member.setUserNick(rs.getString("userNick"));
member.setPassword(rs.getString("pwd"));
member.setPhone(rs.getString("phone"));
member.setEmail(rs.getString("email"));
memberList.add(member);
}
}
return  memberList;

} catch (SQLException e) {
e.printStackTrace();
return null;
}
}
}


4）测试

package com.hmc.test;

import com.hmc.dao.MemberDao;
import com.hmc.dao.MemberDaoImpl;
import com.hmc.pojo.Member;
import org.junit.Test;

import java.util.List;

/**
* User:Meice
* 2018/2/22  15:16
*/
public class TestMemberDao {
//测试增加会员方法addMember()
MemberDao md = new MemberDaoImpl();
@Test
public void  testAddMember() {
MemberDao md = new MemberDaoImpl();
Member member = new Member(3,"member2","美小","333","15913312156","988@qq.com");
int result =md.addMember(member);
System.out.println(result);//成功！

}

//测试查询会员列表

@Test
public void testMemberList() {
List<Member> memberList = md.memberList();
System.out.println(memberList);//成功！ [Member {0  xiaomei  牙齿笑了  111111  15265888898  1961184526@qq.com  }

}
}


5)Servlet

package com.hmc.servlet;

import com.hmc.dao.MemberDao;
import com.hmc.dao.MemberDaoImpl;
import com.hmc.pojo.Member;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

/**
* User:Meice
* 2018/2/22  15:25
*/

public class AddMemberServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
doPost(req,resp);
}

@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//1.接收用户注册信息
String userName = req.getParameter("userName");
String userNick = req.getParameter("userNick");
String pwd = req.getParameter("pwd");
String phone = req.getParameter("phone");
String email = req.getParameter("email");

//2.调用addMember()方法
Member member = new Member();
member.setUserName(userName);
member.setUserNick(userNick);
member.setPassword(pwd);
member.setPhone(phone);
member.setEmail(email);
System.out.println("会员注册进来了,注册的会员是:"+member);
MemberDao md = new MemberDaoImpl();
int result =    md.addMember(member);

//3.跳转页面
if(result>0){
//注册成功，跳转登录界面,并给提示
resp.getWriter().write("<script>alert('恭喜您！注册成功!')</script>;location.href='loing.jsp'");
}else{
//注册失败，注册界面,并给提示
resp.getWriter().write("<script>alert('遗憾，注册失败，请重新注册');location.href='register.jsp'</script>");
}

}
}


5.总结

PS:各位读者，下午好。昨天一个bug ,今天一个bug，搞得在下很是辛苦。

昨天的bug是因为Eclipse中.js突然打不开了，新建后的样式也不对劲，无论切换工作空间还是重启还是其他方法，搞不定，无奈之下换用IDEA开发；

今天的bug是JDBC连接SQLServer数据库测试没有任何问题，但是一旦访问Servlet，就报错。

java.lang.ClassNotFoundException: com.microsoft.sqlserver.jdbc.SQLServerDriver

java.sql.SQLException: No suitable driver found for jdbc:sqlserver://127.0.0.1:1433;DatabaseName=db_myShop

错误如此简单，已看就明白。问题是我测试没有任何问题，为什么一访问Servlet就有问题？

我重新部署了Tomcat，表明包应该部署到服务器下面了。还是不行。

亲爱的读者朋友，你遇到过第二个问题么？是如何解决的？

好了！再会~
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航