移动端登录页面-vue

前言

页面效果

具体实现

注意

源码

前言

前几天用vue写了一个移动端的登录界面，记录一下这个练手小项目。

页面效果

具体实现

<template><div class="login_container"><div class="login_box"><!-- 头像区域 --><div class="avatar_box"><img src="../assets/头像.png" alt=""></div><!-- 登录表单区域 --><el-form ref="loginFormRef" :model="loginForm" :rules="loginFormRules" label-width="auto" class="login_form" ><!-- 用户名 （prop指定验证规则） --><el-form-item prop="username" ><el-input v-model="loginForm.username"   placeholder="name"></el-input></el-form-item><br><!-- 密码  --><el-form-item prop="password" ><el-input v-model="loginForm.password"  type="password" placeholder="password" show-password></el-input></el-form-item><br><!-- 按钮区域 --><el-form-item class="btns" password = "buttonClass"><button type="primary" @click="login" >登录</button></el-form-item></el-form></div></div>
</template><script>
export default {data() {return {// 这是登录表单的数据绑定对象loginForm: {username: '',password: ''},// 这是表单的验证规则对象loginFormRules: {// 验证用户名是否合法username: [{ required: true, message: '请输入登录名称', trigger: 'blur' }, //鼠标失去焦点的时候触发{ min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }],// 验证密码是否合法password: [{ required: true, message: '请输入登录密码', trigger: 'blur' },{ min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur' }]}}},methods: {login() {this.$refs.loginFormRef.validate(async valid => {// console.log(valid);if (!valid) returnconst { data: res } = await this.$http.post('login', this.loginForm)if (res.meta.status !== 200) return this.$message.error('登录失败！')this.$message.success('登录成功')// 1. 将登录成功之后的 token，保存到客户端的 sessionStorage 中//   1.1 项目中出了登录之外的其他API接口，必须在登录之后才能访问//   1.2 token 只应在当前网站打开期间生效，所以将 token 保存在 sessionStorage 中window.sessionStorage.setItem('token', res.data.token)// 2. 通过编程式导航跳转到后台主页，路由地址是 /homethis.$router.push('./home/index')})}}
}
</script><style lang="less" scoped>
.login_container {background-image:url(../assets/2.jpg);font-size: 16px;background-color: white;height: 100%;background-size:100% 100%;
}/deep/ .el-input__inner {font-size: 40px !important;height: 100px;border-radius:20px;
}.login_box {width: 80%;height: 1000px;border-radius: 3px;position: relative;left: 50%;top: 50%;transform: translate(-50%, -50%);.avatar_box {height: 200px;width: 200px;border: 1px solid #eee;border-radius: 50%;padding: 10px;box-shadow: 0 0 10px #ddd;position: absolute;left: 50%;transform: translate(-50%, -50%);background-color: black;img {width: 100%;height: 100%;border-radius: 50%;}}
}.login_form {position: absolute;bottom: 300px;width: 100%;box-sizing: border-box;
}.btns {width: 100%;height: 100px;button {border:none;border-radius:20px;height: 100px;width: 100%;justify-content: center;color: black;background-color: #50E3CE;font-size: 40px}
}</style>

注意

vue界面中的路径跳转与router包中的不一定匹配，这里仅是分享登录界面的设计，具体的请求路径还请自行调试

源码

可以支持一下博主

链接：也可以在百度云获得资源
提取码：abcd

移动端登录页面-vue相关推荐

使用opencv破解滑块验证码：以今日头条PC端登录页面滑块验证码为例
本文目标人群:python爬虫工程师一.首先看看破解的效果图二.滑块验证码的破解滑块验证码的破解的难点主要有两个:计算出滑块到缺口的距离和模拟人拖动滑块的轨迹. 如何计算出滑块到缺口的距离?从网 ...
Vue移动端登录页面（H5）
话不多说上代码额不先上图使用的是vant组件,引用和使用组件请去官网学习,链接↓ vant组件官网 <div class="center"><!-- 背景 ...
CAS-自定义CAS Server端登录页面
本文为转载 ,发表在: https://www.jianshu.com/p/72af74575f6d 一.前言在第七章节,我们搭建了SSO Server.在浏览器中输入http:www.sso.co ...
vue的登录页面功能实现
第一次的实战项目 1.登录页面(vue+elementUI) 1.1 引入elementui插件在命令中输入:npm i element-ui -S 在main.js 引入: import elem ...
uniapp 内嵌h5登录页面实现登录
需求:内嵌pc端登录页面,实现uniapp登录前提:pc端登录页面,登录成功之后会自动重定向到指定的pc端页面并加上鉴权成功的code // 举例 // www.maomin.com/login P ...
vue搭建项目、创建登录页面和后台交互之引入axios
目录 1. 搭建项目 1.1 使用vue-cli创建项目 1.2 通过npm安装element-ui 1.3 导入组件 2 创建登录页面 2.1 创建登录组件 2.2 引入css(css.txt) 2 ...
这两天老是有兄弟问到Vue的登陆和注册，登陆成功留在首页，没有登录回到登录页面，现在我用最简单实用的方法实现（两分钟技就看懂）...
其实登录注册,并且登录一次保持登录的状态,是每个项目都需要实现的功能. 网上也有很多的方法,不过,不是通俗易懂,在这里说一下我自己的方法,非常简单实用核心就是用localStorage存.取数据,这 ...
php未登录跳到登陆页面,vue实现未登录跳转到登录页面的方法
环境:vue 2.9.3; webpack;vue-router 目的:实现未登录跳转例子:直接在url地址栏输入...../home,但是这个页面要求需要登陆之后才能进入,判断的值就通过登陆之后给 ...
Vue.js-Day09【项目实战(附带完整项目源码)-day04：用户个人中心页面、用户登录页面、将项目打包部署到服务器上、项目汇报、实训心得】
Vue.js实训[基础理论(5天)+项目实战(5天)]博客汇总表[详细笔记] 实战项目源码[链接:https://pan.baidu.com/s/1r0Mje3Xnh8x4F1HyG4aQTA 提 ...

移动端登录页面-vue

前言

页面效果

具体实现

注意

源码

移动端登录页面-vue相关推荐

最新文章

热门文章