layui js 跳转页面_Springboot +Layui搭建后台管理界面

layui(谐音：类UI) 是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。其外在极简，却又不失饱满的内在，体积轻盈，组件丰盈，从核心代码到 API 的每一处细节都经过精心雕琢，非常适合界面的快速开发。layui 首个版本发布于2016年金秋，她区别于那些基于 MVVM 底层的 UI 框架，却并非逆道而行，而是信奉返璞归真之道。准确地说，她更多是为服务端程序员量身定做，你无需涉足各种前端工具的复杂配置，只需面对浏览器本身，让一切你所需要的元素与交互，从这里信手拈来。

获得 layui

1. 官网首页下载 https://www.layui.com/

将下载完的包解压后放入项目中。

注：1.Springboot环境搭建 2.Redis集成 3.shiro集成 均可访问之前的文章 此处不做详解

编写一个测试的Controller

@Controller (此处不能用RestController标签 @RestController注解相当于@ResponseBody ＋ @Controller合在一起的作用。)

public class UserController {

@RequestMapping("/index")

// @ResponseBody(此处不能加@ResponseBody标签，因为加上后就当做字符串返回页面了)

public String index(){

return "/user/index";

}

编写index.html

默认情况下：

spring-boot项目静态文件目录：/src/java/resources/static (比如：js、css、img等静态资源)

spring-boot项目模板文件目录：/src/java/resources/templates

Springboot本身不支持Jsp 所以这边使用Thymeleaf Thymeleaf对页面验证比较严格 尤其是html元素的结束标签

如果结束标签没有容易报错(加粗字体)

/>

Insert title here

/>

layui 后台布局

• 控制台
• 商品管理
• 用户

• 其它系统

  邮件管理

  消息管理

  授权管理

• 

  贤心

  基本资料

  安全设置

• 退了

• 所有商品

  列表一

  列表二

  列表三

  超链接

• 解决方案

  列表一

  列表二

  超链接

• 云市场
• 发布商品

内容主体区域

© layui.com - 底部固定区域

当然，也可以在application.properties中，去掉

#thymeleaf模板使用

#关闭thymeleaf缓存

spring.thymeleaf.cache=false

#去掉thymeleaf的严格的模板校验

spring.thymeleaf.mode=LEGACYHTML5

启动服务，访问主页

由于集成了shiro框架，我们在未登陆的情况下是不能直接访问主页的 系统会自动跳转到登陆界面

输入账号密码后