背景

在做系分项目原型的时候，我需要做一个简单的登录注册模块。但要实现这个功能，只是看我之前写的博客中的相关教程是远远不够的。因此，我需要重新开始摸索，便有了这篇博客。

为了完成该功能，我们需要用到两个Axure中非常强大、但又硬核的内容——全局变量和中继器。

全局变量

在前文中，我曾说过：“原型工具就是用做PPT的方式制作APP的外壳”。但比PPT更高级的是，Axure做的原型是有“状态”的，即它可以存储一些数据。相信在座各位都学过编程，那么大家对“全局变量”也有一定的概念了，我也不再赘述。

中继器

“中继器”这个名词很难在字面上了解它的意思，在此，我就引用别人的理解，帮助大家认识中继器：

中继器就像是一个巨大的容器，可以装载任意内容，编辑中继器就如同编辑一个崭新的页面，在里面可以任意自由地添加元件并进行界面布局，甚至为这些元件添加交互。中继器又好像一个本地化的微型数据库，通过前端页面实现对数据的管理。

在这篇博客中，我们将利用中继器的“数据库”特性，来完成注册信息的存储。

正文

基本布局

首先，我们将所需要的元素拉取到页面内。既然要做的是登录注册功能，必要的元素无非是两种基本的表单元件：

文本框
提交按钮

除此以外，如前文所说，我们还需要一个中继器，作为记录注册信息的数据库。

在拉取了所需了元素后，我们只需要对其做一些基本的、简单的布局就好了，没必要把时间浪费在样式和布局上。在我看来：做原型也应该像做软件一样，要有快步走，多回头的迭代思维。又如潘Sir常说的：“先做到，再做好”，故早期我们不应该把太多时间浪费在细节问题上，先完成功能点再考虑UI和UX。

此后，我还建议大家给重要的、需要实现交互的元件认真地命名。一方面，是因为在之后设计交互时需要多次选择特定元件，一个可读性高的名字可以帮助我们快速定位元件；另一方面，Axure的元件就像程序里的参数一样，为参数设计可读性高的参数名从来都是编程界的好习惯，不是吗？

中继器设置

双击中继器，进入中继器的设置页面；
将中继器中的默认的矩形命名为Account，然后增加一个新矩形并命名为Password；
清空中继器的默认数据；
在中继器中新增一个column1;
双击右侧Case 1，并勾选两个矩形，将Account矩形和Password矩形分别指向Column 0和Column1；

注册功能

单击选择“注册”按钮，并双击右侧的“鼠标单击时”选项，为注册按钮添加事件；
选择“中继器”选项下的“添加行”事件，并勾选中继器以配置动作，随后点击下方的“添加行”按钮；
在弹出窗中，点击Column0(对应中继器中的Account矩阵)旁的fx按钮；
如下图进行配置(accountInput_register为注册的账号输入文本框名字);
以同样的方式配置Column1;

完成了上述步骤后，我们就可以预览页面效果：输入账号和密码后点击“注册”，可发现中继器能成功地记录我们输入的信息，说明我们已经成功地完成了注册功能了。

登录功能

单击选择“登录”按钮，并双击右侧的“鼠标单击时”选项，为登录按钮添加事件；
双击"Case 1"，直接添加动作；
添加以下条件，其中"Account"为中继器的Account矩形、"accountInput_login"为登录页面的账户输入框，其余同理；
我们可以增加一个页面跳转动作以判别登录是否成功，如下图：

完成了上述步骤后，我们就可以预览页面效果：先注册一个账号，然后使用该信息登录。点击登录按钮后，原型成功跳转到另一个页面，说明我们成功地用注册的信息完成登录了！

总结

至此，我们已经成功地用中继器实现了非常基本又很常用的登录、注册功能。随后我们只需要添加一些细节优化，如：

将密码输入框的样式设为“密码”，这样在输入的字符就会被加密
设置密码验证，要求用户在注册时输入两次相同的密码
加页面跳转功能
…

但相比完成登录注册功能，上面的优化并不难实现。总而言之，在做项目的时候，我们还是要“先做到，再做好”，如果只是作为一个简单的原型，我们能完成本教程的内容已经足够了。

Axure实战——实现登录注册功能相关推荐

JavaWeb实战项目-登录审批功能-付强-专题视频课程
JavaWeb实战项目-登录审批功能-134人已学习课程介绍在eclipse中进行web开发,熟练掌握HTML.Javaspript.CSS.JSP.Servlet.Oracle. ...
java实现用户登录注册功能(用集合框架来实现)
需求:实现用户登录注册功能(用集合框架来实现) 分析: A:需求的类和接口 1.用户类 UserBean 2.用户操作方法接口和实现类 UserDao UserDaoImpl 3.测试类 UserTe ...
注册登录案例用MVC和mysql_用MVC模式实现简单用户登录注册功能
Model2模式 Jsp+Servlet+JavaBean MVC:开发模式 M:Model 模型层 ----> JavaBean V:View 视图层 ----> Jsp C:Contr ...
node mysql登录注册_图解NodeJS实现登录注册功能
该Demo根据菜鸟教程的练手项目,请提前到菜鸟教程的官网查看nodejs的相关教程,根据教程实际操作一遍,然后自己动手去实现登录.注册功能,此Demo只作参考,不符合前端相关规范. 使用的技术栈 no ...
java wed登录面代码_JavaWeb实现用户登录注册功能实例代码(基于Servlet+JSP+JavaBean模式)...
下面通过通过图文并茂的方式给大家介绍JavaWeb实现用户登录注册功能实例代码,一起看看吧. 一.Servlet+JSP+JavaBean开发模式(MVC)介绍 Servlet+JSP+JavaBea ...
php微信网页开发实现自动登录注册功能实例
功能:自动登录注册功能描述:php实现微信网页自动登录注册功能范围:适用于所有php版本功能实例 $token = $_COOKIE['wechat_token']; if($token){// ...
spring 3.x 学习笔记_spring mvc、spring jdbc 实现网站的登录注册功能
使用spring mvc.spring jdbc 实现网站的登录注册功能 1. 据业务模型创建model 一般实现序列化 2. 用spring 注解(@Repositor ...
html登陆注册功能实现,实现用户的登录注册功能
在基于Spring Boot框架上,实现用户的登录注册功能, 首先分析前期所需要的规划. 1 实现登录注册前端向后端发起post请求 2用户密码安全性密码是不推荐明文入库的,在后台采取秘钥加加不可 ...
MVC框架实现用户的登录注册功能
MVC是什么? MVC,全称model view controller-模型,视图,控制器 model是将数据库中的表到Java中变成实体类 view是编写JSP页面 controller是用来业务逻 ...

Axure实战——实现登录注册功能

背景