javaweb学习项目书城项目【正在写】

最新推荐文章于 2021-12-15 16:08:43 发布

Seele-Vollerei

最新推荐文章于 2021-12-15 16:08:43 发布

阅读量356

点赞数 2

分类专栏：项目文章标签： html javascript css jquery jdbc

本文链接：https://blog.csdn.net/weixin_45228360/article/details/120133016

版权

项目专栏收录该内容

4 篇文章 0 订阅

订阅专栏

书城项目

第一阶段：账户注册界面：
书城的第二阶段———— 用户的注册与登录
书城项目第三阶段

第一阶段：账户注册界面：

用户名密码确认密码邮箱验证验证码
重置按钮和提交按钮

会判断其格式是否正确还有输入为空的情况

前端代码

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);
         }



    }
}

<%@ 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}'

Seele-Vollerei

关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
javaweb学习项目书城项目【正在写】

第一阶段：账户注册界面：用户名密码确认密码邮箱验证验证码重置按钮和提交按钮会判断其格式是否正确还有输入为空的情况style.css#reset{ background: aqua;}#submit{ background: aqua;}span{ color: red;}书城项目.html：<!DOCTYPE html><html lang="en"><head> <meta charset=
复制链接

扫一扫