Element Pro Crud

?ElementProCrud?

ElementProCrud ist ein leistungsstarkes Tool zum schnellen Erstellen von CRUD (ich werde ein vollständiges Upgrade der vue3-Version in Betracht ziehen, wenn ich Zeit habe)

Dokumentation

Dokumentenadresse

Demo

Domainname und Server sind abgelaufen... vorübergehend nicht verfügbar, sorry

Start

Sie können das gesamte ElementProCrud oder je nach Bedarf nur einige der Komponenten importieren. Lassen Sie uns zunächst vorstellen, wie das vollständige ElementProCrud eingeführt wird.

Vollständige Einführung

Schreiben Sie den folgenden Inhalt in main.js:

 npm i element-pro-crud -s

 import Vue from 'vue'
import ElementProCrud from 'element-pro-crud'
import ElementUI from 'element-ui'
import 'element-pro-crud/lib/css/pro-crud.css'
import 'element-ui/lib/theme-chalk/index.css'

Vue . use ( ElementUI )
Vue . use ( ElementProCrud )

Der obige Code vervollständigt die Einführung von ElementProCrud. Es ist zu beachten, dass die Style-Datei separat importiert werden muss.

Auf Anfrage vorstellen

Mit Hilfe der babel-plugin-component können wir nur die Komponenten einführen, die wir benötigen, um die Größe des Projekts zu reduzieren.

Installieren Sie zunächst die babel-plugin-component:

 npm install babel - plugin - component - D

Ändern Sie dann .babelrc wie folgt:

 {
  presets : [ '@vue/cli-plugin-babel/preset' ] ,
  plugins : [
    [
      'component' ,
      {
        libraryName : 'element-pro-crud' ,
        styleLibrary : {
          name : 'css' ,
          base : false ,
        } ,
      } ,
    ] ,
  ] ,
} ;

Wenn Sie als Nächstes nur einige Komponenten wie FormDesigner und ProForm vorstellen möchten, schreiben Sie den folgenden Inhalt in main.js:

 import Vue from 'vue'
import { ProForm , FormDesigner } from 'element-pro-crud'

Vue . use ( ProForm )
Vue . use ( FormDesigner )
new Vue ( {
  el : '#app' ,
  render : h => h ( App )
} )

Globale Konfiguration

Bei der Einführung von ElementProCrud können Sie ein globales Konfigurationsobjekt übergeben. Stellt eine Axios-Anfragemethode zum Abrufen von Formular-JSON- und allgemeinen CRUD-Anfragen bereit. Die spezifischen Vorgänge sind wie folgt:

 {
  getFormDetail: formName => AxiosPromise ( formJSON ) // 传入获取表单json的axios请求
  getTableDetail: tableName => AxiosPromise ( tableJSON ) // 传入获取表格json的axios请求
  crud: ( dml : DML , tableName : string , data ?: object , params ?: object ) =>
    AxiosPromise // 通用CRUD请求封装
}

Weitere Informationen finden Sie in der Tutorial-Dokumentation für jede Komponente.

CDN

Derzeit kann die neueste Version der Ressource über cdn.jsdelivr.net/npm/element-pro-crud/lib bezogen werden. Sie können mit der Verwendung beginnen, indem Sie js- und css-Dateien auf der Seite einführen.

Beachten Sie, dass die Groß- und Kleinschreibung des von cdn eingeführten Komponentennamens kebab-case ist

Globale Einführung

 <!-- import ElementProCrud CSS -->
< link rel =" stylesheet " href =" https://cdn.jsdelivr.net/npm/element-pro-crud/lib/css/pro-crud.css " />
<!-- import ElementUI CSS -->
< link rel =" stylesheet " href =" https://unpkg.com/element-ui/lib/theme-chalk/index.css " />

<!-- import Vue before Element -->
< script src =" https://unpkg.com/vue/dist/vue.js " > </ script >
<!-- import ElementUI -->
< script src =" https://unpkg.com/element-ui/lib/index.js " > </ script >
<!-- import ElementProCrud -->
< script src =" https://cdn.jsdelivr.net/npm/element-pro-crud/lib/pro-crud.js " > </ script >

Auf Anfrage vorstellen

Stellen Sie beispielsweise den Formulardesigner separat vor

 <!-- import FormDesigner CSS -->
< link rel =" stylesheet " href =" https://cdn.jsdelivr.net/npm/element-pro-crud/lib/css/form-designer.css " />
<!-- import ElementUI CSS -->
< link rel =" stylesheet " href =" https://unpkg.com/element-ui/lib/theme-chalk/index.css " />

<!-- import Vue before Element -->
< script src =" https://unpkg.com/vue/dist/vue.js " > </ script >
<!-- import ElementUI -->
< script src =" https://unpkg.com/element-ui/lib/index.js " > </ script >
<!-- import FormDesigner -->
< script src =" https://cdn.jsdelivr.net/npm/element-pro-crud/lib/form-designer.js " > </ script > 

Komponentenliste

Komponentenname	veranschaulichen
ProForm	Formularersteller
ProTable	Tabellenbauer
CrudTable	Formular hinzufügen, löschen, ändern, abfragen
FormDesigner	Formulardesigner
TableDesigner	Tischdesigner

Bibliotheken von Drittanbietern

Komponentenname	veranschaulichen	Versionsnummer	veranschaulichen	Einführungsmethode (entweder CDN oder NPM kann eingeführt werden)
element-ui	Ele.me-Benutzeroberfläche	^2.15.1	Muss vor element-pro-crud eingeführt werden	https://unpkg.com/element-ui/lib/index.js
As	Code-Online-Editor	^1.4.12	Verwendung des Formular-Designers/Tabellen-Designers	https://cdn.bootcdn.net/ajax/libs/ace/test/ace.js
tinymce	Rich-Text-Editor	^4.7.5	Verwendung des Formular-Designers/Tabellen-Designers	https://cdn.bootcdn.net/ajax/libs/tinymce/4.7.5/tinymce.min.js
Echarts	Echarts-Diagramm	^5.0.1	Verwendung des Formular-Designers/Tabellen-Designers	https://cdn.bootcdn.net/ajax/libs/echarts/5.0.1/echarts.min.js
vue-treeselect	Dropdown-Feld „Baum“.	^0.4.0	Verwendung des Formular-Designers/Tabellen-Designers	https://cdn.jsdelivr.net/npm/@riophae/[email protected]/dist/vue-treeselect.umd.min.js

lokale Entwicklung

 yarn

yarn start

Lizenz

LGPL

Copyright (c) 2020-heute, BoBoooooo