Récemment, j'apprenais Spring Boot. Apprendre un cadre n'est rien de plus que de l'utiliser pour faire ce que j'ai fait auparavant. Les deux sont différents. Permettez-moi de vous dire ce que j'ai vécu en utilisant.
Parlons d'abord de Spring Boot, microframework. Le développement rapide équivaut à une configuration zéro. Du point de vue d'un maître: Spring Boot est équivalent à un cadre du cadre, qui est beaucoup d'intégations. Ajoutez simplement les dépendances auxquelles on suffit. De cette façon, vous ne verrez pas la configuration vous-même. Pour les développeurs qui ont l'habitude d'utiliser des configurations, ils peuvent toujours être un peu familiers avec les développeurs qui viennent d'utiliser Spring Boot. Ils n'ont pas besoin de faire correspondre quoi que ce soit. Ils ne voient pas la configuration. Je me sens un peu familier avec l'architecture globale du projet. En outre, l'utilisation de thymeleaf dans le démarrage de printemps. Prenons l'exemple le plus simple pour illustrer que JSP montre Helloworld, Thymeleaf montre Helloworld. Les deux sont différents de la configuration des dépendances d'introduction du fichier POM et des fichiers d'attribut. Lorsque vous utilisez JSP, n'introduisez pas de dépendances à thymelea. Bien sûr, n'introduisez pas les dépendances JSP lors de l'utilisation de thymeleaf. Cela peut provoquer des conflits. Le responsable de Spring Boot recommande d'utiliser le thyleleaf. Je pense personnellement que c'est bien, commençons le projet!
1. Construisez d'abord un projet de fou et voir la structure globale du projet construit
Construisez une structure de projet et utilisez pom.xml. Cette démo utilise uniquement du thymélé à thymeleaf. Il n'y a pas de dépendances de base de données et peu de dépendances sont nécessaires.
<project xmlns = "http://maven.apache.org/pom/4.0.0" xmlns: xsi = "http://www.w3.org/2001/xmlschema-instance" xsi: schemalation = "http://maven.apache.org/pom/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd "> <ModelVersion> 4.0.0 </ Modelversion> <ProupId> Springboot_bootstrap </proncId> <Artifactid> Springboot_bootsstrap </stifactid> <version> 0.0.1-SNAPSHOT </DERNE> <GroupId> org.springframework.boot </prôdId> <Ertifactid> printemps-boot-starter-parent </lefactive> <version> 1.4.7.release </ version> <RelativePath /> <! - Recherche Parent de Repository -> </parent> <Properceties> <project.build.sourceencoding> utf-8 </project.build.sourceencoding> <project.reportting.outputencoding> utf-8 </project.reportting.outputending> <java.version> 1.8 </java.version> </properties> <pèbres> <Dedency> <GroupId> org.springframework.boot </proupId> <Ertifactive> printemps-boot-starter </ artifactid> </dependency> <dependency> <proupId> org.springframework.boot </prouprid> <eRtifactid> printemps-boot-starter-web </letifactid> </dependency> <! - thylelearef -> <depenrence> <proupId> org.springframework.boot </proncId> <Artifactid> printemps-boot-starter-thymeleaf </ artifactid> </sendency> </dpendances> <fuild> <glugins> <proupId> org.springframework.boot </prounid> </pridge-maven-maven-plugin </tifactID> </fuild> </propwe>
Créer un fichier application.properties dans src / main / ressource
server.port = 8080 server.Session.Timeout = 10 server.tomcat.uri-coding = utf-8 printemps.thymeleaf.prefix = classpath: / vues / printemps.thymeleaf.suffix = .html printemps.thymeleaf.mode = html5 printemps.thymelea.encoding = utf-8 printemps.thymeleaf.content-type = text / html printemps.thymeleaf.cache = false
Programme d'écriture du port
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); }} Interface de bootstrap de saut de contrôleur
Package com.zanghan.youyu.Controller; import org.springframework.sterreotype.Controller; import org.springframework.web.bind.annotation.requestmapping; @Controller public class LoginController {@RequestMapping ("/") public String index () {return "/ index"; }}Où introduire Bootstrap JS CSS? Mettez-le dans le dossier statique, la page est placée dans les vues
L'interface index.html est stockée dans le dossier des vues sous SRC / Main / Resource. Pourquoi n'est-ce pas des camarades? Étant donné que le contenu du fichier de configuration de la propriété est écrit avec des vues, le préfixe et le suffixe de thymeleaf peuvent être modifiés.
<! 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"> <adead> <meta charset = "utf-8" /> <meta http-equiv = "x-ua-compatible" contenu = "ie = edge" /> <aa name = "Viewport" contenu = "width = width," Initial-Scale = 1 "/> <Title> MES Platform </ Title> <! - Bootstrap -> <lien th: href =" @ {bootstrap / bootstrap / css / bootstrap.min.css} "rel =" Stylesheet "/> <! - Font génial -> <lien th: href = "@ {bootstrap / font-awesome / css / font-awesome.min.css}" rel = "Stylesheet" /> <! - [If ie 7]> <link href = "/ content / font-awesome / csss / font-awesome-ie7.mi.css" rel = "StyleSheet" /> <! th: href = "@ {bootstrap / sidebar-menu / sidebar-men.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 / répond.min.js"> </ script> 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; affichage: flex;"> </i> </a> </a> </ul> <div role = "Navigation"> <ul> <li style = "height: 50px;"> <a data-toggle = "dropdown" href = "#"> <img src = "contenu / ace / avatars / avatar2.png" /> <span> <small> </small> 1310177 </span> <i> </smorde> </fr> <a href = "#"> <i> </i> Paramètres </a> </li> <li> <a href = "#"> <i> </i> Profil </a> </li> <li> </li> <li> <a href = "/ home / logout"> <i> </i> </ div> </ div> <div id = "Main-contrainer"> <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> 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> </v> </v> </ ul> </ ul> </ ul> </ ul> </ ul> </ ul> </v> </ ul> </v> </ ul> </vrot style = "height: 1000px"> </li> </ul> </ul> </v> </v> </ving style = "height: 1000x"> </li> </ul> </ul> </ ul> </ving role = "tabpanel" id = "index" style = "height: 100%"> <h2> bienvenue dans le système de gestion backend </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-gass', url: '',}]}]}]}]}]}); $ ("# menu-toggler"). Cliquez sur (fonction () {var enfants = $ ("# Sidebar-Collapse"). $ (enfants) .RemoveClass ("icon-doubble-angle-left"). addClass ("icon-doubble-angle-right"); $ ("# sidebar"). att (class "," Menu-Min-Min "); $ ("# Sidebar"). ART (CLASSE "," affichage de la barre latérale ");}}); </ script> <script th: src = "@ {{bootstrap / ace / js / ace-extra.min.js}"> </ script> <script th: src = "@ {bootstrap / ace / js / ace.min.js}"> </cript> </body> </html>Faites-le, exécutez l'application et entrez localhost: 8080
Ce qui précède est tout le contenu de cet article. J'espère que cela sera utile à l'apprentissage de tous et j'espère que tout le monde soutiendra davantage Wulin.com.