1.注册登陆

(后端已启动)

2.注册表单验证

(前端实现的表单验证)

在此之前:

我的第一个项目(二)：使用Vue做一个登录注册界面 - 养肥胖虎 - 博客园 (cnblogs.com)

后端部分:

我的第一个项目(三)：注册登陆功能(后端) - 养肥胖虎 - 博客园 (cnblogs.com)

1.前端发送网络请求(axios)

项目目录:

Mylogin.vue文件:

<template> <div class="login-container"> <div class="login-box"> <!-- 头像区域 --> <div class="text-center avatar-box"> <img src="../assets/logo.png" class="img-thumbnail avatar" alt=""> </div> <!-- 表单区域 --> <div class="form-login p-4"> <!-- 登录名称 --> <div class="form-group form-inline"> <label for="username">账号:</label> <input type="text" class="form-control ml-2" id="username" placeholder="请输入账号" autocomplete="off" v-model.trim="loginForm.loginName"/> </div> <!-- 登录密码 --> <div class="form-group form-inline"> <label for="password">密码:</label> <input type="password" class="form-control ml-2" id="password" placeholder="请输入密码" v-model.trim="loginForm.password"/> </div> <!-- 登录和重置按钮 --> <div class="form-group form-inline d-flex justify-content-end"> <button type="button" class="btn btn-secondary mr-2" @click="toregister">去注册</button> <button type="button" class="btn btn-primary" @click="login">登录</button> </div> </div> </div> </div> </template> <script> export default { name: 'MyLogin', data() { return { loginForm: { loginName: '', password: '' } } }, methods: { login() { // console.log('submit!',this.loginForm);  this.axios.post('http://localhost:3312/sys-user/login',this.loginForm).then((resp)=>{ console.log(resp); let data = resp.data; if(data.success){ this.loginForm= {}; this.$message({ message: '登陆成功!!!', type: 'success' }); this.$router.push({path:'/Home'}) } else { console.log(data) } }) }, toregister(){ this.$router.push('/register') }, } } </script> <style lang="less" scoped> .login-container { background-color: #35495e; height: 100%; .login-box { width: 400px; height: 250px; background-color: #fff; border-radius: 3px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); box-shadow: 0 0 6px rgba(255, 255, 255, 0.5); .form-login { position: absolute; bottom: 0; left: 0; width: 100%; box-sizing: border-box; } } } .form-control { flex: 1; } .avatar-box { position: absolute; width: 100%; top: -65px; left: 0; .avatar { width: 120px; height: 120px; border-radius: 50% !important; box-shadow: 0 0 6px #efefef; } } </style>

MyRegister.vue文件:

<template> <div class="login-container"> <div class="login-box"> <!-- 头像区域 --> <div class="text-center avatar-box"> <img src="../assets/logo.png" class="img-thumbnail avatar" alt=""> </div> <!-- 表单区域 --> <div class="form-login p-4"> <!-- 登录名称 --> <!--.trim用于去除首位空格 --> <div class="form-group form-inline"> <label for="username">账户:</label> <input type="text" class="form-control ml-2" id="username" placeholder="请输入昵称" autocomplete="off" v-model.trim="ruleForm.loginName" /> </div> <!-- 登录昵称 --> <div class="form-group form-inline"> <label for="password">昵称:</label> <input type="name" class="form-control ml-2" id="name" placeholder="请输入手机号" v-model.trim="ruleForm.name" /> </div> <!-- 登录密码 --> <div class="form-group form-inline"> <label for="password">密码:</label> <input type="password" class="form-control ml-2" id="password" placeholder="请输入登录密码" v-model.trim="ruleForm.password" /> </div> <!-- 确认密码 --> <div class="form-group form-inline"> <label for="password">确认密码:</label> <input type="trypassword" class="form-control ml-2" id="password" placeholder="请再次输入登录密码" v-model.trim="ruleForm.checkPass" /> </div> <!-- 登录和重置按钮 --> <div class="form-group form-inline d-flex justify-content-end"> <button type="button" class="btn btn-secondary mr-2" @click="backlogin">返回登陆界面</button> <button type="button" class="btn btn-primary" @click="submitForm(ruleForm)">注册</button> </div> </div> </div> </div> </template> <script> export default { name: 'MyRegister', data() { return { ruleForm: { loginName: '', password: '', name: '', checkPass: "" }, } }, methods: { backlogin() { this.$router.push('/login') return }, submitForm(ruleForm) { //校验部分 if (this.ruleForm.password != this.ruleForm.checkPass) { this.$message({ message: '两次输入密码不一致!!!', type: 'error' }); } else if(this.ruleForm.loginName==""){ this.$message({ message: '请输入账户!!!', type: 'error' }); } else if(this.ruleForm.name==""){ this.$message({ message: '请输入昵称!!!', type: 'error' }); } else if(this.ruleForm.password==""){ this.$message({ message: '请输入密码!!!', type: 'error' }); } else { this.axios.post('http://localhost:3312/sys-user/register', this.ruleForm).then((resp) => { console.log(resp); let data = resp.data; console.log(data); if (data.success) { this.ruleForm = {}; this.$message({ message: '恭喜你,注册成功,点击去登陆按钮进行登陆吧!!!', type: 'success' }); } }) this.$router.push({ path: '/login' }) } }, } } </script> <style lang="less" scoped> .login-container { background-color: #35495e; height: 100%; .login-box { width: 400px; height: 320px; background-color: #fff; border-radius: 3px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); box-shadow: 0 0 6px rgba(255, 255, 255, 0.5); .form-login { position: absolute; bottom: 0; left: 0; width: 100%; box-sizing: border-box; } } } .form-control { flex: 1; } .avatar-box { position: absolute; width: 100%; top: -65px; left: 0; .avatar { width: 120px; height: 120px; border-radius: 50% !important; box-shadow: 0 0 6px #efefef; } } </style>

请求部分:

{ //发起网络请求, this.axios.post('http://localhost:3312/sys-user/register', this.ruleForm).then((resp) => { console.log(resp); let data = resp.data; console.log(data); //检验注册是否成功 if (data.success) { //清空表单数据 this.ruleForm = {}; //发送成功通知  this.$message({ message: '恭喜你,注册成功,点击去登陆按钮进行登陆吧!!!', type: 'success' }); } }) this.$router.push({ path: '/login' }) }

2.表单验证:

if (this.ruleForm.password != this.ruleForm.checkPass) { this.$message({ message: '两次输入密码不一致!!!', type: 'error' }); } else if(this.ruleForm.loginName==""){ this.$message({ message: '请输入账户!!!', type: 'error' }); } else if(this.ruleForm.name==""){ this.$message({ message: '请输入昵称!!!', type: 'error' }); } else if(this.ruleForm.password==""){ this.$message({ message: '请输入密码!!!', type: 'error' }); }

这个没什么好解释的,就是很简单的验证

如果使用的是组件的表单(比如:element之类的)也可以编辑相应的表单验证方法(规则)

当然,自己手写也没什么问题

补充:数据库建表

(前面好像一直都忘了)