Vue+ElementUI 搭建後臺管理系統（實戰系列二）

前言

使用ElementUI已經有一段時間了，在一邊上手開發後臺管理系統的同事，也記錄了一些筆記，一直都沒有時間將這些零零散散的筆記總結起來，整理成一個比較系統詳細一點的教程，可以留着以後來看。

關於開發過程中，確實使用到很大一部分的文檔，都說前端開發離不開文檔，重要的話說三遍，一定要多看文檔。

管理後臺解決方案

vue-element-admin 是一個後臺前端解決方案，它基於 vue 和 element-ui實現。

Star指數：69.7k
Github 地址：https://github.com/PanJiaChen/vue-element-admin
Demo體驗：https://panjiachen.github.io/vue-element-admin/#/dashboard
官方文檔：https://panjiachen.github.io/vue-element-admin-site/zh/

使用建議
本項目的定位是後臺集成方案，不太適合當基礎模板來進行二次開發。因爲本項目集成了很多你可能用不到的功能，會造成不少的代碼冗餘。如果你的項目不關注這方面的問題，也可以直接基於它進行二次開發。

---

推薦使用，簡化版

使用一下餓了麼簡化版後臺管理系統-eladmin-web
Github地址：https://github.com/elunez/eladmin-web

Vue+ElementUI 搭建後臺管理系統（實戰系列二）- 登錄功能

上一篇裏面已經搭建好了開發環境，今天就開始做一個簡單的功能，在原有的基礎上進行登錄功能的修改。

在項目上，只需要使用用戶名和密碼的時候，我將之前的驗證碼模塊都進行了刪除了。

關於代理的配置

打開vue.config.js文件進行配置

proxy: {
      '/api': {
        target: process.env.VUE_APP_BASE_API,
        changeOrigin: true,
        pathRewrite: {
          '^/api': 'api'
        }
      },
      '/check': {
        target: process.env.VUE_APP_BASE_API,
        changeOrigin: true,
        pathRewrite: {
          '^/check': 'check'
        }
      }
    }

再查看一下.env.development文件（開發環境）和.env.production文件（生產環境）,並且進行配置。

這裏多嘴一句,關於幾個環境百度解釋如下：

開發環境：開發環境是程序猿們專門用於開發的服務器，配置可以比較隨意， 爲了開發調試方便，一般打開全部錯誤報告。

測試環境：一般是克隆一份生產環境的配置，一個程序在測試環境工作不正常，那麼肯定不能把它發佈到生產機上。

生產環境：是指正式提供對外服務的，一般會關掉錯誤報告，打開錯誤日誌。

三個環境也可以說是系統開發的三個階段：開發->測試->上線，其中生產環境也就是通常說的真實環境。

通俗一點就是：

1：開發環境：項目尚且在編碼階段，我們的代碼一般在開發環境中 不會在生產環境中，生產環境組成：操作系統 ，web服務器 ，語言環境。 php 。 數據庫 。 等等

2：測試環境：項目完成測試，修改bug階段

3：生產環境：項目數據前端後臺已經跑通，部署在阿里雲上之後，有客戶使用，訪問，就是網站正式運行了

不管是在開發環境，還是在生產環境裏面，代理路徑需要統一一下，VUE_APP_BASE_API路徑需要和以上的代理路徑保持一致，千萬不要拼錯了哦。

關於 vue sessionStorage存值取值問題

定義和使用

localStorage 和 sessionStorage 屬性允許在瀏覽器中存儲 key/value 對的數據。

sessionStorage 用於臨時保存同一窗口(或標籤頁)的數據，在關閉窗口或標籤頁之後將會刪除這些數據。

保存數據語法：

sessionStorage.setItem("key", "value");

讀取數據語法：

var lastname = sessionStorage.getItem("key");

功能要求：

1：在調用登錄接口的時候，請求登錄接口成功，登錄系統，將獲取到的Response裏面的返回值存到瀏覽器

2：在使用某個組件的時候，例如使用test.vue的時候，需要獲取到瀏覽器裏面存的值，拿出來使用。

步驟
1：我這裏使用的是vue-element-admin後臺管理系統的框架，打開登錄界面login.vue，查看登錄接口調用的位置的代碼，可以看到，請求成功之後，要求將以下返回值的數據都保存起來。

//存起來
sessionStorage.setItem("userInfo", JSON.stringify(res.data))

這個時候，可以打開瀏覽器，查看數據有沒有保存在瀏覽器裏面，選擇Application,點擊session Storage,可以看到login登錄接口的返回值已經存儲到瀏覽器了，接下來就從瀏覽器取值了。

2：獲取
打開test.vue組件，在需要使用到返回值的位置寫獲取sessionStorage值的代碼

//取出來sessionStorage的值
const userInfo = JSON.parse(sessionStorage.getItem("userInfo"))   

debugger看一下，這裏就獲取到值了

接下來，就可以將獲取到的值，賦值給所需要的參數了~~