《果然新鲜》电商项目（29）- 门户注册功能

Posted 2022-02-05 IT老刘

文章目录

• 引言
• 1.前端代码
• 2. 后端代码
• 3. 测试
• 4.总结

引言

在上一节《果然新鲜电商项目（28）- 获取验证码功能》，主要讲解了注册页面中的获取验证码功能。

前面主要讲的都是后端的功能，本文主要讲解前端与后台交互部分，实现注册的整个流程（前端+后端）。

1.前端代码

注册页面：

页面html代码（关键代码）：

<form action="register" method="post">
        <div> <span>手机号</span> <input type="tel" name="mobile" id="mobile" placeholder="请输入手机号" />
        </div>
        <div> <span>密码</span> <input type="password" name="password" id="password" placeholder="请输入密码" />
        </div>
        <div> <span>微信注册码</span> <input type="text" name="registCode" id="registCode" placeholder="关注公众号，发送手机号获取微信码" />
        </div>
        <div> <span>验证码</span>
          <input class="verification" type="text" name="graphicCode" id="graphicCode" placeholder="请输入验证码" />
          <img src="/getVerify" id="getverification" onclick="getVerify(this);"/>
        </div>
        <div> <span></span>
          <input type="checkbox" name="accept" id="accept">
          <p><label for="accept">已阅读《用户协议》</label></div>
        <div>
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <img  src="img/page-weixin/weixin.png" width="100"/>
          <input type="submit" value="确认注册" />
        </div>
</form>

2. 后端代码

1. 请求VO（使用注解验证参数）：

package com.guoranxinxian.member.vo;

import lombok.Data;

import javax.validation.constraints.NotBlank;
import javax.validation.constraints.NotNull;
import javax.validation.constraints.Pattern;
import javax.validation.constraints.Size;

/**
 * description: 注册参数
 */
@Data
public class RegisterVo 
    /**
     * 手机号码
     */
    @NotBlank(message = "手机号码不能为空")
    @Size(min = 11, max = 11, message = "手机号码长度不正确")
    @Pattern(regexp = "^(((13[0-9])|(14[579])|(15([0-3]|[5-9]))|(16[6])|(17[0135678])|(18[0-9])|(19[89]))\\\\d8)$", message = "手机号格式错误")
    private String mobile;
    /**
     * 密码
     */
    @NotNull(message = "密码不能为空!")
    private String password;

    /**
     * 注册码
     */
    @NotNull(message = "注册码不能为空!")
    private String registCode;
    /**
     * 图形验证码
     */
    @NotBlank(message = "图形验证码不能为空!")
    private String graphicCode;

2. VO转DTO转换工具类：

package com.guoranxinxian.common.util;

/**
 * description: vo转换工具类
 */
public class WebBeanUtils<Vo, Dto> 

    /**
     * dot 转换为Do 工具类
     *
     * @param voEntity
     * @param dtoClass
     * @return
     */
    public static <Dto> Dto voToDto(Object voEntity, Class<Dto> dtoClass) 
        // 判断VoSF是否为空!
        if (voEntity == null) 
            return null;
        
        // 判断DtoClass 是否为空
        if (dtoClass == null) 
            return null;
        
        try 
            Dto newInstance = dtoClass.newInstance();
            org.springframework.beans.BeanUtils.copyProperties(voEntity, newInstance);
            // Dto转换Do
            return newInstance;
         catch (Exception e) 
            return null;
        
    

3. BaseWebController：

<dependencies>
    <dependency>
        <groupId>nl.bitwalker</groupId>
        <artifactId>UserAgentUtils</artifactId>
        <version>1.2.4</version>
    </dependency>
    <dependency>
        <groupId>com.guoranxinxian</groupId>
        <artifactId>guoranxinxian-shop-common-core</artifactId>
        <version>1.0-SNAPSHOT</version>
        <scope>compile</scope>
    </dependency>
</dependencies>

package com.guoranxinxian.common.base;


import com.guoranxinxian.api.BaseResponse;
import com.guoranxinxian.constants.Constants;
import nl.bitwalker.useragentutils.Browser;
import nl.bitwalker.useragentutils.UserAgent;
import nl.bitwalker.useragentutils.Version;
import org.springframework.ui.Model;

import javax.servlet.http.HttpServletRequest;

public class BaseWebController 

    /**
     * 500页面
     */
    protected static final String ERROR_500_FTL = "500";

    // 接口直接返回true 或者false
    public Boolean isSuccess(BaseResponse<?> baseResp) 
        if (baseResp == null) 
            return false;
        
        if (!baseResp.getRtnCode().equals(Constants.HTTP_RES_CODE_200)) 
            return false;
        
        return true;
    

    /**
     * 获取浏览器信息
     * @return
     */
    public String webBrowserInfo(HttpServletRequest request) 
        // 获取浏览器信息
        Browser browser = UserAgent.parseUserAgentString(request.getHeader("User-Agent")).getBrowser();
        // 获取浏览器版本号
        Version version = browser.getVersion(request.getHeader("User-Agent"));
        String info = browser.getName() + "/" + version.getVersion();
        return info;
    

    public void setErrorMsg(Model model, String errorMsg) 
        model.addAttribute("error", errorMsg);
    

4. 注册RegisterController 代码：

package com.guoranxinxian.member.feign;

import com.guoranxinxian.service.MemberRegisterService;
import org.springframework.cloud.openfeign.FeignClient;

@FeignClient("guoranxinxian-shop-service-member")
public interface MemberRegisterServiceFeign extends MemberRegisterService 

3. 测试

依次启动微信项目（AppWeixin）、会员服务(AppMember)、门户项目（AppPortal），在Eureka可以看到服务启动成功：

微信根据手机号获取注册码：

可以看到数据库是没有信息的，而Redis已经存入注册码：

接下来填写注册信息，内容如下：

点击注册，自动跳转到了登录界面，如下：

发现数据库里面新增了用户，注册成功：

4.总结

本文主要讲解门户注册功能，流程图如下：