A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

用户注册
4.1 需求分析
完成用户注册功能
图片1.png
4.1 工程搭建
4.1.1 用户服务接口层
(1)创建 pinyougou-user-interface(jar)
(2)引入 pojo 依赖

4.1.2 用户服务实现层
(1)创建 pinyougou-user-service(war)

(2)引入 spring        dubbox        activeMQ 相关依赖,引入依赖( pinyougou-user-interface pinyougou-dao        pinyougou-common),运行端口为 9006
(3)添加 web.xml
(4)创建 Spring 配置文件 applicationContext-service.xml 和 applicationContent-tx.xml
[AppleScript] 纯文本查看 复制代码
<dubbo:protocol  name="dubbo"  port="20886"  />


<dubbo:annotation  package="com.pinyougou.user.service.impl"  />


<dubbo:application  name="pinyougou-user-service"/>
<dubbo:registry  address="zookeeper://192.168.25.135:2181"/>
4.1.1 用户中心 WEB 层
创建 war 工程        pinyougou-user-web 我们将注册功能放入此工程
(1)添加 web.xml

(2)引入依赖 pinyougou-user-interface 、spring 相关依赖(参照其它 web 工程),tomcat 运行端口 9106
(3)添加 spring 配置文件
(4)拷贝静态原型页面 register.html 及相关资源

4.3 基本注册功能实现
4.3.1 生成和拷贝代码
图片2.png 图片3.png
图片4.png
图片5.png
4.3.1 后端服务实现层
修改 pinyougou-user-service 的 UserServiceImpl.java
[AppleScript] 纯文本查看 复制代码
/**

* 增加

*/ @Override
public  void  add(TbUser  user)  {

user.setCreated(new  Date());//创建日期 user.setUpdated(new  Date());//修改日期
String  password  =  DigestUtils.md5Hex(user.getPassword());//对密码加密 user.setPassword(password);

userMapper.insert(user);


}
4.3.1 前端控制层
修改 userController.js
[AppleScript] 纯文本查看 复制代码
//控制层

app.controller('userController'  ,function($scope,$controller	,userService){

//注册

$scope.reg=function(){


if($scope.entity.password!=$scope.password)    {

alert("两次输入的密码不一致,请重新输入");

return ;


}


userService.add(  $scope.entity    ).success(


function(response){ alert(response.message);
}


);


}


});
4.3.1 修改页面
修改页面 register.html ,引入 js
[AppleScript] 纯文本查看 复制代码
<script  type="text/javascript"  src="plugins/angularjs/angular.min.js"></script>


<script  type="text/javascript"  src="js/base.js"></script>


<script  type="text/javascript"  src="js/service/userService.js"></script>
<script  type="text/javascript"  src="js/controller/userController.js"></script>
指令
[AppleScript] 纯文本查看 复制代码
<body  ng-app="pinyougou"  ng-controller="userController"  >
绑定表单
[AppleScript] 纯文本查看 复制代码
<form  class="sui-form  form-horizontal">

<div  class="control-group">

<label  class="control-label">用户名:</label>

<div  class="controls">

<input  type="text"  placeholder="请输入你的用户名" ng-model="entity.username"  class="input-xfat  input-xlarge">

</div>

</div>

<div  class="control-group">

<label  for="inputPassword"  class="control-label">登录密码:</label>

<div  class="controls">

<input  type="password"  placeholder="设置登录密码" ng-model="entity.password"  class="input-xfat  input-xlarge">

</div>

</div>

<div  class="control-group">

<label  for="inputPassword"  class="control-label">确认密码:</label>

<div  class="controls">

<input  type="password"  placeholder="再次确认密码" ng-model="password"  class="input-xfat  input-xlarge">
[AppleScript] 纯文本查看 复制代码
</div>


</div>


<div  class="control-group">

<label  class="control-label">手机号:</label>

<div  class="controls">

<input  type="text"  placeholder="请输入你的手机号" ng-model="entity.phone"  class="input-xfat  input-xlarge">

</div>

</div>


<div  class="control-group">

<label for="inputPassword" class="control-label">短信验证码:</label>

<div  class="controls">

<input  type="text"  placeholder="短信验证码"  class="input-xfat input-xlarge">    <a  href="#">获取短信验证码</a>

</div>


</div>


<div  class="control-group">


<label  for="inputPassword"
class="control-label">      </label>


<div  class="controls">

<input  name="m1"  type="checkbox"  value="2"  checked=""><span>同意协议并注册《品优购用户协议》</span>

</div>


</div>


<div  class="control-group">
[AppleScript] 纯文本查看 复制代码
<label  class="control-label"></label>


<div  class="controls  btn-reg">


<a  class="sui-btn  btn-block  btn-xlarge  btn-danger"  ng-click="reg()"
target="_blank">完成注册</a>

</div>


</div>

</form>


0 个回复

您需要登录后才可以回帖 登录 | 加入黑马