html+css+网站后台管理纯JS模版

1模版来源

    由于工作浏览网址发现了这套模版,与layui风格相似适合做后台管理系统,特此记录一下

 

2模版截图

3模版分享

http://www.liph.fun/

 

  • 4
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 22
    评论
Spring Boot 是一个基于 Spring 框架的快速开发 Web 应用程序的框架,Bootstrap 是一个流行的前端框架,FreeMarker 是一种模板引擎。它们可以一起使用来构建一个完整的后台管理系统。 下面是搭建后台管理系统的步骤: 1. 创建 Spring Boot 项目 使用 Spring Initializr 创建一个新的 Spring Boot 项目。在选择依赖时,选择 Web、FreeMarker 和 Thymeleaf(或者其他模板引擎)。 2. 集成 Bootstrap 在 pom.xml 文件中添加 Bootstrap 的依赖: ``` <dependency> <groupId>org.webjars</groupId> <artifactId>bootstrap</artifactId> <version>4.6.0</version> </dependency> ``` 在 application.properties 中配置静态资源路径: ``` spring.resources.static-locations=classpath:/META-INF/resources/,classpath:/resources/,classpath:/static/,classpath:/public/,classpath:/webjars/ ``` 3. 集成 FreeMarker 在 pom.xml 文件中添加 FreeMarker 的依赖: ``` <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-freemarker</artifactId> </dependency> ``` 在 application.properties 中配置 FreeMarker 的模板路径: ``` spring.freemarker.template-loader-path=classpath:/templates/ ``` 4. 创建控制器 创建一个控制器来处理请求和渲染模板。可以使用 @Controller 注解来标记控制器: ```java @Controller public class HomeController { @GetMapping("/") public String index() { return "index"; } } ``` 5. 创建模板 在 templates 目录下创建 index.ftl 模板文件,使用 Bootstrap 的样式和组件来构建页面。 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>后台管理系统</title> <link rel="stylesheet" href="/webjars/bootstrap/4.6.0/css/bootstrap.min.css"> </head> <body> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="#">后台管理系统</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-nav"> <li class="nav-item active"> <a class="nav-link" href="#">首页 <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#">用户管理</a> </li> <li class="nav-item"> <a class="nav-link" href="#">订单管理</a> </li> </ul> </div> </nav> <div class="container"> <div class="row"> <div class="col-md-12"> <h1>欢迎来到后台管理系统</h1> </div> </div> </div> <script src="/webjars/jquery/3.6.0/jquery.min.js"></script> <script src="/webjars/bootstrap/4.6.0/js/bootstrap.min.js"></script> </body> </html> ``` 6. 运行应用程序 在控制台中运行应用程序: ``` mvn spring-boot:run ``` 访问 http://localhost:8080/ 即可看到后台管理系统的首页。 总之,Spring Boot、Bootstrap 和 FreeMarker 的结合可以让我们快速开发出一个美观、实用的后台管理系统。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 22
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值