关于实际使用的页面，可以通过https://robinliu.3322.org:8888/download/demo/straw_v1.4.zip下载，将下载得到的页面及相关文件复制到项目的src/main/resources/static文件夹下即可（如果static文件夹不存在，可自行创建）。

关于实际使用的注册页面，需要调整的位置有：

第30行：为<div>标签添加v-bind:class="{'d-block': hasError}"，表示通过Vue的hasError属性来控制CSS样式中名为d-block的值，这个d-block表示display block，即将当前标签以区块的形式显示出来，它是由Bootstrap定义的，取值是布尔值；

第31行：为<span>标签添加v-text="errorMessage"，表示该标签显示的文本绑定到Vue的errorMessage属性；

第34行：为<form>标签添加id="form-register"和v-on:submit.prevent="register"，前者将用于AJAX请求中序列化请求参数，后者表示绑定表单的提交事件到Vue的register方法（函数），其中的prevent表示阻止原有的提交方法，在这个<form>标签中原有的其它属性都可以删除；

第37行：将<input>标签中的v-model="inviteCode"删除，否则可能报错；

自行添加<script>标签处理页面：

<script>
    let app = new Vue({
        el: '#app',
        data: {
            hasError: false,
            errorMessage: null
        },
        methods: {
            register: function () {
                app.hasError = false;
                app.errorMessage = null;
                $.ajax({
                    url: '/portal/user/student/register',
                    data: $('#form-register').serialize(),
                    type: 'post',
                    dataType: 'json',
                    success: function (json) {
                        console.log(json);
                        if (json.state == 2000) {
                            alert("注册成功！");
                            // location.href = '某个页面';
                        } else {
                            app.hasError = true;
                            app.errorMessage = json.message;
                        }
                    }
                });
            }
        }
    });
</script>

11. 注册成功后的收尾工作

当前user数据表的设计中，关于密码字段是char(68)，但是，实际存入的密码长度只有60位，其实，在存入密码之前，应该在加密结果之前添加{bcrpyt}前缀，这个前缀的作用是声明当前密文的加密方式是通过BCrpyt算法实现的，Spring Security可以根据算法类型自动调用匹配的算法进行密码验证！

所以，在UserServiceImpl类中，在加密方法中添加补全前缀：

/**
 * 执行密码加密
 *
 * @param rawPassword 原密码
 * @return 根据原密码执行加密得到的密文
 */
private String encode(String rawPassword) {
    String encodePassword = passwordEncoder.encode(rawPassword);
    encodePassword = "{bcrypt}" + encodePassword;
    return encodePassword;
}

由于改变了密码规则，原有的密码就不合适了，甚至原本还存在更多的错误数据，应该将这些数据全部删除：

delete from user;

1

或：

truncate user;

12. 阶段小结

关于使用到的技术：

SpringBoot；

Lombok：使得开发人员不必再显式的声明Setters、Getters、toString()等代码，还可以更加便捷的使用@Slf4j注解来输出日志；

Slf4j：输出日志，自定义日志级别，输出时可以使用占位符避免反复拼接字符串；

MyBatis Plus：已经完成了许多常规的增删改查，使得开发人员不必自行编写相关代码，简化了持久层的开发，当然，MyBatis Plus已经完成的功能并不能满足所有的需求，甚至某些方法可能不太易用，如果开发人员需要自定义其它数据访问功能，也可以参考MyBatis的使用方式来开发新的数据访问功能；

MyBatis Plus Generator：用于自动生成一些项目中的文件，包括：实体类、持久层接口、持久层XML、业务层接口、业务层实现类、控制器类，它是基于数据表的字段设计来自动生成的；

Spring Security：未完待续；

Spring Validation：验证请求参数的有效性；

自定义异常和统一处理异常。