书城项目
第一阶段:账户注册界面:
用户名 密码 确认密码 邮箱验证 验证码
重置按钮和提交按钮
会判断其格式是否正确 还有输入为空的情况
前端代码
LoginStyle.css
span{
color: red;
}
#login{
background: orange;
}
#reset{
background: orange;
}
登陆界面.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登录</title>
<link rel="stylesheet" href="style/loginStyle.css">
<script src="jquery-1.7.2.js"></script>
<script>
$(function (){
$("#username").blur(function (){
if($("#username").val() == null || $("#username").val() == ""){
$("#usernameError").text("用户名不能为空");
}
else{
$("#usernameError").text("");
}
});
$("#password").blur(function (){
if($("#password").val() == null || $("#password").val() == ""){
$("#passwordError").text("用户名不能为空");
}
else{
$("#passwordError").text("");
}
});
$("#login").click(function (){
if($("#usernameError").val()=="" && $("#passwordError").val()=="") {
alert("正在登录");
}else
{
alert("账号或者密码不能为空");
}
});
});
</script>
</head>
<body>
<form action="LoginServlet" method="post">
<table>
<tr>
<td><t1>登录界面</t1></td>
</tr>
<tr>
<td>用户名:</td>
<td><input type="text" name = "username" id="username"/></td>
<td><span id="usernameError">用户名不能为空</span></td>
</tr>
<tr>
<td>密码:</td>
<td><input type="password" name = "password" id = "password"/></td>
<td><span id = "passwordError">密码不能为空</span></td>
</tr>
<tr>
<td><input type="submit" value="登录" id="login"></td>
<td><input type="reset" value="重置" id="reset"></td>
</tr>
<tr>
<td><a href="注册界面.html">没有账户?点击注册</a> </td>
</tr>
</table>
</form>
</body>
</html>
登陆成功.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登陆成功</title>
</head>
<body>
<span><h1>登陆成功</h1></span>
<a href="登陆界面.html">注销</a>
</body>
</html>
RegistStyle.css
#reset{
background: aqua;
}
#submit{
background: aqua;
}
span{
color: red;
}
注册界面.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>注册</title>
<!--写base标签,永远固定相对路径跳转的结果-->
<!--对应的是webapp目录-->
<script type="text/javascript" src="jquery-1.7.2.js"></script>
<link type="text/css" rel="stylesheet" href="/style/registStyle.css">
<script>
$(function (){
$("#userName").blur(function (){
var userNamePatt = /^\w{5,12}$/;
if($("#userName").val() == null || $("#userName").val() == "")
{$("#userNameError").text("内容不能为空")}
else if(!(userNamePatt.test($("#userName").val()))){
$("#userNameError").text("用户名格式错误");
}else{
$("#userNameError").text("");
}
});
$("#password").blur(function (){
var keywordPatt = /^\w{5,12}$/;
if($("#password").val() == null || $("#password").val() == "")
{$("#passwordError").text("内容不能为空")}
else if(!(keywordPatt.test($("#password").val()))){
$("#passwordError").text("密码格式错误");
}else{
$("#passwordError").text("");
}
});
$("#repw").blur(function (){
if($("#repw").val() == null || $("#repw").val() == "")
{$("#repwError").text("内容不能为空")}
else if($("#password").val() != $("#repw").val()){
$("#repwError").text("与上次密码不相等");
}else{
$("#repwError").text("");
}
});
$("#e-mail").blur(function (){
//邮箱验证:xxxxx@xxx.com
var emailPatt = /^[a-z\d]+(\.[a-z\d]+)*@([\da-z](-[\da-z])?)+(\.{1,2}[a-z]+)+$/;
if($("#e-mail").val() == null || $("#e-mail").val() == "")
{$("#e-maileError").text("内容不能为空")}
else if(!(emailPatt.test($("#e-mail").val()))){
$("#e-mailError").text("邮箱格式错误");
}else{
$("#e-mailError").text("");
}
});
$("#testNum").blur(function () {
if ($("#testNum").val() == null || $("#testNum").val() == "") {
$("#testNumError").text("验证码不能为空");
}else{
$("#testNumError").text("");
}
});
$("#submit").click(function (){
if($("span").text() == "" || $("span").text() == null){
alert("正确,提交中");
}else{
alert("格式错误,无法提交");
}
});
});
</script>
</head>
<body>
<form action="registServlet" method="post">
<table>
<tr>
<td><t1>注册界面</t1></td>
</tr>
<tr>
<td>用户名:</td>
<td> <input type = "text" placeholder="请输入用户名" name="username" id = "userName"/></td>
<td><span id="userNameError">内容不能为空</span></td>
</tr>
<tr>
<td>密码:</td>
<td> <input type = "password" placeholder="请输入密码" name = "password" id="password"/></td>
<td><span id ="passwordError">内容不能为空</span></td>
</tr>
<tr>
<td>确认密码:</td>
<td> <input type = "password" placeholder="请确认密码" name = "repw" id="repw"/></td>
<td><span id = "repwError">内容不能为空</span></td>
</tr>
<tr>
<td>邮箱验证:</td>
<td> <input type = "text" placeholder="请输入邮箱" name = "e-mail" id ="e-mail"/></td>
<td><span id = "e-mailError">内容不能为空</span></td>
</tr>
<tr>
<td>验证码:</td>
<td> <input type = "text" placeholder="请输入验证码" name = "code" id="testNum"/></td>
<td><span id = "testNumError">验证码不能为空</span></td>
</tr>
<tr>
<td><input type="submit" id = "submit" value="注册"></td>
<td><input type="reset" id = "reset" value="重置"></td>
<td><a href="登陆界面.html">已有账户?点击登录</a></td>
</tr>
</table>
</form>
</body>
</html>
注册成功.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>注册成功</title>
</head>
<body>
<span><h1>注册成功!</h1></span>
<a href="登陆界面.html">跳转至登陆界面</a>
</body>
</html>
书城的第二阶段———— 用户的注册与登录
项目阶段二:用户注册和登陆的实现。
需求 1:用户注册
需求如下:
1)访问注册页面
2)填写注册信息,提交给服务器
3)服务器应该保存用户
4)当用户已经存在----提示用户注册 失败,用户名已存在
5)当用户不存在-----注册成功
需求 2:用户登陆
需求如下:
1)访问登陆页面
2)填写用户名密码后提交
3)服务器判断用户是否存在
4)如果登陆失败 —>>>> 返回用户名或者密码错误信息
5)如果登录成功 —>>>>
1.JavaEE项目的三层架构
分层的目的是为了解耦。解耦就是为了降低代码的耦合度。方便项目后期的维护和升级。
web 层
com.zhaochen.web/servlet/controller
service 层
com.zhaochen.service Service 接口包
com.zhaochen.service.impl Service 接口实现类
dao 持久层
com.zhaochen.dao Dao 接口包
com.zhaochen.dao.impl Dao 接口实现类
实体 bean 对象 com.zhaochen.pojo/entity/domain/bean JavaBean 类
测试包 com.zhaochen.test/junit
工具类 com.zhaochen.utils
2.搭建书城项目开发环境:
1、先创建书城需要的数据库和表。
drop database if exists book;
create database book;
use book;
create table t_user(
`id` int primary key auto_increment,
`username` varchar(20) not null unique,
`password` varchar(32) not null,
`email` varchar(200)
);
insert into t_user(`username`,`password`,`email`) values('admin','admin','admin@zhaochen.com');
select * from t_user;
2、编写数据库表对应的 JavaBean 对象
package com.zhaochen.server.impl;
public class user {
private Integer id;
private String username;
private String password;
private String email;
public Integer getId() {
return id;
}
public void setId(Integer 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;
}
@Override
public String toString() {
return "user{" +
"id=" + id +
", username='" + username + '\'' +
", password='" + password + '\'' +
", email='" + email + '\'' +
'}';
}
public user() {
}
public user(Integer id, String username, String password, String email) {
this.id = id;
this.username = username;
this.password = password;
this.email = email;
}
}
3、编写工具类 JdbcUtil
3.1、导入需要的 jar 包(数据库和连接池需要):
3.2、在 src 源码目录下编写 jdbc.properties 属性配置文件:
username=root
password=root
url=jdbc:mysql://localhost:3306/book
driverClassName=com.mysql.jdbc.Driver
initialSize=5
maxActive=10
3.3、编写 JdbcUtils 工具类:
package com.zhaochen.utils;
import com.alibaba.druid.pool.DruidDataSource;
import com.alibaba.druid.pool.DruidDataSourceFactory;
import java.io.InputStream;
import java.sql.Connection;
import java.sql.SQLException;
import java.util.Properties;
public class JdbcUtils {
private static DruidDataSource dataSource;
static{
try {
Properties properties = new Properties();
// 读取 jdbc. properties 属性配置文件
InputStream inputStream = JdbcUtils.class.getClassLoader().getResourceAsStream("jdbc.properties");
// 从流中加载数据
properties.load(inputStream);
// 创建 数据库连接池
dataSource =(DruidDataSource) DruidDataSourceFactory.createDataSource(properties);
} catch (Exception e) {
e.printStackTrace();
}
}
/*
* 获取数据库连接池中的连接
* @return 如果返回null 说明获取连接失败, 有值就是获取连接成功
* */
public static Connection getConnection(){
Connection conn = null;
try {
conn = dataSource.getConnection();
} catch (Exception throwables) {
throwables.printStackTrace();
}
return conn;
}
/*
* 关闭连接,放回数据库连接池
* */
public static void close(Connection conn){
if(conn != null){
try {
conn.close();
} catch (SQLException throwables) {
throwables.printStackTrace();
}
}
}
}
3.4.JdbcuntilsTest
package com.zhaochen.test;
import com.zhaochen.utils.JdbcUtils;
import org.junit.Test;
import java.sql.Connection;
import java.sql.SQLException;
public class jdbcUtilsTest {
@Test
public void testJdbcUtils(){
for (int i = 0; i < 100; i++) {
Connection connection = JdbcUtils.getConnection();
System.out.println(connection);
try {
connection.close();
} catch (SQLException throwables) {
throwables.printStackTrace();
}
}
}
}
4 编写baseDao
package com.zhaochen.dom.impl;
import com.zhaochen.utils.JdbcUtils;
import org.apache.commons.dbutils.QueryRunner;
import org.apache.commons.dbutils.handlers.BeanHandler;
import org.apache.commons.dbutils.handlers.BeanListHandler;
import org.apache.commons.dbutils.handlers.ScalarHandler;
import java.sql.Connection;
import java.sql.SQLException;
import java.util.List;
import java.util.ResourceBundle;
public abstract class BaseDao {
// 使用 JdbcUtils操作数据库
private QueryRunner queryRunner = new QueryRunner();
/*
* update()方法用来执行 insert\update\delete语句
* @return 如果返回-1 说明执行失败 返回其他表示影响的行数
* */
public int update(String sql,Object ... args){
Connection connection = JdbcUtils.getConnection();
try {
return queryRunner.update(connection,sql,args);
} catch (SQLException throwables) {
throwables.printStackTrace();
}
return -1;
}
/***
* 查询返回一个JavaBean的sql语句
* @param type 返回的对象类型
* @param sql 执行的sql语句
* @param args sql对应的参数值
* @param <T> 返回的类型的泛型
* @return
*/
public <T> T queryForOne(Class<T> type ,String sql,Object ... args){
Connection connection = JdbcUtils.getConnection();
try {
return queryRunner.query(connection,sql,new BeanHandler<T>(type),args);
} catch (SQLException throwables) {
throwables.printStackTrace();
} finally {
JdbcUtils.close(connection);
}
return null;
}
/***
* 查询返回多个JavaBean的sql语句
* @param type 返回的对象类型
* @param sql 执行的sql语句
* @param args sql对应的参数值
* @param <T> 返回的类型的泛型
* @return
*/
public <T> List<T> queryForList(Class<T> type , String sql, Object ... args){
Connection connection = JdbcUtils.getConnection();
try {
return queryRunner.query(connection,sql,new BeanListHandler<T>(type),args);
} catch (SQLException throwables) {
throwables.printStackTrace();
} finally {
JdbcUtils.close(connection);
}
return null;
}
/***
* 执行返回一行一列的sql语句
* @param sql 执行的sql语句
* @param args sql对应的参数值
* @return
*/
public Object queryForsingleValue(String sql,Object ... args){
Connection connection = JdbcUtils.getConnection();
try {
return queryRunner.query(connection,sql, new ScalarHandler(),args);
} catch (SQLException throwables) {
throwables.printStackTrace();
}finally {
JdbcUtils.close(connection);
}
return null;
}
}
5 编写UserDao和测试
UserDao接口
package com.zhaochen.dom;
import com.zhaochen.pojo.user;
public interface UserDao {
/***
* 根据用户名查询用户信息
* @param username
* @return 如果返回null 说明没有这个用户 反之亦然
*/
public user queryUserByUserName(String username);
/***
* 根据用户名和密码查询用户信息
* @param username
* @param password
* @return 如果返回null 说明用户名密码错误 反之亦然
*/
public user queryUserByUserNamePassword(String username,String password);
/***
* 保存用户信息
* @param user
* @return 返回-1表示执行失败 其他是sql语句影响的行数
*/
public int saveUser(user user);
}
UserDaoimpl.java
package com.zhaochen.dom.impl;
import com.zhaochen.dom.UserDao;
import com.zhaochen.pojo.user;
public class UserDaoImpl extends BaseDao implements UserDao {
@Override
public user queryUserByUserName(String username) {
String sql = "SELECT `id`,`username`,`password`,`email` FROM `t_user` WHERE `username` = ?";
return queryForOne(user.class,sql,username);
}
@Override
public user queryUserByUserNamePassword(String username, String password) {
String sql = "select `id`,`username`,`password`,`email` from t_user where username = ? and password = ?";
return queryForOne(user.class,sql,username,password);
}
@Override
public int saveUser(user user) {
String sql = "insert into t_user(`username`,`password`,`email`) values(?,?,?)";
return update(sql,user.getUsername(),user.getPassword(),user.getEmail());
}
}
UserDaoTest.java
package com.zhaochen.test;
import com.zhaochen.dom.impl.UserDaoImpl;
import com.zhaochen.pojo.user;
import org.junit.Test;
import static org.junit.Assert.*;
public class UserDaoTest {
UserDaoImpl userDao = new UserDaoImpl();
@Test
public void queryUserByUserName() {
if(userDao.queryUserByUserName("admin1")==null){
System.out.println("用户名可用!");
}else{
System.out.println("用户名已存在");
}
}
@Test
public void queryUserByUserNamePassword() {
if(userDao.queryUserByUserNamePassword("admin","admi1n") == null){
System.out.println("用户名或者密码错误,登陆失败");
}else{
System.out.println("登陆成功");
}
}
@Test
public void saveUser() {
System.out.println(userDao.saveUser(new user(null,"张三","1234","w@qq.com")));
}
}
6 编写userserver和测试
userserver接口
package com.zhaochen.server;
import com.zhaochen.pojo.user;
public interface UserServer {
/***
* 注册用户
* @param user
*/
public void registUser(user user);
/***
* 登录
* @param user
* @return 如果返回为null ,说明登陆失败,返回有值,说明登陆成功
*/
public user login(user user);
/***
* 检查用户名是否可用
* @param username
* @return 返回true表示用户名已存在 或者false表示用户名可用
*/
public boolean existUsername(String username);
}
userServerImpl.java
package com.zhaochen.server.impl;
import com.zhaochen.dao.impl.UserDaoImpl;
import com.zhaochen.pojo.user;
import com.zhaochen.server.UserServer;
public class UserServerImpl implements UserServer {
UserDaoImpl userDao = new UserDaoImpl();
@Override
public void registUser(user user) {
userDao.saveUser(user);
}
@Override
public user login(user user) {
return userDao.queryUserByUserNamePassword(user.getUsername(),user.getPassword());
}
@Override
public boolean existUsername(String username) {
if(userDao.queryUserByUserName(username)==null){
// 等于null 说明没查到,没查到表示可用
return false;
}
return true;
}
}
userServerTest.java
package com.zhaochen.test;
import com.zhaochen.pojo.user;
import com.zhaochen.server.UserServer;
import com.zhaochen.server.impl.UserServerImpl;
import org.junit.Test;
import static org.junit.Assert.*;
public class UserServerTest {
UserServer userServer = new UserServerImpl();
@Test
public void registUser() {
userServer.registUser(new user(null,"bb1","123","ssss"));
userServer.registUser(new user(null,"bb2","1234","tttt"));
userServer.registUser(new user(null,"bb3","12345","dffff"));
}
@Test
public void login() {
if (userServer.login(new user(null,"bb1","123","ssss")) == null){
System.out.println("登陆失败");
}else{
System.out.println("登陆成功");
}
}
@Test
public void existUsername() {
if(userServer.existUsername("张三")){
System.out.println("用户名存在");
}else{
System.out.println("用户名可用");
}
}
}
7、编写 web 层
7.1、实现用户注册的功能
7.1.1、图解用户注册的流程:
7.1.2、修改 注册界面.html 和 注册成功.html
1、添加 base 标签
<!--写 base 标签,永远固定相对路径跳转的结果-->
<base href="http://localhost:8080/book/">
2、修改 base 标签对页面中所有相对路径的影响(浏览器 F12,哪个报红,改哪个)
以下是几个修改的示例:
<link type="text/css" rel="stylesheet" href="static/css/style.css" >
<script type="text/javascript" src="static/script/jquery-1.7.2.js"></script>
3、修改注册表单的提交地址和请求方式
7.1.3、编写 RegistServlet 程序
package com.zhaochen.web;
import com.zhaochen.pojo.user;
import com.zhaochen.server.impl.UserServerImpl;
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 java.io.IOException;
@WebServlet(urlPatterns = "/register")
public class RegistServlet extends HttpServlet {
UserServerImpl userServer = new UserServerImpl();
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//1.获取请求的参数
String username = req.getParameter("username");
String password = req.getParameter("password");
String email = req.getParameter("e-mail");
String code = req.getParameter("code");
//2.检查 验证码是否正确 ---- 要求验证码为abcde
if("abcde".equalsIgnoreCase(code)){
//正确
// 3.检查 用户名是否可用
if(userServer.existUsername(username)){
//不可用
System.out.println("用户名("+username+")已存在!");
// 跳回注册界面
req.getRequestDispatcher("/注册界面.html").forward(req,resp);
}else{
//可用
//调用service 保存到数据库
userServer.registUser(new user(null,username,password,email));
//跳到注册成功的界面 注册成功.html
req.getRequestDispatcher("/注册成功.html").forward(req,resp);
}
}else{
//不可用
//跳回注册界面
System.out.println("验证码("+code+")错误");
req.getRequestDispatcher("/注册界面.html").forward(req,resp);
}
}
}
7.2.idea中debug调式的使用
7.2.1 debug调试代码,首先需要两个元素:断点+debug启动服务器
1.断点:只需要在代码需要停的行的左边上单击,就可以添加和取消
2.Debug启动Tomcat运行代码
昆虫:debug启动tomcat
7.2.2调式工具栏:
:让代码往下执行一行
:可以进入当前方法体内(自己写的代码,非其他框架源码)
:跳出当前方法体外,
:强制进入当前方法体内
:停在光标所在行(相当于临时断点)
7.2.3变量窗口
变量窗口:它可以查看当前范围内所有有效的变量
7.2.4 方法调用栈窗口
1.方法调用栈可以查看当前线程有哪些方法调用信息
2.下面的调用上一行的方法
其他常用调试相关按钮:
:停止调试(停服务器)
:程序一直跑,直到下一个断点停下来,如果没有断点,就一直往下走
:临时禁用所有断点
7.3 用户登录功能的实现
LoginServlet.java类
package com.zhaochen.web;
import com.zhaochen.pojo.user;
import com.zhaochen.server.impl.UserServerImpl;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
public class LoginServlet extends HttpServlet {
private UserServerImpl userServer = new UserServerImpl();
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
// 1. 获取请求的参数
String username = req.getParameter("username");
String password = req.getParameter("password");
// 2. 调用xxxServer.xxx()处理业务
// userService.login() 登录
user loginUser = userServer.login(new user(null, username, password, null));
// 3.根据login()方法返回结果判断登录是否成功
if(loginUser == null){
//如果返回值为null 说明登陆失败
// 失败
// 跳到登录界面 登陆界面.html
System.out.println("用户名或密码错误,登陆失败");
req.getRequestDispatcher("/登陆界面.html").forward(req,resp);
}else{
//成功
//跳到成功界面 注册成功.html
System.out.println("登陆成功");
req.getRequestDispatcher("/登陆成功.html").forward(req,resp);
}
}
}
书城项目第三阶段
a)页面jsp动态化
1、在 html 页面顶行添加 page 指令。
2、修改文件后缀名为:.jsp
3、使用 IDEA 搜索替换.html 为.jsp(快捷键:Ctrl+Shift+R)
b)抽取页面中相同的内容
1.head中的css,jq,base标签
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
String basePath = request.getScheme()
+"//"+request.getServerName()
+":"
+ request.getServerPort()
+request.getContextPath()
+"/";
%>
<%= basePath%>
<!--写base标签,永远固定相对路径跳转的结果-->
<!--对应的是webapp目录-->
<base href="<%=basePath%>>">
<link rel="stylesheet" href="../static/style/loginStyle.css">
<script src="../static/jquery-1.7.2.js"></script>
2.每个页面的页脚
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<br/>
赵宸书城@2021
3.登陆后成功的菜单
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<div>
<% application.setAttribute("username",request.getParameter("username"));%>
<span>欢迎<%= application.getAttribute("username")%>光临书城</span>
<a href="../order/order.jsp">订单</a>
<a href="../cart/cart.jsp">购物车</a>
<a href="../page/user/登陆界面.jsp">注销</a>
</div>
4.manger模块的菜单
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<div>
<a href="book_manager.jsp">图书管理</a>
<a href="order_manager.jsp">订单管理</a>
<a href="../../index.jsp">返回商城</a>
</div>
c)登陆,注册错误提示,及表单回显
前后端互传信息使用request域对象
loginServlet.java
package com.zhaochen.web;
import com.zhaochen.pojo.user;
import com.zhaochen.server.impl.UserServerImpl;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
public class LoginServlet extends HttpServlet {
private UserServerImpl userServer = new UserServerImpl();
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
// 1. 获取请求的参数
String username = req.getParameter("username");
String password = req.getParameter("password");
// 2. 调用xxxServer.xxx()处理业务
// userService.login() 登录
user loginUser = userServer.login(new user(null, username, password, null));
// 3.根据login()方法返回结果判断登录是否成功
if(loginUser == null){
//如果返回值为null 说明登陆失败
// 失败
// 把错误信息,和回复信息保存到request域中
req.setAttribute("errorInformation","username error or password error");
req.setAttribute("unOrPswError","username error or password error");
req.setAttribute("msg","用户名密码或者错误");
req.setAttribute("username",username);
// 跳到登录界面 login.jsp
System.out.println("用户名或密码错误,登陆失败");
req.getRequestDispatcher("login.jsp").forward(req,resp);
}else{
//成功
//跳到成功界面 regist_success.jsp
System.out.println("登陆成功");
req.getRequestDispatcher("login_successs.jsp").forward(req,resp);
}
}
}
login.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登录</title>
<%@include file="../common/head.jsp"%>
<script type="text/javascript" src="/static/script/jquery-1.7.2.js"></script>
<script>
$(function (){
$("#username").blur(function (){
if($("#username").val() == null || $("#username").val() == ""){
$("#usernameError").text("用户名不能为空");
}
else{
$("#usernameError").text("");
}
});
$("#password").blur(function (){
if($("#password").val() == null || $("#password").val() == ""){
$("#passwordError").text("用户名不能为空");
}
else{
$("#passwordError").text("");
}
});
$("#login").click(function (){
if($("#usernameError").val()=="" && $("#passwordError").val()=="")
{
alert("正在登录");
if('${requestScope.errorInformation}' == '${requestScope.unOrPswError}'){
alert("用户名或密码错误,为您返回登录界面");
}
}
else
{
alert("账号或者密码不能为空");
}
});
});
</script>
</head>
<body>
<form action="LoginServlet" method="post">
<table>
<tr>
<td><t1>登录界面</t1></td>
</tr>
<tr>
<td>用户名:</td>
<td><input type="text" name = "username" id="username"/></td>
<td><span id="usernameError">用户名不能为空</span></td>
</tr>
<tr>
<td>密码:</td>
<td><input type="password" name = "password" id = "password"/></td>
<td><span id = "passwordError">密码不能为空</span></td>
</tr>
<tr>
<td><input type="submit" value="登录" id="login"></td>
<td><input type="reset" value="重置" id="reset"></td>
</tr>
<tr>
<td><a href="regist.jsp">没有账户?点击注册</a> </td>
</tr>
</table>
<%@include file="../common/footer.jsp"%>
</form>
</body>
</html>
js如何获取request域对象中的数据
'${requestScope.errorInformation}' == '${requestScope.unOrPswError}'