後台一定要有客制化的設定! 今天我們來研究一下全域設定檔可以做什麼

作者有提供文件:
https://pure-admin-doc.vercel.app/pages/5d83b5/#%E5%85%A8%E5%B1%80%E9%85%8D%E7%BD%AE

前面有提到在main.ts檔案有引入了設定檔
import { getServerConfig } from "./config";

\pure-admin-thin\src\config\index.ts

這支檔案除了引入 App.vue之外還有用到2個套件

• axios
  • 負責打API vue官方推薦的套件，支援發起請求前的攔截和收到回應後的攔截
  • JS原生的fetch以及jQuery的$.ajax()也都可以打API
• loadEnv
  • .env環境設定檔案，通常會把打API的baseUrl放在這邊
  • nodejs有dotenv

再看一次 main.ts

getServerConfig()方法裡面其實是執行axios打API，所以是回傳Promise
原來作者是在所有東西掛載前先打一次API拿JSON設定檔
透過injectResponsiveStorage(app, config);方法 將設定參數存到localStorage

\pure-admin-thin\public\serverConfig.json

原本的JSON沒有分類，為了讓閱讀更方便筆者將其改成以下行式

//這邊原本是JSON檔案為了在後方加入註解採取js的寫法，實際使用還是要用JSON
const config2 = {
  Version: "3.5.0", //告知目前網站的版本，不影響畫面
  Title: "PureAdmin", //標題，影響網頁顯示的 title

  Locale: "zh", //i18n 多國語系切換(自訂義 ex: "zh","en")

  Layout: "vertical", //導航欄模式(橫向&縱向&混合式) [vertical, horizontal, mix]

  FixedHeader: true, //控制上方標題欄是否要釘選，關閉的話往下滾動會隱藏
  HideTabs: false, //控制標籤頁顯示or隱藏
  ShowModel: "smart", //標籤模式(卡片模式&靈動模式) [smart, card]，差別在顯示動畫
  MultiTagsCache: false, //標籤持久化
  KeepAlive: true, //控制是否暫存路由
  
  HiddenSideBar: false, //隱藏 側邊欄+上方標題欄 
  SidebarStatus: true, //控制側邊欄展開or收合
  ShowLogo: true, //控制側邊欄Logo顯示or隱藏

  Theme: "default", //主題
  EpThemeColor: "#409EFF", //主色系
  Grey: false, //灰色模式
  DarkMode: false, //深色主題
  Weak: false, //色弱模式
};

如果將HiddenSideBar:true，等同按下齒輪下面的全螢幕按鈕!

這篇有一部小短片，可以觀察設定檔案和localStorage設定檔的變化
有了影片的輔助比直接看文件來的直觀

以上這些設定已經可以滿足後台的需求，頂多就是自己要另外寫表單標籤頁離開後有暫存資料的功能

讀者不防實際自己玩玩看~

動手玩玩看

http://yiming_chang.gitee.io/vue-pure-admin/#/welcome