自己使用vue写的一个还觉得不错的登录注册页面

登录页面效果

登录页面代码

<template><div class="content"> <div class="content-box"><vue-particlesclass="login-bg"color="#f4f4f4":particleOpacity="0.7":particlesNumber="100"shapeType="circle":particleSize="4"linesColor="#f4f4f4":linesWidth="1":lineLinked="true":lineOpacity="0.4":linesDistance="150":moveSpeed="3":hoverEffect="true"hoverMode="grab":clickEffect="true"clickMode="push"/><div class="content-login"><div class="content-login-info"><div class="content-title">Login</div><van-form ref="loginForm"><div style="margin:25px 0px"><van-fieldv-model="username"name="用户名"label="用户名"placeholder="用户名":rules="[{ required: true, message: '请填写用户名' }]"/></div><van-fieldv-model="password"type="password"name="密码"label="密码"placeholder="密码":rules="[{ required: true, message: '请填写密码' }]"/><div style="margin: 26px;"><van-button round block type="primary" @keyup.enter.native="loginBtn" @click="loginBtn">登录</van-button></div><div class="content-bottom"><div @click="topassword">忘记密码？</div><div @click="toregister">注册</div></div></van-form></div></div></div></div>
</template>
<script>
export default {data(){return {username: '',password: '',loginData:[]}},methods:{loginBtn() {this.$refs.loginForm.validate().then(()=>{console.log(JSON.parse(localStorage.getItem('userinfo')))if(JSON.parse(localStorage.getItem('userinfo'))==null){this.$toast.fail('还未注册！')}else{this.loginData=JSON.parse(localStorage.getItem('userinfo'))let lis = Array.prototype.slice.call(this.loginData);if(lis&&lis.length>0){lis.forEach((item)=>{if(this.username == item.name && this.password == item.password){this.$toast.success('登录成功!')this.$router.push({name:'Home'})}if(this.username == item.name && this.password !== item.password){this.$toast.fail('用户密码不对!')}if(this.username !== item.name && this.password == item.password){this.$toast.fail('用户名字不对!')}   })}}})},toregister(){this.$router.push({name:'register'})},topassword(){this.$toast.fail('功能暂未开放!')}}
}
</script>
<style>.content{width: 100%;height: 711px;background-image: url('../assets/img/背景图4.jpg');background-size:cover ;display: flex;justify-content: center;align-items: center;}.login-bg{position:absolute;top:0;left: 0;width: 100%;height: 100%;}.content-title{text-align: center;font-size:25px;color:#fff}.content-login{position: fixed;top:26%;left:36.5%;width: 400px;height: 300px;background: rgba(223,219,219,0.2);display: flex;border-radius: 5px;justify-content: center;align-items: center;box-shadow: 0 25px 35px rgba(0,0,0,0.8);}.content-login-info{width: 90%;}.content-bottom{display: flex;justify-content: space-between;color: blue;font-size:14px}.content-bottom :hover{cursor: pointer;}
</style>

注册界面效果

注册页面代码

<template><div class="content-register"> <div class="content-box"><div class="content-login"><div class="content-login-info"><div class="content-title">Register</div><van-form ref="registerForm"><div style="margin:25px 0px"><van-fieldv-model="username"name="用户名"label="用户名"placeholder="用户名":rules="[{ required: true, message: '请填写用户名' }]"/></div><van-fieldv-model="password"type="password"name="密码"label="密码"placeholder="密码":rules="[{ required: true, message: '请填写密码' }]"/><div style="margin:25px 0px"><van-fieldv-model="ispassword"type="password"name="确认密码"label="确认密码"placeholder="确认密码":rules="[{ required: true, message: '请填写确认密码' }]"/></div><div style="margin: 26px;"><van-button round block type="primary" @keyup.enter.native="loginBtn" @click="registerBtn">注册</van-button></div></van-form></div></div></div></div>
</template>
<script>
export default {data(){return {username: '',password: '',ispassword:'',userinfoList:[],loginData:[]}},methods:{registerBtn() {this.$refs.registerForm.validate().then(()=>{if(this.password===this.ispassword){let obj={}obj.name=this.usernameobj.password=this.passwordthis.userinfoList.push(obj)localStorage.setItem('userinfo',JSON.stringify(this.userinfoList))this.$toast.success('恭喜你注册成功!')this.$router.push({name:'login'})}else{this.$toast.fail('两次密码不一致!')}})},}
}
</script>
<style>.content-register{width: 100%;height: 711px;background-image: url('../assets/img/背景图7.jpg');background-size:cover ;display: flex;justify-content: center;align-items: center;}.content-title{text-align: center;font-size:25px;color:#fff}/* .content-box{width: 550px;height: 400px;background: rgba(223,219,219,0.3);display: flex;justify-content: center;align-items: center;} */.content-login{width: 400px;height: 350px;background: rgba(223,219,219,0.2);display: flex;border-radius: 5px;justify-content: center;align-items: center;box-shadow: 0 25px 35px rgba(0,0,0,0.8);}.content-login-info{width: 90%;}
</style>

##页面图片素材

自己使用vue写的一个还觉得不错的登录注册页面相关推荐

Vue项目实战——【基于 Vue3.x + Vant UI】实现一个多功能记账本（登录注册页面，验证码）
基于 Vue3.x + Vant UI 的多功能记账本(四) 文章目录基于 Vue3.x + Vant UI 的多功能记账本(四) 项目演示 1.登录注册页面 2.图片验证码 3.修改 axios ...
jsf登录注册页面_您将在下一个项目中使用JSF吗？
jsf登录注册页面上周有一篇很棒的stackoverflow博客文章,主题是" Javascript框架的残酷生命周期" . 这篇文章是关于Javascript UI框架(ang ...
用layui做一个简易的登录注册页面
用layui做一个简易的登录注册页面 1.首先在主页绑定一个点击事件,点击登录按钮就可以弹出一个弹出窗,一般商场登录页面不会跳转一个新页面,因为如果进入一个新页面,登录后需要跳转会原来的页面,这样会导 ...
html登录页面用idea,利用IDEA怎么制作一个登录注册页面
利用IDEA怎么制作一个登录注册页面发布时间:2020-12-19 14:02:09 来源:亿速云阅读:186 作者:Leah 利用IDEA怎么制作一个登录注册页面?很多新手对此不是很清楚,为了帮 ...
html导航栏重叠怎么办,请问前端大神，html如何引入另一个html，写了一个导航栏想在多个页面中如何重复使用？...
写了一个头部导航栏的html 想在多个html页面中引用,请问怎么操作? 网上找了用标签实际效果并不好 , 导航栏中按钮下拉菜单无法完全显示请问大牛们平时开发中怎么处理这个的如图 : 可以使用 ...
小白教程——Windows下用PHP写一个简单的登录注册页面（二）
哈喽,看到这里希望小伙伴们都把wampserver环境安装好了,如果还没有安装或创建数据表就移步去看我上一篇文章吧.OK~接下我们将进入代码实现部分,首先我们需要一个文本编辑器,可以是电脑自带的not ...
vue+node全栈移动商城【10】注册页面传值到node中间件
上一节咱们已经实现了注册页面的基本结构,在这一节,咱们把注册页面的值,传入到nodeJs的中间件中,为接下来的保存用户注册信息做好准备. 我们已经在vant的组件输入框上,以v-model的方式双向绑 ...
Slog29_支配vue框架初阶项目之博客网站-注册页面-单选按钮
ArthurSlog SLog-29 Year·1 Guangzhou·China Aug 3th 2018 GitHub 掘金主页简书主页 segmentfault 大学毕业交了几万块钱的学费 ...
用vue实现小米商城登录注册页面
vue课堂作业,记录下代码有些不规范,大多是html+css实现的,目前是静态页面的实现效果展示 html代码 <body><div id="app"> ...

自己使用vue写的一个还觉得不错的登录注册页面

登录页面效果

登录页面代码

注册界面效果

注册页面代码

自己使用vue写的一个还觉得不错的登录注册页面相关推荐

最新文章

热门文章