2. 程式人生 > 程式設計 >vue實現登入功能

vue實現登入功能

阿新 • • 發佈：2021-01-04

1.背景

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

vue實現登入功能

程式碼:

<!-- 輸入框-->
   <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.表單資料格式錯誤提示

官方案例:

vue實現登入功能

本案例程式碼如下:

<template>
 <div class="login_container">
  <div class="login_box">
   <!--登入logo-->
   <div class="avatar_box">
    <img src="../assets/logo.png" alt="vue實現登入功能">
   </div>
   <div>
    <!-- 輸入框-->
    <el-form :model="loginForm" :rules="loginRules" label-width="0px" class="login_form">
     <!-- 使用者名稱 prop="username" 與表單驗證屬性對應-->
     <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: '請輸入密碼',{min: 6,max: 20,message: '長度在 6 到 20 個字元',}
   }
  }
 }
</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">
   <!--登入logo-->
   <div class="avatar_box">
    <img src="../assets/logo.png" alt="vue實現登入功能">
   </div>
   <div>
    <!-- 輸入框-->
    <el-form ref="loginFormRef" :model="loginForm" :rules="loginRules" label-width="0px" class="login_form">
     <!-- 使用者名稱 prop="username" 與表單驗證屬性對應-->
     <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: ''
    },}
   }
  },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%);
   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">
   <!--登入logo-->
   <div class="avatar_box">
    <img src="../assets/logo.png" alt="vue實現登入功能">
   </div>
   <div>
    <!-- 輸入框-->
    <el-form ref="loginFormRef" :model="loginForm" :rules="loginRules" label-width="0px" class="login_form">
     <!-- 使用者名稱 prop="username" 與表單驗證屬性對應-->
     <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",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%);
   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 router

10.退出功能

<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實現登入功能

1.背景 完成了登入的表單輸入框介面如下: 程式碼: <!-- 輸入框--> <el-form label-width=\"0px\" class=\"login_form\">

Vue 實現登入介面驗證碼功能

登入介面 SIdentify 建立驗證碼元件，實現繪畫出圖片驗證碼 <template> <div class=\"s-canvas\">

vue實現登入、註冊、退出、跳轉等功能

本文給大家介紹vue實現登入、註冊、退出、跳轉功能，具體程式碼如下所示: 效果圖1：

Vue 中登入功能的實現

登入 表單驗證使用者名稱與密碼，傳送登入請求 login() { // 資料驗證 this.$refs.loginFormRef.validate(async valid => {

vue+springboot實現登入功能

本文例項為大家分享了+springboot實現登入功能的具體程式碼，供大家參考，具體內容如下

Vue實現登入記住賬號密碼功能的思路與過程

目錄實現思路這裡有三種方法來儲存賬號密碼：功能介面記住賬號密碼功能的具體實現密碼加密localStoragecookies總結實現思路

tp5框架使用cookie加密演算法實現登入功能示例

本文例項講述了tp5框架使用cookie加密演算法實現登入功能。分享給大家供大家參考，具體如下：

vue實現計算器功能

本文例項為大家分享了vue實現計算器功能的具體程式碼，供大家參考，具體內容如下

vue實現購物車功能（商品分類）

本文例項為大家分享了vue實現購物車功能的具體程式碼，供大家參考，具體內容如下

node.js +mongdb實現登入功能

一、開發環境準備 npm init -y //初始化倉庫 npm i koa koa-router -S //安裝koa和路由模組

vue實現登入攔截

需求：使用者只有登入了，使用者名稱儲存在本地儲存時，才能進入首頁，如果本地儲存沒有使用者名稱，就不能進入首頁

session + cookie 實現登入功能

前端部分程式碼實現 <div id=\"mainCp\"> <div class=\"postForm\"> <p> <label>使用者賬號：</label>

SpringBoot+mybatis+thymeleaf實現登入功能示例

1.專案檔案目錄一欄 2.開始工作 先按照上圖建立好相應的controller,mapper等檔案。

Vue實現登入

在登陸元件中找到登陸按鈕，繫結點選事件 <button class=\"login_btn\" @click=\"loginhander\">登入</button>

使用axios實現登入功能

1.建立一個Login.vue頁面 1.1 寫頁面 components/Login.vue 在 src/components 下建立 Login.vue 頁面

Android SQLite資料庫連線實現登入功能

本文例項為大家分享了Android SQLite資料庫連線實現登入功能的具體程式碼，供大家參考，具體內容如下

vue實現列印功能的兩種方法

第一種方法：通過npm安裝外掛 1，安裝npminstallvue-print-nb --save 2，引入安裝好以後在main.js檔案中引入

使用Django自帶的登入模組實現登入功能(包含token實現）)

技術標籤：djangopythonvuemysqlweb 1.建立虛擬環境，建立專案mysite，建立app user ， 建立超級管理員 python manage.py createsuperuser （建立的的使用者名稱密碼是接下拉要用的）

微信小程式實現登入功能 （第一種模式）

------------恢復內容開始------------ 第一種模式：設定小程式啟動頁為登入頁 1.wxml程式碼（佈局的，最終要的是按鈕）

Django 快速實現登入功能，完成login_required驗證

業務場景：某網站下很多站點URL，基於必須登入的頁面下，首現會跳轉到登陸頁面進行登入，URL中明顯記錄了下一站點的路由,但實際登入後未進行跳轉。