登录、注册模块
登录界面注册界面工程结构登录页login.html注册页register.html
登录界面
注册界面
工程结构
登录页login.html
<!DOCTYPE html
>
<html lang
="en">
<head
>
<meta name
="viewport" content
="width=device-width, initial-scale=1.0" charset
="UTF-8">
<link href
="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel
="stylesheet">
<title
>Title
</title
>
<style
>
.login
-form
{
position
: absolute
;
top
: 30%;
-webkit
-transform
: translateY(-50%);
-moz
-transform
: translateY(-50%);
-ms
-transform
: translateY(-50%);
-o
-transform
: translateY(-50%);
transform
: translateY(-50%);
min
-height
: 300px
;
height
: auto;
}
body
{
background
: url(../image
/login
.jpg
) no
-repeat
;
background
-size
:100%;
}
</style
>
</head
>
<body
>
<div
class="container-fluid " >
<div
class="login-form col-lg-4 col-lg-offset-4 col-sm-6 col-sm-offset-3 col-xs-8 col-xs-offset-2 ">
<div
class="row">
<div
class="col-md-6 column">
<div
>
<img src
="image/linux.png" class="img-rounded" width
="200" height
="50">
</div
>
<div
>
<br
>
<strong
>欢迎使用zhanghw后台管理系统
</strong
>
</div
>
<div
>
<br
>
<p
>技术选型：
</p
>
<img src
="image/right.jpg" class="img-rounded" width
="14" height
="14"><a href
="#">SpringBoot
</a
><br
>
<img src
="image/right.jpg" class="img-rounded" width
="14" height
="14"><a href
="#">MyBatis
</a
><br
>
<img src
="image/right.jpg" class="img-rounded" width
="14" height
="14"><a href
="#">Apache Shiro
</a
><br
>
<img src
="image/right.jpg" class="img-rounded" width
="14" height
="14"><a href
="#">Thymeleaf
</a
><br
>
<img src
="image/right.jpg" class="img-rounded" width
="14" height
="14"><a href
="#">Bootstrap
</a
><br
><br
>
</div
>
<div
>
<strong
>还没有账号？
</strong
><a href
="#">立即注册。
</a
><br
>
</div
>
</div
>
<div
class="col-md-6 column">
<div
>
<strong
>登录：
</strong
>
<p
>因为你有你的人生，我有我的旅程
--叶倩文
</p
>
</div
>
<form role
="form" method
="post" action
="/login/check">
<div
class="form-group">
<input type
="text" class="form-control" placeholder
="账户名" name
="username">
</div
>
<div
class="form-group">
<input type
="text" class="form-control" placeholder
="密码" name
="password">
</div
>
<div
class="row">
<div
class="col-md-6 column">
<div
class="form-group">
<input type
="text" class="form-control" placeholder
="验证码" name
="verifycode">
</div
>
</div
>
<div
class="col-md-6 column">
<button type
="button" class="btn btn-default" >默认按钮
</button
>
</div
>
</div
>
<div
class="checkbox">
<label
>
<input type
="checkbox" name
="rememberme">记住我
</label
>
</div
>
<div
>
<button type
="submit" class="btn btn-primary btn-lg btn-block">登录
</button
>
</div
>
</form
>
</div
>
</div
>
</div
>
</div
>
<script src
="https://code.jquery.com/jquery.js"></script
>
<script src
="js/bootstrap.min.js"></script
>
</body
>
</html
>
注册页register.html
<!DOCTYPE html
>
<html lang
="en">
<head
>
<meta name
="viewport" content
="width=device-width, initial-scale=1.0" charset
="UTF-8">
<link href
="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel
="stylesheet">
<title
>Title
</title
>
<style
>
.login
-form
{
position
: absolute
;
top
: 30%;
-webkit
-transform
: translateY(-50%);
-moz
-transform
: translateY(-50%);
-ms
-transform
: translateY(-50%);
-o
-transform
: translateY(-50%);
transform
: translateY(-50%);
min
-height
: 300px
;
height
: auto;
}
body
{
background
: url(image
/login
.jpg
) no
-repeat
;
background
-size
:100%;
}
</style
>
</head
>
<body
>
<div
class="container-fluid " >
<div
class="login-form col-lg-4 col-lg-offset-4 col-sm-6 col-sm-offset-3 col-xs-8 col-xs-offset-2 ">
<div
class="row">
<div
class="col-md-6 column">
<div
>
<img src
="image/linux.png" class="img-rounded" width
="200" height
="50">
</div
>
<div
>
<br
>
<strong
>欢迎使用zhanghw后台管理系统
</strong
>
</div
>
<div
>
<br
>
<p
>技术选型：
</p
>
<img src
="image/right.jpg" class="img-rounded" width
="14" height
="14"><a href
="#">SpringBoot
</a
><br
>
<img src
="image/right.jpg" class="img-rounded" width
="14" height
="14"><a href
="#">MyBatis
</a
><br
>
<img src
="image/right.jpg" class="img-rounded" width
="14" height
="14"><a href
="#">Apache Shiro
</a
><br
>
<img src
="image/right.jpg" class="img-rounded" width
="14" height
="14"><a href
="#">Thymeleaf
</a
><br
>
<img src
="image/right.jpg" class="img-rounded" width
="14" height
="14"><a href
="#">Bootstrap
</a
><br
><br
>
</div
>
<div
>
<strong
>还没有账号？
</strong
><a href
="#">立即注册。
</a
><br
>
</div
>
</div
>
<div
class="col-md-6 column">
<div
>
<strong
>注册：
</strong
>
<p
>因为你有你的人生，我有我的旅程
--叶倩文
</p
>
</div
>
<form role
="form" method
="post" action
="/login/check">
<div
class="form-group">
<input type
="text" class="form-control" placeholder
="账户名" name
="username">
</div
>
<div
class="form-group">
<input type
="text" class="form-control" placeholder
="密码" name
="password">
</div
>
<div
class="row">
<div
class="col-md-6 column">
<div
class="form-group">
<input type
="text" class="form-control" placeholder
="验证码" name
="verifycode">
</div
>
</div
>
<div
class="col-md-6 column">
<button type
="button" class="btn btn-default" >默认按钮
</button
>
</div
>
</div
>
<div
>
<button type
="submit" class="btn btn-primary btn-lg btn-block">注册
</button
>
</div
>
</form
>
</div
>
</div
>
</div
>
</div
>
<script src
="https://code.jquery.com/jquery.js"></script
>
<script src
="js/bootstrap.min.js"></script
>
</body
>
</html
>
Processed:
0.012, SQL:
10
