Spring shiro + bootstrap + jquery.validate 实现登录、注册功能
之前的文章中我们已经搭建好框架，并且设计好了，数据库。
现在我们开始实现登录功能，这个可以说是Web应用最最最普遍的功能了。
先来说说我们登录的逻辑：
输入用户名、密码(validate进行前端验证)——ajax调用后台action方法——根据用户名调用业务层到数据层查询数据库信息——查询的密码跟用户输入的密码比对——shiro登录身份验证——将用户信息存入session——响应前端——前端跳转
这个是我要告诉大家的姿势，还有很多很多的姿势。下面我们来看具体的代码。
首先前端验证，这里使用了jquery.validate来进行验证，jquery.validate的使用很简单，这里我们说说存js的方式：
$().ready(function() {
/**登录验证**/
$("#login_form").validate({
rules: {
loginAccount: "required",
loginPass: {
required: true,
minlength: 5
},
},
messages: {
loginAccount: "请输入姓名",
loginPass: {
required: "请输入密码",
minlength: jQuery.format("密码不能小于{0}个字 符")
},
},
submitHandler:function(form){
$.ajax({
dataType : "json",
url : "sysuser/login.action",
type : "post",
data : $("#login_form").serialize(),
success : function(data) {
$.alert(data.message);
if(data.success){
window.location.href = 'page/main.action';
}
},
error : function (e){
var d = e.responseJSON;
if(d){
$.alert(d.message);
}
}
});
return false; //阻止form提交
}
});
/**注册验证**/
$("#register_form").validate({
rules: {
loginAccount:{
required:true,
remote: {
url: "sysuser/getUserNameCount.action",
type: "post",
dataType: "json",
data: {
loginAccount: function () {
return $("#register_account").val();
}
},
dataFilter: function (data) { //判断控制器返回的内容
data = jQuery.parseJSON(data);
return data.success;
}
}
},
loginPass: {
required: true,
minlength: 5,
maxlength:20
},
rloginPass: {
equalTo: "#register_password"
},
userEmail: {
required: true,
email: true,
remote: {
url: "sysuser/getEMailCount.action",
type: "post",
dataType: "json",
data: {
email: function () {
return $("#register_email").val();
}
},
dataFilter: function (data) { //判断控制器返回的内容
data = jQuery.parseJSON(data);
return data.success;
}
}
}
},
messages: {
loginAccount:{
required: "请输入姓名",
remote: "用户名已存在"
},
loginPass: {
required: "请输入密码",
minlength: jQuery.format("密码不能小于{0}个字 符"),
maxlength: jQuery.format("密码不能大于{0}个字 符"),
},
rloginPass: {
required: "请输入确认密码",
equalTo: "两次密码不一样"
},
userEmail: {
required: "请输入邮箱",
email: "请输入有效邮箱",
remote: "邮箱已存在"
}
},
submitHandler:function(form){
$.ajax({
dataType : "json",
url : "sysuser/register.action",
type : "post",
data : $("#register_form").serialize(),
success : function(data) {
$.alert(data.message);
if(data.success){
window.location.href = 'page/main.action';
}
},
error : function (e){
var d = e.responseJSON;
if(d){
$.alert(d.message);
}
}
});
return false; //阻止form提交
}
});
/**隐藏显示登录注册**/
$("#register_btn").click(function() {
$("#register_form").css("display", "block");
$("#login_form").css("display", "none");
});
$("#back_btn").click(function() {
$("#register_form").css("display", "none");
$("#login_form").css("display", "block");
});
});
html页面：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<c:set var="contextPath" value="${pageContext.request.contextPath}"></c:set>
<!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">
<meta name="description" content="">
<meta name="author" content="">
<title>主页</title>
<!-- Bootstrap core CSS -->
<link href="${contextPath }/static/bootstrap/css/bootstrap.min.css" rel="external nofollow" rel="stylesheet">
<link href="${contextPath }/static/bootstrap/css/font-awesome.min.css" rel="external nofollow" rel="stylesheet">
<link href="${contextPath }/static/alert/jquery-confirm.min.css" rel="external nofollow" rel="stylesheet">
<style type="text/css">
body {
background: url(${contextPath }/static/img/login/bg.jpg) no-repeat;
background-size: cover;
font-size: 16px;
}
.form {
background: rgba(255, 255, 255, 0.2);
width: 400px;
margin: 100px auto;
}
#login_form {
display: block;
}
#register_form {
display: none;
}
.fa {
display: inline-block;
top: 27px;
left: 6px;
position: relative;
color: #ccc;
}
input[type="text"], input[type="password"] {
padding-left: 26px;
}
.checkbox {
padding-left: 21px;
}
</style>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="${contextPath }/static/bootstrap/html5shiv/html5shiv.js"></script>
<script src="${contextPath }/static/bootstrap/respond/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<div class="form row">
<form class="form-horizontal col-sm-offset-3 col-md-offset-3" id="login_form">
<h3 class="form-title">登录</h3>
<div class="col-sm-9 col-md-9">
<div class="form-group">
<i class="fa fa-user fa-lg"></i> <input
class="form-control required" type="text" placeholder="请输入账号"
name="loginAccount" autofocus="autofocus" maxlength="20" />
</div>
<div class="form-group">
<i class="fa fa-lock fa-lg"></i> <input
class="form-control required" type="password"
placeholder="请输入密码" name="loginPass" maxlength="8" />
</div>
<div class="form-group">
<label class="checkbox"> <input type="checkbox"
name="rememberMe" value="1" /> 记住我
</label>
<hr />
<a href="javascript:;" rel="external nofollow" id="register_btn" class="">注册？</a>
</div>
<div class="form-group">
<input type="submit" class="btn btn-success pull-right" value="登录 " />
</div>
</div>
</form>
</div>
<div class="form row">
<form class="form-horizontal col-sm-offset-3 col-md-offset-3" id="register_form">
<h3 class="form-title">注册</h3>
<div class="col-sm-9 col-md-9">
<div class="form-group">
<i class="fa fa-user fa-lg"></i> <input
class="form-control required" type="text" placeholder="请输入账号"
name="loginAccount" autofocus="autofocus" id="register_account" />
</div>
<div class="form-group">
<i class="fa fa-lock fa-lg"></i> <input
class="form-control required" type="password"
placeholder="请输入密码" id="register_password" name="loginPass" />
</div>
<div class="form-group">
<i class="fa fa-check fa-lg"></i> <input
class="form-control required" type="password"
placeholder="请输入确认密码" name="rloginPass" />
</div>
<div class="form-group">
<i class="fa fa-envelope fa-lg"></i> <input
class="form-control eamil" type="text" placeholder="Email"
name="userEmail" id="register_email"/>
</div>
<div class="form-group">
<input type="submit" class="btn btn-success pull-right"
value="注册" /> <input type="submit"
class="btn btn-info pull-left" id="back_btn" value="返回" />
</div>
</div>
</form>
</div>
</div>
<script type="text/javascript" src="${contextPath }/static/jquery/jquery.min.js"></script>
<script type="text/javascript" src="${contextPath }/static/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="${contextPath }/static/alert/jquery-confirm.min.js" ></script>
<script type="text/javascript" src="${contextPath }/static/jquery/jquery.validate.min.js" ></script>
<script type="text/javascript" src="${contextPath }/static/login/login.js" ></script>
</body>
</html>
在$("#login_form").validate({...})方法中，login_form为你要验证的form的id；rules为要验证的字段；messages为要提示的内容，如果不填写，则会提示默认信息；submitHandler为点击提交(submit)按钮后的回调方法，这里面最后的return false是为了阻止form表单的提交，因为我这里要用ajax的方式提交；在注册中的loginAccount字段有一个属性remote这个是为了做ajax验证的，在没有提交表单之前，我们就验证用户输入的用户名是否在系统中已经存在。
我们在编程总，发现总是会有那么几个方法在相同的代码层总用到，比如在控制层中获取用户session，或者输出响应信息等；在dao层中调用Hibernate的save方法，update方法，delete方法等。所以我们应该在框架搭建的初期去建立一些通用的工具类或者是Base方法，下面我们新建BaseController方法，并且让后面的控制器都来继承它。
import java.io.IOException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import org.springframework.web.bind.annotation.ModelAttribute;
import com.fasterxml.jackson.core.JsonEncoding;
import com.fasterxml.jackson.core.JsonFactory;
import com.fasterxml.jackson.core.JsonGenerator;
import com.fasterxml.jackson.databind.ObjectMapper;
import yfkj.gz.task.entity.SysUser;
import yfkj.gz.task.util.Result;
/**
* 父类控制器
* @author 胡汉三
* @date 2017年1月9日 下午5:23:52
*/
@SuppressWarnings("deprecation")
public class BaseController{
public static final String USER_SESSION = "USER_SESSION";
protected static ObjectMapper mapper = new ObjectMapper();
protected static JsonFactory factory = mapper.getJsonFactory();
protected static Result result = new Result();
protected HttpServletRequest request;
protected HttpServletResponse response;
protected HttpSession session;
@ModelAttribute
public void setReqAndRes(HttpServletRequest request, HttpServletResponse response){
this.request = request;
this.response = response;
this.session = request.getSession();
}
/**将json字符串输出**/
protected void writeJSON(String json) throws IOException {
response.setContentType("text/html;charset=utf-8");
response.getWriter().write(json);
}
/**将对象转成json输出**/
protected void writeJSON(Object obj) throws IOException {
response.setContentType("text/html;charset=utf-8");
JsonGenerator responseJsonGenerator = factory.createJsonGenerator(response.getOutputStream(), JsonEncoding.UTF8);
responseJsonGenerator.writeObject(obj);
}
/**
* 获得session用户对象
* @return
*/
protected SysUser getUser(){
Object userObj = session.getAttribute(USER_SESSION);
if(userObj == null){
return null;
}
return (SysUser)userObj;
}
}
用户的控制器SysUserController：
package yfkj.gz.task.controller;
import java.io.IOException;
import java.util.Date;
import java.util.List;
import javax.annotation.Resource;
import org.apache.shiro.SecurityUtils;
import org.apache.shiro.authc.UsernamePasswordToken;
import org.apache.shiro.crypto.hash.Sha256Hash;
import org.apache.shiro.subject.Subject;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import yfkj.gz.task.entity.SysRole;
import yfkj.gz.task.entity.SysUser;
import yfkj.gz.task.service.ISysRoleService;
import yfkj.gz.task.service.ISysUserService;
import yfkj.gz.task.util.DateUtil;
import yfkj.gz.task.util.StringUtils;
import yfkj.gz.support.BTView;
import yfkj.gz.support.controller.BaseController;
/**
* 用户控制器
* @author 胡汉三
* @date 2017年1月16日 下午2:31:39
*/
@Controller
@RequestMapping("/sysuser")
public class SysUserController extends BaseController{
@Resource
private ISysUserService userService;
@Resource
private ISysRoleService roleService;
/**
* 分页查询用户
* @param response
* @param user
* @param btView
* @throws IOException
*/
@RequestMapping(value = "/findUser", method = { RequestMethod.POST, RequestMethod.GET })
public void findUser(SysUser user,BTView<SysUser> btView) throws IOException{
List<SysUser> list = userService.findSysUserPage(btView, null);
btView.setRows(list);
super.writeJSON(btView);
}
/**
* 用户登录
* @param response
* @param user
* @throws IOException
*/
@RequestMapping(value = "/login", method = { RequestMethod.POST, RequestMethod.GET })
public void login(SysUser user,boolean rememberMe) throws IOException{
//用户登录
SysUser userInfo = userService.getByProerties(new String[]{"loginAccount"}, new String[]{user.getLoginAccount()},null);
if(userInfo==null){
result.setMessage("用户名错误");
super.writeJSON(result);
return;
}
if(!userInfo.getLoginPass().equals(new Sha256Hash(user.getLoginPass()).toHex())){
result.setMessage("密码错误");
super.writeJSON(result);
return;
}
//存入session
Subject subject = SecurityUtils.getSubject();
//记得传入明文密码
subject.login(new UsernamePasswordToken(userInfo.getLoginAccount(), user.getLoginPass(), rememberMe));
session.setAttribute(USER_SESSION, userInfo);
result.setMessage("登录成功");
result.setSuccess(true);
super.writeJSON(result);
}
/**
* 用户注册
* @param response
* @param user
* @throws IOException
*/
@RequestMapping(value = "/register", method = { RequestMethod.POST, RequestMethod.GET })
public void register(SysUser user) throws IOException{
Long count = userService.getCountByProerties(new String[]{"loginAccount"}, new String[]{user.getLoginAccount()});
if(count>0){
result.setMessage("账号已存在");
super.writeJSON(result);
return;
}
Long countEmail = userService.getCountByProerties(new String[]{"userEmail"}, new String[]{user.getUserEmail()});
if(countEmail>0){
result.setMessage("邮箱已存在");
super.writeJSON(result);
return;
}
try{
//注册时间
user.setRegisterTime(DateUtil.getDateTime(new Date()));
//Sha256Hash加密
user.setLoginPass(new Sha256Hash(user.getLoginPass()).toHex());
//默认为注册用户
SysRole role = roleService.getByProerties(new String[]{"roleKey"},new String[]{"ROLE_USER"},null);
user.getRoles().add(role);
userService.save(user);
//存入session
Subject subject = SecurityUtils.getSubject();
subject.login(new UsernamePasswordToken(user.getLoginAccount(), user.getLoginPass()));
session.setAttribute(USER_SESSION, user);
result.setMessage("注册成功");
result.setSuccess(true);
}catch(Exception e){
result.setMessage("注册失败");
}
super.writeJSON(result);
}
/**
* 判断用户账号是否已存在
* @param response
* @param user
* @throws IOException
*/
@RequestMapping(value = "/getUserNameCount", method = { RequestMethod.POST, RequestMethod.GET })
public void getUserNameCount(String loginAccount) throws IOException{
result.setSuccess(false);
if(StringUtils.isBlank(loginAccount)){
result.setMessage("账号不能为空");
super.writeJSON(result);
return;
}
Long count = userService.getCountByProerties(new String[]{"loginAccount"}, new String[]{loginAccount});
if(count>0){
result.setMessage("账号已存在");
}else{
result.setSuccess(true);
result.setMessage("该账号可用");
}
super.writeJSON(result);
}
/**
* 判断用户邮箱是否已存在
* @param response
* @param email
* @throws IOException
*/
@RequestMapping(value = "/getEMailCount", method = { RequestMethod.POST, RequestMethod.GET })
public void getEMailCount(String email) throws IOException{
result.setSuccess(false);
if(StringUtils.isBlank(email)){
result.setMessage("邮箱不能为空");
super.writeJSON(result);
return;
}
Long count = userService.getCountByProerties(new String[]{"userEmail"}, new String[]{email});
if(count>0){
result.setMessage("邮箱已存在");
}else{
result.setSuccess(true);
result.setMessage("该邮箱可用");
}
super.writeJSON(result);
}
// 登出
@RequestMapping("/logout")
public void logout() throws IOException {
//退出权限验证
SecurityUtils.getSubject().logout();
//销毁session
session.invalidate();
response.sendRedirect(request.getContextPath()+"/login.jsp");
}
}
至此，登录跟注册就OK啦！
其中还使用到啦jquery-confirm.js，这是一个弹出框的插件：点击查看
源码地址：https://git.oschina.net/gzsjd/task
以上所述是小编给大家介绍的Spring shiro + bootstrap + jquery.validate 实现登录、注册功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
相关推荐
-
shiro之记住登录信息
Shiro提供了记住我(RememberMe)的功能,比如访问如淘宝等一些网站时,关闭了浏览器下次再打开时还是能记住你是谁,下次访问时无需再登录即可访问,基本流程如下: 1.首先在登录页面选中RememberMe然后登录成功:如果是浏览器登录,一般会把RememberMe的Cookie写到客户端并保存下来: 2.关闭浏览器再重新打开:会发现浏览器还是记住你的: 3.访问一般的网页服务器端还是知道你是谁,且能正常访问: 4.但是比如我们访问淘宝时,如果要查看我的订单或进行支付时,此时还是需要再进行
-
使用Shiro实现登录成功后跳转到之前的页面
这个问题是之前在做登录注册模块时遇到的需求,如何用户直接访问登录页面,可以控制直接跳到首页,但是如果是用户没有登录直接访问了购物车等需要经过身份认证的页面,或者是因为session超时,用户需要重新登录,那么这时跳回之前的页面就是提升用户体验的事情.实现此功能比较好的方法是用ajax的方式登陆,这样直接在当前页面弹窗让用户登录既可,二是把用户未登录前的url存在session中,login成功之后先检查session中是否存在这样的一个url.下面通过一段代码给大家分享下: 项目中集成了shir
-
spring boot 1.5.4 集成shiro+cas,实现单点登录和权限控制
1.添加maven依赖(先安装好cas-server-3.5.2,安装步骤请查看本文参考文章) <dependency> <groupId>org.apache.shiro</groupId> <artifactId>shiro-spring</artifactId> <version>1.2.4</version> </dependency> <dependency> <groupId>
-
SpringBoot+Shiro学习之密码加密和登录失败次数限制示例
这个项目写到现在,基本的雏形出来了,在此感谢一直关注的童鞋,送你们一句最近刚学习的一句鸡汤:念念不忘,必有回响.再贴一张ui图片: 前篇思考问题解决 前篇我们只是完成了同一账户的登录人数限制shiro拦截器的编写,对于手动踢出用户的功能只是说了采用在session域中添加一个key为kickout的布尔值,由之前编写的KickoutSessionControlFilter拦截器来判断是否将用户踢出,还没有说怎么获取当前在线用户的列表的核心代码,下面贴出来: /** * <p> * 服务实现类
-
springmvc集成shiro登录权限示例代码
一般的登录流程会有:用户名不存在,密码错误,验证码错误等.. 在集成shiro后,应用程序的外部访问权限以及访问控制交给了shiro来管理. shiro提供了两个主要功能:认证(Authentication)和授权(Authorization);认证的作用是证明自身可以访问,一般是用户名加密码,授权的作用是谁可以访问哪些资源,通过开发者自己的用户角色权限系统来控制. shiro的会话管理和缓存管理不在本文范围内. 下面通过登录失败的处理流程来介绍springmvc与shiro的集成. 项目依赖:
-
shiro实现单点登录(一个用户同一时刻只能在一个地方登录)
我这里 shiro 并没有集成 springMVC,直接使用 ini 配置文件. shiro.ini [main] # Objects and their properties are defined here, # Such as the securityManager, Realms and anything # else needed to build the SecurityManager authc.loginUrl = /login.jsp authc.successUrl = /w
-
Java中SSM+Shiro系统登录验证码的实现方法
先给大家展示下效果图: 1.验证码生成类: import java.util.Random; import java.awt.image.BufferedImage; import java.awt.Graphics; import java.awt.Font; import java.awt.Color; /** * 验证码生成器类,可生成数字.大写.小写字母及三者混合类型的验证码. 支持自定义验证码字符数量: 支持自定义验证码图片的大小: 支持自定义需排除的特殊字符: * 支持自定义干扰线
-
Spring shiro + bootstrap + jquery.validate 实现登录、注册功能
之前的文章中我们已经搭建好框架,并且设计好了,数据库. 现在我们开始实现登录功能,这个可以说是Web应用最最最普遍的功能了. 先来说说我们登录的逻辑: 输入用户名.密码(validate进行前端验证)--ajax调用后台action方法--根据用户名调用业务层到数据层查询数据库信息--查询的密码跟用户输入的密码比对--shiro登录身份验证--将用户信息存入session--响应前端--前端跳转 这个是我要告诉大家的姿势,还有很多很多的姿势.下面我们来看具体的代码. 首先前端验证,这里使用了jq
-
基于Bootstrap+jQuery.validate实现表单验证
这大概是一种惯例,学习前台后台最开始接触的业务都是用户注册和登录.现在社会坚持以人为本的理念,在网站开发过程同样如此.User是我们面对较多的对象,也是较核心的对象.最开始的用户注册和登陆这块,也就尤为重要. 用户注册和登录其实往往比我们想象的难.就比如表单校验,里面涵盖的内容其实挺多,就前台而言,你需要了解: 1.正则表达式的基本了解 其实正则并不难,并且在学会后能带给你极大的成就感,享受那种事半功倍的效果吧. 2.ajax异步请求 在验证用户名是否存在.用户登录时账号或者密码错误时给出相应的
-
基于Bootstrap+jQuery.validate实现Form表单验证
基于Bootstrap jQuery.validate Form表单验证实践项目结构 : github 上源码地址:https://github.com/starzou/front-end-example 1.form 表单代码[html] 复制代码 代码如下: <!DOCTYPE html> <html> <head> <title>Bootstrap Form Template</title>
-
Node+Express+MongoDB实现登录注册功能实例
注入MongoDB 依赖 var mongoose = require("mongoose"); 由于需要进行表单处理,需要用到bodyParser中间件 bodyParser模块来做文件解析,将表单里的数据进行格式化 var bodyParser = require("body-parser"); app.use(bodyParser.json()); app.use(bodyParser.urlencoded({ extended: true })); 登录后将
-
node.js+express+mySQL+ejs+bootstrop实现网站登录注册功能
同志们,经过不懈的努力,查了各种文档,终于鼓捣出了一个稍微像样一点的node项目,当然如果直接拿去项目里用,这个demo还太简单,毕竟一个完整的登录注册还有很多实际的内容,本案例mySQL的用户列表里,为便于理解,只设置了username 和password两个字段,正常的登录注册,肯定会有更多的字段的.但是对于初学node的人来说,比如笔者,还是学习到了不少内容,甚至,紧张的我不知如下下笔,肯定这个是参考了很多网上其他少年博客,以后这个登录注册demo会依据项目的需要而有所改进, 效果如下 效
-
Angular获取手机验证码实现移动端登录注册功能
之前一直在用jQuery来做项目,使用比较熟练,目前公司要求使用angular来做项目,遇到一个登录模块如下所示,功能有两个方面,一个是点击按钮获取验证码,一个是点击登录验证表单.从用户体验角度来考虑有两个要注意的地方,默认两个按钮应该都是不可点击的,输入正确的手机号时验证码的按钮可点击,当再输入验证码时登录按钮可点击. 代码结构如下: <form name="loginForm" ng-controller="loginCtrl" ng-submit=&qu
-
JavaWeb实现用户登录注册功能实例代码(基于Servlet+JSP+JavaBean模式)
下面通过通过图文并茂的方式给大家介绍JavaWeb实现用户登录注册功能实例代码,一起看看吧. 一.Servlet+JSP+JavaBean开发模式(MVC)介绍 Servlet+JSP+JavaBean模式(MVC)适合开发复杂的web应用,在这种模式下,servlet负责处理用户请求,jsp负责数据显示,javabean负责封装数据. Servlet+JSP+JavaBean模式程序各个模块之间层次清晰,web开发推荐采用此种模式. 这里以一个最常用的用户登录注册程序来讲解Servlet+JS
-
基于PHP实现用户登录注册功能的详细教程
教程前先给大家看看小编的实现成果吧! 图1: 图2: 图3: 教程: 实现这个功能我们需要五个php文件: login.php (登录界面,如图2) <!DOCTYPE html> <html><head> <title>登录</title> <meta name="content-type"; charset="UTF-8"> </head><body> <div
-
Android使用OKhttp3实现登录注册功能+springboot搭建后端的详细过程
目录 一.Android前端实现 二.数据库 三.SpringBoot后端搭建 四.部署至服务器 五.运行测试 一.Android前端实现 新建一个login的项目,主要的几个文件在这里 1.gradle引入OKhttp3依赖 implementation 'com.squareup.okhttp3:okhttp:3.14.7' implementation 'com.squareup.okio:okio:1.17.5' 2.activity_main.xml布局文件 <?xml version
-
Node.js实现登录注册功能
本文实例为大家分享了Node.js实现登录注册功能的具体代码,供大家参考,具体内容如下 目录结构 注册页面: reg.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial