vue admin webapp

vue-admin-webapp

Nachdem ich einen Artikel von Nuggets gelesen hatte, erstellte ich ein Vue-Backend-Managementsystem basierend auf den Demos anderer Leute.

Nuggets ursprüngliche Artikeladresse

Zu den an diesem Projekt beteiligten Technologie-Stacks gehören vue vue-cli vue-Router axios Echarts element-ui fastmock Webpack

Die Github-Adresse dieses Projekts lautet vue-admin-webapp

Projektlaufadresse

Projekteinführung

vue-admin-webapp ist ein Backend-Verwaltungssystem, das auf vuecli und element-ui basiert und Fastmock zur Simulation von Daten verwendet, einschließlich Diagrammen, Tabellen, Berechtigungen, Excel usw. Sie können Routen entsprechend Ihren Anforderungen hinzufügen.

Installieren

 # 克隆项目

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

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

# 安装依赖
npm install

# 启动服务
npm run serve

Nach dem Start wird der Browser http://localhost:8080 automatisch geöffnet und Sie können den Projekteffekt sehen.

Struktur der Projektseite

Gehen Sie zur Anmeldeseite. Die Seite besteht im Wesentlichen aus drei Teilen: der Kopfzeile, der Seitenleiste und der Anzeigeseite . Sie können auf die Seitenleiste klicken, um zur Route zu springen.

Überprüfung der Anmeldeberechtigung

Empfangen Sie das Token von Fastmock, speichern Sie es beim Anmelden im lokalen Speicher , legen Sie den globalen Frontschutz fest. Beim Aufrufen anderer Seiten können Sie nur eingeben, wenn ein Token vorhanden ist, andernfalls wird zur Anmeldeseite gesprungen

Globale Frontgarde

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

Abfangen beantragen

 axios . interceptors . request . use ( config => {
  // 判断是否有token
  if ( localStorage . loginToken ) {
    config . headers . Authorization = localStorage . loginToken ;
  }
  return config ;
} , err => {
  // 请求错误
  return Promise . reject ( err ) ;
} ) 

Abfangen von Antworten

 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

Sie beherrschen die Verwendung von Echart, Liniendiagrammen, Kreisdiagrammen, Balkendiagrammen, dynamischen Datendiagrammen usw., wie im Bild unten dargestellt

Excel

In tatsächlichen Projekten wird Excel hauptsächlich im Backend erstellt. Natürlich ist dies auch im Frontend möglich, aber ich glaube nicht, dass dies jetzt notwendig ist, also habe ich es nicht getan. Wenn Sie mehr wissen möchten, können Sie danach suchen.

Fastmock-Daten

Hier ist ein Zitat aus der offiziellen Einleitung

Mit Fastmock können Sie Ajax-Anfragen wirklich online simulieren, ohne ein Back-End-Programm zu benötigen. Sie können Fatmock verwenden, um in den frühen Phasen des Projekts eine reine Front-End-Effektdemonstration zu erreichen, oder Sie können Fastmock verwenden, um während der Entwicklung eine Datensimulation zu implementieren, um Front zu erreichen -End- und Back-End-Trennung. Bevor Sie Fastmock verwenden, kann Ihr Team eine oder mehrere der folgenden Lösungen zur Implementierung der Datensimulation verwenden:

• Die lokale handschriftliche Datensimulation generiert viele Scheincodes im Front-End-Code.
• Verwenden Sie die Can-Fixture von Mockjs oder Canjs, um das Abfangen von Ajax zu implementieren und die erforderlichen JSON-Regeln lokal zu konfigurieren.
• Das Backend erstellt Daten auf der Controller-Ebene und gibt sie an das Frontend zurück.

---

Mein Fastmock-Projektport