其他分享
首页 > 其他分享> > 淘东电商项目(25) -门户注册功能

淘东电商项目(25) -门户注册功能

作者:互联网

引言

本文代码已提交至Github(版本号:0bc0c9f7be8c3a9c64b2e9efec94f55ed8b1a334),有兴趣的同学可以下载来看看:https://github.com/ylw-github/taodong-shop

在上一节《淘东电商项目(24) -获取验证码功能》,主要讲解了注册页面中的获取验证码功能。

之前已经实现了部分注册的功能,可以参考我写过的博客:

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

本文目录结构:
l____引言
l____ 1. 前端代码
l____ 2. 后端端代码
l____ 3. 测试
l____总结

1. 前端代码

注册页面:
在这里插入图片描述
页面HTML代码(关键代码):

<form action="register" method="post">
    <div class="layui-fulid" id="house-login">
        <div class="layui-form">
            <p>手机注册</p>
            <div class="layui-input-block login">
                <i class="layui-icon layui-icon-username"></i> <input type="text"
                                                                      required lay-verify="required" value="${(registerVo.mobile)!''}"
                                                                      name="mobile" placeholder="请输入手机号码" class="layui-input">
            </div>

            <div class="layui-input-block login" style="margin-top: 12px;">
                <i class="layui-icon layui-icon-vercode"></i> <input
                        type="password" required lay-verify="required" name="password"
                        value="${(registerVo.password)!''}" placeholder="请输入密码"
                        class="layui-input">
            </div>


            <div class="layui-input-block-weixinQRcode" style="text-align: center;">
                <img alt="" src="../res/static/img/qrcode.jpg">

                <div style="text-align: center; font-size: 14px; color: #FF5722;">
                    关注微信公众号,发送手机号码可获得注册码
                </div>
            </div>


            <div class="layui-input-block login" style="margin-top: 12px;">
                <i class="layui-icon layui-icon-vercode"></i> <input
                        value="${(registerVo.registCode)!''}" name="registCode"
                        type="text" required lay-verify="required" placeholder="请输入微信注册码"
                        class="layui-input">
            </div>


            <div class="layui-input-block getCode" style="margin-top: 12px;">
                <input type="text" name="graphicCode"
                       value="${(registerVo.graphicCode)!''}"   placeholder="请输入验证码" class="layui-input">
                <img alt="" src="getVerify" onclick="getVerify(this);"
                     style="border: 1px solid #e2e2e2; font-size: 18px; height: 46px; margin-top: -69px; width: 44%; background-color: #e8d6c0; margin-left: 167px;">

            </div>
            <span style="color: red;font-size: 20px;font-weight: bold;font-family: '楷体','楷体_GB2312';">${error!''}</span>
            <button class="layui-btn" lay-submit lay-filter="user-login" style="margin-top: 5px;">注册</button>
        </div>
    </div>
</form>

2. 后端代码

1.请求VO(使用注解验证参数):

/**
 * description: 注册参数
 * create by: YangLinWei
 * create time: 2020/3/9 11:35 上午
 */
@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]))\\d{8})$", message = "手机号格式错误")
	private String mobile;
	/**
	 * 密码
	 */
	@NotNull(message = "密码不能为空!")
	private String password;

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

}

2.VO转DTO转换工具类:

/**
 * description: vo转换工具类
 * create by: YangLinWei
 * create time: 2020/3/9 11:37 上午
 */
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:

public class BaseWebController {
	/**
	 * 500页面
	 */
	protected static final String ERROR_500_FTL = "500.ftl";

	// 接口直接返回true 或者false
	public Boolean isSuccess(BaseResponse<?> baseResp) {
		if (baseResp == null) {
			return false;
		}
		if (!baseResp.getCode().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.注册Controller代码:

/**
 * description: 注册请求
 * create by: YangLinWei
 * create time: 2020/3/9 11:30 上午
 */
@Controller
public class RegisterController extends BaseWebController {
	private static final String MB_REGISTER_FTL = "member/register";
	@Autowired
	private MemberRegisterServiceFeign memberRegisterServiceFeign;
	/**
	 * 跳转到登陆页面页面
	 */
	private static final String MB_LOGIN_FTL = "member/login";

	/**
	 * 跳转到注册页面
	 * 
	 * @return
	 */
	@GetMapping("/register")

	public String getRegister() {
		return MB_REGISTER_FTL;
	}

	/**
	 * 跳转到注册页面
	 * 
	 * @return
	 */
	@PostMapping("/register")
	public String postRegister(@ModelAttribute("registerVo") @Validated RegisterVo registerVo,
			BindingResult bindingResult, Model model, HttpSession httpSession) {
		// 1.接受表单参数 (验证码) 创建对象接受参数 vo do dto
		if (bindingResult.hasErrors()) {
			// 如果参数有错误的话
			// 获取第一个错误!
			String errorMsg = bindingResult.getFieldError().getDefaultMessage();
			setErrorMsg(model, errorMsg);
			return MB_REGISTER_FTL;
		}
		// 建议不要if lese 判断 嵌套判断统一return
		// 2.判断图形验证码是否正确
		String graphicCode = registerVo.getGraphicCode();
		Boolean checkVerify = RandomValidateCodeUtil.checkVerify(graphicCode, httpSession);
		if (!checkVerify) {
			setErrorMsg(model, "图形验证码不正确!");
			return MB_REGISTER_FTL;
		}
		// 3.调用会员服务接口实现注册 将前端提交vo 转换dto
		UserInDTO userInpDTO = WebBeanUtils.voToDto(registerVo, UserInDTO.class);
		BaseResponse<JSONObject> register = memberRegisterServiceFeign.register(userInpDTO, registerVo.getRegistCode());
		if (!isSuccess(register)) {
			setErrorMsg(model, register.getMsg());
			return MB_REGISTER_FTL;
		}

		// 4.跳转到登陆页面
		return MB_LOGIN_FTL;
	}

}

3. 测试

依次启动微信项目(AppWeixin)、会员服务(AppMember)、门户项目(AppPortal),在Eureka可以看到服务启动成功:
在这里插入图片描述
微信根据手机号获取注册码:
在这里插入图片描述
可以看到数据库是没有信息的,而Redis已经存入注册码:

Redis 数据库
在这里插入图片描述 在这里插入图片描述

接下来填写注册信息,内容如下:
在这里插入图片描述

点击注册,自动跳转到了登录界面,如下:
在这里插入图片描述
发现数据库里面新增了用户,注册成功:
在这里插入图片描述

总结

本文主要讲解门户注册功能,流程图如下:
在这里插入图片描述

标签:25,return,String,淘东,FTL,注册,电商,public,页面
来源: https://blog.csdn.net/qq_20042935/article/details/104748222