เมื่อเร็ว ๆ นี้ฉันกำลังเรียนรู้การบูตฤดูใบไม้ผลิ การเรียนรู้กรอบไม่มีอะไรมากไปกว่าการใช้มันเพื่อทำสิ่งที่ฉันเคยทำมาก่อน ทั้งสองแตกต่างกัน ให้ฉันบอกคุณว่าฉันมีประสบการณ์ในการใช้อะไร
มาพูดคุยเกี่ยวกับการบูตฤดูใบไม้ผลิก่อนไมโครฟิล์ม การพัฒนาอย่างรวดเร็วเทียบเท่ากับการกำหนดค่าศูนย์ จากมุมมองของอาจารย์: Spring Boot เทียบเท่ากับกรอบของเฟรมเวิร์กซึ่งมีการรวมเข้าด้วยกันมากมาย เพียงเพิ่มการพึ่งพาที่ใดที่เพียงพอ ด้วยวิธีนี้คุณจะไม่เห็นการกำหนดค่าด้วยตัวเอง สำหรับนักพัฒนาที่คุ้นเคยกับการใช้การกำหนดค่าพวกเขาอาจยังไม่คุ้นเคยกับนักพัฒนาที่เพิ่งใช้สปริงบูต พวกเขาไม่จำเป็นต้องจับคู่อะไร พวกเขาไม่เห็นการกำหนดค่า ฉันรู้สึกไม่คุ้นเคยเล็กน้อยกับสถาปัตยกรรมโดยรวมของโครงการ นอกจากนี้การใช้ thymeleaf ในการบูตฤดูใบไม้ผลิ ลองมาตัวอย่างที่ง่ายที่สุดเพื่อแสดงให้เห็นว่า JSP แสดง HelloWorld, Thymeleaf แสดง HelloWorld ทั้งสองนั้นแตกต่างจากการกำหนดค่าของไฟล์ POM แนะนำการพึ่งพาและไฟล์แอตทริบิวต์ เมื่อคุณใช้ JSP อย่าแนะนำการพึ่งพา thymeleaf แน่นอนอย่าแนะนำการพึ่งพา JSP เมื่อใช้ thymeleaf มันอาจทำให้เกิดความขัดแย้ง Spring Boot Official แนะนำให้ใช้ Thymeleaf โดยส่วนตัวแล้วฉันรู้สึกว่ามันดีมาเริ่มโครงการกันเถอะ!
1. แรกสร้างโครงการ Meaven และดูโครงสร้างโดยรวมของโครงการที่สร้างขึ้น
สร้างโครงสร้างโครงการและใช้ pom.xml การสาธิตนี้ใช้ thymeleaf เท่านั้น ไม่มีการพึ่งพาฐานข้อมูลและจำเป็นต้องมีการพึ่งพาน้อยมาก
<Project xmlns = "http://maven.apache.org/pom/4.0.0" xmlns: xsi = "http://www.w3.org/2001/xmlschema-instance" xsi: schemalocation = "http:/MANCMMMMMMMMMMMMMMMMMMMMMMMMMMBM http://maven.apache.org/xsd/maven-4.0.0.xsd "> <moderversion> 4.0.0 </modelversion> <springboot_bootstrap </groupid> <ratifactid> <RoupID> org.springframework.boot </groupid> <ratifactid> Spring-Boot-Starter-Parent </artifactid> <cersion> 1.4.7.release </version> <inelypath/> <! <Project.build.sourceencoding> UTF-8 </project.build.sourceencoding> <project.raporting.OutputUntencoding> UTF-8 </project.Reporting.outputencoding> <RoupID> org.springframework.boot </groupId> <ratifactid> Spring-Boot-Starter </artifactid> </การพึ่งพาอาศัย> <การพึ่งพา> <roupId> org.springframework.boot </roupid> <roupId> org.springframework.boot </groupid> <ratifactid> Spring-Boot-Starter-Thymeleaf </artifactid> </erperency> <derpendencies> <uffer> <build> <plugins> </plugins> </uffer> </project>
สร้างไฟล์ Application.properties ใน 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 spring.thymeleaf.cache = false
เขียนโปรแกรมพอร์ต
แพ็คเกจ com.zanghan.youyu; นำเข้า org.springframework.boot.springapplication; นำเข้า org.springframework.boot.autoconfigure.springbootapplication; @springbootapplication คลาสสาธารณะ youyuapplication {โมฆะคงที่สาธารณะหลัก (สตริง [] args) {springapplication.run (youyuapplication.class, args); - อินเทอร์เฟซ Bootstrap Jump Controller
แพ็คเกจ com.zanghan.youyu.controller; นำเข้า org.springframework.stereotype.controller; นำเข้า org.springframework.web.bind.annotation.requestmapping; @Controller คลาสสาธารณะ LoginController {@requestmapping ("/") ดัชนีสตริงสาธารณะ () {return "/index"; -จะแนะนำ bootstrap js css ได้ที่ไหน? วางไว้ในโฟลเดอร์คงที่หน้าจะถูกวางไว้ในมุมมอง
อินเทอร์เฟซ index.html ถูกเก็บไว้ในโฟลเดอร์ Views ภายใต้ SRC/Main/Resource ทำไมมันถึงไม่ tepmates? เนื่องจากเนื้อหาในไฟล์การกำหนดค่าคุณสมบัติถูกเขียนด้วยมุมมองคำนำหน้าและคำต่อท้ายของ thymeleaf จึงสามารถเปลี่ยนแปลงได้
<! 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 = "เนื้อหาที่เข้ากันไม่ได้ เริ่มต้น = 1 "/> <title> แพลตฟอร์ม MES </title> <!-bootstrap-> <link th: href ="@{bootstrap/bootstrap/css/bootstrap.min.css} "rel =" stylesheet "/> <! th: href = "@{bootstrap/font-wesome/css/font-awesome.min.css}" rel = "stylesheet"/> <!-[ถ้าเช่น 7]> <link href = "/content/font-Wesome/css/font-ie7. Th: href = "@{bootstrap/sidebar-menu/sidebar-menu.css}" rel = "Stylesheet"/> <link th: href = "@{bootstrap/ace/css/ace-rtl.min.cs} th: href = "@{bootstrap/ace/css/ace-skins.min.css}" rel = "stylesheet"/> <script th: src = "@{bootstrap/jQuery-1.9.1.min.js}"> </script> th: src = "@{bootstrap/bootstrap/js/bootstrap.min.js}"> </script> <script th: src = "@{bootstrap/sidebar-menu/sidebar-menu.js}"> </script> < th: src = "@{bootstrap/bootstrap/js/bootstrap-tab.js}"> </script> <!-[ถ้า lt ie 9]> <script src = "/scripts/html5shiv.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; </a> </ul> <div role = "การนำทาง"> <ul> <li style = "ความสูง: 50px;"> <a data-toggle = "dropdown" href = "#"> <img src = "เนื้อหา/Ace/Avatars/Avatar2.png" <a href = "#"> <i> </i> การตั้งค่า </a> </li> <li> <a href = "#"> <i> </i> โปรไฟล์ </a> </li> <li> </li> <li> <a href = "/home/logout" </div> </div> <div id = "main-container"> <div> <div id = "แถบด้านข้าง"> <div id = "sidebar"> <div id = "แถบ sidebar-collapse" style = "display: none;"> <i data-Icon1 = "icon-double id = "เมนู"> </ul> </div> <div> <div> <div> <div> <div> <div style = "padding-left: 5px;"> <ul role = "tablist"> <li> role = "tabpanel" id = "index" style = "ความสูง: 100%"> <h2> ยินดีต้อนรับสู่ระบบการจัดการแบ็กเอนด์ </h2> </div> </div> </div> </div> </div> </div> </viv> $ (function () {$ ('#menu'). sidebarmenu ({data: [{id: '1', ข้อความ: 'การตั้งค่าระบบ', ไอคอน: 'icon-cog', url: '', เมนู: {id: '2', ข้อความ: ไอคอน: 'ไอคอนแก้ว', url: '', เมนู: [{id: '2', ข้อความ: 'การจัดการการเข้ารหัส 1', ไอคอน: 'ไอคอนแก้ว', url: ',}, {id:' 3 ', ข้อความ:' การจัดการการเข้ารหัส 2 ', ไอคอน: 'ไอคอนแก้ว', url: '',}]}]}]}]}]}); $ ("#menu-toggler") คลิก (ฟังก์ชั่น () {var children = $ ("#sidebar-collapse"). $ (เด็ก ๆ ). removeclass ("ไอคอน-คู่-มุมซ้าย"). addclass ("ไอคอน-สองมุม-มุมขวา"); $ ("#sidebar"). attr ("คลาส", "การแสดงแถบด้านข้าง"); </script> <script th: src = "@{bootstrap/ace/js/ace-extra.min.js}"> </script> <script th: src = "@{bootstrap/ace/js/ace.min.js}"> </script>เสร็จสิ้นใช้แอปพลิเคชันและป้อน LocalHost: 8080
ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น