java学习笔记——众筹项目练习——前台web系统的注册、登录功能（使用httpclient进行远程调用），后台系统中的流程管理功能（activiti在项目中的使用）

                 前台web系统的注册、登录功能（httpclient的使用）

现在我们来实现一下前台web端系统的注册与登录功能！在前边的文章中，我们对整个众筹系统的组织机构有了一些了解，整个系统中manager-web、scw-portal、scw-restapi三个项目时可以独立运行的war项目。

manager-web是专门为系统管理人员提供服务的后台系统。

scw-restapi是所有用户提供服务的前台系统，因为前台系统面向的用户比较多，设备也多样化（比如ios、android、pc、web），所有为了多个客户端统一（同时也为了减少幅度的工作量），服务端给客户端返回的数据类型统一为json数据。

scw-portal是专门为前台web浏览器端用户提供服务的前台系统！由于scw-restapi服务器统一为所有客户端返回json数据，而其他app端又可以在客户端开发保存自己的页面，所有web浏览器端就需要这样的一个专门的服务，这个服务不做别的只是单纯的保存web服务器端所有的页面也跳转页面的逻辑。至于页面中的数据也是通过访问scw-restapi服务系统来获取的。

那么前台web系统的注册、登录等功能，当然是先访问scw-portal服务器来获取注册、登录的页面，在获取页面的过程中或者点击页面中的某个按钮还要访问scw-restapi来实现注册与登录功能。

那么如何让scw-portal服务调用scw-restapi服务呢？

用户登陆/注册（需要远程调用）

          1）、两种方式：

                  1】、没有任何耦合设计的方式；（HTTP）

                    1、在本地客户端使用java代码，模拟发送请求，获取到数据进行处理（HTTP）

                    2、发送ajax跨域请求；

                  2】、RPC（远程调用）（框架：WebService、dubbo（阿里）），支付接口等（WebService）（RPC）

          //我们选择使用HTTP的方式；（HTTP+JSON）省流量速度快、能和移动端无缝对接，（明文传递，安全性有待提高（令牌）（带一个能代表关键数据的令牌，关键数据保存在服务器上）（比较安全））；

那么http的方式如何使用呢？答：就是使用httpclient插件来实现远程调用呗！

httpclient使用起来很简单也很方便！那我们就来实现一下吧！

首先，是scw-portal服务中web前台用户使用的注册页面，很简单，只要使用后台manager系统中的注册页面修改一下就好了。

然后是scw-portal中controller的请求处理，在controller中使用httpclient访问scw-restapi服务的注册功能，将返回的json结果转换成统一的ScwReturn对象。

ScwReturn对象是我们定义专门用于返回统一json结构的对象。属性code为1或0时，表示成功或失败。msg表示消息。content是返回的数据。ext是返回的附加数据。

 

使用httpclient远程访问scw-restapi时，需要在maven中添加httpclient的依赖。

当然，通常在程序中使用httpclient远程访问scw-restapi服务时，都不会将访问地址写死在程序中，而是使用一个配置文件来保存远程scw-restapi服务的地址信息，这样灵活很多。

在程序中使用配置文件中的参数信息。方法也很简单，添加@value注解，并表明要引用配置文件中的哪个参数就可以啦!

接下来，我们来实现远程scw-restapi服务中的注册功能！

先在controller中处理注册请求（所有客户端，包括web端的scw-portal）。

在service中将注册信息直接插入数据库就行啦！

向数据库中插入数据的同时，还要带回数据库表中自动生成的主键信息。

这样，注册功能就完成啦！

试一下吧！

注册成功后跳转到登录页面

成功！！！

 

                                                                                                登录功能

同样的方式我们再来实现登录功能。

修改登录页面。

在controller中添加登录方法，发送远程的http登录请求。

由于发送远程http请求后，scw-restapi服务器返回的是json数据，为了使用方便我们要将json数据转化成相应的对象。方法就是上边的memberReturn = objectMapper.readValue(resstring.getBytes(),
                    new TypeReference<ScwReturn<tMember>>() {
            });

这里如果登录成功的话，我们是要将用户信息保存到session域中以供其他别的地方使用。然后跳转到index.jsp页面。这时的index.jsp页面就不应该还是未登录时的样子啦！应该在页面的上边显示用户信息。考虑到这个用户信息可能会在很多页面使用，这特意将其抽取出来，方便其他页面使用。

只需要判断session域中是否存在用户信息就可以了，如果存在显示用户，如果不存在就显示登录按钮就可以啦。

 

接下来我们实现scw-restapi服务器的处理登录方法。

在service中进行登录的业务逻辑校验，（只要查询一下数据库就可以啦）。

完成。我们试一下吧！

先启动scw-portal和scw-restapi服务器。

ok，完成。

 

 

                后台系统中的流程管理功能（activiti在项目中的使用）

接下来我们要来实现一下后台manager系统中的流程管理功能。我们在实际的项目中可能会有很多的项目流程（比如公司的oa系统中有各种请假申请、报批申请等。网站系统中的实名认证等等）这些所有的流程都应该有后台管理人员统一的上传管理，这就是我们接下来要实现的后台manager系统的流程管理功能。

既然要做后台manager的流程管理功能，那么肯定是要使用activiti啦！我们先将activiti整合到我们的项目中吧 ！

1，添加maven依赖。

 

2，添加配置文件spring-activiti.xml。配置文件中的数据库与我们项目中共用同一个数据库。事务管理器也是共用的，所以只是添加已有的就可以啦！还有对于乱码的设置和加载activiti中的常用组件。

配置完成后，启动我们的后台manager系统，就可以在我们的数据库中看到activiti自己特有的数据库表啦！！！至于那些表是做什么的，我们前面的文章中有对于activiti的介绍，这里就不多说啦！

 

好，activiti已经添加到我们的项目中来啦！那么接下来我们就来实现一下流程管理页面的跳转吧！

先添加一个process.jsp，为了方便这里就将之前的广告管理页面拿来修改一下了。

修改数据库中流程管理的请求地址。

在添加一个处理跳转到流程管理页面的controller。

ok，页面可以跳转啦！

现在我们再来实现一个所有流程的查询，将所有流程信息显示到流程列表中吧！

在页面中添加查询流程所有流程的getAllAdver方法。

在getAllAdver方法中发送ajax请求。

将请求后返回的所有流程数据添加到tbody中。

在controller中添加查询所有流程信息的处理方法。

因为controller中使用的repositoryService我们在配置activiti的时候就已经添加的spring容器中了，这是activiti的组件。所有我们不需要再额外的编写service进行逻辑控制啦，直接使用activiti的组件就好。

既然流程管理吃查询功能有了，那么接下来再来实现一个增加功能吧，流程上传。

这个功能我们还是使用之前的广告新增的那种弹出模态框的方法来完成吧！并且文件的上传功能都是可以复用的。

为这个模态框中的确定按钮绑定点击事件，并发送文件上传请求。

在事件中将我们选择的文件作为参数并发送ajax请求。请求成功后刷新页面。

在controller中处理流程上传请求，使用activiti的repositoryService组件之间将流程部署到数据库中即可，不需要我们保持文件，activiti是直接将文件保存到数据库中的。

好了 ，上传也完成啦！

查询和上传的功能都有了，那我们就再来实现一个可以查看某一具体流程的流程图的功能吧！可以实现这个功能是因为activiti将每个流程在数据库中都保存了一张流程图的图片！

还记得我们在查询流程列表后，在tbody中添加每一条流程数据时都添加了一个查看按钮嘛？这个按钮中我们还添加一个processId属性用于保存本条流程数据的流程id。查询某一流程的图片是需要使用这个流程id。

为这个查看按钮绑定点击事件，在事件中直接使用layer插件显示图片就可以啦！

使用上边的方式显示图片，其实也是在发送网络请求，既然是请求，那我们就要在后台处理。

在controller中添加查看某一流程图片的处理方法。

先根据我们传过来的流程id查找的部署id，再根据部署id查找到这个流程的图片名字，最后再根据部署id与图片名字得到图片的二进制数据，这样直接返回图片的二进制数据，页面中的图片展示位置img标签就可以得到图片啦！

大功告成！！！！

 

好了 ，现在我们来测试一下吧！

首先呢！我们需要创建一个，然后才能对它管理。

前边我们介绍过来activiti的使用，并且eclipse中也已经安装了插件，可以在eclipse中创建我们自己的流程文件啦！那我们就来创建一个用来实名认证的流程文件吧（正好我们后面会使用到这个功能）！

然后添加流程中的任务信息。

首先是一个发送邮件的任务，邮箱地址，用户名，生成的验证码需要外接传进来。

然后是提交验证码任务，没什么特别的，也不需要外界传数据。

重点来了，然后是一个分支判断，判断我们传进来的自己生成的验证码与用户自己填写的验证码是否相同，不相同的话就验证失败，返回上一步骤的任务。

如果相同的话就验证成功，进入下一步骤的任务。

然后再添加一个人工审核的任务就OK啦。

保存起来，用于我们流程管理的演示。

好，启动我们的后台manager系统并登录。

点击流程管理，跳转到流程管理界面。

点击新增按钮，添加我们刚才创建好的流程文件。

添加成功后会再次查询流程信息并显示流程列表。

可以看见在流程列表刷新后已经可以看见我们添加的流程啦！只是流程的名称显示还有点问题！

我们在来看看activiti坐在的数据库表中存储的信息是否一致。

流程定义表中的部署id为37501，而流程部署表中的id也为37501.

好，我们再点击流程列表中具体流程后边的查看流程图片按钮，显示流程信息的预览图片。

这个预览图片样式做的有点丑（这个不重要）。

ok，这样我们流程管理的新增，查询，预览就都完成了。至于修改和查询之前的文章都有介绍，这里就不再重复啦。

 

最后再附上代码以供需要时参考：https://download.csdn.net/download/qq_25106373/11424234