Directorio de artículos
prefacio
¿Por qué escribir?
Comience afirmando que este es un proyecto muy simple que solo consiste en registrarse e iniciar sesión.
Algunas personas dijeron que un proyecto tan simple, lo desprecio. ¡De Verdad! Para algunos expertos, esta pequeña cosa es solo una llovizna.
Pero para un principiante, es una buena oportunidad para integrar Mybatis+Servlet+Mysql con un proyecto simple y fácil de usar.
Aplique lo que ha aprendido, este artículo tiene como objetivo probar si la serie anterior de artículos está calificada, y los resultados son:
La teoría es demasiado sólida y la práctica demasiado dispersa, por lo que a través de este artículo se fortalece la conveniencia de la práctica.
Estructura de directorios
1 Configuración de dependencia
1.1 Crear un proyecto web
Si no, puede leer este artículo http://t.csdn.cn/UahZN
1.2 Análisis de requisitos de dependencia
Mybatis+Servlet obviamente necesita usar las dependencias de los dos. Mybatis necesita conectarse a la base de datos, por lo que necesita dependencias de la base de datos, y la base de datos necesita clases de entidad. Las dependencias de Lombok se introducen para facilitar el desarrollo. Para usar pruebas unitarias, también debe introducir dependencias junit.
Así que los requisitos totales son los siguientes
-
mi zapato
-
servlet
-
mysql
-
lombok
-
junta
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 Configurar Mybatis
Consulte mi propio artículo "Inicio rápido de Mybatis" http://t.csdn.cn/3SXlb "Desarrollo de agentes de Mybatis" http://t.csdn.cn/Bt8Xi
2.1 mybatis-config.xml
La configuración de mybatis-config incluye principalmente dos puntos:
- **Configuración de la base de datos:**Nombre de la base de datos, JDBC, nombre de usuario y contraseña de la base de datos
- Mapper: Deja que Mybatis encuentre 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&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
Se pasó por alto este punto de conocimiento, y no me di cuenta de que, incluso usando anotaciones para configurar declaraciones SQL, se requería el enlace de la interfaz.
<?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 Interfaz de UserMapper
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 Configurar Tomcat
Consulte mi artículo "idea integrada Tomcat" http://t.csdn.cn/6Uma5
4 clase de servlet
4.1 inicio de sesiónServlet01
Cuando se trata de la función de inicio de sesión, los puntos a los que se debe prestar atención son:
- JavaWeb_Demo_06_war es su propio directorio virtual, y todos lo configuran de manera diferente. Tomcat mencionado en el artículo
- Desventajas de Mybatis: necesita volver a conectarse a la base de datos cuando interactúa con la base de datos
- Cuando solicite obtener datos, configure la codificación en UTF-8, de lo contrario, se distorsionará
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 registroSolicitud01
Cuando se trata de funciones registradas, puntos a tener en cuenta:
- Al modificar la base de datos (actualizar, insertar), debe enviar (confirmar) para que surta efecto
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 Código de página estática
5.1 HTML
5.1.1 inicio de sesión
<!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 transmitir página
<!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 índice
<!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 página de error
<!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 índice
* {
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 estilo
.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.3 JS
5.3.1 índice
$('.message a').click(function(){
$('form').animate({
height: "toggle", opacity: "toggle"}, "slow");
});
5.3.2 jquery.min.js
Demasiado para encajar. por favor ve a 7
5.3.3 transmitir página
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 efectos
6.1 Inicio de sesión exitoso
6.2 Registro exitoso
6.3 Falló el inicio de sesión
7 fuentes de páginas estáticas
1. Página de inicio de sesión plana y concisa de Yang Xin/login-register-template
2. Página de inicio estática de Gu Dazhuang/Bowen Shangmei