标签：用户注册 实现 前端 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"> {{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
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。