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)

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

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

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

Ansicht hinzufügen--

Führen Sie die Ansicht aus, um den folgenden Effekt zu erzielen

Fügen Sie einen Sprunglink hinzu, um eine Ansicht auf der Layoutseite aufzulisten--

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:

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!