Explication détaillée de la construction du cadre d'arrière-plan layui

layui (homophone : UI-like) est un framework d'interface utilisateur front-end écrit en utilisant ses propres spécifications de module. Il suit la forme d'écriture et d'organisation du HTML/CSS/JS natif. le seuil est extrêmement bas. Prêt à l’emploi. Il est minimaliste à l'extérieur mais plein à l'intérieur. Il est léger et riche en composants, chaque détail, du code principal à l'API, a été soigneusement conçu, ce qui le rend très approprié pour le développement rapide d'interfaces.

La première version de layui a été publiée à l'automne doré 2016. Elle est différente de ces frameworks d'interface utilisateur basés sur la couche inférieure de MVVM, mais elle ne va pas à contre-courant, mais croit au retour à la nature. . Pour être précis, il est plus adapté aux programmeurs côté serveur. Vous n'avez pas besoin de vous impliquer dans la configuration complexe de divers outils frontaux, il vous suffit de faire face au navigateur lui-même, et tous les éléments et interactions dont vous avez besoin peuvent. être trouvé à portée de main.

1. Téléchargez layui depuis le site officiel (peut être enregistré sur n'importe quelle lettre de lecteur)

Une fois le téléchargement terminé, vous pouvez voir la structure suivante

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

2. Téléchargez layui depuis le référentiel Git Package de développement complet pour faciliter le développement secondaire

Adresse de téléchargement : https://github.com/sentsin/layui/

3. .js en premier -----Voir la section suivante pour l'installation de node.js pour cette opération)

Généralement utilisé pour la gestion du WebPack

4. Après en complétant les opérations ci-dessus, créez un nouveau projet A (ici MVC est utilisé comme exemple)

Déplacez ensuite le layui téléchargé (complètement déplacé, ne changez pas le nom du fichier et les autres informations) vers le projet

5. Maintenant que layui a été déployé, vous pouvez créer une nouvelle page pour voir l'effet

Créer une nouvelle page de mise en page dans MVC (du contenu dans le cadre est le même, il peut donc être réutilisé, créez donc une nouvelle page de mise en page, vous pouvez également créer de nouvelles pages maîtres, contrôles utilisateur, etc. dans d'autres projets)

Adresse : http://www .layui.com/demo/admin.html Écrivez la mise en page d'arrière-plan

Sélectionnez pour obtenir le code de mise en page et collez le code dans la page de mise en page.

Créez une nouvelle page de mise en page et une nouvelle page d'affichage, et ajoutez la méthode @RenderBody() à la zone de contenu principale de la page de mise en page. Ce n'est pas le cas pour les autres projets, comme suit

<.>

Ajouter une vue--

Exécutez la vue pour obtenir l'effet suivant

Ajoutez un lien de saut pour en répertorier un dans la page de mise en page--

Créez une nouvelle vue FormTable (notez que vous devez ajouter une page de mise en page), ajoutez d'autres éléments, l'élément de formulaire ajouté ici, adresse : http://www.layui .com/demo/form.html, sélectionnez Afficher le code et collez le code requis dans Page--

Après avoir exécuté la page index.cshtml, cliquez sur Liste 1, l'effet suivant apparaîtra :

Pour plus de connaissances sur Layui, veuillez prêter attention

Tutoriel d'utilisation de Layui colonne.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!