GitHub:github.com/baiyuliang/…

Layui official address: www.layui.com/

Note: Layui’s official website is currently inaccessible, you can download it from other channels or use itlayuimini! In the environment of front and back end separation, frameworks like Layui may become more and more inappropriate, but for start-ups or small and micro enterprises, under the premise of cost saving without front and back end separation, such frameworks still greatly save development time and difficulty for back-end developers!

Author’s definition of Layui:In the current environment of back-end separation, backend developers are less and less responsible. Backend separation allows backend developers to focus more on business and not spend a lot of time on front-end HTML pages. CSS, it has to be said, will kill most backend… However, there are always exceptions, there are many small and medium-sized companies due to the cost of the problem, will not hire a professional front end, then in this case, the front end things can only be developed by the back end, but as said above, CSS is too torture, how to do? By the way, we can go to the third party UI framework, change it and use it directly, will save a lot of things, and Layui is undoubtedly one of the best experience, stability and ease of use! Layui is also a heavily used framework without separating the front and back ends!

In addition, online a lot of classmates of Layui evaluation before and after the end, the polarization, has said he malfeasance is junk, have him hold on pedestals strongly maintain, as far as Layui what is good, we don’t do too much here, interested can go to zhihu and so on each big BBS onlookers, for the back-end developers, Can quickly and efficiently solve their pain points, is a good framework!

The framework used in this blog is a simplified and encapsulated framework on the basis of Layui: LyuiMini

Online experience: layuimini. 99 PHP. Cn/iframe/v2 / I…

Of course, you can just use itLayui! Specific usage, can refer to the official document, explain very detailed, also very easy to use, blog will not explain the use of the method!

Import the Layuimini resource: download and copy the resource file to your own project according to the way provided on the official website!Remember, after importing resources, if you cannot access them, you need to Rebuild the project!

To start the project, enter:http://localhost:8080/byl/login.html We can also optionally enter HTML paths, such as:http://localhost:8080/byl/index.html, you can view all the pages inside the frame!

Note that at this point, since we have configured the project resource path, you can passhttp://localhost:8080/ You can use the project name/XXX to access the resource files under static and templates, for example, CSS /login. CSS under static: No problem, so the HTML in our project does not need to be static when referring to the resource path!

If it’s an HTML reference resource in the templates root (level 1), such as login.html:

<script src="lib/layui/layui.all.js" charset="utf-8"></script>
Copy the code

If it’s a templates secondary directory:

<script src=".. /lib/layui/layui.js" charset="utf-8"></script>
Copy the code

Tertiary Catalogue:

<script src=".. /.. /lib/layui/layui.js" charset="utf-8"></script>
Copy the code

Is that clear?

Let’s look at just a browser input access path: http://localhost:8080/byl/login.html, you will find that only the path of the input match exactly, to access right, but in fact, we will find other people’s sites don’t need to input so much, the best input a: http://localhost:8080/byl can access, that we’re here to configuration:

Create AppConfig in config folder:

package com.byl.springboottest.config;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.ViewControllerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class AppConfig implements WebMvcConfigurer {

    @Override
    public void addViewControllers(ViewControllerRegistry registry) {
        // The browser requests are mapped to the corresponding page (ViewName represents the corresponding HTML)
        registry.addViewController("/").setViewName("login");
        registry.addViewController("/login").setViewName("login");
        registry.addViewController("/index").setViewName("index"); }}Copy the code

The comment is very clear, is the browser input path, map to the corresponding HTML! Restart after configuration is complete, the browser input: http://localhost:8080/byl, you will find that the direct access to the login screen, enter: http://localhost:8080/byl/login is the same effect!

In the next post, we will complete the login module and the initial login authentication interception!