Shulou(Shulou.com)06/03 Report--

This article is about how to build a layui background framework. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

Layui (homophonic: class UI) is a front-end UI framework written by its own module specification, which follows the writing and organization form of native HTML/CSS/JS. It has a very low threshold and is ready to use. Its external minimalism, yet full inside, lightweight, rich components, from the core code to the API every detail has been carefully crafted, very suitable for the rapid development of the interface.

The first version of layui, released in the golden autumn of 2016, is different from those UI frameworks based on the underlying MVVM, but does not go against the road, but believes in a return to basics. To be exact, it is more tailor-made for server programmers, you do not need to dabble in the complex configuration of various front-end tools, just face the browser itself, so that all the elements and interactions you need come in handy.

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

After the download is complete, you can see the following architecture

├─ css / / css directory │ │─ modules / / module css directory (usually if the module is relatively large, we will extract it separately For example, the following three:) │ │ ├─ laydate │ │ ├─ layer │ │ └─ layim │ └─ layui.css / / Core style file ├─ font / / Font icon directory ├─ images / / Image resource directory (currently only layim and GIF expressions used by editors) │─ lay / / module core directory │ └─ modules / / module components │─ layui.js / basic core library └─ Layui.all.js / / merge file containing layui.js and all modules

Download the complete development package of layui from Git warehouse to facilitate secondary development

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

3. Npm installation (only if node.js- is installed first. For this operation, please see the installation of node.js in the next section)

Generally used for WebPack management

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

Then move the downloaded layui (full move, 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 results.

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

Address: http://www.layui.com/demo/admin.html will write the layout of the background

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

Create a new layout page and view page, and add the @ RenderBody () method to the content body area of the layout page. Other projects are not as good as this, as follows

Add views--

By running the view, you can get the following results

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

Create a new FormTable view (note that you want 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 desired code to the page--

After running the index.cshtml page, click listing 1, and the following effect appears:

Thank you for reading! This is the end of this article on "how to build a layui background framework". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.