Web+Tomcat+Servlet+MySQL实现登录页面【JavaWeb笔记一】

目录

功能描述:

实现框图:

具体实现过程

一、环境搭建

服务器环境搭建:

页面部分环境搭建:

数据库部分环境搭建:

二、代码实现过程

1、创建一个带表单提交的 html 页面(login.html)

2、在 web.xml 文件下绑定 Servlet 的对象类

3、创建 java (LoginServer.java) 类来执行 Servlet 操作

4、jdbc 完成数据库部分操作 (Demo.java)

5、通过测试 @Test 完成数据库的连接测试  


功能描述:

网页登录模块,页面有表单验证,后台连接数据库真实判断, 跳转到不同页面给用户提示(页面如下图)

 

实现框图:

网页登录->访问服务器->查询数据库->返回结果->页面显示登陆结果(实现框图如下图)

 

具体实现过程

 

一、环境搭建

服务器环境搭建:

【本项目基于IDEA+Tomcat】所以需要在IEDA上配置Tomcat:

Run > Edit Configurations > Application server : 配置 Tomcat 服务器

 

页面部分环境搭建:

1、创建的是JavaEE项目 > Additional Libraries and Frameworks : 勾选Web Application

2、WEB-INF 下创建 classes(用于放置之后生成的字节文件)

                 File > Project Structure > Modules > Path >选择输出路径 Use module compile output path

                 lib(用于存放之后项目需要用到的依赖包)

                 File > Project Structure > Modules > Dependencies > + (指定当前目录下的lib) > jar directory

3、后面连接数据库,需要将jdbc的驱动(依赖jar包),放到次目录下(web/WEB-INF/lib)

 

数据库部分环境搭建:

1、为了完成数据库操作,需要引入测试 @Test 来测试数据库操作是否正常

创建一个 test 文件夹,并将其转换为测试文件夹 右键: > Mark Directory as > Test Sources Root

2、创建一个lib文件夹 用于存放依赖包

3、引入依赖包:①junit-4.8.jar  ②mysql-connector-java-5.1.37-bin.jar

File > Project Structure > Libraines > + (选择当前项目文件夹)> + (classes) 导入lib下的 junit 和 mysql-connector > 不加载modules

File > Project Structure > Modules > Path > Dependencies > + > 2 Library > java > 选择当前项目文件夹

 

二、代码实现过程

1、创建一个带表单提交的 html 页面(login.html)

 <form action="/login" method="post"> 提交跳转到/login  请求方法为Post

~/web/login.html

<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <style>
        * {margin: 0px;padding: 0px;}
        #box {width: 500px;height: 250px;background-color: antiquewhite;position: absolute;left: 50%;top: 50%;margin: -125px -250px;}
        h1 {width: 500px;height: 100px;background-color: aqua;display: table-cell;vertical-align: middle;text-align: center;}
        .title{position: relative;top: 20px;left: 40px;font-weight: 1000;}
        .res{position: relative;top: 20px;left: 60px;}
        .text{position: relative;top: 20px;left: 90px;font-size: 12px;color:grey;}
        .reset{position: relative;top: 20px;left: 150px;font-size: 20px;}
        .submit{position: relative;top: 20px;left: 200px;font-size: 20px;}
    </style>
</head>

<body>
<div id="box">
    <h1>登录模块</h1>
    <form action="/login" method="post">
        <span class="title">Username</span><input type="text" name="username" class="res"><span class="text">请输入用户名称</span><br /><br />
        <span class="title">Password</span><input type="password" name="password" class="res"><span class="text">请输入账户密码</span><br /><br />
        <input type="reset" value="重置" class="reset">
        <input type="submit" value="登录" class="submit">
    </form>
</div>
</body>

 

2、在 web.xml 文件下绑定 Servlet 的对象类

~/web/WEB-INF/web.xml

<servlet>
    <servlet-name>login</servlet-name>                      <!-- 绑定对象的名字 -->
    <servlet-class>com.yuyu.LoginServer</servlet-class>     <!-- 对应绑定的 Servlet 对象 -->
</servlet>
<servlet-mapping>
    <servlet-name>login</servlet-name>                      <!-- 绑定对象的名字 -->
    <url-pattern>/login</url-pattern>                       <!-- 页面表单提交的跳转对象 -->
</servlet-mapping>

 

3、创建 java (LoginServer.java) 类来执行 Servlet 操作

public class LoginServer extends HttpServlet{}     继承 HTTPServlet 来重载 Servlet中的方法

~/src/com/yuyu/web/LoginServer.java

public class LoginServer extends HttpServlet {
    //数据库操作对象
    Demo1 demo1 = new Demo1();

    /**
     * 处理 Get 方法
     * @param req   请求对象
     * @param resp  响应对象
     */
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //处理Get方法
        //Get方法登录时直接跳转到loginError页面
        //req.getRequestDispatcher("loginError.html").forward(req,resp);
        //由后台给前台返回一段js代码
        resp.setContentType("text/html;charset=utf-8");
        PrintWriter writer = resp.getWriter();
        writer.print("<script>alert('请通过表单进行登录');location.href='/login.html'</script>");
    }

    /**
     * 处理 Post 方法
     * @param req     请求对象
     * @param resp    响应对象
     */
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //处理Post方法
        //处理编码问题
        req.setCharacterEncoding("utf-8");
        //1、接收参数     根据参数得到前端请求的内容
        String username = req.getParameter("username");
        String password = req.getParameter("password");
        System.out.println("username="+username+",password="+password);
        //2、跳转页面测试
        Person person = null;
        try {
            //通过得到的内容查询数据库,如果能查询到结果则返回一个person对象,查不到返回 null
            person = Demo1.selectPerson(username,password);
        } catch (Exception e) {
            e.printStackTrace();
        } 
        // 非空则说明查询到了对象 直接跳转到相应界面
        if (person != null) {
            //跳转到 success.html 显示登陆成功的页面
            req.getRequestDispatcher("/success.html").forward(req, resp);
        }else {
            //跳转到 error.html 显示登陆失败的页面
            req.getRequestDispatcher("/error.html").forward(req, resp);
        }
    }

    @Override
    public void destroy() {
        System.out.println("销毁方法");
    }

    @Override
    public void init() throws ServletException {
        System.out.println("初始化");
    }
}

 

4、jdbc 完成数据库部分操作 (Demo.java)

使用 jdbc 操作数据库的必要步骤:

 //1. 加载数据库驱动
Class.forName("com.mysql.jdbc.Driver");
//2. 通过驱动管理器,获取JDBC的连接对象
//   连接地址格式:
//      主协议:子协议://ip地址:端口号/数据库名称
//      mysql(的格式): [jdbc:mysql://localhost:3306/users(useUnicode=true&characterEncoding=utf-8)[加上编码]]
Connection conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/users?useUnicode=true&characterEncoding=utf-8","root","123465");
//3. 通过连接对象,创建SQL执行对象(SQL执行环境)
Statement state = conn.createStatement();
//4. 通过SQL执行对象,执行SQL
//excute()增删改查都能执行,有返回值:真假
// 但返回值true代表有结果集返回,假为返回不是结果集(不是执行失败)
state.execute("create table person(id int primary key auto_increment,username varchar(20),password varchar(20))");
//state.executeUpdate();执行增删改
//state.executeQuery();执行查询
//5. 释放连接
state.close();
conn.close();

 

创建表格:

~/src/com/yuyu/dao/Demo1.java

创建表格:
public static void createTable() throws ClassNotFoundException, SQLException {
    //1. 加载数据库驱动
    Class.forName("com.mysql.jdbc.Driver");
    //2. 通过驱动管理器,获取JDBC的连接对象
    Connection conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/users?useUnicode=true&characterEncoding=utf-8","root","123465");
    //3. 通过连接对象,创建SQL执行对象(SQL执行环境)
    Statement state = conn.createStatement();
    //4. 通过SQL执行对象,执行SQL
    state.execute("create table person(id int primary key auto_increment,username varchar(20),password varchar(20))engine=innodb default charset=utf8");
    //5. 释放连接
    state.close();
    conn.close();
}

 

插入数据:

public static void insertData() throws ClassNotFoundException, SQLException {
    Class.forName("com.mysql.jdbc.Driver");
    Connection conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/usersuseUnicode=true&characterEncoding=utf-8","root","123465");
    Statement state = conn.createStatement();
    state.execute("insert into person values(null,'123','123')");
    state.execute("insert into person values(null,'456','456')");
    state.execute("insert into person values(null,'789','789')");
    state.execute("insert into person values(null,'000','000')");
    state.close();
    conn.close();
}

 

查询数据:返回一个person对象,用于 Servlet 响应请求

public static Person selectPerson(String username,String password) throws ClassNotFoundException, SQLException {
    Class.forName("com.mysql.jdbc.Driver");
    Connection conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/users?useUnicode=true&characterEncoding=utf-8","root","123465");
    Statement state = conn.createStatement();
    //查询结果返回的是一个结果集
    ResultSet res = state.executeQuery("select * from person where username='" + username + "' and password='" + password + "'");
    int id = 0;
    String usernameCheck = null;
    String passwordCheck = null;
    Person person = null;
    while (res.next()){
        id = res.getInt("id");
        usernameCheck = res.getString("username");
        passwordCheck = res.getString("password");
        System.out.println("有此用戶:id="+id+";username="+usernameCheck+";password="+passwordCheck);
        person = new Person(id,usernameCheck,passwordCheck);
    }
    res.close();
    state.close();
    conn.close();
    return person;
}

 

5、通过测试 @Test 完成数据库的连接测试  

Ctrl + shift + T 创建测试类  (在 test 目录下的 Demo1Test.java)

~/test/com/yuyu/dao/Demo1Test.java

public class Demo1Test {

    @Test
    public void createTable() throws SQLException, ClassNotFoundException {
        Demo1.createTable();
    }

    @Test
    public void insertData() throws SQLException, ClassNotFoundException {
        Demo1.insertData();
    }

    @Test
    public void selectPerson() throws SQLException, ClassNotFoundException {
        Demo1.selectPerson("123","123");
    }
}

 

  • 3
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值