vue admin webapp

vue-admin-weight

Nuggetsの記事を読んだ後、私は他の人のデモによって作られたVueの背景管理システムを模倣します

ナゲットの元の記事アドレス

このプロジェクトに関与するテクノロジースタックは、Vue Vue-Cli-Cli-Router Axios Element-UI FastMock Webpackです

このプロジェクトGithubはVue-Admin-Webappを扱います

プロジェクト操作アドレス

プロジェクトの紹介

Vue-Admin-Webappは、 VuecliとElement-UIに基づいてバックグラウンド管理システムです。チャート、テーブル、許可、Excelなどを含むデータをシミュレートします。ニーズに応じてルートを追加できます。

インストール

 # 克隆项目

git clone [email protected]:yqxshiki/vue-admin-webapp.git

# 进入项目目录
cd vue-admin-webapp

# 安装依赖
npm install

# 启动服务
npm run serve

開始後、観光客http：// localhost：8080を自動的に開き、プロジェクト効果を確認できます。

プロジェクトページ構造

ページにログインするには、ページは主に3つの部分で構成されています。ヘッドサイドのサイドバーディスプレイページ、サイドバーをクリックしてルートに来てジャンプできます

ログイン右確認のリスト

FastMockからトークンを受け取り、ログインするときにLocalStorageに保存し、他のページを入力すると、トークンがあるときに入力できます。

グローバルプレガード

 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 Multi -chart

以下の図など、エチャート、ストレートキャラクター、ケーキキャラクター、柱チャート、動的なデータチャートなどに熟練します。

優れています

Excelは主に実際のプロジェクトで行われます。知りたい場合は、検索できます。

FastMockデータ

ここで公式の紹介を引用しています

FastMockを使用すると、バックエンドプログラムなしでAJAXリクエストを真にシミュレートできます。 FastMockを使用する前に、チームのデータシミュレーションの実装は、次のスキームで1つ以上になる場合があります

• ローカルの手書きデータシミュレーション。フロントコードで多くの模擬コードを作成します。
• MOCKJSまたはCANJS CAN-FIXTUREを使用してAJAX傍受を実装すると、必要なJSONルールがローカルで構成されています。
• バックエンドの偽のデータは、コントローラーレイヤーのフロントエンドに返されます。

---

私のFastMockプロジェクトポート