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 [email protected]: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 專案端口