eagles Download - eagles Quellcode herunterladen

eagles

Andere Kategorien

1.0.0

Herunterladen

Titel	Datum	Tags
Der Weg zum Aufstieg in die Grube des Vue2 Eagles-Projekts – verschiedene Komponentenverpackungen	13.05.2017 10:43:03 -0700	vue2 vue-i18n element-ui axios benutzerdefiniertes theme hightopo echars vue-awesome koa2

04113_london_320x240

Online-Demo

Online-Demo 2

Vorwort

Nach mehr als zwei Wochen Entwicklung und Organisation wurde im Anschluss an meinen ersten Originalblog „Der Weg von C/C++ zur Front-End-Transformation“ endlich das Eagles-Projekt gestartet. Warum heißt es Eagles? Eagles bedeutet Adler, genau wie der Adlerbruder, der in „The Legend of the Condor Heroes“ seine Flügel ausbreitet, um die Python zu besiegen. Dieses Projekt verwendet die Vue + Axios + Elementui-Technologie, integriert die Vuex-Statusverwaltung, die Vue-awesome-Schriftsymbolbibliothek, die Vue-i18n-Internationalisierung, die MockJS-Simulations-API-Datenübermittlung und unterstützt die Kompilierung im Sass-Stil. Wir haben Komponenten mit geringer Kopplung entwickelt, die sich sehr gut für Projekte eignen, wie z. B. Baumtabellen, Topologiediagramme, Tabellen, Diagramme usw., sowie zusätzliche allgemeine Projektmodule wie Menüverwaltung, Rollenberechtigungsverwaltung und Benutzerverwaltung.

Der Hintergrundtechnologie-Stack verwendet vorübergehend Mockjs, um die Übermittlung von Ajax-Daten zu simulieren. Später werde ich die Spring Boot + Mybatis-Technologie verwenden, um es allen zu erklären. Kürzlich habe ich mich auch mit der praktischen Implementierung der Spring Cloud- und Docker-Microservice-Architektur befasst. Es wird später entsprechende Artikel geben, damit wir gemeinsam Fortschritte machen können!

Um die Kommunikation zu erleichtern, wurde eine QQ-Gruppe eröffnet, 613176270. Jeder ist herzlich willkommen, sich frei zu äußern: Es gibt Mädchen in der Gruppe!

Funktion

Anmelden/Abmelden
Token-Verifizierung
Menüleiste in einem anderen Stil
Benutzerdefiniertes Skin-Änderungsthema
Internationale Unterstützung
Blatt
Baumtisch
Topologiekartenkomponente
Diagramm
Popup-Fenster rechts
Bewegliches Dialogfeld
Rich-Text
Abschlag
JSON-Verschönerung
Listen per Drag & Drop
Berechtigungsverwaltung
Protokollverwaltung
Benutzerverwaltung
Menüverwaltung
Datenmanagement
Grafikdesigner
Entwicklung/Bereitstellung zwei Modi
Mack simuliert Ajax-Anfragedaten
Modularisierung des Vuex-Zustandsmanagements
Ajax-Anfrage-Fortschrittsbalken
Unterstützung im Sass-Stil
Implementierung eines Veranstaltungszentrums

Kompilieren und ausführen

 # 克隆项目
git clone https://github.com/silianpan/eagles.git

# 安装依赖
npm install

# 运行 访问 localhost:8080
npm run dev

# 编译
npm run build

# 待分析报告的编译
npm run build --report

Beschreibung der Verzeichnisstruktur

 | -- build                           # 编译目录
| -- config                          # 编译配置目录
| -- index.html                      # 首页模板
| -- package.json                    # 依赖库配置
| -- src                             # 源码目录
|   | -- api                         # api目录
|   | -- assets                      # 资源目录
|   |   | -- css                     # 样式目录
|   |   | -- img                     # 图片
|   |   | -- sass                    # sass
|   |   ` -- theme                   # 自定义主题目录
|   |-- common                      # 公共js库
|   |   |-- eventHubs.js            # 事件中心
|   |   |-- resTypeEnum.js          # 资源类型
|   |   ` -- topo                    # 拓扑图
|   | -- components                  # 通用组件
|   |   | -- Table.vue               # 表格
|   |   | -- topo                    # 拓扑图
|   |   ` -- treeTable               # 树表组件
|   |-- config.js                   # 全局配置
|   |-- i18n                        # 国际化
|   |-- libs                        # 第三方组件库
|   |-- main.js                     # 入口程序
|   |-- mock                        # 模拟数据目录
|   |-- router                      # 路由
|   |-- store                       # 状态管理目录
|   |-- utils                       # 工具目录
|   ` -- views                       # 业务类型组件
|       | -- introduction            # 简介
|       | -- lang                    # 语言设置
|       | -- layout                  # 布局：header、菜单
|       | -- login                   # 登录
|       | -- table                   # 表格演示
|       | -- topo                    # 拓扑图演示
|       ` -- treeTable               # 树表演示
` -- static                          # 静态资源目录
    ` -- img                         # 图片目录

Teilweiser Screenshot

Titelseite

heim

Hautveränderung und -form

Haut

Internationalisierung & Baumtabelle

i18n

Topologiekarte

Topo

topo2

Menüs in verschiedenen Stilen

Speisekarte

Der Weg, um die Grube zu erklimmen

Korrekte Referenz der JQuery-Komponente

Fügen Sie jquery zu package.json hinzu

 "jquery" : "^1.11.1"

Fügen Sie nach webpack.base.conf.js den folgenden Code hinzu und führen Sie vorher Webpack ein

 var webpack = require ( "webpack" )

plugins: [
   new webpack . optimize . CommonsChunkPlugin ( 'common.js' ) ,
   new webpack . ProvidePlugin ( {
       jQuery : "jquery" ,
       $ : "jquery"
   } )
  ]

Führen Sie Jquery in main.js ein

 import $ from 'jquery'

Internationale Kompatibilitätsprobleme

Die Internationalisierung verwendet vue-i18n, aber die Verwendung von Version 6.x führt zu Kompatibilitätsproblemen mit Element, was dazu führt, dass das ursprüngliche Element nicht übersetzt werden kann. Es ist mit Element kompatibel und wird für die Internationalisierung eingeführt.

 import enUS from './en-US.json'
import zhCN from './zh-CN.json'
import enLocale from 'element-ui/lib/locale/lang/en'
import zhLocale from 'element-ui/lib/locale/lang/zh-CN'
export const LANGS = {
    'en-US' : $ . extend ( enUS , enLocale ) ,
    'zh-CN' : $ . extend ( zhCN , zhLocale )
}

Probleme bei der Nginx-Bereitstellung

Vue-Routing-Hot-Loading-Komponenten verursachen das Problem, dass die Komponenten nach der Bereitstellung auf Nginx nicht umgeschaltet werden können (Umschaltfehler). Daher können Sie beim Routing nur den Import zum Laden von Komponenten verwenden.

Statisches Ressourcenzugriffsproblem

Nach der Bereitstellung auf Nginx tritt beim Zugriff auf alle statischen Ressourcen ein Fehler 404 (Zugriffsfehler) auf. Grund: Alle Ressourcendateien im src-Verzeichnis in Vue müssen kompiliert und transkodiert werden. Die ursprünglich referenzierten statischen Dateien verursachen Fehler img-Tag Lösung: Platzieren Sie die statischen Ressourcen im statischen Verzeichnis auf derselben Ebene wie src und verweisen Sie auf die Dateien in diesem Verzeichnis. Der wichtige Punkt ist jedoch: Die statischen Pfade, auf die im Entwicklungsmodus und im Produktionsmodus verwiesen wird, sind unterschiedlich. Fügen Sie daher Folgendes hinzu Der Konfigurationsdateicode zur Unterscheidung zwischen Entwicklungsmodus und Produktionsmodus:

 export const STATIC_IMAGEPATH = ( process . env . NODE_ENV === 'production' ) ? "./static/img/" : "/static/img/" ;

Darüber hinaus unterscheidet sich auch assetPublicPath unter config/index.js.

 assetsPublicPath : './' , //生产环境assetsPublicPath: '/'

Entwicklungsmodus und Bereitstellung sind keine Proxy-Hintergrunddiensteinstellungen

Konfigurieren Sie ProxyTable in config/index.js

 proxyTable : {
    '/ajax' : {
      target : 'http://127.0.0.1:8080' ,
      // target: 'http://127.0.0.1:8081',
      changeOrigin : true ,
      pathRewrite : {
        '^/ajax' : '/dirms-service'
      } ,
      onProxyReq ( proxyReq , req , res ) {
      }
    }
  } ,

Fügen Sie der Konfiguration Folgendes hinzu, wobei eagles-service die Hintergrunddienst-Zugriffs-ID im Produktionsmodus ist.

 export const API_BASEURL = ( process . env . NODE_ENV === 'production' ) ? "/eagles-service" : "/ajax" ;

Aufgabenliste

Vervollständigen und verbessern Sie die verbleibenden Funktionen
Finden Sie andere NB-Open-Source-Komponenten und verpacken Sie sie, z. B. D3 usw.
Verbessern Sie Backend-Projekte und bauen Sie eine Microservice-Architektur auf