从0-1开发一个Vue3前端系统页面-8.注册页面

已于 2024-08-14 10:39:42 修改
阅读量235 收藏 4
点赞数 5
分类专栏： 从0-1开发一个Vue3前端系统页面 文章标签： 前端 vue.js javascript elementui html
于 2024-08-13 17:16:47 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/XiaomeiGuiSnJs/article/details/141163748
版权

本节结合上节7.登录页面应用滑动验证码最后的router-link跳转实现注册页面的开发

1.新建register.vue文件

2.配置路由

3.注册页面布局与优化

<template>
    <div class="registerBody">
        <div class="registerContent">
            <el-card class="card" :body-style="{ padding: '0 20px' }">
                <template #header>
                    <h2>用户注册</h2>
                </template>
                <div class="registerForm">
                    <div class="back" @click="goBack">
                        <p>返回</p>
                    </div>
                    <el-form v-model="registerForm"></el-form>
                </div>
            </el-card>
        </div>
    </div>
</template>
<style>
.registerBody .card .el-form .el-form-item__label {
    padding: 0;
    font-weight: bold;
    font-size: 16px;
    width: 85px !important;
}
</style>
<style lang="scss" scoped>
.registerBody {
    min-width: 100%;
    min-height: 100%;
    background-image: url("@/assets/image/loginBackground.jpg");
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;

    .registerContent {
        .card {
            background: rgba(255, 255, 255, 0.7);
            width: 450px;
            height: 588px;
            border-radius: 10px;

            h2 {
                margin: 0 auto;
            }

            .registerForm {
                width: 100%;
                margin: 0 auto;
                height: 80%;
                display: flex;
                flex-direction: column;

                .back {
                    width: 20%;
                    height: 40px;
                    display: flex;
                    flex-direction: row;
                    cursor: pointer;
                    align-items: center;

                    p {
                        width: 42px;
                        height: 42px;
                        text-align: center;
                        align-content: center;
                        font-size: 18px;

                    }
                }

                .el-form {
                    display: grid;
                    place-items: center;
                    border: 1px solid rgb(228, 231, 237);
                    width: 100%;
                    align-items: center;

                    .el-input,
                    .el-radio-group {
                        width: 240px;
                        height: 40px;
                        font-size: 16px;
                    }

                    .el-button {
                        width: 285px;
                        height: 40px;
                        font-size: 20px;
                    }
                }
            }
        }
    }
}
</style>

4.注册表单

<el-form v-model="registerForm">
    <el-form-item label="姓&emsp;&emsp;名：" prop="uname">
        <el-input type="text" v-model="registerForm.uname" placeholder="请输入姓名"></el-input>
    </el-form-item>
    <el-form-item label="性&emsp;&emsp;别：" prop="sex">
        <el-radio-group v-model="registerForm.sex">
            <el-radio border value="1">男</el-radio>
            <el-radio border value="0">女</el-radio>
        </el-radio-group>
    </el-form-item>
    <el-form-item label="邮&emsp;&emsp;箱：" prop="email">
        <el-input type="text" v-model="registerForm.email" placeholder="请输入邮箱"></el-input>
    </el-form-item>
    <el-form-item label="常用手机：" prop="telephone">
        <el-input type="text" v-model="registerForm.telephone" placeholder="请输入手机号"></el-input>
    </el-form-item>
    <el-form-item label="身份证号：" prop="idcard">
        <el-input type="text" v-model="registerForm.idcard" placeholder="请输入身份证号"></el-input>
    </el-form-item>
    <br>
    <el-button color="#626aef" @click="toRegister">注册</el-button>
    <br>
    <el-button color="#5941a6" style="color:white" @click="toReset">重置</el-button>
</el-form>

5.效果图

6.提交数据成功后返回登录页

附录

<template>
    <div class="registerBody">
        <div class="registerContent">
            <el-card v-if="!isRegister" class="card" :body-style="{ padding: '0 20px' }">
                <template #header>
                    <h2>用户注册</h2>
                </template>
                <div class="registerForm">
                    <div class="back" @click="goBack">
                        <p>返回</p>
                        <svg t="1723536226845" class="icon" viewBox="0 0 1237 1024" version="1.1"
                            xmlns="http://www.w3.org/2000/svg" p-id="1454" width="40" height="40">
                            <path
                                d="M481.216 273.002667V0L0 477.802667l481.216 477.994666V675.84c343.68 0 584.32 109.205333 756.117333 348.181333-68.693333-341.376-274.901333-682.602667-756.117333-750.997333"
                                fill="#4AD9FD" p-id="1455"></path>
                        </svg>
                    </div>
                    <el-form v-model="registerForm">
                        <el-form-item label="姓&emsp;&emsp;名：" prop="uname">
                            <el-input type="text" v-model="registerForm.uname" placeholder="请输入姓名"></el-input>
                        </el-form-item>
                        <el-form-item label="性&emsp;&emsp;别：" prop="sex">
                            <el-radio-group v-model="registerForm.sex">
                                <el-radio border value="1">男</el-radio>
                                <el-radio border value="0">女</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="邮&emsp;&emsp;箱：" prop="email">
                            <el-input type="text" v-model="registerForm.email" placeholder="请输入邮箱"></el-input>
                        </el-form-item>
                        <el-form-item label="常用手机：" prop="telephone">
                            <el-input type="text" v-model="registerForm.telephone" placeholder="请输入手机号"></el-input>
                        </el-form-item>
                        <el-form-item label="身份证号：" prop="idcard">
                            <el-input type="text" v-model="registerForm.idcard" placeholder="请输入身份证号"></el-input>
                        </el-form-item>
                        <br>
                        <el-button color="#626aef" @click="toRegister">注册</el-button>
                        <br>
                        <el-button color="#5941a6" style="color:white" @click="toReset">重置</el-button>
                    </el-form>
                </div>
            </el-card>
            <el-card v-else class="card" :body-style="{ padding: '0 20px' }">
                <el-result icon="success" title="注册成功" :sub-title="`${count}秒后自动返回登陆页面`">
                    <template #extra>
                        <el-button type="primary" @click="goBack">返回</el-button>
                    </template>
                </el-result>
            </el-card>
        </div>
    </div>
</template>
<script>
import { ElMessage, ElMessageBox } from 'element-plus'
export default {
    data() {
        return {
            count: 5,
            isRegister: false,
            registerForm: {}
        }
    },
    created() {
        this.count = 5;
    },
    methods: {
        toRegister() {
            ElMessageBox.alert(
                '请牢记您的账号和密码！<br> 您的账号是：2041036529<br>您的密码是：792364@qq.com',
                '提示',
                {
                    dangerouslyUseHTMLString: true,
                    draggable: true,
                    overflow: true,
                    showClose: false,
                    confirmButtonText: '确定',
                    type: 'warning',
                }
            )
                .then(() => {
                    this.startCountdown();
                    this.isRegister = true;
                })
        },
        goBack() {
            if (this.count != 0) {
                this.count = -1;
            }
            this.$router.push({
                path: '/login'
            })
            this.isRegister = false;
        },
        startCountdown() {
            let interval = setInterval(() => {
                if (this.count > 0) {
                    this.count--;
                } else {
                    clearInterval(interval);
                    this.goBack(); // 返回登录页面
                }
            }, 1000);
        },
    }
}
</script>
<style>
.registerBody .card .el-form .el-form-item__label {
    padding: 0;
    font-weight: bold;
    font-size: 16px;
    width: 85px !important;
}
</style>
<style lang="scss" scoped>
.registerBody {
    min-width: 100%;
    min-height: 100%;
    background-image: url("@/assets/image/loginBackground.jpg");
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;

    .registerContent {
        .card {
            background: rgba(255, 255, 255, 0.7);
            width: 450px;
            height: 588px;
            border-radius: 10px;

            h2 {
                margin: 0 auto;
            }

            .registerForm {
                width: 100%;
                margin: 0 auto;
                height: 80%;
                display: flex;
                flex-direction: column;

                .back {
                    width: 20%;
                    height: 40px;
                    display: flex;
                    flex-direction: row;
                    cursor: pointer;
                    align-items: center;

                    p {
                        width: 42px;
                        height: 42px;
                        text-align: center;
                        align-content: center;
                        font-size: 18px;

                    }
                }

                .el-form {
                    display: grid;
                    place-items: center;
                    border: 1px solid rgb(228, 231, 237);
                    width: 100%;
                    align-items: center;

                    .el-input,
                    .el-radio-group {
                        width: 240px;
                        height: 40px;
                        font-size: 16px;
                    }

                    .el-button {
                        width: 285px;
                        height: 40px;
                        font-size: 20px;
                    }
                }
            }
        }
    }
}
</style>
不再会有谎言
关注
专栏目录
vue实现注册界面
weixin_35752645的博客
12-17 969
<p>在 Vue 中实现注册界面可以分为以下几步：</p> <ol> <li><p>在组件中创建一个表单，用来输入用户名、密码、电子邮件等信息。</p> </li> <li><p>使用 Vue 的表单绑定特性，将表单中的输入绑定到组件的数据中。</p> </li> &...
Element-ui-vue3-前端界面开发-配置-编辑main.js-nodejs基础语法-vue3-html模板语法-vue文件编译
插件开发
05-08 1322
在 Vue 3 中，计算属性（Computed Properties）是一种强大的功能，它允许你声明一个依赖于其他响应式数据属性的属性，并且这个属性的值会根据其依赖的数据的变化而自动更新。在Vue3中，setup函数中的this指向的是undefined，因为setup函数是在组件实例化之前执行的，此时还没有this对象。组件中的data是一个函数，他返回一个data对象，里面包含着用户定义的组件的属性变量，当根组件挂载到某个DOM元素上创建好组件实例后，Vue将data以$data的形式存在于组件中。
【Vue3】注册功能【el-form】
qq_39921135的博客
06-16 388
绑定的整个rules规则对象 { xxx, xxx, xxx }，form中可能有多个表单数据，里面的分别对应三个校验规则，所以rules是要基于ruleForm里的数据进行实现的。trigger：什么时候触发，blur —> 失焦时校验，change —> 实时校验，不写的话，默认是change。ruleForm绑定的是form对象，这个form对象是用来收集当前表单里全部的表单数据的。：绑定的是绑定的整个form的数据对象 { xxx, xxx, xxx }。规则是个数组，表示可以配置很多条规则。
html+axios+springboot实现登录注册(前端代码)
最新发布
c_kk_kkk的博客
08-17 986
input placeholder="确认密码:" v-model="newPasswordtow" type="password"><input placeholder="密码:" v-model="newPassword" type="password"><input placeholder="账号:" v-model="loginUsername"><input placeholder="账号:" v-model="newUsername"><a href="./login.html">已有账号？
vue3的登录注册页面
weixin_65201086的博客
05-28 3433
vue3登录注册页面
VUE登录注册页面,完整vue，直接复制
热门推荐
good_good_study5的博客
02-01 1万+
VUE登录注册页面，直接复制全部
Vue创建注册页面
qq_52335038的博客
10-02 1万+
一、需求： 开发注册页面，对输入账号和昵称进行判空处理，两次密码判断是否相同，注册成功后进入到首页 二、删除一些不需要的组件 1：删除scr/views/下的About.vue和Home.vue 2.把App.vue还原成下图： <template> <div id="app"> <router-view /> </div> </template> <style lang="less"> <
【前端】注册页面
人生苦短，我用python
01-27 428
Code： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> /* 头部样式 */
Vue开发基于vue-cli搭建的仿TIM纯前端页面.zip
05-20
在本文中，我们将深入探讨如何使用Vue.js框架和vue-cli工具来开发一个仿TIM（Tencent Instant Messenger）的纯前端页面。Vue.js是目前非常流行的一款前端JavaScript框架，以其轻量级、易学易用和组件化的特点深受...
Vue开发-基于vue实现的单页面应用demo示例实现.zip
05-09
本示例是基于Vue.js实现的单页面应用程序（Single-Page Application，SPA）的实践教程，旨在帮助开发者了解如何构建一个完整的Vue项目。 在Vue.js中，单页面应用的核心概念是组件化。组件是Vue应用程序的基本构建块...
vue-shop源码适用于nodejs 14.8.0版本
06-13
Vue.js 是一个轻量级的前端JavaScript框架，以其组件化、易用性和高性能著称。在本项目中，Vue 被用来创建用户界面，提供丰富的交互体验。 项目结构分析： 1. **src** 文件夹：这是Vue项目的主要代码存放地。其中...
web前端中一个注册页面
12-24
自己平时的练习，我是今年才学的web，做的不好，希望大家不要介意，希望对大家有帮助。
详解如何配置vue-cli3.0的vue.config.js
10-18
在如今的前端开发中，Vue.js 是一个非常流行的JavaScript框架，它让开发者能够以组件的方式构建交互式的Web界面。Vue CLI是Vue.js开发的官方脚手架工具，其最新版本Vue CLI 3.0较之以往版本做了很多改进，一个非常...
Vue3+element-plus 后台管理系统（含登陆注册功能页面）
weixin_54629917的博客
03-24 1万+
Vue3+element-plus 搭建后台管理系统,获取远程数据对页面进行渲染。(包含登录注册页)
基于vue-注册登录页面
weixin_51029697的博客
03-28 4978
本文应用Vue3+Element-Plus+Ts构建登录注册页面 一、Vue-cli项目搭建 引用其他博主这里就不过多赘述，详情：Vue(二)：Vue3安装_zhouym_的博客-CSDN博客_安装vue3 二、在components下新建InputGroup.vue,LoginForm.vue,RegisterForm.vue。views同样新建404.vue，forgotPassword.vue，LoginRegister.vue。 三、router里面的路由都是根据views下的.
【Vue】登录注册界面制作
m0_67930426的博客
12-09 2906
1. 创建vue项目2. 整合element-ui在view目录下创建文件本篇内容使用到了 v-model @click 指令具体用法可以参考。
Vue的登录注册页面
weixin_42611177的博客
02-15 546
Vue是一个流行的JavaScript框架，可以用于开发前端应用程序。在Vue中，可以使用组件来构建登录注册页面。 对于登录页面，可以创建一个组件，包含输入用户名和密码的表单，并在表单提交时向服务器发送请求以进行身份验证。如果身份验证成功，可以将用户重定向到应用程序的主页，否则可以向用户显示错误消息。 对于注册页面，可以创建另一个组件，包含输入用户名、密码和其他必需信息的表单。当表单提交时，可以将...
编写一个前端登录注册页面
weixin_35754676的博客
12-17 339
好的，我会尽力为您提供帮助。 在编写前端登录注册页面时，需要考虑以下几个方面： 用户界面设计：需要考虑如何设计页面的布局和风格，使其能够吸引用户的眼球并且易于使用。 数据输入：需要设计输入框和按钮，供用户输入用户名、密码等信息。 数据验证：在用户提交信息之前，需要对输入的数据进行验证，确保其符合要求，比如密码强度足够。 数据处理：当用户提交信息时，需要将其发送到服务器端进行处理，并基于服务...
Vue3案例——设计用户注册页面
brucexia的专栏
03-14 1060
使用Vue.js设计用户注册页面比较简单。通过使用v-model指令对表单数据自动收集，从而能够轻松实现表单输入和应用状态之间的双向绑定。案例代码如例4.15所示。在Chrome浏览器中运行程序，输入注册的信息后，单击“注册”按钮，按F12键打开控制台并切换到Console选项卡，可以看到用户的注册信息，如图4-21所示。本文节选自《Vue.js 3.x+Element Plus从入门到精通（视频教学版）》，获出版社和作者授权发布。【例4.15】 设计用户注册页面（源代码\ch4\4.15.html）。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值