开发测试平台（二）注册页面

最新推荐文章于 2021-03-11 00:00:22 发布

NeilNiu

最新推荐文章于 2021-03-11 00:00:22 发布

阅读量468

点赞数

分类专栏： Springboot+Bootstrap 开发接口测试平台（Springboot+bootstrap）

本文链接：https://blog.csdn.net/qq_30353203/article/details/88595961

版权

Springboot+Bootstrap 同时被 2 个专栏收录

45 篇文章 0 订阅

订阅专栏

开发接口测试平台（Springboot+bootstrap）

7 篇文章 4 订阅

订阅专栏

注册页面
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页

NeilNiu

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
开发测试平台（二）注册页面

注册页面templates下面创建login,里面创建register.ftl然后创建一个controller用于打开register.ftl页面网上找的模板https://download.csdn.net/download/qq_30353203/11025659查看页面需要的css和js文件之前工程里面有的复制过来，没有的在网页的源码里面找主要修改引用 css 和js包...
复制链接

扫一扫