ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

用户注册_前端实现

2022-08-12 23:30:58  阅读:35  来源: 互联网

标签:用户注册 实现 前端 vm else user isRight tips password


<!DOCTYPE html>
<html>
	<head lang="en">
		<meta charset="UTF-8">
		<title>注册</title>
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
		<meta name="format-detection" content="telephone=no">
		<meta name="renderer" content="webkit">
		<meta http-equiv="Cache-Control" content="no-siteapp" />
		<link rel="stylesheet" href="static/css/amazeui.css" />
		<link href="static/css/dlstyle.css" rel="stylesheet" type="text/css">
		<link rel="stylesheet" href="static/css/bootstrap.min.css" />
	</head>
	<body>
		<div class="login-boxtitle" style="height: 100px;">
			<div class="logoBig">
				<img src="static/images/logo.png" style="margin-left: 0px ; height: 100px;">
			</div>
		</div>
		<div class="login-banner" style="background: rgb(142,213,21);">
			<div class="login-main">
				<div class="login-banner-bg"><span></span><img width="400"  src="static/images/act2.png" /></div>
				<div class="login-box" id="container">
					<h3 class="title">用户注册</h3>
					<h5 :style="colorStyle">&nbsp;{{tips}}</h5>
					<div class="clear"></div>
					<div class="login-form" style="background: none;">
						<form>
							<div class="user-name">
								<label for="user"><span class="glyphicon glyphicon-user" aria-hidden="true"></span></label>
								<input type="text" v-model="user.username" placeholder="邮箱/手机/用户名" @keyup="checkRegistInfo">
							</div>
							<div class="user-pass" style="margin-top: 15px;">
								<label for="password"><span class="glyphicon glyphicon-lock" aria-hidden="true"></span></label>
								<input type="password" v-model="user.password" placeholder="请输入密码" @keyup="checkRegistInfo">
							</div>
							<div class="user-pass" style="margin-top: 15px;">
								<label for="password"><span class="glyphicon glyphicon-lock" aria-hidden="true"></span></label>
								<input type="password" v-model="user.repassword" placeholder="请再次输入密码" @keyup="checkRegistInfo">
							</div>
						</form>
					</div>
					<div class="login-links">
						<br />
					</div>
					<div class="am-cf">
						<input type="submit" @click="doRegist" value="提交注册" class="am-btn am-btn-primary am-btn-sm">
					</div>
					<div class="partner">
					</div>
				</div>
			</div>
		</div>
		<div class="footer ">
			<div class="footer-hd ">
			</div>
			<div class="footer-bd ">
				<p>
					<a href="# ">联系我们</a>
					<a href="# ">网站地图</a>
				</p>
			</div>
		</div>
	<script type="text/javascript" src="static/js/vue.js"></script>
	<script type="text/javascript" src="static/js/axios.min.js"></script>
	<script type="text/javascript">
		var baseUrl = "http://localhost:8080/";
		var vm = new Vue({
			el: "#container",
			data: {
				user: {
					username: "",
					password: "",
					repassword: ""
				},
				tips: "",
				colorStyle: "color:red",
				isRight: false
			},
			methods: {
				doRegist: function () {
					if(!vm.isRight) {
						vm.tips = "请确认注册信息, 输入完整且正确";
					} else {
						// 输入的信息, 都正确; 提交注册; 异步交互
						var url = baseUrl + "user/regist";
						// axios.post(url, {username:"111", password:"222"}).then((res)=>{
						// 	console.log(res);
						// });
						axios({
							method: "post",
							url: url,
							data: vm.user
						}).then((res)=>{
							var vo = res.data;
							if(vo.code == 10000) {
								vm.tips = "恭喜你,注册成功!";
								vm.colorStyle="color:green";
								setTimeout(function () {
									window.location.href="login.html";
								}, 3000);
							} else {
								vm.tips = "很遗憾, 注册失败";
							}
						});
					}
				},
				checkRegistInfo () {
					// 1.校验账号
					if(vm.user.username == "") {
						// 修改 tips
						vm.tips = "请输入账号";
						vm.isRight = false;
					} else if(vm.user.username.length < 8 || vm.user.username.length > 20) {
						// 不为空, 要它的长度
						vm.tips = "账号长度必须为8-20个字符";
						vm.isRight = false;
					} else {
						// 2.校验密码
						if(vm.user.password == "") {
							vm.tips = "请输入密码";
							vm.isRight = false;
						} else if(vm.user.password.length < 6 || vm.user.password.length > 16) {
							vm.tips = "密码长度必须为 6-10个字符";
							vm.isRight = false;
						} else {
							// 3.校验重复密码
							if(vm.user.repassword == "") {
								vm.tips = "请再次输入密码";
								vm.isRight = false;
							} else if(vm.user.repassword != vm.user.password) {
								vm.tips = "两次密码输入不一致";
								vm.isRight = false;
							} else {
								// 清空提示信息
								vm.tips = "";
								vm.isRight = true;
							}
						}
					}
				}
			}
		});
	</script>
	</body>
</html>
package com.qfedu.fmmall.controller;

import com.qfedu.fmmall.entity.Users;
import com.qfedu.fmmall.service.UserService;
import com.qfedu.fmmall.vo.ResultVO;
import io.swagger.annotations.Api;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;

import javax.annotation.Resource;

/**
 * 控制器
 * contrlloler : 接请求, 转给 service; service来处理, 返回 响应
 * @author beyondx
 * @date Created in 2022/08/10/ 12:40
 */
@RestController
@RequestMapping("/user")
@Api(value= "用户管理", tags = "提供用户的登录和注册接口")
@CrossOrigin
public class UserController {

    @Resource
    private UserService userService;

    // url: http://ip:port/fmmall/user/login
    // params 参数类型 参数个数 参数的含义
    // url http://ip   这个时候, 不能写 user/login了; 因为前后端 项目, 在 不同的 服务器(物理服务器/服务器软件)
    // method get
    // 只接受 get请求
//    @ApiOperation("用户登录接口")
//    @ApiImplicitParams({
//            @ApiImplicitParam(dataType = "string", name = "username", value = "用户登录账号", required = true),
//            @ApiImplicitParam(dataType = "string", name = "password", value = "用户登录密码", required = true)
//    })
    @GetMapping("/login")
    public ResultVO login(@RequestParam("username") String name,
                          @RequestParam(value = "password") String pwd) {
        ResultVO resultVO = userService.checkLogin(name, pwd);
        System.out.println(resultVO);
        return resultVO;
    }

//    @ApiOperation("用户注册接口")
//    @ApiImplicitParams({
//            @ApiImplicitParam(dataType = "string", name = "username", value = "用户注册账号", required = true),
//            @ApiImplicitParam(dataType = "string", name = "password", value = "用户注册密码", required = true)
//    })
    @PostMapping("/regist")
    public ResultVO regist(@RequestBody Users user) {
        ResultVO resultVO = userService.userRegist(user.getUsername(), user.getPassword());
        return resultVO;
    }

}


标签:用户注册,实现,前端,vm,else,user,isRight,tips,password
来源: https://www.cnblogs.com/beyondx/p/16581728.html

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有