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

一.创建登录页面

代码：

<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代码：

<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代码

<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>