文章詳情頁

vue實現登錄功能

瀏覽：2日期：2022-10-13 15:24:57

1.背景

完成了登錄的表單輸入框界面如下:

vue實現登錄功能

代碼:

<el-form label- 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的官方案例

本案例代碼如下:

官方案例:

vue實現登錄功能

本案例代碼如下:

<template> <div class='login_container'> <div class='login_box'>  <div class='avatar_box'> <img src='http://www.aoyou183.cn/assets/logo.png' alt=''> </div> <div>  <el-form :model='loginForm' :rules='loginRules' label- class='login_form'>  <el-form-item prop='username'> <el-input v-model='loginForm.username' prefix-icon='el-icon-s-custom'></el-input> </el-form-item>  <el-form-item prop='password'> <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> </div> </div></template><script> export default { name: 'Login', data() { return { // 表單數據 loginForm: { username: ’admin’, password: ’123456’ }, // 表單驗證 loginRules: { username: [ // trigger: ’blur’ 表示失去焦點觸發 {required: true, message: ’請輸入登錄賬號’, trigger: ’blur’}, {min: 5, max: 12, message: ’長度在 6 到 12 個字符’, trigger: ’blur’} ], password: [ {required: true, message: ’請輸入密碼’, trigger: ’blur’}, {min: 6, max: 20, message: ’長度在 6 到 20 個字符’, trigger: ’blur’} ], } } } }</script><style lang='less' type='text/less' scoped> .login_container { background-color: #2b4b6b; height: 100%; } .login_box { width: 450px; height: 300px; background-color: #fff; border-radius: 3px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); .avatar_box { height: 130px; width: 130px; 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: #fff; img { width: 100%; height: 100%; border-radius: 50%; background-color: #eee; } } } .login_form { position: absolute; bottom: 0; width: 100%; padding: 0 20px; box-sizing: border-box; }</style>4.表單重置功能

官方案例如下:

vue實現登錄功能

本案例代碼:

<template> <div class='login_container'> <div class='login_box'>  <div class='avatar_box'> <img src='http://www.aoyou183.cn/assets/logo.png' alt=''> </div> <div>  <el-form ref='loginFormRef' :model='loginForm' :rules='loginRules' label- class='login_form'>  <el-form-item prop='username'> <el-input v-model='loginForm.username' prefix-icon='el-icon-s-custom'></el-input> </el-form-item>  <el-form-item prop='password'> <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' @click='resetLoginForm'>重置</el-button> </el-form-item> </el-form> </div> </div> </div></template><script> export default { name: 'Login', data() { return { // 表單數據 loginForm: { username: ’’, password: ’’ }, // 表單驗證 loginRules: { username: [ // trigger: ’blur’ 表示失去焦點觸發 {required: true, message: ’請輸入登錄賬號’, trigger: ’blur’}, {min: 5, max: 12, message: ’長度在 6 到 12 個字符’, trigger: ’blur’} ], password: [ {required: true, message: ’請輸入密碼’, trigger: ’blur’}, {min: 6, max: 20, message: ’長度在 6 到 20 個字符’, trigger: ’blur’} ], } } }, methods:{ // 重置登錄表單 resetLoginForm(){ this.$refs.loginFormRef.resetFields() } } }</script><style lang='less' type='text/less' scoped> .login_container { background-color: #2b4b6b; height: 100%; } .login_box { width: 450px; height: 300px; background-color: #fff; border-radius: 3px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); .avatar_box { height: 130px; width: 130px; 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: #fff; img { width: 100%; height: 100%; border-radius: 50%; background-color: #eee; } } } .login_form { position: absolute; bottom: 0; width: 100%; padding: 0 20px; box-sizing: border-box; }</style>5.請求發出前數據校驗

vue實現登錄功能

// 登錄 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 等價于 --save

2.引入到vue項目中

import axios from ’axios’axios.defaults.baseURL = ’http://127.0.0.1:XXXX/XXXXX’Vue.prototype.$http = axios

3.發起登錄請求

<template> <div class='login_container'> <div class='login_box'>  <div class='avatar_box'> <img src='http://www.aoyou183.cn/assets/logo.png' alt=''> </div> <div>  <el-form ref='loginFormRef' :model='loginForm' :rules='loginRules' label- class='login_form'>  <el-form-item prop='username'> <el-input v-model='loginForm.username' prefix-icon='el-icon-s-custom'></el-input> </el-form-item>  <el-form-item prop='password'> <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' @click='login'>登錄</el-button> <el-button type='info' @click='resetLoginForm'>重置</el-button> </el-form-item> </el-form> </div> </div> </div></template><script> export default { name: 'Login', data() { return { // 表單數據 loginForm: { username: ’’, password: ’’ }, // 表單驗證 loginRules: { username: [ // trigger: ’blur’ 表示失去焦點觸發 {required: true, message: ’請輸入登錄賬號’, trigger: ’blur’}, {min: 5, max: 12, message: ’長度在 6 到 12 個字符’, trigger: ’blur’} ], password: [ {required: true, message: ’請輸入密碼’, trigger: ’blur’}, {min: 6, max: 20, message: ’長度在 6 到 20 個字符’, trigger: ’blur’} ], } } }, methods: { // 重置登錄表單 resetLoginForm() { this.$refs.loginFormRef.resetFields() }, // 登錄 login() { // 登錄前參數驗證 this.$refs.loginFormRef.validate(async (valid) => { if (!valid) { console.log('參數驗證失敗') return } // 發起網絡請求登錄 let {data: result} = await this.$http.post(’login’, this.loginForm) console.log('result:' + result) if (result.meta.status !== 200) { console.log('登錄失敗') return } console.log('登錄成功') }) } } }</script><style lang='less' type='text/less' scoped> .login_container { background-color: #2b4b6b; height: 100%; } .login_box { width: 450px; height: 300px; background-color: #fff; border-radius: 3px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); .avatar_box { height: 130px; width: 130px; 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: #fff; img { width: 100%; height: 100%; border-radius: 50%; background-color: #eee; } } } .login_form { position: absolute; bottom: 0; width: 100%; padding: 0 20px; box-sizing: border-box; }</style>7.消息提示配置

1.添加element 消息組件

vue實現登錄功能

2.使用

vue實現登錄功能

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.路由導航守衛-登錄攔截

vue實現登錄功能

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 登錄功能的資料請關注好吧啦網其它相關文章！

Vue

上一條：vue中activated的用法下一條：vue 實現圖片懶加載功能

相關文章：

1. java加載屬性配置properties文件的方法2. PHP正則表達式函數preg_replace用法實例分析3. php redis setnx分布式鎖簡單原理解析4. CSS3中Transition屬性詳解以及示例分享5. 什么是Python變量作用域6. js select支持手動輸入功能實現代碼7. 如何在PHP中讀寫文件8. 《Java程序員修煉之道》作者Ben Evans：保守的設計思想是Java的最大優勢9. bootstrap select2 動態從后臺Ajax動態獲取數據的代碼10. vue使用moment如何將時間戳轉為標準日期時間格式

排行榜

					
					如何在PHP中讀寫文件
vue-drag-chart 拖動/縮放圖表組件的實例代碼
PHP正則表達式函數preg_replace用法實例分析
php redis setnx分布式鎖簡單原理解析
Spring @Primary和@Qualifier注解原理解析
一個 2 年 Android 開發者的 18 條忠告
Vue實現仿iPhone懸浮球的示例代碼
Spring Boot應用開發初探與實例講解
JS數據類型分類及常用判斷方法
關于docker部署的jenkins跑git上的程序的問題
PHP基礎之預定義接口3——IteratorAggregate接口
				