How to build layui backend

If you want to know more about layui, you can click: layui tutorial

##layui (homophone: UI-like) is a front-end UI framework written with its own module specifications. It follows the writing and organizational form of native HTML/CSS/JS. The threshold is extremely low and can be used out of the box. 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 trend, 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)

Address: http://www.layui.com/

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

　├─css //css directory

　│ │─modules //Module css directory (generally if the module is relatively large , we will extract them separately, such as the following three:) │ │ ├─laydate

　│ │ ├─layer

　│ │ └─layim

　│ └─layui.css //Core style file

　├─font //Font icon directory

　├─images //Image resource directory (currently only GIF used by layim and editor Expression)

　│─lay //Module core directory

　│ └─modules //Each module component

　│─layui.js //Basic core library

　└─layui.all.js //A merged file containing layui.js and all modules

2. Download the complete development package of layui from the Git repository to facilitate the second step Development

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

3. npm installation (provided that you must first Install node.js-----For this operation, see the next section node.js installation)

Generally used for WebPack management

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

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

As shown in the picture above

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 to 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 the 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 the page - -

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

The above operation is to simply build layui and build the background system .

The above is the detailed content of How to build layui backend. For more information, please follow other related articles on the PHP Chinese website!