6 ~ 搭建用户注册前端页面
Posted 500m
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了6 ~ 搭建用户注册前端页面相关的知识，希望对你有一定的参考价值。
一，前端页面 /views/login.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="/public/css/login.css">
<link rel="stylesheet" href="/public/css/bootstrap.css">
<script src="/public/js/jquery.js"></script>
<script src="/public/js/index.js"></script>
</head>
<body>
<div class="left">
</div>
<div class="right">
<div class="jgb">
<div class="j1"></div>
<div class="j2"></div>
<div class="j3"></div>
</div>
<p></p>
<h1>Welcome</h1>
<div class="form" id="register">
<div class="form-group">
<label for="username">用户名</label>
<input type="text" class="form-control" id="username" name="username" placeholder="User">
</div>
<div class="form-group">
<label for="password">密码</label>
<input type="password" class="form-control" id="password" name="password" placeholder="Password">
</div>
<div class="form-group">
<label for="repassword">密码</label>
<input type="password" class="form-control" id="repassword" name="repassword" placeholder="Password">
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary">注册</button>
</div>
已有账号？马上<a class="change" href="javascripte:;">登陆</a>
</div>
<div class="form" id="login">
<div class="form-group">
<label for="exampleInputEmail1">用户名</label>
<input type="text" class="form-control" id="username" placeholder="User">
</div>
<div class="form-group">
<label for="exampleInputPassword1">密码</label>
<input type="password" class="form-control" id="password" placeholder="Password">
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary">登 陆</button>
</div>
还没注册？马上<a class="change" href="javascripte:;">注册</a>
</div>
</div>
</body>
</html>
二，样式文件 /public/css/login.css
*
margin: 0;
padding: 0;
box-sizing: border-box
body
padding: 60px 100px;
background: #ecf0f1;
position: relative;
.left
width: 600px;
height: 600px;
border-radius: 10px;
background: url(‘/public/images/dl.jpg‘) center;
background-size: cover;
float: left;
.right
width: 525px;
height: 600px;
padding: 10px;
float: left;
margin-left: 50px;
.jgb
width: 100%;
height: 30px;
border-radius: 10px;
margin-bottom: 30px;
.jgb .j1
width: 20%;
height: inherit;
background: #9b59b6;
float: left;
.jgb .j2
width: 60%;
height: inherit;
background: #f1c40f;
float: left;
.jgb .j3
width: 20%;
height: inherit;
background: #9b59b6;
float: left;
.form
width: 100%;
padding: 10px 30px;
margin-top: 30px;
border: 1px solid #000;
a
text-decoration: none;
color: #ecf0f1
p
margin: 20px;
#login
display: none;
三， js 文件 /public/js/index.js
$(function()
var $register = $(‘#register‘);
var $login = $(‘#login‘);
$register.find(‘a.change‘).on(‘click‘,()=>
$login.show();
$register.hide();
)
$login.find(‘a.change‘).on(‘click‘,()=>
$login.hide();
$register.show();
)
/**
* 点击注册按钮 =》 通过 ajax =》提交数据
*/
$register.find(‘button‘).on(‘click‘,()=>
$.ajax(
type:‘post‘,
url:‘/api/user/register‘,
data:
username: $register.find(‘[name="username"]‘).val(),
password: $register.find(‘[name="password"]‘).val(),
repassword: $register.find(‘[name="repassword"]‘).val(),
,
dataType: ‘json‘,
success:function(data)
console.log(data)
);
)
)
四，应用用的jquery，bootstrap文件在官网或者通过npm 即可自行下载
以上是关于6 ~ 搭建用户注册前端页面的主要内容，如果未能解决你的问题，请参考以下文章
搭建 SpringBoot 项目（前端页面 + 数据库 + 实现源码）