注册页面
templates下面创建login,里面创建register.ftl
然后创建一个controller用于打开register.ftl页面
网上找的模板
https://download.csdn.net/download/qq_30353203/11025659
查看页面需要的css和js文件
之前工程里面有的复制过来,没有的在网页的源码里面找
主要修改引用 css 和js包和路径
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>小蜜蜂接口测试MOCK平台</title>
<!-- container-scroller -->
<!-- plugins:js -->
<script src="/lib/register/vendors/js/vendor.bundle.base.js"></script>
<script src="/lib/register/vendors/js/vendor.bundle.addons.js"></script>
<!-- endinject -->
<!-- inject:js -->
<script src="/lib/register/js/off-canvas.js"></script>
<script src="/lib/register/js/misc.js"></script>
<!-- endinject -->
<!-- plugins:css -->
<link rel="stylesheet" href="/lib/register/vendors/iconfonts/mdi/css/materialdesignicons.min.css">
<link rel="stylesheet" href="/lib/register/vendors/css/vendor.bundle.base.css">
<link rel="stylesheet" href="/lib/register/vendors/css/vendor.bundle.addons.css">
<!-- endinject -->
<!-- plugin css for this page -->
<!-- End plugin css for this page -->
<!-- inject:css -->
<link rel="stylesheet" href="/lib/register/css/style.css">
<!-- endinject -->
<link rel="shortcut icon" href="/lib/register/images/favicon.png" />
</head>
1.页面修改表单,增加注册url,请求到后端有两种方式一种是表单提交,一种是ajax请求到后端,此处注册页面才用表单提交即可。去掉表单里没有用的div块,然后在form表单标签地方写上,请求后端的路径,并且加上回显功能,在输入一次只有,刷新页面可以保存,form表单回显 用value="<#if user??>${user.password!}" 如果user不为空则取user里的password ,${msg} 是后端返的校验提示语
<body>
<div class="container-scroller">
<div class="container-fluid page-body-wrapper full-page-wrapper auth-page">
<div class="content-wrapper d-flex align-items-center auth register-bg-1 theme-
one">
<div class="row w-100">
<div class="col-lg-4 mx-auto">
<h2 class="text-center mb-4">注册</h2>
<div class="auto-form-wrapper">
<form action="/login/register">
<div class="form-group">
<label class="label">用户名</label>
<div class="input-group">
<input type="text" name="userName" class="form-
control" placeholder="用户名"
value="<#if user??>${user.userName!}</#if>">
<div class="input-group-append">
<span class="input-group-text">
<i class="mdi mdi-check-circle-outline">
</i>
</span>
</div>
</div>
</div>
<div class="form-group">
<label class="label">密码</label>
<div class="input-group">
<input type="password" name="password" class="form-
control" placeholder="密码"
value="<#if user??>${user.password}</#if>">
<div class="input-group-append">
<span class="input-group-text">
<i class="mdi mdi-check-circle-outline"></i>
</span>
</div>
</div>
</div>
<div class="form-group">
<span style="color:red">${msg!}</span>
</div>
<#--<div class="form-group">-->
<#--<div class="input-group">-->
<#--<input type="password" class="form-control"
placeholder="确认密码">-->
<#--<div class="input-group-append">-->
<#--<span class="input-group-text">-->
<#--<i class="mdi mdi-check-circle-
outline"></i>-->
<#--</span>-->
<#--</div>-->
<#--</div>-->
<#--</div>-->
<div class="form-group d-flex justify-content-center">
<div class="form-check form-check-flat mt-0">
<label class="form-check-label">
<input type="checkbox" class="form-check-input"
checked> 同意条款
</label>
</div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary submit-btn
btn-block">提交注册</button>
</div>
<div class="text-block text-center my-3">
<span class="text-small font-weight-semibold">已经有一个账
号了?</span>
<a href="/login/loginPage" class="text-black text-small">
登录</a>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- content-wrapper ends -->
</div>
<!-- page-body-wrapper ends -->
</div>
</body>
2.dao模块创建包com.compass.entity
@Data
public class User {
private Integer id;
@NotBlank(message = "用户名不能为空!")
private String userName;
@NotBlank(message = "密码不能为空")
private String password;
}
3.创建User类,两个字符串属性,userName,password
4.注册方法参数是user
5.增加参数验证使用JSR 303
概念: JSR 303 是 Java 为 Bean 数据合法性校验提供的标准框架, 它已经包含在
JavaEE 6.0 中 . JSR 303 通过在 Bean 属性上标注类似于 @NotNull、@Size 等标准的注
解指定校验规则,并通过标准的验证接口对 Bean 进行验证 其他用法
:https://www.cnblogs.com/myinspire/articles/7649027.html
@NotEmpty 用在集合类上面 @NotBlank 用在String上面 @NotNull 用在基本类型上
如果用户为空使用JSR 303 进行校验,如果不通过返回注册页面
注册成为跳转index页面,此处返回页面的提示语,为后端校验,前端也可以加上校验
在dao层加入依赖包
<dependency>
<groupId>org.hibernate</groupId>
<artifactId>hibernate-validator</artifactId>
</dependency>
@Controller
@RequestMapping("/login")
public class LoginController {
@Autowired
UserService userService;
@RequestMapping("/registerPage")
public ModelAndView registerPage(){
ModelAndView modelAndView = new ModelAndView();
modelAndView.setViewName("/login/register");
return modelAndView;
}
@RequestMapping("/register")
public ModelAndView register(@Valid User user, BindingResult bindingResult){
ModelAndView modelAndView = new ModelAndView();
if(bindingResult.hasErrors()){
String msg=bindingResult.getFieldError().getDefaultMessage();
modelAndView.addObject("msg",msg);
modelAndView.addObject(user);
modelAndView.setViewName("/login/registerPage");
return modelAndView;
}
ResponseObj responseObj=userService.register(user);
if (!responseObj.isSuccess()){
modelAndView.addObject("msg",responseObj.getMsg());
modelAndView.setViewName("/login/registerPage");
return modelAndView;
}
modelAndView.setViewName("/index");
return modelAndView;
}
}
1.数据库创建user表,userName、password两个属性
userName改为unique唯一性,不允许重复
2.application.properties配置数据源
3、dao层创建mapper包,UserMapper这个接口,并且用注解@Mapper
4.resources目录下创建mappers包 然后新建userMapper.xml,使用之前的内容,注意修改里面的内容
5.service模块新建service包,注入dao层的UserMapper,创建UserService类处理用户相关操作,增加注册方法,
返回类ResponseObj类,
6.service模块创建vo包,创建ResponseOb实体j类,用注解@Data
属性Integer code,String msg,Object obj,boolean success
7.在controller中注入service层的 userService 调用service层,如果出现DuplicateKeyException说明不唯一,返回页面提示用户已经存在
8.其他异常返回异常信息
9.注册成功返回index页