web登入注冊頁面

- web登入注冊頁面
- - 效果圖
  - 結構圖
  - Java代碼
  - - User.java
    - UserMapper.java
    - IndexServlet.java
    - RegisterServlet.java
    - DButil.java
  - xml配置檔案
  - - mybatis-config.xml
    - db.properties
    - web.xml
  - html與css
  - - index.jsp
    - index.css
    - register.html
    - register.css

文章目錄

- web登入注冊頁面
- - 效果圖
  - 結構圖
  - Java代碼
  - - User.java
    - UserMapper.java
    - IndexServlet.java
    - RegisterServlet.java
    - DButil.java
  - xml配置檔案
  - - mybatis-config.xml
    - db.properties
    - web.xml
  - html與css
  - - index.jsp
    - index.css
    - register.html
    - register.css

web登入注冊頁面

項目位址：https://download.csdn.net/download/qq_41505957/14938383

效果圖

web登入注冊頁面

結構圖

web登入注冊頁面

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" target="_blank" rel="external nofollow" ><input type="button" value="注冊"></a>
            <a href="index.jsp" target="_blank" rel="external nofollow" ><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;
}

web登入注冊頁面

目錄

文章目錄

web登入注冊頁面

效果圖

結構圖

Java代碼

User.java

UserMapper.java

IndexServlet.java

RegisterServlet.java

DButil.java

xml配置檔案

mybatis-config.xml

db.properties

web.xml

html與css

index.jsp

index.css

register.html

register.css

繼續閱讀

python學習——阿裡雲天池龍珠計劃（python訓練營）——task01注釋運算符位運算條件語句循環語句for循環異常處理結尾

天池龍珠金融風控訓練營Task04學習筆記前言學習知識點概要學習内容學習問題與解答學習思考與總結

2021-09-301、Ubuntu18.04安裝Google浏覽器2、待定

（Nginx）03_Nginx原理與優化一、Nginx原理二、master-workers機制三、面試題：

（Nginx）02_Nginx配置執行個體一、Nginx的應用：反向代理實作一：二、反向代理執行個體二：三、Nginx的配置執行個體三–負載均衡：四、Nginx的配置執行個體四–動靜分離：Nginx在實際開發中的應用：

nginx配置示例

2022秋招面試記錄與反思

《斷舍離》讀後感

unity中實作背景滾動

指令行和環境變量

Android記事本（附apk和源碼）

現國内基金定投最好的入門書《指數基金投資指南》

【人工智能行業大師訪談1】吳恩達采訪 Geoffery Hinton

線程同步，可重入鎖，synchronized

對象鎖和全局鎖

iview背景管理模版