記事ディレクトリ

序文
- なぜ書くのですか？
- ディレクトリ構造
1 依存関係の構成
2 Mybatis の設定
3 Tomcat の設定
4 サーブレットクラス
- 4.1 loginServlet01
- 4.2 registerRequest01
5 静的ページコード
6 エフェクト
7 静的ページのソース

序文

なぜ書くのですか？

これは、登録とログインのみで構成される非常に単純なプロジェクトであることを説明することから始めます。

そんな単純なプロジェクト、私は軽蔑する、と言う人もいます。本当！一部の専門家にとって、この小さなことは単なる霧雨です。

しかし、初心者にとっては、Mybatis+Servlet+Mysql をシンプルで使いやすいプロジェクトに統合する良い機会です。

学んだことを適用してください。この記事は、以前の一連の記事が適格かどうかをテストすることを目的としています。結果は次のとおりです。

理論が強すぎて、実践が散らかっているので、この記事を通じて、実践の利便性を強化します

ディレクトリ構造

ここに画像の説明を挿入

1 依存関係の構成

1.1 Web プロジェクトを作成する

そうでない場合は、この記事を読むことができます http://t.csdn.cn/UahZN

1.2 依存性要件の分析

Mybatis+Servlet は明らかに 2 つの依存関係を使用する必要があります. Mybatis はデータベースに接続する必要があるため、データベースの依存関係が必要であり、データベースにはエンティティクラスが必要です. 開発を容易にするために、Lombok の依存関係が導入されています. 単体テストを使用するには、junit の依存関係も導入する必要があります。

したがって、合計要件は次のとおりです。

私の靴
サーブレット
mysql
ロンボク
ジュニット

1.3 pom.xml

<?xml version="1.0" encoding="UTF-8"?>

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
  <modelVersion>4.0.0</modelVersion>

  <groupId>com.you</groupId>
  <artifactId>JavaWeb-Demo-06</artifactId>
  <version>1.0-SNAPSHOT</version>
  <packaging>war</packaging>

  <name>JavaWeb-Demo-06 Maven Webapp</name>
  <!-- FIXME change it to the project's website -->
  <url>http://www.example.com</url>

  <properties>
    <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
    <maven.compiler.source>1.7</maven.compiler.source>
    <maven.compiler.target>1.7</maven.compiler.target>
  </properties>

  <dependencies>
    <dependency>
      <groupId>junit</groupId>
      <artifactId>junit</artifactId>
      <version>4.11</version>
      <scope>test</scope>
    </dependency>
    <!--引入mybatis的依赖-->
    <dependency>
      <groupId>org.mybatis</groupId>
      <artifactId>mybatis</artifactId>
      <version>3.5.7</version>
    </dependency>
    <!--引入Lombok的依赖-->
    <dependency>
      <groupId>org.projectlombok</groupId>
      <artifactId>lombok</artifactId>
      <version>1.18.24</version>
    </dependency>
    <!--引入Servlet的依赖-->
    <dependency>
      <groupId>javax.servlet</groupId>
      <artifactId>javax.servlet-api</artifactId>
      <version>3.1.0</version>
      <scope>provided</scope>
    </dependency>
    <!--引入Mysql的依赖-->
    <dependency>
      <groupId>mysql</groupId>
      <artifactId>mysql-connector-java</artifactId>
      <version>8.0.30</version>
    </dependency>
  </dependencies>

  <build>
    <finalName>JavaWeb-Demo-06</finalName>
    <pluginManagement><!-- lock down plugins versions to avoid using Maven defaults (may be moved to parent pom) -->
      <plugins>
        <plugin>
          <artifactId>maven-clean-plugin</artifactId>
          <version>3.1.0</version>
        </plugin>
        <!-- see http://maven.apache.org/ref/current/maven-core/default-bindings.html#Plugin_bindings_for_war_packaging -->
        <plugin>
          <artifactId>maven-resources-plugin</artifactId>
          <version>3.0.2</version>
        </plugin>
        <plugin>
          <artifactId>maven-compiler-plugin</artifactId>
          <version>3.8.0</version>
        </plugin>
        <plugin>
          <artifactId>maven-surefire-plugin</artifactId>
          <version>2.22.1</version>
        </plugin>
        <plugin>
          <artifactId>maven-war-plugin</artifactId>
          <version>3.2.2</version>
        </plugin>
        <plugin>
          <artifactId>maven-install-plugin</artifactId>
          <version>2.5.2</version>
        </plugin>
        <plugin>
          <artifactId>maven-deploy-plugin</artifactId>
          <version>2.8.2</version>
        </plugin>
      </plugins>
    </pluginManagement>
  </build>
</project>

2 Mybatis の設定

私自身の記事「Mybatis のクイックスタート」http://t.csdn.cn/3SXlb「Mybatis エージェントの開発」http://t.csdn.cn/Bt8Xiを参照してください。

2.1 mybatis-config.xml

mybatis-config 構成には、主に次の 2 つのポイントが含まれます。

**データベース構成:** データベース名、JDBC、データベースのユーザー名とパスワード
Mapper: Mybatis に Mapper.xml を見つけさせる

<?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>
    <environments default="development">
        <environment id="development">
            <transactionManager type="JDBC"/>
            <dataSource type="POOLED">
                <property name="driver" value="com.mysql.cj.jdbc.Driver"/>
                <property name="url" value="jdbc:mysql://localhost:3306/us80?useSSL=false&amp;serverTimezone=UTC"/>
                <property name="username" value="root"/>
                <property name="password" value="200201203332"/>
            </dataSource>
        </environment>
    </environments>

    <mappers>
        <package name="com/you/Mapper"/>
    </mappers>
</configuration>

2.2 UserMapper.xml

この知識ポイントが見落とされており、注釈を使用して SQL ステートメントを構成する場合でも、インターフェイスバインディングが必要であることに気付きませんでした。

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
        PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.you.Mapper.UserMapper">

</mapper>

2.3 UserMapper.interface

package com.you.Mapper;

import com.you.Dept.User;
import org.apache.ibatis.annotations.Insert;
import org.apache.ibatis.annotations.Param;
import org.apache.ibatis.annotations.Select;

import java.util.List;

public interface UserMapper {
    
    
    @Select("select * from user where user_name = #{user_name} and user_pwd = #{user_pwd}")
    public User selectUserByInfo(@Param("user_name") String user_name,@Param("user_pwd") String user_pwd);
    @Select("select * from user")
    public List<User> queryAllUsers();
    @Insert("insert into user values(null,#{user_name},#{user_pwd},#{user_emil})")
    public boolean registerUser(@Param("user_name") String user_name,@Param("user_pwd") String user_pwd,@Param("user_emil") String user_emil);
}

3 Tomcat の設定

私の記事「アイデア統合Tomcat」http://t.csdn.cn/6Uma5を参照してください

4 サーブレットクラス

4.1 loginServlet01

ログイン機能を扱う際の注意点は以下の通りです。

JavaWeb_Demo_06_warは独自の仮想ディレクトリであり、誰もが異なる方法で構成します。
Mybatis の短所: データベースとやり取りするときにデータベースに再接続する必要がある
データ取得要求時のエンコーディングはUTF-8にしてください。そうしないと文字化けします

package com.you.request;

import com.you.Dept.User;
import com.you.Mapper.UserMapper;
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 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;
import java.io.InputStream;
import java.io.PrintWriter;
import java.util.Timer;
import java.util.TimerTask;

@WebServlet(urlPatterns = "/login")
public class loginRequset01 extends HttpServlet {
    
    
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    
    
        /* 1、获取携带的用户名和密码 */
        System.out.println("进来！！！");
        req.setCharacterEncoding("UTF-8");
        String username = req.getParameter("username");
        String password = req.getParameter("password");
        System.out.println("用户名:"+username);
        System.out.println("密码:"+password);

        String resource = "mybatis-config.xml";
        InputStream inputStream = null;

        inputStream = Resources.getResourceAsStream(resource);

        SqlSessionFactory sqlSessionFactory = new SqlSessionFactoryBuilder().build(inputStream);

        SqlSession sqlSession = sqlSessionFactory.openSession();

        UserMapper mapper = sqlSession.getMapper(UserMapper.class);
        User user1 = mapper.selectUserByInfo(username,password);
        resp.setContentType("text/html;charset=UTF-8");

        PrintWriter writer = resp.getWriter();

        if(user1!=null)
        {
    
    
            resp.sendRedirect("/JavaWeb_Demo_06_war/index.html");

        }else{
    
    
            resp.sendRedirect("/JavaWeb_Demo_06_war/errorPage.html");
        }
    }

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

4.2 registerRequest01

登録された関数を扱うときの注意点:

データベースを変更 (更新、挿入) する場合は、有効にするために送信 (コミット) する必要があります

package com.you.request;

import com.you.Dept.User;
import com.you.Mapper.UserMapper;
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 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;
import java.io.InputStream;
import java.io.PrintWriter;
@WebServlet("/registerRequest01")
public class registerRequest01 extends HttpServlet {
    
    
    @Override
    protected void doGet(final HttpServletRequest req, final HttpServletResponse resp) throws ServletException, IOException {
    
    
        /* 1、获取携带的用户名、密码、邮箱 */
        req.setCharacterEncoding("UTF-8");
        String username = req.getParameter("username");
        String password = req.getParameter("password");
        String useremail = req.getParameter("useremail");


        /* 2、连接数据库 */
        String resource = "mybatis-config.xml";
        InputStream inputStream = null;
        inputStream = Resources.getResourceAsStream(resource);
        SqlSessionFactory sqlSessionFactory = new SqlSessionFactoryBuilder().build(inputStream);
        SqlSession sqlSession = sqlSessionFactory.openSession();
        /* 3、执行SQL语句 */
        UserMapper mapper = sqlSession.getMapper(UserMapper.class);
        boolean user = mapper.registerUser(username, password, useremail);

        resp.setContentType("text/html;charset=UTF-8");

        PrintWriter writer = resp.getWriter();

        if(user!=false)
        {
    
    
            sqlSession.commit();
            resp.sendRedirect("/JavaWeb_Demo_06_war/transmitPage.html");

        }else{
    
    


        }
    }

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

5 静的ページコード

5.1 HTML

5.1.1 ログイン

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <title>游坦之</title>
    <link rel="stylesheet" href="css/style.css">
</head>

<body>
<div class="login-page">
    <div class="form">
        <form class="register-form" method="post" action="/JavaWeb_Demo_06_war/registerRequest01">
            <input placeholder="用户名" name="username">
            <input type="password" placeholder="密码" name="password">
            <input placeholder="邮箱" name="useremail">
            <button>注册</button>
            <p class="message">已有账号? <a href="javascript:">立即登录</a></p>
        </form>
        <form class="login-form" method="post" action="/JavaWeb_Demo_06_war/login">
            <input placeholder="用户名" name="username">
            <input type="password" placeholder="密码" name="password">
            <button>登录</button>
            <p class="message">还没有账号？<a href="javascript:">立即注册</a></p>
        </form>
    </div>
    

</div>
<script src="js/jquery.min.js"></script>
<script src="js/index.js"></script>

</body>

</html>

5.1.2 送信ページ

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div>
        注册成功...
        <span id="time">3</span>
       s后自动跳转至登录页面
    </div>
</body>
<script src="js/transmitPage.js"></script>
</html>

5.1.3 索引

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="css/index.css">
</head>

<body>
  <header class="contanier hd">
    <img src="./image/博文尚美首页_slices/logo.png" alt="">
    <ul>
      <li>HOME </li>
      <li>ABOUT </li>
      <li>PROTFOLIO</li>
      <li>SERVICE</li>
      <li>NEWS</li>
      <li>CONTACT</li>
    </ul>
  </header>
  <div class="swiper-contianer">
    <ul>
      <li><img src="./image/banner.png" alt=""></li>
    </ul>
    <ol>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ol>
  </div>
  <div class="services contanier">
    <h2>服务范围</h2>
    <p class="text">OUR SERVICES</p>
    <div class="serList">
      <ul>
        <li>
          <img src="./image/博文尚美首页_slices/mail1.png" alt="">
          <p>1.web design</p>
          <p>企业品牌网站设计/手机网站制作<br />动画网站创意设计</p>
        </li>
        <li>
          <img src="./image/博文尚美首页_slices/mail1.png" alt="">
          <p>1.web design</p>
          <p>企业品牌网站设计/手机网站制作<br />动画网站创意设计</p>
        </li>
        <li>
          <img src="./image/博文尚美首页_slices/mail1.png" alt="">
          <p>1.web design</p>
          <p>企业品牌网站设计/手机网站制作<br />动画网站创意设计</p>
        </li>
        <li>
          <img src="./image/博文尚美首页_slices/mail1.png" alt="">
          <p>1.web design</p>
          <p>企业品牌网站设计/手机网站制作<br />动画网站创意设计</p>
        </li>
      </ul>
    </div>
  </div>
  <div class="container-fluid">
    <div class="customer contanier">
      <h2>{客户案例}</h2>
      <p class="text">With the best professional technology, to design the best innovative web site</p>
      <div class="cusList">
        <ul>
          <li><img src="./image/20141121095216750.png" alt=""></li>
          <li><img src="./image/20141121095528549.png" alt=""></li>
          <li><img src="./image/20141121105856226.png" alt=""></li>
        </ul>
        <div class="btn"> VIEW MORE</div>
      </div>
    </div>
  </div>
  <div class="new contanier">
    <h2>最新资讯</h2>
    <p class="text">TEH LATEST NEWS</p>
    <div class="newList">
      <img src="./image/xs1.png" alt="">
      <ul>
        <li>
          <div class="l">
            <span>09</span>
            <span>Jan</span>
          </div>
          <div class="r">
            <p>网站排名进入前三的技巧说明</p>
            <p>很多客户都会纳闷为什么自己的网站老是优化不到搜索引擎
              首页，更不用说进首页前三了。那么网站优...</p>
          </div>
        </li>
        <li>
          <div class="l">
            <span>09</span>
            <span>Jan</span>
          </div>
          <div class="r">
            <p>网站排名进入前三的技巧说明</p>
            <p>很多客户都会纳闷为什么自己的网站老是优化不到搜索引擎
              首页，更不用说进首页前三了。那么网站优...</p>
          </div>
        </li>
        <li>
          <div class="l">
            <span>09</span>
            <span>Jan</span>
          </div>
          <div class="r">
            <p>网站排名进入前三的技巧说明</p>
            <p>很多客户都会纳闷为什么自己的网站老是优化不到搜索引擎
              首页，更不用说进首页前三了。那么网站优...</p>
          </div>
        </li>
        <li>
          <div class="l">
            <span>09</span>
            <span>Jan</span>
          </div>
          <div class="r">
            <p>网站排名进入前三的技巧说明</p>
            <p>很多客户都会纳闷为什么自己的网站老是优化不到搜索引擎
              首页，更不用说进首页前三了。那么网站优...</p>
          </div>
        </li>
      </ul>
    </div>
  </div>
  <footer class="contanier ft">
    <div class="contanier">
      <p>Copyright 2006- 2014 Bowenshangmei Culture All Rights Reserved</p>
      <ul>
        <li>Home </li>
        <li>About </li>
        <li>Portfolio </li>
        <li>Contact</li>
      </ul>
    </div>
  </footer>
</body>

</html>

5.1.4 エラーページ

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    用户名或密码不对
    <span id="time">3</span>
    秒后跳转到登录页面
</body>
<script src="js/transmitPage.js"></script>
</html>

5.2 CSS

5.2.1 索引

* {
    
    
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
li {
    
    
  list-style: none;
}
a {
    
    
  text-decoration: none;
  color: black;
}
body {
    
    
  width: 100%;
  font-family: ArialMT;
}
.contanier {
    
    
  width: 1082px;
  margin: 0 auto;
}
.container-fluid {
    
    
  width: 100%;
}
.hd {
    
    
  display: flex;
  justify-content: space-between;
}
.hd img {
    
    
  width: 162px;
  height: 44px;
  margin-top: 19px;
  margin-bottom: 18px;
}
.hd ul {
    
    
  display: flex;
  margin-top: 36px;
  width: 614px;
  height: 10px;
  margin-bottom: 35px;
}
.hd ul li {
    
    
  font-size: 14px;
  font-family: Arial;
  font-weight: 400;
  color: #646464;
  margin-right: 58px;
}
.hd ul li:nth-child(6) {
    
    
  margin-right: 0;
}
.swiper-contianer {
    
    
  position: relative;
  width: 100%;
}
.swiper-contianer ul {
    
    
  height: 469px;
}
.swiper-contianer ul li {
    
    
  height: 100%;
}
.swiper-contianer ul li img {
    
    
  width: 100%;
  height: 100%;
}
.swiper-contianer ol {
    
    
  display: flex;
  justify-content: center;
  position: absolute;
  bottom: 19px;
  left: 50%;
  transform: translateX(-50%);
}
.swiper-contianer ol li {
    
    
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid #fff;
  margin-right: 11px;
}
.swiper-contianer ol li:last-child {
    
    
  margin-right: 0px;
}
.services {
    
    
  text-align: center;
  height: 407px;
  padding-top: 61px;
}
.services h2 {
    
    
  font-size: 20px;
  font-family: Adobe Heiti Std;
  font-weight: normal;
  color: #363636;
  line-height: 20px;
  background: url(image/线条修饰.png) no-repeat 50%;
}
.services .text {
    
    
  margin-top: 10px;
  margin-bottom: 34px;
  font-size: 14px;
  font-family: Arial;
  font-weight: 400;
  color: #9F9F9F;
}
.services .serList ul {
    
    
  display: flex;
  justify-content: center;
  width: 100%;
  padding: 0 46px;
}
.services .serList ul li {
    
    
  width: 202px;
  margin-right: 60px;
}
.services .serList ul li img {
    
    
  width: 102px;
  height: 102px;
}
.services .serList ul li p {
    
    
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #6D6D6D;
  line-height: 22px;
}
.services .serList ul li p:nth-of-type(1) {
    
    
  margin-top: 34px;
  margin-bottom: 22px;
  font-size: 18px;
  font-family: Arial;
  font-weight: bold;
  color: #434343;
}
.services .serList ul li:nth-of-type(4) {
    
    
  margin-right: 0;
}
.container-fluid {
    
    
  background-color: #f8f8f8;
  overflow: hidden;
}
.container-fluid .customer {
    
    
  height: 460px;
  text-align: center;
  padding: 0 12px;
}
.container-fluid .customer h2 {
    
    
  margin-top: 55px;
  font-size: 20px;
  font-family: Adobe Heiti Std;
  font-weight: normal;
  color: #66C5B4;
  line-height: 20px;
  background: url(image/线条修饰.png) no-repeat 50% 50%;
}
.container-fluid .customer p {
    
    
  font-size: 14px;
  font-family: Arial;
  font-weight: 400;
  color: #9F9F9F;
  margin-top: 12px;
  margin-bottom: 38px;
}
.container-fluid .customer ul {
    
    
  display: flex;
  margin-bottom: 36px;
}
.container-fluid .customer ul li {
    
    
  margin-right: 19px;
}
.container-fluid .customer ul li:last-child(3) {
    
    
  margin-right: 0;
}
.container-fluid .customer .btn {
    
    
  margin: 0 auto;
  width: 176px;
  height: 37px;
  text-align: center;
  background: #66C5B4;
  line-height: 37px;
  font-size: 14px;
  font-family: Arial;
  font-weight: 400;
  color: #FFFFFF;
  border-radius: 18px;
}
.new {
    
    
  text-align: center;
  margin-bottom: 89px;
}
.new h2 {
    
    
  margin-top: 68px;
  font-size: 20px;
  font-family: Adobe Heiti Std;
  font-weight: normal;
  color: #363636;
  line-height: 20px;
  background: url(image/线条修饰.png) no-repeat 50%;
}
.new .text {
    
    
  margin-top: 11px;
  font-size: 14px;
  font-family: Arial;
  font-weight: 400;
  color: #9F9F9F;
  margin-bottom: 58px;
}
.new .newList {
    
    
  display: flex;
}
.new .newList img {
    
    
  width: 234px;
  height: 196px;
}
.new .newList ul {
    
    
  display: flex;
  flex-wrap: wrap;
}
.new .newList ul li {
    
    
  display: flex;
}
.new .newList ul li .l {
    
    
  width: 71px;
  height: 70px;
}
.new .newList ul li .l span {
    
    
  display: block;
}
.new .newList ul li .l span:first-child {
    
    
  font-size: 39px;
  font-family: Arial;
  font-weight: bold;
  color: #66C5B4;
}
.new .newList ul li .l span:last-child {
    
    
  font-size: 20px;
  font-family: Arial;
  font-weight: 400;
  color: #999999;
}
.new .newList ul li .r {
    
    
  width: 310px;
  margin-left: 20px;
}
.new .newList ul li .r p {
    
    
  text-align: left;
}
.new .newList ul li .r p:first-child {
    
    
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #3F3F3F;
}
.new .newList ul li .r p:last-child {
    
    
  margin-top: 21px;
  font-size: 12px;
  font-family: NSimSun;
  font-weight: 400;
  color: #A4A4A4;
}
.new .newList ul li:nth-of-type(1) {
    
    
  margin-bottom: 48px;
}
.new .newList ul li:nth-of-type(2) {
    
    
  margin-bottom: 48px;
}
.ft {
    
    
  width: 100%;
  height: 52px;
  line-height: 52px;
  background-color: #66C5B4;
}
.ft .contanier {
    
    
  display: flex;
  justify-content: space-between;
}
.ft .contanier p {
    
    
  font-size: 12px;
  font-family: Arial;
  font-weight: 400;
  color: #FFFFFF;
}
.ft .contanier ul {
    
    
  display: flex;
}
.ft .contanier ul li {
    
    
  font-size: 12px;
  font-family: Arial;
  font-weight: 400;
  color: #FFFFFF;
}
.ft .contanier ul li:nth-of-type(1)::after {
    
    
  content: '|';
  margin: 0 15px;
}
.ft .contanier ul li:nth-of-type(2)::after {
    
    
  content: '|';
  margin: 0 15px;
}
.ft .contanier ul li:nth-of-type(3)::after {
    
    
  content: '|';
  margin: 0 15px;
}

5.2.2 スタイル

.login-page {
    
    
  width: 360px;
  padding: 8% 0 0;
  margin: auto;
}
.form {
    
    
  position: relative;
  z-index: 1;
  background: #FFFFFF;
  max-width: 360px;
  margin: 0 auto 100px;
  padding: 45px;
  text-align: center;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
}
.form input {
    
    
  font-family: "Roboto", sans-serif;
  outline: 0;
  background: #f2f2f2;
  width: 100%;
  border: 0;
  margin: 0 0 15px;
  padding: 15px;
  box-sizing: border-box;
  font-size: 14px;
}
.form button {
    
    
  font-family: "Roboto", sans-serif;
  text-transform: uppercase;
  outline: 0;
  background: #4CAF50;
  width: 100%;
  border: 0;
  padding: 15px;
  color: #FFFFFF;
  font-size: 14px;
  -webkit-transition: all 0.3 ease;
  transition: all 0.3 ease;
  cursor: pointer;
}
.form button:hover,.form button:active,.form button:focus {
    
    
  background: #43A047;
}
.form .message {
    
    
  margin: 15px 0 0;
  color: #b3b3b3;
  font-size: 12px;
}
.form .message a {
    
    
  color: #4CAF50;
  text-decoration: none;
}
.form .register-form {
    
    
  display: none;
}
.container {
    
    
  position: relative;
  z-index: 1;
  max-width: 300px;
  margin: 0 auto;
}
.container:before, .container:after {
    
    
  content: "";
  display: block;
  clear: both;
}
.container .info {
    
    
  margin: 50px auto;
  text-align: center;
}
.container .info h1 {
    
    
  margin: 0 0 15px;
  padding: 0;
  font-size: 36px;
  font-weight: 300;
  color: #1a1a1a;
}
.container .info span {
    
    
  color: #4d4d4d;
  font-size: 12px;
}
.container .info span a {
    
    
  color: #000000;
  text-decoration: none;
}
.container .info span .fa {
    
    
  color: #EF3B3A;
}
body {
    
    
  background: #76b852; /* fallback for old browsers */
  background: -webkit-linear-gradient(right, #76b852, #8DC26F);
  background: -moz-linear-gradient(right, #76b852, #8DC26F);
  background: -o-linear-gradient(right, #76b852, #8DC26F);
  background: linear-gradient(to left, #76b852, #8DC26F);
  font-family: "Roboto", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;      
}

5.3JS

5.3.1 索引

$('.message a').click(function(){
    
    
    $('form').animate({
    
    height: "toggle", opacity: "toggle"}, "slow");
});

5.3.2 jquery.min.js

収まりきらない。7に行ってください

5.3.3 送信ページ

onload=function(){
    
    
    setInterval(go, 1000);
};
var x=3; //利用了全局变量来执行
function go(){
    
    
    x--;
    if(x>0){
    
    
        document.getElementById("time").innerHTML=x;  //每次设置的x的值都不一样了。
    }else{
    
    
        location.href='/JavaWeb_Demo_06_war/login.html';  // 设置你的注册页面
    }
}

6 エフェクト

6.1 ログイン成功

ここに画像の説明を挿入

6.2 登録の成功

ここに画像の説明を挿入

6.3 ログイン失敗

ここに画像の説明を挿入

7 静的ページのソース

1. Yang Xin/login-register-templateフラットで簡潔なログインページ
2. Gu Dazhuang/Bowen Shangmei 静的ホームページ

Mybatis+Servlet+Mysql 統合の小さなプロジェクト: 初心者にとてもフレンドリーで、初心者が Java Web をすぐに使い始めるのに役立ちます

記事ディレクトリ

序文

なぜ書くのですか？

ディレクトリ構造

1 依存関係の構成

1.1 Web プロジェクトを作成する

1.2 依存性要件の分析

1.3 pom.xml

2 Mybatis の設定

2.1 mybatis-config.xml

2.2 UserMapper.xml

2.3 UserMapper.interface

3 Tomcat の設定

4 サーブレットクラス

4.1 loginServlet01

4.2 registerRequest01

5 静的ページコード

5.1 HTML

5.1.1 ログイン

5.1.2 送信ページ

5.1.3 索引

5.1.4 エラーページ

5.2 CSS

5.2.1 索引

5.2.2 スタイル

5.3JS

5.3.1 索引

5.3.2 jquery.min.js

5.3.3 送信ページ

6 エフェクト

6.1 ログイン成功

6.2 登録の成功

6.3 ログイン失敗

7 静的ページのソース

おすすめ

Mybatis+Servlet+Mysql 統合の小さなプロジェクト: 初心者にとてもフレンドリーで、初心者が Java Web をすぐに使い始めるのに役立ちます

記事ディレクトリ

序文

なぜ書くのですか？

ディレクトリ構造

1 依存関係の構成

1.1 Web プロジェクトを作成する

1.2 依存性要件の分析

1.3 pom.xml

2 Mybatis の設定

2.1 mybatis-config.xml

2.2 UserMapper.xml

2.3 UserMapper.interface

3 Tomcat の設定

4 サーブレットクラス

4.1 loginServlet01

4.2 registerRequest01

5 静的ページ コード

5.1 HTML

5.1.1 ログイン

5.1.2 送信ページ

5.1.3 索引

5.1.4 エラーページ

5.2 CSS

5.2.1 索引

5.2.2 スタイル

5.3JS

5.3.1 索引

5.3.2 jquery.min.js

5.3.3 送信ページ

6 エフェクト

6.1 ログイン成功

6.2 登録の成功

6.3 ログイン失敗

7 静的ページのソース

おすすめ

5 静的ページコード