1.背景
完成了登录的表单输入框界面如下:
代码:
<!-- 输入框--> <el-form label-width="0px" class="login_form"> <!-- 用户名 --> <el-form-item > <el-input prefix-icon="el-icon-s-custom"></el-input> </el-form-item> <!-- 密码 --> <el-form-item > <el-input prefix-icon="el-icon-lock"></el-input> </el-form-item> <!-- 按钮区域 --> <el-form-item > <el-button type="primary">登录</el-button> <el-button type="info">重置</el-button> </el-form-item> </el-form>
2.表单数据绑定
可以查看element的官方案例
本案例代码如下:
<div> <!-- 输入框--> <el-form :model="loginForm" label-width="0px" class="login_form"> <!-- 用户名 --> <el-form-item> <el-input v-model="loginForm.username" prefix-icon="el-icon-s-custom"></el-input> </el-form-item> <!-- 密码 --> <el-form-item> <el-input v-model="loginForm.password" prefix-icon="el-icon-lock" type="password"></el-input> </el-form-item> <!-- 按钮区域 --> <el-form-item> <el-button type="primary">登录</el-button> <el-button type="info">重置</el-button> </el-form-item> </el-form> </div>
<script> export default { name: "Login", data() { return { loginForm: { username: 'admin', password: '123456' } } } } </script>
3.表单数据格式错误提示
官方案例:
本案例代码如下:
<template> <div class="login_container"> <div class="login_box"> <!--登录logo--> <div class="avatar_box"> <img src="/UploadFiles/2021-04-02/logo.png">4.表单重置功能
官方案例如下:
本案例代码:
<template> <div class="login_container"> <div class="login_box"> <!--登录logo--> <div class="avatar_box"> <img src="/UploadFiles/2021-04-02/logo.png">5.请求发出前数据校验
// 登录 login() { // 登录前参数验证 this.$refs.loginFormRef.validate((valid) => { if (!valid) { console.log("参数验证失败") return } console.log("参数校验成功") }) }6.发起登录请求
1.安装:axios(可以cnpm安装,也可以下载js引入文件)
cnpm install axios -S
-D 等价于 --save-dev
-S 等价于 --save2.引入到vue项目中
import axios from 'axios'
axios.defaults.baseURL = 'http://127.0.0.1:XXXX/XXXXX'
Vue.prototype.$http = axios3.发起登录请求
<template> <div class="login_container"> <div class="login_box"> <!--登录logo--> <div class="avatar_box"> <img src="/UploadFiles/2021-04-02/logo.png">7.消息提示配置
1.添加element 消息组件
2.使用
8.登录成功后token存放
// 登录 login() { // 登录前参数验证 this.$refs.loginFormRef.validate(async (valid) => { if (!valid) return ; // 发起网络请求登录 let {data: result} = await this.$http.post('login', this.loginForm) console.log(result) if (result.meta.status !== 200){ this.$message.error(result.meta.msg) return } this.$message.success("登录成功") // token放入 sessionStorage window.sessionStorage.setItem('token', result.data.token) // 跳转到home路径 this.$router.push("/home") }) }9.路由导航守卫-登录拦截
import Vue from 'vue' import Router from 'vue-router' import Login from '@/components/Login' import Home from '@/components/Home' Vue.use(Router) const router = new Router({ routes: [ { path: "/", redirect: "/login" }, { path: '/login', name: 'Login', component: Login } , { path: '/home', name: 'Home', component: Home } ] }) router.beforeEach((to, from, next) => { // to 将要访问的路径 // from 从哪里跳转来的 // next 放行 // 判断是不是登录登录,登录路径直接放行 if (to.path == '/login') { next() return } // 获取token,看是否有token,有token放行 const token = window.sessionStorage.getItem("token") if (!token) { next('/login') return; } // 放行 next(); }) export default router10.退出功能
<template> <div> <el-button type="info" @click="logout">退出</el-button> </div> </template> <script> export default { name: "Home", methods: { // 退出登录 logout() { window.sessionStorage.clear() this.$router.push("/login") } } } </script> <style lang="less" scoped> </style>以上就是vue实现登录功能的详细内容,更多关于vue 登录功能的资料请关注其它相关文章!
华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com
暂无评论...
RTX 5090要首发 性能要翻倍!三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。
据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。
更新日志
2024年09月21日
2024年09月21日
- 王菲.1996-《乐乐精逊SACD日本限量版[WAV+CUE]
- 不止黑神话!杭州给原创企业真金白银扶持 打造“杭州游戏”品牌
- 很有多样性:《战锤》首次引入非二元性别角色
- 《少女前线2:追放》项目组将裁员 官方:进一步优化组织结构
- 陈慧琳.2002-闪亮每一天新歌+精选2CD【正东】【WAV+CUE】
- 袁培华.1992-有缘【歌林】【WAV+CUE】
- 王瑞霞.1996-是我太软心【名冠】【WAV+CUE】
- 《谭维维 30首经典流行歌曲精选辑 2CD》[WAV/分轨][1.1GB]
- 《赵传 出道三十年全新大碟 你过得还好吗》[WAV/分轨][460MB]
- 《发烧四大天王 磁性男声HiFi发烧碟 2CD》[WAV/分轨][1GB]
- 黑神话悟空上品鼠司空精魄获取方法一览|上品鼠司空精魄收集攻略
- 《真三国无双:起源》新情报将于9月26日公开,实机演示亮相!
- 黑神话悟空上品鼠禁卫精魄获取方法一览|上品鼠禁卫精魄收集攻略
- 优美的旋律至真的情怀《品茶轻音乐·极品典藏Vol.1CD1》[WAV+CUE]
- 曾嵘《峥嵘岁月DSD(试音碟)》WAV+CUE