Decoration7：注册登录设计

Posted 2020-09-20 闲鱼编程笔记

首先顶一个小目标：从前台写入用户数据后，登录的时候输入用户名和密码，能够查询数据库成功，同时记录session数据

1、Login界面，为了只关注主线任务，我直接套用一个bootstrap模板adminLTE(https://adminlte.io)

2、Regist分为ok和not ok两种结果，为了增加一点难度，我设置userName和pqssWord不能为空，这用到了Hibernate的注解功能

    @Column(nullable=false,unique=true)
    private String userName;
    @Column(nullable=false)
    private String passWord;

还有一个@NotNull的的注解，其区别从Internet上找到一段话：

@NotNull is a JSR 303 Bean Validation annotation. It has nothing to do with database constraints itself. As Hibernate is the reference implementation of JSR 303, however, it intelligently picks up on these constraints and translates them into database constraints for you, so you get two for the price of one. @Column(nullable = false) is the JPA way of declaring a column to be not-null. I.e. the former is intended for validation and the latter for indicating database schema details. You‘re just getting some extra (and welcome!) help from Hibernate on the validation annotations.

3、Regist的时候，用户首先就要明确自己以什么样的角色使用这个系统。所以我在注册的界面做了一个下拉列表，列表展示网站支持的角色，用ng-init="init()"方法进行初始化，这里在展示option列表的时候有一些坑，下面是我的写法：

<select class="form-control" ng-model="user.role" ng-options="role.name for role in roles">
<option value="" selected="selected">---Please Select---</option>
</select>

role.name作为标签，role对象整个作为value值，在controller里面提交给后台之前，需要从role对象中取出Id传递给后台

4、前面提到，Regist必须和角色相关联，在设计数据库的时候，user-->owner，user-->designer，这里设计的是继承关系，所以一旦角色确定了，我们就不能只创建user表的数据，不管owner表。我的做法是根据role识别出是哪个子类，直接用子对象提交，这样父表也会一起创建。

$scope.regist = function(user) {
        commonService.setBaseUrl(user.role.name.toLowerCase());//son table name
        commonService.create(user).then(function(data) {}, function() {})
    };

5、Regist成功之后，再看看Login的实现，Spring JPA支持的查询的格式：

http://localhost:8080/user/search/findByUserNameAndPassWord?userName=Jack&passWord=123

我要构造出这样一个格式和参数结构，发送到后台请求去，后台其实不需要做什么，默认支持。

$scope.login = function(user) {
        var keyMap = {userName:user.userName,passWord:user.passWord};//设置参数格式
        var url = "user/search/findByUserNameAndPassWord";//设置url
        commonService.search(url,keyMap).then(function(data) {
            $localStorage.userInfo = data;//记录sessionStorage
        }, function() {
            $scope.errorMessage = ‘Get OwnerList Error‘;
        })
    };

//查询对象
    this.search = function(url,param){
        return Restangular.all(url).getList(param);//RestAngular的参数格式
    };

这个时候我们看一下后台的select语句是什么样的：

select user0_.id as id1_5_, user0_.age as age2_5_, user0_.email as email3_5_, user0_.log_date as log_date4_5_, user0_.pass_word as pass_wor5_5_, user0_.reg_date as reg_date6_5_, user0_.role_id as role_id7_5_, user0_.status as status8_5_, user0_.tel as tel9_5_, user0_.user_name as user_na10_5_, user0_2_.companid as companid1_1_, user0_4_.build_num as build_nu1_3_, 
case 
when user0_1_.id is not null then 1 
when user0_2_.id is not null then 2 
when user0_3_.id is not null then 3 
when user0_4_.id is not null then 4 
when user0_.id is not null then 0 
end 
as clazz_ from user user0_ 
left outer join admin user0_1_ on user0_.id=user0_1_.id 
left outer join designer user0_2_ on user0_.id=user0_2_.id 
left outer join labour user0_3_ on user0_.id=user0_3_.id 
left outer join owner user0_4_ on user0_.id=user0_4_.id 
where user0_.user_name=‘mingming‘ and user0_.pass_word = ‘123‘

从结果可以看出，这个查询查询出了所有的子类信息+父类信息

6、最后看看Session怎么存储和使用，我们使用一个ngStorage的插件