Decoration7:注册登录设计

首先顶一个小目标:从前台写入用户数据后,登录的时候输入用户名和密码,能够查询数据库成功,同时记录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的插件

时间: 2024-08-10 00:05:10

Decoration7:注册登录设计的相关文章

以小见大:如何设计注册登录页?

一个合格的注册登录页面,应该是具有清晰的操作流程. 朋友说某个APP不错,下载后正准备好好体验一番,却被糟糕的注册登录页面弄的精疲力竭,无奈最终只能放弃.注册登录流程能让用户扭头就走,也能让产品获得新用户的芳心. 一个合格的注册登录页面,应该是具有清晰的操作流程,良好的交互细节和美观的视觉设计. 清晰的操作流程 APP的注册登录有四种情况: 不需要注册登录 常见于系统自带的工具类APP,像经常使用的闹钟.日历.计算器等等:一些简单的第三方APP:乐流,榫卯等. 这些APP的特点都是功能相对单一,

node.js基于express框架搭建一个简单的注册登录Web功能

这个小应用使用到了node.js  bootstrap  express  以及数据库的操作 :使用mongoose对象模型来操作 mongodb 如果没了解过的可以先去基本了解一下相关概念~ 首先注明一下版本,因为express因为版本的不同使用的方式也不同,我这算是目前最新的了吧 还没有装express的可以移步到这里 看看express框架的获取安装 1.简单地项目初始化 进入你的nodejs安装路径下边,如图,然后执行命令  express -e test  (这里把项目名设置为test

JSP注册登录页教程

转载请标明原文地址:http://www.cnblogs.com/zhangyukof/p/6785258.html  一.准备工作 已搭建好的SSH框架工程一个,如果没有,请参考我的上一篇文章<SSH框架搭建详细图文教程>. 二.登陆功能 1.打开MyEclipse切换到MyEclipse DataBase Explorer视图,右键user表选择"Hibernate Reverse Engineering",通过Spring框架的逆向工程功能把user表逆向生成Java

如何提高移动端注册登录体验

有多少用户愿意注册登录,决定了一款产品的活跃度.我们来谈一谈如何提高移动端的登录体验. 一.登录类型 用户通常有三种不同的方式来登录一个APP: 第三方授权登录的方式,优势是,省去用户注册这一流程,让用户可以在第三方授权下迅速登录.劣势是用户不是你的用户,是第三方的用户,流量可能只是暂时的,而且转化起来比较难.但我个人还是倾向于第三方授权登录的方式,因为第三方大多数都拥有海量的活跃用户,而且我们还可以在后期进行有针对性的转化—给用户一系列个性化设置.绑定手机号的操作流程. 最反感用第三方授权登录

express+vue+mongodb+session 实现注册登录

上个月写了一篇文章是 express+mongodb+vue 实现增删改查. 只是简单的实现了增删改查功能,那么今天是在那个基础之上做了扩展,首先实现的功能有如下: 1. 支持注册,登录功能,用户可以注册完成后,进行登录,登录完成后会进入到列表增删改查页面.2. 支持session会话,也就是说设置了多长时间登录过期,如果用户没有登录,直接进查询列表页面,会重定向到登录页面去,如果用户登录了后,把浏览器关掉,直接输入列表查询页面,会直接进入列表页面的.3. 列表数据加入了分页功能.4. 对数据库

SpringBoot注册登录(三):注册--验证账号密码是否符合格式及后台完成注册功能

SpringBoot注册登录(一):User表的设计点击打开链接SpringBoot注册登录(二):注册---验证码kaptcha的实现点击打开链接      SpringBoot注册登录(三):注册--验证账号密码是否符合格式及后台完成注册功能点击打开链接     SpringBoot注册登录(四):登录功能--密码错误三次,需要等待2分钟才能登录,固定时间内不能登录点击打开链接 SpringBoot注册登录(五):登录功能--Scheduling Tasks定时作业,用于某个时间段允许/不允

Django - 基于forms组件和Ajax实现注册登录 - FileField字段 - Media配置

一.基于forms组件的注册页面设计 点击头像==点击input 头像预览: 修改  获取用户选中的文件对象:获取文件对象的路径:修改img标签的src属性,让src=文件对象路径. register.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link

巨蟒django之CRM1 需求分析&amp;&amp;表结构设计&amp;&amp;注册登录验证

1.需求分析 1.项目 (1)业务 (2)权限的管理 2.CRM customer relationship management 客户关系管理系统 3.谁来使用CRM? 销售&&班主任&&讲师&&助教 4.项目的需求分析 (1)注册 (2)登录 (3)销售 1.客户信息管理 增加 编辑 展示 客户信息(删除一般不用它做,后台管理员来做,为了信息安全) 2.跟进信息管理 增加 编辑 展示 跟进信息 3.报名信息的管理 增加 编辑 展示 报名信息 4.缴费记录

一个基于Unix套接字的注册登录系统

2016/5/5 今天,我参考<Unix网络编程-卷1>第5章的TCP回射客户/服务器程序写了一个简单的注册登录系统,其功能如下:(1)注册.客户端向服务器发送个人信息请求注册,服务器查询MySQL数据库以检查该客户是否已存在,若是则禁止注册,并返回“用户已存在,注册失败”的错误信息,否则将新用户信息添加到MySQL数据库,并返回“注册成功”的信息.(2)登录.客户端向服务器发送个人账号和密码等两项信息,服务器查询MySQL数据库以检查账号是否存在.账号和密码是否匹配,若不存在或不匹配则禁止登