vue-admin-webapp後臺管理系統

vue-admin-webapp

看了掘金一篇文章後，仿照別人的demo本身作的一個vue後臺管理系統

掘金原文章地址

本項目涉及的技術棧有vue vue-cli vue-Router axios Echarts element-ui fastmock webpack

本項目github地址vue-admin-webapp

項目運行地址

項目簡介

vue-admin-webapp 是一個後臺管理系統,基於vuecli 和element-ui,使用fastmock來模擬數據,其中有圖表,表格,權限,excel等等，你能夠根據你的需求來添加路由。

安裝

# 克隆項目

git clone git@github.com:yqxshiki/vue-admin-webapp.git

# 進入項目目錄
cd vue-admin-webapp

# 安裝依賴
npm install

# 啓動服務
npm run serve
複製代碼

啓動後，將自動打開遊覽器 http://localhost:8080,你就能夠看到項目效果了。

項目頁面結構

出去登陸頁,頁面主要來三個部分組成：頭部 側邊欄 展現頁,能夠點擊側邊欄來就行路由跳轉

登陸權限驗證

從fastmock中接收token,登陸時存儲在localStorage,設置全局前置守衛,在進入其餘頁面時，有token時才能進入，否則就跳到login頁面

全局前置守衛

router.beforeEach((to, from, next) => {
  const isLogin = localStorage.loginToken ? true : false;
  if (to.path == "/login") {
    next();
  } else {
    isLogin ? next() : next('/login')
  }
})
複製代碼

請求攔截

axios.interceptors.request.use(config => {
  // 判斷是否有token
  if (localStorage.loginToken) {
    config.headers.Authorization = localStorage.loginToken;
  }
  return config;
}, err => {
  // 請求錯誤
  return Promise.reject(err);
})
複製代碼

響應攔截

axios.interceptors.response.use(res => {
  return res;
},
  err => {
    const { status } = err.response;
    if (status == 401) {
      // 後臺定義401爲過時
      alert("token過時,請從新登陸!")
      // 清楚token
      localStorage.removeItem("loginToken");
      router.push("/login");
    } else {
      alert(err.response.data)
    }
    return Promise.reject(err);
  });
複製代碼

Echart多圖表

會熟練運用Echart,直線圖，餅圖，柱狀圖，動態數據圖等等,例以下圖

Excel

excel在實際項目中主要是後端作的，固然前端也能夠作,只是我以爲如今沒有必要因此沒作。想了解的能夠去搜索一下就有。

fastmock數據

這裏引用官方的介紹

fastmock可讓你在沒有後端程序的狀況下能真實地在線模擬ajax請求，你能夠用fatmock實現項目初期純前端的效果演示，也能夠用fastmock實現開發中的數據模擬從而實現先後端分離。在使用fastmock以前，你的團隊實現數據模擬多是下面的方案中的一種或者多種

• 本地手寫數據模擬，在前端代碼中產生一大堆的mock代碼。
• 利用mockjs或者canjs的can-fixture實現ajax攔截，本地配置必要的json規則。
• 後端在Controller層造假數據返回給前端。

---

個人fastmock 項目端口