最近、私はSpring Bootを学んでいました。フレームワークを学ぶことは、それを使用して私が以前にやったことをすることにすぎません。 2つは異なります。私が使用したことを教えてください。
最初にSpring Boot、MicroFrameworkについて話しましょう。迅速な開発は、ゼロ構成に相当します。マスターの観点から:スプリングブーツは、フレームワークのフレームワークと同等であり、これは多くの統合です。どの依存関係が十分であるかを追加するだけです。このようにして、自分で構成が表示されません。構成の使用に慣れている開発者の場合、Spring Bootを使用したばかりの開発者にまだ少し不慣れな場合があります。彼らは何も一致させる必要はありません。構成は表示されません。プロジェクトの全体的なアーキテクチャに少し慣れていないと感じています。その上、スプリングブーツでThymeleafを使用します。 JSPがHelloworldを示していることを説明するために、最も簡単な例を見てみましょう。 2つは、POMファイルの導入依存関係と属性ファイルの構成とは異なります。 JSPを使用する場合は、Thymeleaf依存関係を導入しないでください。もちろん、Thymeleafを使用するときはJSP依存関係を導入しないでください。競合を引き起こす可能性があります。 Spring Bootのオフィシャルは、Thymeleafを使用することをお勧めします。私は個人的にそれが良いと感じています、プロジェクトを始めましょう!
1.最初にマヴェンプロジェクトを構築し、構築されたプロジェクトの全体的な構造を確認します
プロジェクト構造を構築し、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://maven.apach/4.0. http://maven.apache.org/xsd/maven-4.0.0.0.xsd "> <modelversion> 4.0.0 </modelversion> <groupid> springboot_bootstrap </groupid> <artifactid> springboot_bootstrap </artifactid> <バージョン<groupid> org.springframework.boot </groupid> <artifactid> spring-boot-boot-starter-parent </artifactid> <bersion> 1.4.7.Release </version> <relativepath/> <! - lookup parent-> </parent> <properties> <project.build.sourceencoding> utf-8 </project.build.sourceencoding> <project.reporting.outputencoding> utf-8 </project.reporting.outputencoding> <java.version> 1.8 </java.version> </propties> <redencies> <redencies> <groupid> org.springframework.boot </groupid> <artifactid> spring-boot-starter </artifactid> </dependency> <dependency> org.springframework.boot </groupid> <artifactid> spring-boot-starter-web </artifactid> </dependenc <groupid> org.springframework.boot </groupid> <artifactid> spring-boot-starter-thymeleaf </artifactid> </dependency> </dependencies> <bultins> <blubins> <groupid> org.springframework.boot </groupid> spring-boot-maven-plugin </プラグイン> </build> </project>
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
ポートプログラムを書き込みます
パッケージ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); }}コントローラージャンプブートストラップインターフェイス
パッケージcom.zanghan.youyu.controller; org.springframework.stereotype.controllerをインポートします。 org.springframework.web.bind.annotation.requestmappingをインポートします。 @controller public class logincontroller {@requestmapping( "/")public string index(){return "/index"; }}Bootstrap JS CSSはどこで紹介しますか?静的フォルダに入れて、ページはビューに配置されます
index.htmlインターフェイスは、SRC/Main/ResourceのViewsフォルダーに保存されます。なぜテップメイトではないのですか?プロパティ構成ファイルのコンテンツはビューで記述されるため、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 = "x-ua-compatible" content = "ie ="/> <meta name = "viee name"初期スケール= 1 "/> <title> mesプラットフォーム</title> <! - bootstrap-> <link th:href ="@{bootstrap/bootstrap/css/bootstrap.min.css} Th:href = "@{bootstrap/font-awesome/css/font-awesome.min.css}" rel = "styleSheet"/> <! - [if ie 7]> <link href = "/content/font-aweesome/css/font-awemest-ie7.min.cs" rel = "/<> <! Th:href = "@{bootstrap/sidebar-menu/sidebar-menu.css}" rel = "styleSheet"/> <link th:href = "@{bootstrap/ace/css/ace-rtl.min.css}" rel = "/>> <link 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> <! - [if lt ie 9]> <script src = "/scripts/html5shiv.js"> </script> <scrip src = "/script.min.min.js"> 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 = "href ="# "> <i style =" font-size:20px; margin-left:-18px; margin-top:8px; display:flex; "> </i> </</</</</</</</</</</</</</</</i </ul> <div role = "navigation"> <ul> <li style = "height:50px;"> <a data-toggle = "dropdown" href = "#"> <img src = "content/ace/avatars/avatar2.png"/> <スパン> <small> wakecte href = "#"> <i> </i>設定</a> </li> <li> <a href = "#"> <i> </i>プロファイル</a> </li> <li> </li> <li> <a href = "/home/logout"> <i> </i> exit </div> </div> <div id = "main-container"> <div> <div id = "sidebar"> <div id = "sidebar"> <div id = "sidebar-collapse" stiled = "display:none;"> <i dato-icon1 = "icon-double-ane-left" data-icon2 = " id = "menu"> </ul> </div> <div> <div> <div> <div> <div> <div div div style = "padding-left:5px;"> <ul rolist "> <li> <a href ="#index "role =" tab "data-toggle =" tab ">システムホームページ</a> </ul> < role = "tabpanel" id = "index" style = "height:100%"> <h2>バックエンド管理システムへようこそ</h2> </div> </div> </div> </div> </div> </div> </div> <script = "text/javascript"> //toastr.optionsclassclass = 'toast-bottom-right'; $(function(){$( '#mence')。sidebarmenu({data:[{id: '1'、 'system settings'、icon: 'icon-cog'、url: ''、menus:[{id: '2'、text: 'coding management 1'、icon: 'icon-glass'、url: '' '' '' '' '' '' '' '' '' '' '' '' 'id:' '、' '' '' 'id:' '' 'id:' '' id:アイコン: 'Icon-glass'、url: ''、menus:[{id: '2'、text: 'coding management 1'、アイコン: 'icon-glass'、url: ''、}、{id: '3'、text: 'coding management 2'、アイコン: 'icon-glass'、url: '' '、 "' '' '' '" 'Icon-glass'、url: ''、}]}]}]}]}); $(children)。 $( "#sidebar")。 </script> <script th:src = "@{bootstrap/ace/js/ace-extra.min.js}"> </script> <script th:src = "@{bootstrap/ace/js/ace.min.js}"> </body> </html> </bodyそれを完了し、アプリケーションを実行し、LocalHost:8080を入力します
上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。