SpringBoot + Vue + ElementUI 實現後臺管理系統模板 -- 前端篇（三）：引入 js-cookie、axios、mock 封裝請求處理以及返回結果

来源:https://www.cnblogs.com/l-y-h/archive/2020/05/25/12955001.html
-Advertisement-
Play Games

前提： （1） 相關博文地址： SpringBoot + Vue + ElementUI 實現後臺管理系統模板 -- 前端篇（一）：搭建基本環境：https://www.cnblogs.com/l-y-h/p/12930895.html SpringBoot + Vue + ElementUI 實現 ...


前提：

（1） 相關博文地址：

SpringBoot + Vue + ElementUI 實現後臺管理系統模板 -- 前端篇（一）：搭建基本環境：https://www.cnblogs.com/l-y-h/p/12930895.html
SpringBoot + Vue + ElementUI 實現後臺管理系統模板 -- 前端篇（二）：引入 element-ui 定義基本頁面顯示：https://www.cnblogs.com/l-y-h/p/12935300.html

 

（2）代碼地址：

https://github.com/lyh-man/admin-vue-template.git

 

一、引入 js-cookie

1、簡介

　　為了保存 token 值，可以使用 cookie 或者 localStorage 或者 sessionStorage 保存。
　　此處採用 cookie 進行保存，所以引入 js-cookie 插件，用於操作 cookie。

2、token

（1）簡單理解一下 token 是什麼？
　　直譯為 “令牌”，是由服務端生成的一串字元串，作為客戶端進行請求的一個標識。

（2）token 一般用在什麼時候？
　　一般用於用戶第一次登錄系統時，服務端生成一個 token，返回給客戶端，客戶端下次請求時帶上這個 token 發送請求，不用再帶上用戶名和密碼，簡化了驗證操作。

（3）為什麼使用 token？
　　HTTP 協議是一種無狀態的協議，客戶端發送請求時，服務端並不知道是哪個客戶端在訪問。可以使用 用戶名以及密碼 唯一確定用戶身份，但是每次響應請求時都要驗證一下用戶，這就很煩。
　　可以使用 session 以及 sessionId 的方式去解決，當客戶登錄系統時，服務端驗證並生成一個記錄保存在 session 中，並將這條記錄的 id（即 sessionID) 返回給 客戶端，客戶端使用 cookie 或者 localStorage 保存，再次發送請求時，帶上這個 sessionID，服務端響應並找到對應的記錄進行驗證。
　　可以使用 token 的方式解決，當客戶登錄系統時，服務端驗證並返回一個 token 給客戶端，客戶端下次發送請求時，帶上這個 token，服務端驗證 token 即可。

（4）session 與 token 區別？
　　session 存儲是需要空間的（存儲用戶信息），伺服器需要單獨保存一份，以空間換時間。
　　token 可以不用存儲用戶信息，伺服器不用保存（解密 token 即可），以時間換空間。

3、安裝、引入 js-cookie

（1）npm 安裝 js-cookie

【使用 npm 安裝：】
    npm install js-cookie

 

 

 

（2）引入 js-cookie
　　此處直接定義 一個 auth.js 並引入，使用時引入 該 js 文件即可。
　　也可使用 main.js 全局引用。

【在項目中引入 js-cookie：】
// 引入 token，此處直接引入，也可以在 main.js 中全局引入
import Cookies from 'js-cookie'

// 設置 token 存儲的 key
const TokenKey = 'Admin-Token'

// 獲取 token
export function getToken() {
  return Cookies.get(TokenKey)
}

// 設置 token
export function setToken(token) {
  return Cookies.set(TokenKey, token)
}

// 移除 token
export function removeToken() {
  return Cookies.remove(TokenKey)
}

 

 

二、引入、封裝 axios

1、簡介

　　想要發送 ajax 請求，vue 項目中一般使用 axios，使用起來雖然簡單，但如果不進行統一封裝，隨著項目越來越大，冗餘代碼會急劇增加，所有需要對 axios 進行二次封裝，使各個組件間能夠復用 axios，簡化代碼。

【vue 引入 axios 並簡單使用 參考地址：】
    https://www.cnblogs.com/l-y-h/p/11656129.html

 

2、封裝要求

　　統一 url 配置（可以與代理結合起來使用解決跨域問題）。
　　定義請求攔截器（request），比如：設置消息頭、設置 token 等。
　　定義響應攔截器（response），比如：統一錯誤處理、頁面重定向 等。

3、引入 axios

（1）npm 安裝 axios

【npm 安裝】
    npm install axios

 

 

（2）引入 axios
　　此處直接定義 一個 httpRequest.js 引入，使用時引入 該 js 文件即可。
　　也可使用 main.js 全局引用。

import Vue from 'vue'
import {
    getToken,
    removeToken
} from '@/http/auth.js'
import router from '@/router'
import {
    Message
} from 'element-ui'
import axios from 'axios'

// 創建 axios 實例
const http = axios.create({
    // 統一 url 配置，定義訪問首碼 baseURL
    baseURL: '/api',
    // 定義請求超時時間
    timeout: 10000,
    // 請求帶上 cookie
    withCredentials: true,
    // 定義消息頭
    headers: {
        'Content-Type': 'application/json; charset=utf-8'
    }
})

// 定義請求攔截器
http.interceptors.request.use(
    config => {
        // 讓每個請求攜帶 token
        config.headers['Admin-Token'] = getToken()
        return config
    },
    error => {
        Promise.reject(error)
    }
)

// 定義響應攔截器
http.interceptors.response.use(
    response => {
        const res = response.data
        // 當 token 失效時，清除 cookie 保存的 token 值，並跳轉到登陸界面
        if (res && res.code === 401) {
            removeToken()
            Message({
                message: res.message,
                type: 'error',
                duration: 5000
            })
            router.push({
                name: 'Login'
            })
        }
        // 未找到頁面時，跳轉到 404 頁面
        if (res && res.code === 404) {
            router.push({
                name: '404'
            })
        }
        return response
    },
    error => {
        return Promise.reject(error)
    }
)

export default http

 

 

（3）全局掛載 axios
　　在 main.js 中引入 httpRequest.js 文件，並全局掛載。

import http from '@/http/httpRequest.js'

// 全局掛載 http（axios）,使用的時候直接使用 this.$http 即可。
Vue.prototype.$http=http

 

 

（4）簡單寫個案例測試一下：（僅供參考）
後端：
　　定義一個 AuthController，用於返回 token。
其中：
　　@CrossOrigin 用來解決跨域（一般加上這個即可跨域）。如果此註解不生效，可以在前端配置代理來實現跨域。

package com.lyh.template.back.controller;

import com.lyh.template.back.util.Result;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
@RequestMapping("/auth")
@CrossOrigin
public class AuthController {
    @RequestMapping("/token")
    public Result getToken() {
        return Result.ok().data("token", "admin");
    }
}

 

 

如下，介面訪問正常（當然，使用 swagger 測試也一樣）。

 

 

前端：
　　修改代理，用於跨域。
　　在 vue.config.js 文件中進行配置，當路徑中出現 /api 時，會將其替換成 target 中的路徑。
　　而 target 路徑是從 配置文件中讀取的，生產環境與開發環境的 VUE_APP_URL 不同。
註：
　　開發環境時：
　　　　VUE_APP_URL=http://localhost:8000
　　生產環境時：
　　　　VUE_APP_URL=http://localhost:9000

module.exports = {
    lintOnSave: false,
    devServer: {
        port: process.env.NODE_ENV == "production" ? 8000 : 9000,
        proxy: {
            '/api': {
                target: process.env.VUE_APP_URL,
                // 允許跨域
                changeOrigin: true,
                ws: true,
                pathRewrite: {
                    '^/api': ''
                }
            }
        }
    }
}

 

 

修改一下 Login 組件中的登陸方法，測試一下。
　　發送 /auth/token 請求時，會代理到 http://localhost:8000/auth/token。
　　登錄成功後，會列印返回數據，並跳轉到主界面。

methods: {
    // 提交表單
    dataFormSubmit() {
    // TODO：登錄代碼邏輯待完善
    // alert("登錄代碼邏輯未完善")
    this.$http({
        url: '/auth/token',
        method: 'get'
    }).then(response => {
        console.log(response)
        this.$router.replace({name: 'Home'})
    })
    }
}

 

 

三、引入、封裝 mock

1、簡介

　　項目開發的時候，有時候後端介面不給力，要是必須從後端獲取數據，沒有其他方式獲取數據，那就很蛋疼了（只能等後端介面正常，才可以繼續開發前端）。
　　mock 是一個數據模擬生成器，用於幫助前端獨立於後端進行開發，其模擬 ajax 並返回相應的數據，從而使前端不必依賴於後端介面，方便開發。

【vue關於mock的簡單使用 參考地址：】
    https://www.cnblogs.com/l-y-h/p/11691110.html

 

2、封裝要求

　　定義不同的模塊，用於響應不同組件的請求。
　　可以方便、快捷的關閉某個模塊、或者某個請求的處理（關閉請求處理後，可以直接訪問後端介面）。

3、引入 mock

（1）npm 安裝 mock

【npm 安裝 mock：】
    npm install mockjs

 

 

（2）引入 mock
　　定義一個 mock 文件夾以及統一處理入口 mock.js。
　　定義一個 fnCreate 方法 用來處理 mock。
其中：
　　第一個參數為 模塊名，需要通過 import 引入。
　　第二個參數為 是否開啟 mock ，true 為開啟，false 為關閉。

import Mock from 'mockjs'
import * as login from './modules/login.js'

// 可以通過 isOpen 參數設置是否攔截整個模塊的 mock 功能
fnCreate(login, true)

/**
 * 創建mock模擬數據
 * @param {*} mod 模塊
 * @param {*} isOpen 是否開啟?
 */
function fnCreate(mod, isOpen = true) {
    if (isOpen) {
        for (var key in mod) {
            ((res) => {
                if (res.isOpen !== false) {
                    Mock.mock(new RegExp(res.url), res.type, (opts) => {
                        opts['data'] = opts.body ? JSON.parse(opts.body) : null
                        delete opts.body
                        console.log('\n')
                        console.log('%cmock攔截, 請求: ', 'color:blue', opts)
                        console.log('%cmock攔截, 響應: ', 'color:blue', res.data)
                        return res.data
                    })
                }
            })(mod[key]() || {})
        }
    }
}

 

 

（3）定義功能子模塊
　　給不同的組件定義不同的模塊，用於區分不同的操作。
比如創建一個 login.js 用來處理 登錄、登出操作。

import Mock from 'mockjs'

// 登錄
export function getToken() {
    return {
        // isOpen: false,
        url: 'api/auth/token',
        type: 'get',
        data: {
            'msg': 'success',
            'code': 0,
            'expire': Mock.Random.natural(60 * 60 * 1, 60 * 60 * 12),
            'token': Mock.Random.string('abcdefghijklmnopqrstuvwxyz0123456789', 32)
        }
    }
}

 

 

（4）全局引入 mock 文件
　　在 main.js 中引入，可以控制引入時機，比如只在開發環境下生效。

// 非生產環境, 適配mockjs模擬數據
if (process.env.NODE_ENV !== 'production') {
    require('@/mock')
}

 

 

（5）簡單測試一下。
　　開發環境運行時，登錄會觸發 mock ，在控制台列印數據。

 

 

 

 

（6）與後臺介面的區別。
　　使用 mock 返回數據 與 訪問後臺介面還是有區別的。
開發環境下，若想訪問後臺，
　　方式一：可以在 main.js 中將 引入 mock 文件的代碼註釋掉，就可以訪問了。

 

 

　　方式二：在 mock 的 fnCreate 方法中，將 isOpen 參數置為 false 即可（關閉 mock 功能）。

 

 

　　生產環境下，執行 dist 項目，可以通過 nginx 反向代理到後臺伺服器，進行訪問（後續項目部署時再補充）。


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • vue3.0 beta已出，來快速實踐一下吧
    vue3.0 beta已出，來快速實踐一下吧 "本文視屏" "我的個人博客" vue3向下相容vue2，vue2目前也是必學的 本節源碼 "立即前往" 前段時間尤大在嗶哩嗶哩直播了vue3的預覽，來簡單實踐一下吧 api文檔 Composition API RFC "立即前往" vue3地址 "立即 ...
  • 循序漸進VUE+Element 前端應用開發(2）--- Vuex中的API、Store和View的使用
    在我們開發Vue應用的時候，很多時候需要記錄一些變數的內容，這些可以用來做界面狀態的承載，也可以作為頁面間交換數據的處理，處理這些內容可以歸為Vuex的狀態控制。例如我們往往前端需要訪問後端數據，一般是通過封裝的Web API調用獲取數據，而使用Store模式來處理相關的數據或者狀態的變化，而視圖V... ...
  • 1.html5概述
    # 概述 - 1.新增的屬性 placeholder Calendar, date, time, email, url, search ContentEditable Draggable Hidden Context-menu Data-Val(自定義屬性) - 2.新增的標簽 語義化標簽（一群類似 ...
  • 對於前端編程，靠自學是真的可以的嗎?
    因人而異 自學肯定也是可以的，最主要還是要看個人的學習能力，意志力，和自己的決心， 下麵我就說一下，在自學時需要註意的一些誤區和需要掌握哪些技術知識，才能去找工作。 前端自學者存在的學習誤區： 1、所學東西可能已過時 奉為經典的東西可能已經過時，或者已經有了更好的替代者，而你獲取信息的渠道有限，消息 ...
  • Python與NodeJS的比較，2020年開發者該如何選擇
    隨著技術以如此快的速度發展，現在我們有必要選擇合適的工具來使用。每個軟體項目都有它需要滿足的多個需求和規範，因此為了滿足這些需求，選擇一種編程語言以允許您以有效的方式開發和管理項目非常重要。 由於有許多種編程語言和框架可供選擇，它們之間的比較已成為必然，因為你需要知道哪一個提供了最好的服務。當涉及到 ...
  • 七天帶你學會nodejs（一）
    什麼是NodeJS JS是腳本語言，腳本語言都需要一個解析器才能運行。對於寫在HTML頁面里的JS，瀏覽器充當瞭解析器的角色。而對於需要獨立運行的JS，NodeJS就是一個解析器。 每一種解析器都是一個運行環境，不但允許JS定義各種數據結構，進行各種計算，還允許JS使用運行環境提供的內置對象和方法做 ...
  • 循序漸進VUE+Element 前端應用開發(1）--- 開發環境的準備工作
    之前一直採用VS進行各種前端後端的開發，隨著項目的需要，正逐步融合純前端的開發模式，開始主要選型為Vue + Element 進行BS前端的開發，後續會進一步整合Vue + AntDesign的界面套件，作為兩種不同界面框架的展現方式。採用Vue + Element 的前端開發和之前的開發模式需要有... ...
  • 畢業生如果想學web前端技術，應該如何學才能快點找到工作
    從事web前端6年的工作，曾經是信息管理的一名應屆生，由於專業難找工作，掙錢少，當時選擇了轉行學前端開發技術，今天師兄就給大家講一下，作為應屆生，想學前端快點找工作應該如何去學。 對於畢業生來說，最要緊的事情就是快點找到工作。所以你學前端的時候就抓重點來學，因為很多東西，工作上用不到，所以學了也沒必 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類