vue项目云e办——登录页面（一）

云e办

文章目录

云e办
- 视频学习地址
- 前端目标
- 效果
- 登录页面代码

视频学习地址

云e办视频学习地址

前端目标

表单可以校验是否为空，如果为空，点击登录时弹出错误提示框。

效果

登录页面代码

登录页面的views，Login.vue

<template><div><el-form :rules="rules" label-position="left" label-width="70px" ref="loginForm" :model="loginForm" class="loginContainer"><h3 class="login-title">系统登录</h3><el-form-item label="用户名" prop="username"><el-input type="text" auto-complete="false" v-model="loginForm.username"placeholder="请输入用户名"></el-input></el-form-item><el-form-item label="密码" prop="password"><el-input type="password" auto-complete="false" v-model="loginForm.password"placeholder="请输入密码"></el-input></el-form-item><el-form-item label="验证码" prop="code"><el-input type="text" auto-complete="false" v-model="loginForm.code" placeholder="点击更换验证码"style="width: 150px;margin-right: 5px"></el-input><img :src="captchaUrl"/></el-form-item><el-checkbox v-model="checked" class="login-remember">记住我</el-checkbox><el-button type="primary" style="width: 100%;" @click="submitLogin">登录</el-button></el-form></div>
</template><script>export default {name: "Login",data() {return {captchaUrl: '',loginForm: {username: '',password: '',code: '',},rules: {username: [{required: true, message: '请输入用户名', trigger: 'blur'}],password: [{required: true, message: '请输入密码', trigger: 'blur'}],code: [{required: true, message: '请输入验证码', trigger: 'blur'}]},checked:true,}},methods: {submitLogin() {this.$refs.loginForm.validate((valid) => {if (valid) {alert('submit!');} else {this.$message.error('请输入所有字段');return false;}});}}}
</script><style lang="less" scoped>.loginContainer {border-radius: 15px;background-clip: padding-box;margin: 180px auto;width: 350px;padding: 15px 35px 15px 35px;background: #fff;border: 1px solid #eaeaea;box-shadow: 0 0 25px #cac6c6;.login-title {margin: 10px auto 40px auto;text-align: center;}.login-remember {text-align: left;margin: 0 0 15px 0;}}
</style>

2021.12.29
因任务繁忙，暂时不连载，预计22年2月再继续更新

vue项目云e办——登录页面（一）相关推荐

vue项目云服务器,vue项目云服务器
vue项目云服务器内容精选换一换查询后端云服务器组列表.支持过滤查询和分页查询.如未特殊说明,匹配规则为精确匹配.GET /v2/{project_id}/elb/pools无请求样例1 全量查 ...
canvas java 上传截图_在Vue项目中使用html2canvas生成页面截图并上传
使用方法项目中引入 npm install html2canvas html代码 //html代码 js代码 // 引入html2canvas import html2canvas from 'ht ...
vue 打开html流_在vue项目中添加一个html页面，开启本地服务器
在vue项目里新增一个不需要登录的页面,那么我只能新增一个html页面了,不经过路由,直接在浏览器输入路径打开,那么就需要用到本地服务器, 1.vue里面的html页面最好放过在public文件夹里面 ...
Vue项目中实现用户登录及token验证
一.什么是token token的意思是"令牌",是服务端生成的一串字符串,作为客户端进行请求的一个标识.当用户第一次登录后,服务器生成一个token并将此token返回给客户端, ...
idea 启动界面导入项目_如何为您的项目启动有效的登录页面
idea 启动界面导入项目 by Christian-Peter Heimbach 通过克里斯蒂安·彼得·海姆巴赫如何为您的项目启动有效的登录页面 (How to launch an effecti ...
[vue-cli]在使用vue-cli开发vue项目时，自动刷新页面的原理你了解吗？
[vue-cli]在使用vue-cli开发vue项目时,自动刷新页面的原理你了解吗? 自动刷新页面并不是vue-cli的功能,而是webpack的hot-module-replacement-plug ...
vue项目中的回车登录
vue项目中的回车登录:(搭配element ui 的使用如果是原生,@keyup.enter="login(form)"就可以了) 在密码框上加代码:v-model=" ...
vue项目添加水印，防止刷新页面水印消失
引入一个waterMark.js文件之后 IE各种问题问题1:页面出现空白,登录页面都没有显示出来问题2:IE低版本(11以下)总是报语法错误问题1出现的原因是js文件包含箭头函数问题2出现的 ...
Vue进阶（幺陆叁）：vue项目启动后自动打开页面并设置默认浏览器
文章目录一.修改默认浏览器二.vue 项目启动自动打开页面三.拓展阅读以windows 系统为例,操作方法如下: 一.修改默认浏览器设置谷歌浏览器为默认浏览器. 1.首先打开"开始 ...

vue项目云e办——登录页面（一）

云e办

文章目录

视频学习地址

前端目标

效果

登录页面代码

vue项目云e办——登录页面（一）相关推荐

最新文章

热门文章