Recently, I was learning spring boot. Learning a framework is nothing more than using it to do what I did before. The two are different. Let me tell you what I have experienced using.
Let’s talk about spring boot first, microframework. Rapid development is equivalent to zero configuration. From a master's perspective: spring boot is equivalent to a framework of the framework, which is a lot of integrations. Just add which dependencies to which one is enough. In this way, you won't see the configuration yourself. For developers who are used to using configurations, they may still be a little unfamiliar with the developers who have just used spring boot. They don't need to match anything. They don't see the configuration. I feel a little unfamiliar with the overall architecture of the project. Besides, using thymeleaf in spring boot. Let’s take the simplest example to illustrate that jsp shows helloworld, thymeleaf shows helloworld. The two are different from the configuration of the pom file introduction dependencies and attribute files. When you use jsp, do not introduce thymeleaf dependencies. Of course, do not introduce jsp dependencies when using thymeleaf. It may cause conflicts. Spring boot official recommends using thymeleaf. I personally feel that it’s good, let’s start the project!
1. First build a meaven project and see the overall structure of the built project
Build a project structure and use pom.xml. This demo only uses thymeleaf. There are no database dependencies and few dependencies are required.
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd"> <modelVersion>4.0.0</modelVersion> <groupId>Springboot_bootstrap</groupId> <artifactId>Springboot_bootstrap</artifactId> <version>0.0.1-SNAPSHOT</version> <parent> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-parent</artifactId> <version>1.4.7.RELEASE</version> <relativePath/> <!-- lookup parent from repository --> </parent> <properties> <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding> <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding> <java.version>1.8</java.version> </properties> <dependencies> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter</artifactId> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency> <!-- thymeleaf --> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId> </dependency> </dependencies> <build> <plugins> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-maven-plugin</artifactId> </plugin> </plugins> </build> </project>
Create application.properties file in src /main/resource
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
Write port program
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); } } Controller jump bootstrap interface
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"; } }Where to introduce bootstrap js css? Put it in the static folder, the page is placed in the views
The index.html interface is stored in the views folder under src/main/resource. Why is it not tepmates? Because the content in the property configuration file is written with views, the prefix and suffix of thymeleaf can be changed.
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3"> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"/> <meta name="viewport" content="width=device-width, initial-scale=1"/> <title>MES platform</title> <!--Bootstrap--> <link th:href="@{Bootstrap/bootstrap/css/bootstrap.min.css}" rel="stylesheet" /> <!-- Font Awesome --> <link th:href="@{Bootstrap/font-awesome/css/font-awesome.min.css}" rel="stylesheet" /> <!--[if IE 7]> <link href="/Content/font-awesome/css/font-awesome-ie7.min.css" rel="stylesheet" /> <!--[endif]--> <link th:href="@{Bootstrap/sidebar-menu/sidebar-menu.css}" rel="stylesheet" /> <link th:href="@{Bootstrap/ace/css/ace-rtl.min.css}" rel="stylesheet" /> <link th:href="@{Bootstrap/ace/css/ace-skins.min.css}" rel="stylesheet" /> <script th:src="@{Bootstrap/jquery-1.9.1.min.js}"></script> <script th:src="@{Bootstrap/bootstrap/js/bootstrap.min.js}"></script> <script th:src="@{Bootstrap/sidebar-menu/sidebar-menu.js}"></script> <script th:src="@{Bootstrap/bootstrap/js/bootstrap-tab.js}"></script> <!--[if lt IE 9]> <script src="/Scripts/html5shiv.js"></script> <script src="/Scripts/respond.min.js"></script> <![endif]--> <style type="text/css"> body { font-size: 12px; } .nav > li > a { padding: 5px 10px; } .tab-content { padding-top: 3px; } </style> </head> <body> <div id="navbar"> <ul> <a id="menu-toggler" href="#"> <i style="font-size:20px;margin-left:-18px;margin-top:8px;display:flex;"></i> </a> <a href="#"> <small> Primaopto </small> </a> </ul> <div role="navigation"> <ul> <li style="height:50px;"> <a data-toggle="dropdown" href="#"> <img src="Content/ace/avatars/avatar2.png" /> <span> <small>Welcome,</small> 1310177 </span> <i></i> </a> <ul> <li> <a href="#"> <i></i> Settings</a> </li> <li> <a href="#"> <i></i> Profile</a> </li> <li></li> <li> <a href="/Home/Logout"> <i></i> Exit</a> </li> </ul> </li> </li> </li> </ul> </div> </div> <div id="main-container"> <div> <div id="sidebar"> <div id="sidebar"> <div id="sidebar-collapse" style="display:none;"> <i data-icon1="icon-double-angle-left" data-icon2="icon-double-angle-right"></i> </div> <ul id="menu"></ul> </div> <div> <div> <div> <div> <div> <div style="padding-left:5px;"> <ul role="tablist"> <li><a href="#Index" role="tab" data-toggle="tab">System homepage</a></li> </ul> <div style="height:1000px"> <div role="tabpanel" id="Index" style="height:100%"> <h2>Welcome to the backend management system</h2> </div> </div> </div> </div> </div> </div> </div> <script type="text/javascript"> //toastr.options.positionClass = 'toast-bottom-right'; $(function () { $('#menu').sidebarMenu({ data: [{ id: '1', text: 'system settings', icon: 'icon-cog', url: '', menus: [{ id: '2', text: 'Coding management 1', icon: 'icon-glass', url: '', menus: [{ id: '3', text: 'Coding management 2', icon: 'icon-glass', url: '', menus: [{ id: '2', text: 'Coding Management 1', icon: 'icon-glass', url: '', }, { id: '3', text: 'Coding Management 2', icon: 'icon-glass', url: '', },{ id: '4', text: 'Coding Management 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"); } }); }); </script> <script th:src="@{Bootstrap/ace/js/ace-extra.min.js}"></script> <script th:src="@{Bootstrap/ace/js/ace.min.js}"></script> </body> </html>Get it done, run application and enter localhost:8080
The above is all the content of this article. I hope it will be helpful to everyone's learning and I hope everyone will support Wulin.com more.