EchoCow

念念不忘,必有回响

念念不忘,必有回响
  menu
97 文章
89 评论
92443 浏览
1 当前访客
ღゝ◡╹)ノ❤️

saplat 注册功能实现

在 jboot 中,他基于 JFinal 的 MVC ,遵循COC原则,零配置,无xml。所以在有了上一期的考试平台的基础后,你将会很容易明白他的 MVC 框架。项目具体模块说明请查看 README.md 文档,在项目前期,我们暂时只需要使用到 SaPlatSaPlat-service 模块。他们之间的关系可以简述如下:

SaPlat 模块
SaPlat\src\resources\templates  提供页面\视图访问
SaPlat\src\resources\shiro.ini  提供安全控制
SaPlat\src\main\java\io\jboot\admin\controller  提供前端控制器
SaPlat\src\main\java\io\jboot\admin\validator  提供参数效验

SaPlat-service 模块
SaPlat-service\SaPlat-service-provider\src\main\java\io\jboot\admin\service\provider  提供服务实现

下面我们就进行注册功能的实现

页面-跳转

按照上面的思路,我们需要为注册提供一个表单页面,此框架前端使用的是 layui ,我将登陆的页面 SaPlat\src\resources\template\login.html 中的 ==重置按钮== 修改为了 ==立即注册==

        <!-- 修改前 -->
        <div class="layui-form-item">
            <button type="reset" class="layui-btn layui-btn-danger btn-reset">重置</button>
            <button type="button" class="layui-btn btn-submit" lay-submit lay-filter="sub">立即登录</button>
        </div>
        <!-- 修改后 -->
        <div class="layui-form-item">
            <button type="button" class="layui-btn layui-btn-normal" id="reg"->注册</button>
            <button type="button" class="layui-btn btn-submit" lay-submit lay-filter="sub">立即登录</button>
        </div>

然后为按钮添加点击事件

        $(document).on('click','#reg',function(){
            window.location.href = "/register";
        });

控制器-访问

这样,当点击注册按钮的时候,他会去寻找 /register 路径,那么接下来我们为他配置控制器,用来接收这个访问请求,修改 SaPlat\src\main\java\io\jboot\admin\controller\MainController 文件,添加 ==register== 方法


    public void register() {
        //获取可用的权限,从表 sys_role 中获取
        List<Role> roleList = roleService.findByStatusUsed();
        //存放至域中,并转发至注册页面
        setAttr("roleList", roleList).render("register.html");
    }

权限控制

在访问之前,因为 register.html 是不需要任何权限都可以访问的,所以我们需要为其设置任何人可访问的权限,修改 SaPlat\src\resources\shiro.ini 文件即可

    [urls]
    /static/**  =anon
    /captcha=anon
    /login =  anon
    /register =  anon
    /postRegister = anon
    /postLogin =  anon
    /favicon.ico = anon

页面-注册

当我们将请求转发到 ==register.html== 页面的后,我们需要建立这么一个页面,SaPlat\src\resources\template\register.html,我将登陆的修改下,简单的添加几个必填字段

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>注册</title>
    #include("/template/common/include/_css.html")
</head>
<body class="login-body body">

<div class="login-box">
    <form id="addForm" class="layui-form" action="">
        <div class="layui-form-item">
            <label class="layui-form-label"><em class="require-mark">*</em>用户名称</label>
            <div class="layui-input-block">
            <!-- 请注意,这里 name 需要对应 User 的 model 的属性,User 实体类存放 SaPlat-service\SaPlat-service-entity\src\main\java\io\jboot\admin\service\entity\model\User.java -->
                <input type="text" name="user.name" placeholder="用户名称" class="layui-input" value="" required  lay-verify="required" autocomplete="off"/>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label"><em class="require-mark">*</em>登录密码</label>
            <div class="layui-input-block">
            <!-- 请注意,这里 name 需要对应 User 的 model 的属性,User 实体类存放 SaPlat-service\SaPlat-service-entity\src\main\java\io\jboot\admin\service\entity\model\User.java -->
                <input type="password" name="user.pwd" placeholder="登录密码" class="layui-input" value="" required  lay-verify="required" autocomplete="off"/>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">电话号码</label>
            <div class="layui-input-block">
            <!-- 请注意,这里 name 需要对应 User 的 model 的属性,User 实体类存放 SaPlat-service\SaPlat-service-entity\src\main\java\io\jboot\admin\service\entity\model\User.java -->
                <input type="text" name="user.phone" placeholder="电话号码" class="layui-input" value="" autocomplete="off"/>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">邮箱</label>
            <div class="layui-input-block">
            <!-- 请注意,这里 name 需要对应 User 的 model 的属性,User 实体类存放 SaPlat-service\SaPlat-service-entity\src\main\java\io\jboot\admin\service\entity\model\User.java -->
                <input type="text" name="user.email" placeholder="邮箱" class="layui-input" value="" autocomplete="off"/>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">用户角色</label>
            <div class="layui-input-block">
            <!-- 此处遍历我们存入的可用权限集合 -->
                #for (role : roleList)
                <input type="checkbox" name="userRole" value="#(role.id)" title="#(role.name)">
                #end
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label"><em class="require-mark">*</em>状态</label>
            <div class="layui-input-block">
                <select id='status' name="user.status" lay-verify="required">
                    <option></option>
                    <!-- 获取可用的状态 -->
                    #statusOption(io.jboot.admin.service.entity.status.system.UserStatus::me(), '1')
                </select>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label"></label>
            <button  class="layui-btn" lay-filter="sub" lay-submit>
                保存
            </button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </form>
</div>

#include("/template/common/include/_js.html")
<script type="text/javascript">
    layui.use(['form', 'layer'], function () {
        // 操作对象
        var form = layui.form
            , layer = layui.layer
            , $ = layui.jquery;

        // 表单验证
        // ......

        // 提交监听
        form.on('submit(sub)', function (data) {
            util.sendAjax ({
                type: 'POST',
                // 提交到的 url
                url: '#(ctxPath)/postRegister',
                data: $.param(data.field),
                loadFlag: true,
                success : function(data) {
                    setTimeout(function () {
                        window.location.href = "/";
                    },3000);
                },
                complete : function() {
                    // 刷新验证码
                    $("#captchaImg").attr('src', '#(ctxPath)/captcha?'+Math.random());
                }
            });

            return false;
        });
        $(document).on('click','#login',function(){
            window.location.href = "/login";
        });
    })

</script>
</body>
</html>

当然,因为我们前端的页面需要修改的,所以我暂时没有做任何关于前端的验证。但是我在后端进行了参数的验证。

url-参数验证

我们需要对他传递到 ==/postRegister== 的参数进行下效验,那么创建一个效验工具 SaPlat\src\main\java\io\jboot\admin\validator\RegisterValidator.java

    @Override
    protected void validate(Controller c) {
        //第一个参数对应前端的 name 即可
        validateString("user.name", 4, 16, "用户名格式不正确");
        validateString("user.pwd", 6, 16, "密码格式不正确");
        validateEmail("user.email","邮箱格式不正确");
        validateMobile("user.phone","联系电话格式不正确");
    }

url-提交

然后我们需要在控制器中添加一个方法用来接收提交过来的参数,SaPlat\src\main\java\io\jboot\admin\controller\MainController.java

    // 指定接收 post 提交的方式,进行参数效验
    @Before({POST.class, RegisterValidator.class})
    public void postRegister(){
        // 接收页面表单域传递过来的 model 对象
        User sysUser = getBean(User.class, "user");
        // 输出测试
        System.out.println(sysUser.toJson());
        // 获取他选择的用户权限
        Long[] roles = getParaValuesToLong("userRole");
        // 用户名效验
        if (userService.hasUser(sysUser.getName())) {
            throw new BusinessException("用户名已经存在");
        }
        // 设置信息
        sysUser.setLastUpdAcct("注册");
        // 使用 service 层提供的方法保存用户
        if (!userService.saveUser(sysUser, roles)) {
            throw new BusinessException("保存失败");
        }
        // 转发成功的 json 数据
        renderJson(RestResult.buildSuccess());
    }

然后运行测试即可,此处我使用了他为我们提供好的用户service实现类,我们无需自己再去书写。

念念不忘,必有回响。

如果觉得文章不错或者帮到了您,帮忙点点下面广告呗~谢谢啦~

评论