VSCode创建VUE项目（二）前端登录页面

一.创建登录页面

代码：

javascript 复制代码

<template>
    <div class="login-container dis-h">
       <div class="login-form  dis-h">
           <div class="dis-v left">
                <span> 欢迎~ </span>
               <span> VUE 新世界 </span>
           </div>
           <div class="dis-v right">
               <div class="username dis-h">
                   <el-input placeholder="请输入用户名"/>
               </div>
               <div class="pwd dis-h">
                    <el-input type="password" placeholder="请输入密码"/>
               </div>
               <div class="btn dis-h">
                   <el-button size="large"  style="width:220px;background-color:#626aef;color:#fff;font-weight:bold; ">登录</el-button>             
                </div>
               
               </div>   
       </div>
   </div>
</template>
<script setup>
</script>
<style >
.login-container{
   width: 100vw;
   height: 100vh;
   background-image: url('../assets/background.jpeg');
   
   align-items: center;
   justify-content: center;
   background-repeat: no-repeat; /* 背景图片不重复 */    
   background-size: cover; /* 背景图片覆盖整个div区域 */
   background-position: center; /* 背景图片居中显示 */
}
.login-form{
   width: 600px;
   height: 300px;
   /* background-color: red; */
   
}
.login-form .left{
   width: 50%;
   height: 100%;
   align-items: left;
   justify-content: center;
   font-size: 1.6rem;
   font-weight: bold;
   background:linear-gradient(to right bottom,rgba(136,209,234,0.80) 5%,rgba(215,193,187,0.80) 100% );
   color: #fff;
   text-indent:1rem;
}
.login-form .right{
   width: 50%;
   height: 100%;
   background-color: rgba(255, 255, 255, 0.90);
   align-items: center;
   justify-content: center;
}
.login-form .username,.pwd,.btn{
   padding: 0.5rem 0; 
  
}

/*水平排列子元素*/
.dis-h{
display: flex;
}
/*垂直排列子元素*/
.dis-v{
display: flex;
flex-direction: column;
}

</style>

二：修改路由：

三.修改App.vue文件，注释掉导航信息

四：刷新网页查看效果

四.前端登录并跳转逻辑处理

输入用户名、密码点击登录，成功可以跳转到其他页面

代码处理如图所示：

修改后的LoginView.vue代码：

javascript 复制代码

<template>
    <div class="login-container dis-h">
       <div class="login-form  dis-h">
           <div class="dis-v left">
                <span> 欢迎~ </span>
               <span> VUE 新世界 </span>
           </div>
           <div class="dis-v right">
               <div class="username dis-h">
                   <el-input placeholder="请输入用户名" v-model="loginform.username"/>
               </div>
               <div class="pwd dis-h">
                    <el-input type="password" placeholder="请输入密码" v-model="loginform.pwd"/>
               </div>
               <div class="btn dis-h">
                   <el-button size="large"  style="width:220px;background-color:#626aef;color:#fff;font-weight:bold; "
                   @click="commit">登录</el-button>             
                </div>
               
               </div>   
       </div>
   </div>
</template>
<script setup>
import {ref} from "vue"
import router from '@/router';
import { ElMessage } from 'element-plus';

var loginform=ref({
    username:"",
    pwd:""
})

var commit=function(){
    
  if(loginform.value.username=="123"&&loginform.value.pwd=="111"){
    ElMessage.success("YES,成功啦啦啦啦啦！");
    router.replace("./about")
  }
  else{
    ElMessage.error("Sorry,失败！");
  }
}


</script>
<style >
.login-container{
   width: 100vw;
   height: 100vh;
   background-image: url('../assets/background.jpeg');
   
   align-items: center;
   justify-content: center;
   background-repeat: no-repeat; /* 背景图片不重复 */    
   background-size: cover; /* 背景图片覆盖整个div区域 */
   background-position: center; /* 背景图片居中显示 */
}
.login-form{
   width: 600px;
   height: 300px;
   /* background-color: red; */
   
}
.login-form .left{
   width: 50%;
   height: 100%;
   align-items: left;
   justify-content: center;
   font-size: 1.6rem;
   font-weight: bold;
   background:linear-gradient(to right bottom,rgba(136,209,234,0.80) 5%,rgba(215,193,187,0.80) 100% );
   color: #fff;
   text-indent:1rem;
}
.login-form .right{
   width: 50%;
   height: 100%;
   background-color: rgba(255, 255, 255, 0.90);
   align-items: center;
   justify-content: center;
}
.login-form .username,.pwd,.btn{
   padding: 0.5rem 0; 
  
}

/*水平排列子元素*/
.dis-h{
display: flex;
}
/*垂直排列子元素*/
.dis-v{
display: flex;
flex-direction: column;
}

</style>

修改后的AboutView.vue代码

javascript 复制代码

<template>
  <div class="about">
    <h1>This is an about page</h1>
  </div>
  <div>
    <el-button @click="loginOut">退出登录</el-button>
  </div>
</template>

<script setup>
import router from '@/router';


var loginOut=function(){
  router.replace("/")
}

</script>