Baru -baru ini, saya belajar boot musim semi. Mempelajari kerangka kerja tidak lebih dari menggunakannya untuk melakukan apa yang saya lakukan sebelumnya. Keduanya berbeda. Izinkan saya memberi tahu Anda apa yang telah saya alami digunakan.
Mari kita bicara tentang Spring Boot terlebih dahulu, Microframework. Pengembangan cepat setara dengan konfigurasi nol. Dari perspektif master: Spring Boot setara dengan kerangka kerangka kerja, yang merupakan banyak integrasi. Tambahkan saja dependensi mana yang cukup. Dengan cara ini, Anda tidak akan melihat konfigurasi sendiri. Untuk pengembang yang terbiasa menggunakan konfigurasi, mereka mungkin masih sedikit tidak terbiasa dengan pengembang yang baru saja menggunakan boot musim semi. Mereka tidak perlu mencocokkan apapun. Mereka tidak melihat konfigurasinya. Saya merasa sedikit tidak terbiasa dengan arsitektur keseluruhan proyek. Selain itu, menggunakan timeleaf di boot musim semi. Mari kita ambil contoh paling sederhana untuk menggambarkan bahwa JSP menunjukkan HelloWorld, Thymeleaf menunjukkan Helloworld. Keduanya berbeda dari konfigurasi dependensi pengantar file POM dan file atribut. Saat Anda menggunakan JSP, jangan memperkenalkan dependensi timeleaf. Tentu saja, jangan memperkenalkan dependensi JSP saat menggunakan timeleaf. Itu dapat menyebabkan konflik. Pejabat Spring Boot merekomendasikan penggunaan Thymeleaf. Saya pribadi merasa baik, mari kita mulai proyek!
1. Pertama membangun proyek Meaven dan lihat keseluruhan struktur proyek yang dibangun
Bangun struktur proyek dan gunakan pom.xml. Demo ini hanya menggunakan timeleaf. Tidak ada dependensi database dan beberapa dependensi diperlukan.
<Project xmlns = "http://maven.apache.org/pom/4.0.0" xmlns: xsi = "http://www.w3.org/2001/xmlschema-instance" xsi: schemalocation = "http:/maven.romp.romp.romp. http://maven.apache.org/xsd/maven-4.0.0.xsd "> <ModelVersion> 4.0.0 </ModelVersion> <groupid> Springboot_Bootstrap </groupid> <Artifactid> Springboot_bootstrap </arttifactid> </Version> 0.0.0.0.0.0.1.0.0.0.0.0.0.0.0.0.0.0.0.0.0.0.0.0.0.0 <groupId> org.springframework.boot </proupid> <ArtifactId> Spring-boot-starter-parent </arttifactid> <version> 1.4.7.release </version> <relativePath/> <!-Pencarian orang tua dari repositori-> </Parent> <versies> <versies> <Project.build.sourceencoding> UTF-8 </project.build.sourceencoding> <poject.reporting.outputEncoding> UTF-8 </project.report.outputenCoding> <Java.version> 1.8 </java.versies> </Properties> </versies> 1.8 </java.versies> </Properties> <puppening> <Java.versies> 1.8 </java.versies> </Properties> </Properties> <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 </proupid> <ArtifactId> Spring-boot-starter-thymeleaf </arttifactid> </gandendency> </dependencies> <build> <Art Plugin> <Roupid> org.springframework. </slugin> </build> </joy Project>
Buat file application.properties di 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
Tulis Program Port
paket com.zanghan.youyu; impor org.springframework.boot.springapplication; impor org.springframework.boot.autoconfigure.springbootApplication; @SpringbootApplication kelas publik youyUplication {public static void main (string [] args) {springApplication.run (youyuapplication.class, args); }} Antarmuka Bootstrap Jump Controller
paket com.zanghan.youyu.controller; impor org.springframework.stereotype.controller; impor org.springframework.web.bind.annotation.requestmapping; @Controller Public Class LogIncontroller {@RequestMapping ("/") Public String Index () {return "/index"; }}Di mana memperkenalkan Bootstrap JS CSS? Masukkan ke dalam folder statis, halaman ditempatkan di tampilan
Antarmuka index.html disimpan di folder tampilan di bawah SRC/Main/Resource. Mengapa itu bukan Tepmates? Karena konten dalam file konfigurasi properti ditulis dengan tampilan, awalan dan akhiran thymeleaf dapat diubah.
<! 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, skala awal = 1 "/> <title> platform MES </iteme> <!-bootstrap-> <tautan th: href ="@{bootstrap/bootstrap/css/bootstrap.min.min.css} "rel =" stylesheet "/> <!-font ween Awesome-> <linkss}" rel = "stylesheet"/> <!-font ween Awesome-> <tautan TH: href = "@{bootstrap/font-Awesome/css/font-aweome.min.min.css}" rel = "stylesheet"/> <!-[jika ie 7]> <tautan href = "/content/font-AWEGE/CSS/font/font-asheome-ie7.min.min TH: href = "@{bootstrap/sidebar-menu/sidebar-menu.css}" rel = "stylesheet"/> <link th: href = "@{bootstrap/aCe/css/Ace-rtl.min.css}" rel = "stylesheet"/> < TH: href = "@{bootstrap/ace/css/ace-skins.min.css}" rel = "stylesheet"/> <script th: src = "@{bootstrap/jQuery -.9.1.min.js}"> </skrip> <skrip/jQuery -.9.1.min.js} "> </skrip> skrip/skrip/jQuery -.9.min.js}"> </script> Script/script/jQuery -.9.1.min.js} "> </Script> Script/script> TH: src = "@{bootstrap/bootstrap/js/bootstrap.min.js}"> </script> <script th: src = "@{bootstrap/sidebar-menu/sidebar-menu.js}"> </skrip> <script> TH: src = "@{bootstrap/bootstrap/js/bootstrap--b.js}"> </script> <!-[jika lt yaitu 9]> <script src = "/scripts/html5shiv.js"> </script> <script src = "/scripts/responds.min.min"> </script> <script src = "/scripts/responds.min type = "text/css"> body {font-size: 12px; } .nav> li> a {padding: 5px 10px; } .tab-content {padding-top: 3px; } </tyle> </head> <body> <v id = "navbar"> <ul> <a id = "menu-soggler" href = "#"> <i style = "font-size: 20px; margin-left: -18px; margin-top: 8px; display: flex;"> </i> </a> small "small"#"#"#"</a> </a> <a> small" small "#"#"#" </i> </a> Small "Small"#"#"#"<" </i> </a> </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"> <v> <div id = "sidebar"> <div id = "sidebar"> <div id = "sidebar-collapse" style = "display: none;"> <i data-icon1 = "ikon-double-sangle-left" data-iCon2 = "icon-doUs-DOUD1 =" ICON-DOURLE-ANGINE-LEFT "data-iCon2 =" icon-doUs-DOUPBLE ID = "Menu"> </ul> </div> <div> <div> <div> <div> <div> <div style = "Padding-left: 5px;"> <ul role = "tablist"> <li> <a href = "#index" role = "tab" data-koggle = "tab"> homepage sistem </a> </li> "tab" ul "Tab"> homepage </a> </a> </li> "Tab" Data = "tab"> Homepage Sistem </a> </li> " Role = "TabPanel" id = "index" style = "tinggi: 100%"> <h2> Selamat datang di sistem manajemen backend </h2> </div> </div> </div> </div> </div> </div> </div> <script type = "text/javascript"> //toastr.options.position class = 'TOKT =' TOXT/JAVASCRIPT "> //ToASTR.OPTIONS.POSIOSS.POSITOMERS = 'TOXT/TEXT'> //TOASTR.OPtions.positions = 'TOXT =' TOXT '> //TOASTR.POSIONS.POSIONS. $(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', Ikon: 'ikon-glass', url: '', menu: [{id: '2', teks: 'Manajemen pengkodean 1', ikon: 'ikon-kaca', url: '',}, {id: '3', Teks: 'Manajemen Coding 2', ikon: 'Icon-glass', url: ',',},}: {ICON: 'ICON:' ICON-GLASS ', URL:' ',},}, {ICon:' ICON: 'ICON:' ICON: 'ICON:' ICON: 'ICON:' ICON: 'ICON:' ICON: 'ICON:' ICON: 'ICON:' ICON: 'ICON:' ICON: 'ICON:' ICON: 'ICON:' ICON: 'ICON:' ICON: 'ICON:' ICON: 'ICON:' ICON: 'ICON:' 4, 'Icon-Glass', URL: '',}]}]}]}]}]}); $ ("#menu-soggler"). Klik (function () {var anak-anak = $ ("#sidebar-collapse"). $ (anak-anak) .removeclass ("ikon-double-sudut-left"). AddClass ("ikon-double-sudut-kanan") ("#sidebar"). ATTRE ("Kelas", "-lawan-dongeng"); $ ("#sidebar"). attr ("class", "sidebar display"); </script> <skrip th: src = "@{bootstrap/ace/js/aCe-extra.min.js}"> </script> <skrip th: src = "@{bootstrap/ace/js/ace.min.js}"> </script> </body> </htm/htmSelesaikan, jalankan aplikasi dan masukkan localhost: 8080
Di atas adalah semua konten artikel ini. Saya berharap ini akan membantu untuk pembelajaran semua orang dan saya harap semua orang akan lebih mendukung wulin.com.