Heim  >  Artikel  >  Web-Frontend  >  Detaillierte Erläuterung des Aufbaus des Laui-Hintergrund-Frameworks

Detaillierte Erläuterung des Aufbaus des Laui-Hintergrund-Frameworks

尚
nach vorne
2019-12-02 16:19:374828Durchsuche

Detaillierte Erläuterung des Aufbaus des Laui-Hintergrund-Frameworks

layui (homophon: UI-like) ist ein Front-End-UI-Framework, das mit seinen eigenen Modulspezifikationen geschrieben wurde. Es folgt der Schreib- und Organisationsform von nativem HTML/CSS/JS Der Schwellenwert ist extrem niedrig. Gebrauchsfertig. Von außen ist es minimalistisch, aber innen ist es leicht und reich an Komponenten. Jedes Detail, vom Kerncode bis zur API, ist sehr gut für die schnelle Schnittstellenentwicklung geeignet.

Die erste Version von Laui wurde im goldenen Herbst 2016 veröffentlicht. Sie unterscheidet sich von den UI-Frameworks, die auf der unteren Schicht von MVVM basieren, aber sie widerspricht nicht dem Strom, sondern glaubt an die Rückkehr zur Natur . Genauer gesagt ist es eher auf serverseitige Programmierer zugeschnitten. Sie müssen sich nicht mit der komplexen Konfiguration verschiedener Front-End-Tools befassen, sondern müssen sich nur mit dem Browser selbst und allen Elementen und Interaktionen auseinandersetzen Bedarf ist immer griffbereit.

1. Laden Sie Laui von der offiziellen Website herunter (kann auf einem beliebigen Laufwerksbuchstaben gespeichert werden)

Nachdem der Download abgeschlossen ist, sehen Sie die folgende Struktur

├─css //css目录
│ │─modules //模块css目录(一般如果模块相对较大,我们会单独提取,比如下面三个:)
│ │ ├─laydate
│ │ ├─layer
│ │ └─layim
│ └─layui.css //核心样式文件
├─font //字体图标目录
├─images //图片资源目录(目前只有layim和编辑器用到的GIF表情)
│─lay //模块核心目录
│ └─modules //各模块组件
│─layui.js //基础核心库
└─layui.all.js //包含layui.js和所有模块的合并文件

2. Laden Sie Laui aus dem Git-Repository herunter. Komplettes Entwicklungspaket zur Erleichterung der Sekundärentwicklung.

Download-Adresse: https://github.com/sentsin/layui/

3 .js zuerst -----Siehe den nächsten Abschnitt zur Installation von node.js für diesen Vorgang)

Detaillierte Erläuterung des Aufbaus des Laui-Hintergrund-Frameworks

Wird im Allgemeinen für die WebPack-Verwaltung verwendet

4. Nachher Erstellen Sie nach Abschluss der oben genannten Vorgänge ein neues A-Projekt (hier wird MVC als Beispiel verwendet)

Verschieben Sie dann das heruntergeladene Laui (vollständig verschoben, Dateiname und andere Informationen nicht ändern) in das Projekt

Detaillierte Erläuterung des Aufbaus des Laui-Hintergrund-FrameworksDetaillierte Erläuterung des Aufbaus des Laui-Hintergrund-Frameworks

5. Nachdem Lauii bereitgestellt wurde, können Sie eine neue Seite erstellen, um den Effekt anzuzeigen

Erstellen Sie eine neue Layoutseite in MVC (einige Inhalte). im Rahmen ist derselbe, kann also wiederverwendet werden, also erstellen Sie eine neue Layoutseite. Sie können auch neue Masterseiten, Benutzersteuerelemente usw. in anderen Projekten erstellen)

Adresse: http://www .layui.com/demo/admin.html Schreiben Sie das Hintergrundlayout

Detaillierte Erläuterung des Aufbaus des Laui-Hintergrund-Frameworks

Wählen Sie aus, um den Layoutcode abzurufen, und fügen Sie den Code in die Layoutseite ein.

Erstellen Sie eine neue Layoutseite und eine neue Ansichtsseite und fügen Sie die @RenderBody()-Methode zum Hauptinhaltsbereich der Layoutseite hinzu. Dies ist wie folgt nicht der Fall

Detaillierte Erläuterung des Aufbaus des Laui-Hintergrund-FrameworksAnsicht hinzufügen--

Detaillierte Erläuterung des Aufbaus des Laui-Hintergrund-FrameworksFühren Sie die Ansicht aus, um den folgenden Effekt zu erzielen

Detaillierte Erläuterung des Aufbaus des Laui-Hintergrund-FrameworksFügen Sie einen Sprunglink hinzu, um eine Ansicht auf der Layoutseite aufzulisten--

Detaillierte Erläuterung des Aufbaus des Laui-Hintergrund-Frameworks

Erstellen Sie eine neue FormTable-Ansicht (beachten Sie, dass Sie eine Layoutseite hinzufügen müssen), fügen Sie weitere Elemente hinzu, das hier hinzugefügte Formularelement, Adresse: http://www.layui .com/demo/form.html, wählen Sie Code anzeigen und fügen Sie den erforderlichen Code in die Seite ein--

Nachdem Sie die Seite index.cshtml ausgeführt haben, klicken Sie auf Liste 1. Der folgende Effekt wird angezeigt:

Detaillierte Erläuterung des Aufbaus des Laui-Hintergrund-Frameworks

Für mehr Laui-Wissen beachten Sie bitte die SpalteTutorial zur Laui-Nutzung.

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung des Aufbaus des Laui-Hintergrund-Frameworks. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Dieser Artikel ist reproduziert unter:cnblogs.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen