一：采用纯JSP方式完成登录界面
1、创建Web项目LoginDemo
（1）：创建项目

（2）：记得添加Web服务器配置

（3）记得在项目结构窗口里给项目添加Web功能
全部完成如下：

2、在web目录下创建login.jsp页面

并对lojin.jsp进行编写：

3、将login.jsp设置为项目首页文件

4、添加项目对应用服务器库的依赖

5、创建登录处理页面do_login.jsp

6、创建登录成功页面success.jsp

7、创建登录失败页面failure.jsp

8、运行，查看效果。



采用页面重定向，页面跳转利用查询字符串传递数据，会直接显示在浏览器地址栏，
尽量避免这样显示
修改do_login页面的代码：

做完心得：
后面还有两种方式还没有尝试，但是感觉很有意思。

web登录注册页面

项目地址：https://download.csdn.net/download/qq_41505957/14938383

效果图

结构图

Java代码

User.java

存储实体类,User属性有id，name，password三个属性，与数据库中对应。

package com.zhang.dao;

/**
 * @title: User
 * @Author 张宜强
 * @Date: 2021/1/25 18:25
 * @Effect:
 */
public class User {
    String name;
    String id;
    String password;

    public User() {
    }

    public User(String id, String password) {
        this.id = id;
        this.password = password;
    }

    public User(String name, String id, String password) {
        this.name = name;
        this.id = id;
        this.password = password;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getId() {
        return id;
    }

    public void setId(String id) {
        this.id = id;
    }

    public String getPassword() {
        return password;
    }

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

    @Override
    public String toString() {
        return "User{" +
                "name='" + name + '\'' +
                ", id='" + id + '\'' +
                ", password='" + password + '\'' +
                '}';
    }
}

UserMapper.java

UserMapper.java是User类在数据库中的操作的接口，这里我直接用注解完成了。

package com.zhang.mapper;

import com.zhang.dao.User;
import org.apache.ibatis.annotations.Insert;
import org.apache.ibatis.annotations.Select;

import javax.jws.soap.SOAPBinding;

/**
 * @title: UserMapper
 * @Author 张宜强
 * @Date: 2021/1/25 18:04
 * @Effect:
 */
public interface UserMapper {
    @Select("select * from user where id = #{id}")
    User findUserById(String id);

    @Select("select * from user where id = #{id} and password = #{password}")
    User findUser(User user);

    @Insert("insert into user (id,name,password) values (#{id}, #{name}, #{password})")
    void insertUser(User user);
}

IndexServlet.java

IndexServlet.java是对index.jsp中登录按钮进行处理。判断用户的用户名和密码是否正确，如果正确，显示登录成功，如果错误则显示登录失败。

package com.zhang.servlet;

import com.zhang.dao.User;
import com.zhang.mapper.UserMapper;
import com.zhang.util.DButil;
import org.apache.ibatis.session.SqlSession;

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;

/**
 * @title: IndexServlet
 * @Author 张宜强
 * @Date: 2021/1/25 10:28
 * @Effect:
 */
@WebServlet("/IndexServlet")
public class IndexServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //设置编码
        req.setCharacterEncoding("utf-8");
        resp.setContentType("text/html;charset=utf-8");

        String id = req.getParameter("id");
        String pwd = req.getParameter("pwd");
   
        User user = new User(id,pwd);
        SqlSession sqlSession = DButil.getSqlSession();
        UserMapper mapper = sqlSession.getMapper(UserMapper.class);
        User user1 = mapper.findUser(user);
        
        if(user1 == null) resp.getWriter().write("登录失败");
        else resp.getWriter().write("登录成功");
        sqlSession.close();
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        this.doPost(req, resp);
    }

}

RegisterServlet.java

RegisterServlet.java是Register.html对应的Servlet，当密码不一致时，显示密码不一致，对输入的id进行判断，当数据库中有此id时，显示注册失败，账号已存在，如果没有，显示注册成功，在数据库中插入数据。

package com.zhang.servlet;

import com.zhang.dao.User;
import com.zhang.mapper.UserMapper;
import com.zhang.util.DButil;
import org.apache.ibatis.session.SqlSession;

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;

/**
 * @title: RegisterServlet
 * @Author 张宜强
 * @Date: 2021/1/25 17:08
 * @Effect:
 */
@WebServlet("/RegisterServlet")
public class RegisterServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //设置编码
        req.setCharacterEncoding("utf-8");
        resp.setContentType("text/html;charset=utf-8");

        String id = req.getParameter("id");
        String password = req.getParameter("password");
        String surePassword = req.getParameter("surePassword");
        User registerUser = new User(id,password);

        if(password!=surePassword)
            resp.getWriter().write("注册失败，密码不一致");
        SqlSession sqlSession = DButil.getSqlSession();
        UserMapper userMapper = sqlSession.getMapper(UserMapper.class);

        User user = userMapper.findUserById(registerUser.getId());
        System.out.println(user);
        System.out.println(registerUser);
        if(user == null) {
            userMapper.insertUser(registerUser);
            sqlSession.commit();
            resp.getWriter().write("注册成功");
        }else resp.getWriter().write("注册失败，账号已存在");

        sqlSession.close();
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        this.doPost(req, resp);
    }
}

DButil.java

DButil.java是Mybatis的工具类，实现SqlSession的获取

package com.zhang.util;

import org.apache.ibatis.io.Resources;
import org.apache.ibatis.session.SqlSession;
import org.apache.ibatis.session.SqlSessionFactory;
import org.apache.ibatis.session.SqlSessionFactoryBuilder;

import java.io.IOException;
import java.io.InputStream;

/**
 * @title: DButil
 * @Author 张宜强
 * @Date: 2021/1/25 18:43
 * @Effect:
 */
public class DButil {
    static InputStream inputStream = null;
    static {
        try {
            String resource = "mybatis-config.xml";

            inputStream = Resources.getResourceAsStream(resource);

        } catch (IOException e) {
            e.printStackTrace();
        }
    }
    static SqlSessionFactory sqlSessionFactory = new SqlSessionFactoryBuilder().build(inputStream);

    static public SqlSession getSqlSession() {
        return sqlSessionFactory.openSession();
    }

}

xml配置文件

mybatis-config.xml

mybatis-config.xml是mybatis的配置文件，导入db.properties文件。

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE configuration
        PUBLIC "-//mybatis.org//DTD Config 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-config.dtd">

<configuration>
    <!-- 环境配置 -->

    <properties resource="db.properties"></properties>

    <typeAliases>
        <typeAlias alias="User" type="com.zhang.dao.User"/>
    </typeAliases>


    <environments default="development">
        <environment id="development">
            <transactionManager type="JDBC"/>
            <!-- 数据库连接相关配置 ,这里动态获取config.properties文件中的内容-->
            <dataSource type="POOLED">
                <property name="driver" value="${driver}" />
                <property name="url" value= "${url}" />
                <property name="username" value="${username}" />
                <property name="password" value="${password}" />
            </dataSource>
        </environment>
    </environments>
    <!-- mapping文件路径配置 -->
    <mappers>
        <mapper resource="mapper/UserMapper.xml" />
    </mappers>

</configuration>

db.properties

db.properties 是数据库的相关信息。

driver = com.mysql.cj.jdbc.Driver
url = jdbc:mysql://localhost:3306/mybatis?serverTimezone=UTC&characterEncoding=UTF-8&useSSL=false
username = root
password = 123456

web.xml

web.xml中注册RegisterServlet与IndexServlet

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee
                      http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
         version="4.0">
  <display-name>Archetype Created Web Application</display-name>

  <servlet>
    <servlet-name>RegisterServlet</servlet-name>
    <servlet-class>com.zhang.servlet.RegisterServlet</servlet-class>
  </servlet>
  <servlet-mapping>
    <servlet-name>RegisterServlet</servlet-name>
    <url-pattern>/WebStudy2_war/RegisterServlet</url-pattern>
  </servlet-mapping>

  <servlet>
    <servlet-name>IndexServlet</servlet-name>
    <servlet-class>com.zhang.servlet.IndexServlet</servlet-class>
  </servlet>
  <servlet-mapping>
    <servlet-name>IndexServlet</servlet-name>
    <url-pattern>/WebStudy2_war/IndexServlet</url-pattern>
  </servlet-mapping>

</web-app>

html与css

index.jsp

登录页面的界面

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>轩阁书城</title>
    <style>
    @import "css/index.css";
    </style>
</head>
<body>

<p class="b1">web登录注册页面</p>


<div class="box">
    <h2>登录</h2>
    <form action="/WebStudy2_war/IndexServlet">
        <div class="inputBox">
            <input type="text" name="id" required="">
            <label>账号</label>
        </div>
        <div class="inputBox">
            <input type="password" name="pwd" required="">
            <label>密码</label>
        </div>
        <div align="center">
            <input type="submit"  value="登录">

            <a href="html/register.html"><input type="button" value="注册"></a>
            <a href="index.jsp"><input type="reset" value="重置"></a>
        </div>
        <div align="center">
            ${loginErro}
        </div>
    </form>
</div>
</body>
</html>

index.css

登录界面的css样式

body{
    margin:0;
    padding: 0;
    font-family: sans-serif;
    background: url("../resources/login.jpg");
    background-size: cover;
    background-color: rgba(240, 255, 255, 0.5);
}
.box
{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width:400px;
    padding: 40px;
    background:rgba(75, 81, 95, 0.3);
    box-sizing:border-box;
    box-shadow:7px 7px 17px rgba(52, 56, 66, 0.5);
    border-radius: 10px;/*登录窗口边角圆滑*/
}
.box h2
{
    margin:0 0 30px;
    padding:0;
    color:#fff;
    text-align:center;
}
.box .inputBox
{
    position:relative;
}
.box .inputBox input
{
    width: 100%;
    padding: 10px 0;
    font-size: 16px;
    color: #fff;
    letter-spacing: 1px;
    margin-bottom:30px;/*输入框设置*/
    border:none;
    border-bottom:1px solid #fff;
    outline:none;
    background:transparent;
}
.box .inputBox label
{
    position: absolute;
    top: 0;
    left: 0;
    padding: 10px 0;
    font-size: 16px;
    color: #fff;
    pointer-events: none;
    transition: .5s;
}
.box .inputBox input:focus ~ label,
.box .inputBox input:valid ~ label
{
    top: -18px;
    left: 0;
    color: #03a9f4;
    font-size: 12px;
}
.box  input[type="submit"]
{
    background: transparent;
    border: none;
    outline: none;
    color: #fff;
    background: #03a9f4;
    padding: 10px 20px;
    cursor: pointer;
    border-radius: 5px;
}
.box  input[type="reset"]
{
    background: transparent;
    border: none;
    outline: none;
    color: #fff;
    background: #03a9f4;
    padding: 10px 20px;
    cursor: pointer;
    border-radius: 5px;
}
.box  input[type="button"]
{
    background: transparent;
    border: none;
    outline: none;
    color: #fff;
    background: #03a9f4;
    padding: 10px 20px;
    cursor: pointer;
    border-radius: 5px;
}
.b1
{
    color: white;
    font-size: 60px;
    font-family: "楷体";
    font-weight: bold;
    text-align: center;
    margin: 50px;
    padding: 60px;
    text-shadow: aqua 1px 2px 1px;
}

register.html

注册页面的界面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册</title>
    <style>
       @import "../css/register.css";
    </style>
</head>

<body>
<div id="loginDiv">
    <form action="/WebStudy2_war/RegisterServlet">
        <h1>注册</h1>
        <p>用户姓名:<input name="id" type="text" autofocus required><label></label></p>

        <p>用户密码:<input name="password" type="password" required><label></label></p>

        <p>确认密码:<input name="surePassword" type="password" required><label></label></p>

        <p style="text-align: center;">
            <input  type="submit" class="button" value="提交">
            <input type="reset" class="button" value="重置">
        </p>
    </form>

</div>

</body>

register.css

注册页面的css样式

* {
    margin: 0;
    padding: 0;
}

html {
    height: 100%;
    width: 100%;
    overflow: hidden;
    margin: 0;
    padding: 0;
    background: url("../resources/login.jpg") no-repeat 0px 0px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    -moz-background-size: 100% 100%;
}

body {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

#loginDiv {
    width: 37%;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 650px;
    background-color: rgba(75, 81, 95, 0.3);
    box-shadow: 7px 7px 17px rgba(52, 56, 66, 0.5);
    border-radius: 5px;
}

#name_trip {
    margin-left: 50px;
    color: red;
}

p,
.sexDiv {
    margin-top: 10px;
    margin-left: 20px;
    color: azure;
}

.sexDiv>input,
.hobby>input {
    width: 30px;
    height: 17px;
}

input,
select {
    margin-left: 15px;
    border-radius: 5px;
    border-style: hidden;
    height: 30px;
    width: 140px;
    background-color: rgba(216, 191, 216, 0.5);
    outline: none;
    color: #f0edf3;
    padding-left: 10px;
}

.button {
    border-color: cornsilk;
    background-color: rgba(100, 149, 237, .7);
    color: aliceblue;
    border-style: hidden;
    border-radius: 5px;
    width: 100px;
    height: 31px;
    font-size: 16px;
}

.introduce {
    margin-left: 110px;
}

.introduce>textarea {
    background-color: rgba(216, 191, 216, 0.5);
    border-style: hidden;
    outline: none;
    border-radius: 5px;
}

h1 {
    text-align: center;
    margin-bottom: 20px;
    margin-top: 20px;
    color: #f0edf3;
}

b {
    margin-left: 50px;
    color: #FFEB3B;
    font-size: 10px;
    font-weight: initial;
}

1.首先是准备工作，制作好登录界面面板

1. 从左侧元件库拖出一个矩形，w为400，h为500，命名矩形一。
2. 然后在拖出一个矩形，设置w为370，h为70，命名为矩形2，双击矩形框，输入"文字后台管理系统"。
3. 然后复制矩形2两个，分别命名为边框1，边框2，然后在边框1,2中放入两个文本框，w为300，h为35，并为第一个文本框命名为"用户名"，第二个命名为"密码",然后拖入四个图标分别放入边框1,2当中（感叹号命名为清除）。
4. 然后在边框2下方拖入一个主要按钮，最后拖动一个动态面板（这个地方是重点），动态面板分为第三个状态，分别是用户名或密码不正确、请输入登录账号、请输入登录密码，每个状态下放一个矩形，矩形内分别对应状态输入用户名或密码不正确、请输入登录账号、请输入登录密码，最后命名为“”警告提示“”。

第一步如下图：

2.动作交互

2.1 用户名交互设置

2.2 清除交互设置

 2.3 密码交互设置

 2.4 主要按钮交互设置（重点），最后将将清除按钮，警告提示隐藏就可以了。

3.预览一下。

总结：以上就是登录界面的制作，有两个地方需要加深理解，一是动态面板的使用，二是推动弹窗的交互，容易出错。