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

登录页面效果

登录页面代码

<template>
    <div class="content"> 
          <div class="content-box">
             <vue-particles
                   class="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-field
                            v-model="username"
                            name="用户名"
                            label="用户名"
                            placeholder="用户名"
                            :rules="[{ required: true, message: '请填写用户名' }]"
                          />
                         </div>
                         <van-field
                            v-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-field
                            v-model="username"
                            name="用户名"
                            label="用户名"
                            placeholder="用户名"
                            :rules="[{ required: true, message: '请填写用户名' }]"
                          />
                         </div>
                         <van-field
                            v-model="password"
                            type="password"
                            name="密码"
                            label="密码"
                            placeholder="密码"
                            :rules="[{ required: true, message: '请填写密码' }]"
                          />
                          <div style="margin:25px 0px">
                          <van-field
                            v-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.username
                       obj.password=this.password
                       this.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>

##页面图片素材