189 8069 5689

springboot+thymeleaf+bootstrap怎么编写后台管理系统界面

这篇文章主要介绍“spring boot+thymeleaf+bootstrap怎么编写后台管理系统界面”,在日常操作中,相信很多人在spring boot+thymeleaf+bootstrap怎么编写后台管理系统界面问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”spring boot+thymeleaf+bootstrap怎么编写后台管理系统界面”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!

站在用户的角度思考问题,与客户深入沟通,找到杏花岭网站设计与杏花岭网站推广的解决方案,凭借多年的经验,让设计与互联网技术结合,创造个性化、用户体验好的作品,建站类型包括:网站制作、做网站、企业官网、英文网站、手机端网站、网站推广、国际域名空间、网站空间、企业邮箱。业务覆盖杏花岭地区。

Bootstrap是什么

Bootstrap是目前最受欢迎的前端框架,它是基于 HTML、CSS、JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷,它还有一个响应最好的Grid系统,并且能够在手机端通用,而Bootstrap是使用许多可重用的CSS和JavaScript组件,可以帮助实现需要的几乎任何类型的网站的功能,此外,所有这些组件都是响应式的。

最近在学spring boot ,学习一个框架无非也就是使用它来做以前做的事情,两者比较才有不同,说一下自己使用的体会。
先来说下spring boot ,微框架。快速开发,相当于零配置,从一个大神那看来的说:spring boot 相当于框架的框架 ,就是集成了很多,用哪个添加哪个的依赖就行,这样的话自己看不到配置,对于习惯了使用配置刚使用spring boot的开发者来说可能还有点不习惯,什么都不用配,看不到配置感觉对项目整体架构有点陌生,再说在spring boot 中使用 thymeleaf 。就拿个最简单的例子来说明 jsp显示helloworld , thymeleaf显示helloworld,两者也就pom文件引入依赖和属性文件配置不同,在你使用jsp的时候不要引入thymeleaf的依赖,当然在使用thymeleaf的时候也不要引入jsp的依赖 有可能会产生冲突,spring boot 官方是推荐使用thymeleaf 我个人感觉也不错,开始项目吧!

1 、首先 建一个meaven项目 看一下建好的项目整体结构

spring boot+thymeleaf+bootstrap怎么编写后台管理系统界面

建好项目结构弄pom.xml ,这个demo只用到thymeleaf,没有数据库方面的依赖,所需依赖很少

 
 4.0.0 
 Springboot_bootstrap 
 Springboot_bootstrap 
 0.0.1-SNAPSHOT 
  
 org.springframework.boot 
 spring-boot-starter-parent 
 1.4.7.RELEASE 
   
  
 
  
 UTF-8 
 UTF-8 
 1.8 
  
 
  
  
 org.springframework.boot 
 spring-boot-starter 
  
 
  
 org.springframework.boot 
 spring-boot-starter-web 
  
 
  
 
  
 org.springframework.boot 
 spring-boot-starter-thymeleaf 
  
 
  
 
  
  
  
 org.springframework.boot 
 spring-boot-maven-plugin 
  
  
  

在src /main/resource 建立 application.properties文件

server.port=8080 
server.session.timeout=10 
server.tomcat.uri-encoding=UTF-8 
 
spring.thymeleaf.prefix=classpath:/views/ 
spring.thymeleaf.suffix=.html 
spring.thymeleaf.mode=HTML5 
spring.thymeleaf.encoding=UTF-8 
spring.thymeleaf.content-type=text/html 
spring.thymeleaf.cache=false

写入口程序

package com.zanghan.youyu; 
 
import org.springframework.boot.SpringApplication; 
import org.springframework.boot.autoconfigure.SpringBootApplication; 
 
@SpringBootApplication 
public class YouYuApplication { 
 
 public static void main(String[] args) { 
 SpringApplication.run(YouYuApplication.class, args); 
 } 
}

控制器跳转bootstrap界面

package com.zanghan.youyu.controller; 
 
import org.springframework.stereotype.Controller; 
import org.springframework.web.bind.annotation.RequestMapping; 
 
@Controller 
public class LoginController { 
 @RequestMapping("/") 
 public String index(){ 
 return "/index"; 
 } 
}

引入bootstrap js css 放在哪里?放在static文件夹里,views中放的是页面

spring boot+thymeleaf+bootstrap怎么编写后台管理系统界面

index.html界面存放在 src/main/resource 下的views 文件夹里,为啥不是tepmlates 因为在属性配置文件中写的是views ,thymeleaf 的前缀和后缀都可以改变的

 
 
 
  
  
  
 MES平台 
  
  
  
  
  
  
  
  
  
 
  
  
  
  
  
  
 body { 
 font-size: 12px; 
 } 
 
 .nav > li > a { 
 padding: 5px 10px; 
 } 
 
 .tab-content { 
 padding-top: 3px; 
 } 
  
 
 
  
 
  
  
   
   
   
  
  
   
  
  Primaopto 
   
  
  
  
  
 
  
  
   
   
   
  欢迎光临, 
  1310177 
   
 
   
   
   
  
  •             设置        
  •     
  •             个人资料        
  •         
  •             退出        
  •              
       
                            
                                  系统首页                

    欢迎进入后台管理系统

                                          //toastr.options.positionClass = 'toast-bottom-right';   $(function () {   $('#menu').sidebarMenu({   data: [{    id: '1',    text: '系统设置',    icon: 'icon-cog',    url: '',    menus: [{    id: '2',    text: '编码管理1',    icon: 'icon-glass',    url: '',    menus: [{    id: '3',    text: '编码管理2',    icon: 'icon-glass',    url: '',    menus: [{    id: '2',    text: '编码管理1',    icon: 'icon-glass',    url: '',       },    {    id: '3',    text: '编码管理2',    icon: 'icon-glass',    url: '',       },{    id: '4',    text: '编码管理3',    icon: 'icon-glass',    url: '',       }]    }]    }]         }]   });     $("#menu-toggler").click(function () {   var children = $("#sidebar-collapse").children("i");   if ($(children).hasClass("icon-double-angle-left")) {    $(children).removeClass("icon-double-angle-left").addClass("icon-double-angle-right");    $("#sidebar").attr("class", "sidebar menu-min display");   }   else {    $(children).removeClass("icon-double-angle-right").addClass("icon-double-angle-left");    $("#sidebar").attr("class", "sidebar display");   }   });   });            

    搞定,运行application 输入localhost:8080

    spring boot+thymeleaf+bootstrap怎么编写后台管理系统界面

    到此,关于“spring boot+thymeleaf+bootstrap怎么编写后台管理系统界面”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注创新互联网站,小编会继续努力为大家带来更多实用的文章!


    文章标题:springboot+thymeleaf+bootstrap怎么编写后台管理系统界面
    分享URL:http://cdxtjz.cn/article/pjopes.html

    联系我们

    您好HELLO!
    感谢您来到成都网站建设公司,若您有合作意向,请您为我们留言或使用以下方式联系我们, 我们将尽快给你回复,并为您提供真诚的设计服务,谢谢。
    • 电话:028- 86922220 18980695689
    • 商务合作邮箱:631063699@qq.com
    • 合作QQ: 532337155
    • 成都网站设计地址:成都市青羊区锣锅巷31号五金站写字楼6楼

    小谭建站工作室

    成都小谭网站建设公司拥有多年以上互联网从业经验的团队,始终保持务实的风格,以"帮助客户成功"为已任,专注于提供对客户有价值的服务。 我们已为众企业及上市公司提供专业的网站建设服务。我们不只是一家网站建设的网络公司;我们对营销、技术、管理都有自己独特见解,小谭建站采取“创意+综合+营销”一体化的方式为您提供更专业的服务!

    小谭观点

    相对传统的成都网站建设公司而言,小谭是互联网中的网站品牌策划,我们精于企业品牌与互联网相结合的整体战略服务。
    我们始终认为,网站必须注入企业基因,真正使网站成为企业vi的一部分,让整个网站品牌策划体系变的深入而持久。