Detailed explanation of the construction of layui background framework

layui (homophone: UI-like) is a front-end UI framework written using its own module specifications. It follows the writing and organizational form of native HTML/CSS/JS. The threshold is extremely low. Ready to use. It is minimalist on the outside but full on the inside. It is light in size and rich in components. Every detail from the core code to the API has been carefully crafted, making it very suitable for rapid interface development.

The first version of layui was released in the golden autumn of 2016. It is different from those UI frameworks based on the bottom layer of MVVM, but it does not go against the grain, but believes in returning to nature. To be precise, it is more tailor-made for server-side programmers. You do not need to get involved in the complex configuration of various front-end tools. You only need to face the browser itself, and all the elements and interactions you need can be found at your fingertips.

1. Download layui from the official website (can be saved to any drive letter)

After the download is completed, you can see the following structure

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

2. Download layui from the Git repository Complete development package to facilitate secondary development

Download address: https://github.com/sentsin/layui/

3. npm installation (prerequisite is to install node.js first -----See the next section for node.js installation for this operation)

Generally used for WebPack management

4. After completing the above operations, create a new A project (here we take MVC as an example)

Then move the downloaded layui (completely, do not change the file name and other information) to the project

5. Now that layui has been deployed, you can create a new page to view the effect.

Create a new layout page in MVC (some content in the frame is the same, so it can be reused, so create a new layout page. You can also create new master pages, user controls, etc. in other projects)

Address: http://www.layui.com/demo/admin.html Write the background layout

Select to get the layout code and paste the code into the layout page.

Create a new layout page and view page. In the main content area of ​​the layout page, add the @RenderBody() method. This is not the case for other projects. As follows

Add a view--

Run the view and you will get the following effect

Add a jump link to list one in the layout page--

Create a new FormTable view (note that you need to add a layout page), add other elements, the form element added here, address: http://www.layui.com/demo/form.html, select View Code and paste the required code to Page--

After running the index.cshtml page, click List 1, the following effect will appear:

For more layui knowledge, please pay attentionlayui usage tutorial column.

The above is the detailed content of Detailed explanation of the construction of layui background framework. For more information, please follow other related articles on the PHP Chinese website!