前端发送数据埋点时使用1px透明gif（我的第一个项目(四)：(前端)发送请求以及表单校验）
导读：好家伙，本篇将继续完善前端界面...
好家伙 ，本篇将继续完善前端界面
效果展示:
1.注册登陆
(后端已启动)
2.注册表单验证
(前端实现的表单验证)
在此之前:
我的第一个项目(二)：使用Vue做一个登录注册界面 - 养肥胖虎 - 博客园 (cnblogs.com)
后端部分:
我的第一个项目(三)：注册登陆功能(后端) - 养肥胖虎 - 博客园 (cnblogs.com)
1.前端发送网络请求(axios)
项目目录:
Mylogin.vue文件:
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之类的)也可以编辑相应的表单验证方法(规则)
当然,自己手写也没什么问题
补充:数据库建表
(前面好像一直都忘了)
声明：本站所有文章 ，如无特殊说明或标注 ，均为本站原创发布 。任何个人或组织 ，在未征得本站同意时 ，禁止复制 、盗用 、采集 、发布本站内容到任何网站 、书籍等各类媒体平台 。如若本站内容侵犯了原著者的合法权益 ，可联系我们进行处理 。
创心域SEO版权声明：以上内容作者已申请原创保护，未经允许不得转载，侵权必究！授权事宜、对本内容有异议或投诉，敬请联系网站管理员，我们将尽快回复您，谢谢合作！