tiles學習筆記
1.什麼是tiles？css
從apache tiles的官網咱們能夠看到這樣一段話：html
Tiles容許做者定義頁面片斷，這些片斷能夠在運行時組裝成完整的頁面。這些片斷或圖塊能夠用做簡單複用，以便減小公共頁面元素的重複或嵌入在其餘圖塊中以開發一系列可重複使用的模板。這些模板簡化了整個應用程序的一致外觀的開發。前端
從tiles3.0官方文檔中，對本身的定義是：java
Apache Tiles是一個模板組合框架。Tiles最初是爲簡化Web應用程序用戶界面的開發而構建的，但它再也不侷限於JavaEE Web環境。mysql
Tiles容許做者定義頁面片斷，這些片斷能夠在運行時組合成一個完整的頁面。這些片斷或圖塊能夠用做簡單複用，以便減小公共頁面元素的重複或嵌入在其餘圖塊中以開發一系列可重複使用的模板。這些模板簡化了整個應用程序的一致外觀的開發。jquery
就我本身的理解就是對於jsp，咱們是一個jsp一個頁面。就像咱們以前最初學習時，一個class類一個main方法，到後來咱們分層，開始使用框架。對於jsp頁面也是如此，咱們認爲一個jsp一個頁面太耦合，當代碼量很大時，代碼的重複部分就很沒必要要，因而就出現了tiles框架，他的設計模式就是分層的模式，在tiles的設計理念中Tiles 是一種JSP佈局框架，主要目的是爲了將複雜的jsp頁面分層，分類。最後咱們將各類部分合在一塊兒變成一個頁面。因而出現了tiles模板，它的做用就是解耦，利於代碼的維護和複用。git
2.tiles框架的學習github
複合視圖模式
全部網站都有一些共同點：它們由共享類似結構的頁面組成。頁面共享相同的佈局，而每一個頁面由不一樣的獨立部分組成，但始終位於全部站點的相同位置。web
該複合視圖模式正式肯定這個典型的使用，容許建立具備類似的結構，其中頁面的每一個部分在不一樣狀況有所不一樣的頁面。spring
模式如何工做
將一個頁面分紅這幾個部分。咱們能夠把每一個部分都單獨寫出來。
可能有時候一些頁面的跳轉，咱們能夠看到頂部，頁腳和菜單都沒有什麼變化，變的只是咱們的正文部分。
這是博客園的頁腳：
而後咱們點開博客園的關注：
咱們能夠看到除了正文也就是body基本都是同樣的。這就是tiles模板的做用，咱們能夠把一個頁面變成由幾個jsp填補空白組成。
如您所見，頁面不一樣，但它們的區別僅在於正文部分。可是請注意，頁面是不一樣的，它不像框架集中的框架刷新！
使用複合視圖模式，頁面的其餘部分已被重用，而且已保留佈局一致性。（來自官網）
接下來開始實現。
Tiles使用步驟
新建一個maven WEB項目。
建立成功以後就能夠進行項目的命名，接着就能夠等待項目建立成功，而後咱們開始建立項目的結構。
建立成功以後就進行依賴的導入：
<?xml version="1.0" encoding="UTF-8"?> <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>com.jnshu</groupId> <artifactId>Task4</artifactId> <version>1.0-SNAPSHOT</version> <packaging>war</packaging> <name>Task4 Maven Webapp</name> <!-- FIXME change it to the project's website --> <url>http://www.example.com</url> <properties> <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding> <maven.compiler.source>1.7</maven.compiler.source> <maven.compiler.target>1.7</maven.compiler.target> <tiles.version>3.0.7</tiles.version> </properties> <dependencies> <!-- 單元測試--> <dependency> <groupId>junit</groupId> <artifactId>junit</artifactId> <version>4.12</version> <scope>test</scope> </dependency> <!--tiles包--> <dependency> <groupId>org.apache.tiles</groupId> <artifactId>tiles-extras</artifactId> <version>3.0.7</version> <exclusions> <exclusion> <artifactId>spring-web</artifactId> <groupId>org.springframework</groupId> </exclusion> <exclusion> <artifactId>slf4j-api</artifactId> <groupId>org.slf4j</groupId> </exclusion> <exclusion> <artifactId>commons-collections</artifactId> <groupId>commons-collections</groupId> </exclusion> <exclusion> <artifactId>guava</artifactId> <groupId>com.google.guava</groupId> </exclusion> </exclusions> </dependency> <!-- mybatis包--> <dependency> <groupId>org.mybatis</groupId> <artifactId>mybatis</artifactId> <version>3.4.1</version> </dependency> <!-- mybatis整合spring--> <dependency> <groupId>org.mybatis</groupId> <artifactId>mybatis-spring</artifactId> <version>1.3.1</version> </dependency> <!-- spring包--> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-core</artifactId> <version>4.3.14.RELEASE</version> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-context</artifactId> <version>4.3.14.RELEASE</version> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-expression</artifactId> <version>4.3.14.RELEASE</version> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-beans</artifactId> <version>4.3.14.RELEASE</version> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-tx</artifactId> <version>4.3.14.RELEASE</version> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-web</artifactId> <version>4.3.14.RELEASE</version> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-webmvc</artifactId> <version>4.3.14.RELEASE</version> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-support</artifactId> <version>2.0.8</version> <exclusions> <exclusion> <artifactId>spring-context</artifactId> <groupId>org.springframework</groupId> </exclusion> <exclusion> <artifactId>spring-core</artifactId> <groupId>org.springframework</groupId> </exclusion> <exclusion> <artifactId>commons-logging</artifactId> <groupId>commons-logging</groupId> </exclusion> </exclusions> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-jdbc</artifactId> <version>4.3.14.RELEASE</version> </dependency> <!-- spring包結束--> <!-- mysql--> <dependency> <groupId>mysql</groupId> <artifactId>mysql-connector-java</artifactId> <version>8.0.16</version> </dependency> <!-- druid鏈接池--> <dependency> <groupId>com.alibaba</groupId> <artifactId>druid</artifactId> <version>1.1.17</version> </dependency> <!-- 日誌包--> <!-- log4j2依賴包--> <dependency> <groupId>org.apache.logging.log4j</groupId> <artifactId>log4j-api</artifactId> <version>2.8.2</version> </dependency> <dependency> <groupId>org.apache.logging.log4j</groupId> <artifactId>log4j-core</artifactId> <version>2.8.2</version> </dependency> <!-- slf4j依賴--> <dependency> <groupId>org.slf4j</groupId> <artifactId>slf4j-api</artifactId> <version>1.7.22</version> </dependency> <!-- log4j2和slf4j橋接依賴,起橋接做用--> <dependency> <groupId>org.apache.logging.log4j</groupId> <artifactId>log4j-slf4j-impl</artifactId> <version>2.8.2</version> <exclusions> <exclusion> <artifactId>slf4j-api</artifactId> <groupId>org.slf4j</groupId> </exclusion> </exclusions> </dependency> <!-- 日誌包結束--> <!-- jsp標準標籤庫jstl是一個jsp標籤集合，它封裝了jsp應用的通用核心功能--> <!-- jstl使用須要加入兩個包jstl和taglib--> <dependency> <groupId>javax.servlet</groupId> <artifactId>jstl</artifactId> <version>1.1.2</version> </dependency> <dependency> <groupId>taglibs</groupId> <artifactId>standard</artifactId> <version>1.1.2</version> </dependency> <!-- 提供編寫servlet須要用到的httpServletRequest和httpServletResponse--> <dependency> <groupId>javax.servlet</groupId> <artifactId>servlet-api</artifactId> <version>2.5</version> <scope>provided</scope> </dependency> <dependency> <groupId>javax.servlet.jsp</groupId> <artifactId>jsp-api</artifactId> <version>2.2</version> <scope>provided</scope> </dependency> <!--tiles框架包--> <!--tiles系列--> <dependency> <groupId>org.apache.tiles</groupId> <artifactId>tiles-api</artifactId> <version>${tiles.version}</version> <exclusions> <exclusion> <artifactId>slf4j-api</artifactId> <groupId>org.slf4j</groupId> </exclusion> </exclusions> </dependency> <dependency> <groupId>org.apache.tiles</groupId> <artifactId>tiles-jsp</artifactId> <version>${tiles.version}</version> <exclusions> <exclusion> <artifactId>slf4j-api</artifactId> <groupId>org.slf4j</groupId> </exclusion> </exclusions> </dependency> <!-- https://mvnrepository.com/artifact/org.apache.tiles/tiles-template --> <dependency> <groupId>org.apache.tiles</groupId> <artifactId>tiles-template</artifactId> <version>${tiles.version}</version> <exclusions> <exclusion> <artifactId>slf4j-api</artifactId> <groupId>org.slf4j</groupId> </exclusion> </exclusions> </dependency> <dependency> <groupId>org.apache.tiles</groupId> <artifactId>tiles-core</artifactId> <version>${tiles.version}</version> <exclusions> <exclusion> <artifactId>slf4j-api</artifactId> <groupId>org.slf4j</groupId> </exclusion> </exclusions> </dependency> <!--tiles end--> </dependencies> <build> <finalName>Task4</finalName> <plugins> <plugin> <artifactId>maven-clean-plugin</artifactId> <version>3.1.0</version> </plugin> <!-- see http://maven.apache.org/ref/current/maven-core/default-bindings.html#Plugin_bindings_for_war_packaging --> <plugin> <artifactId>maven-resources-plugin</artifactId> <version>3.0.2</version> </plugin> <plugin> <artifactId>maven-compiler-plugin</artifactId> <version>3.8.0</version> </plugin> <plugin> <artifactId>maven-surefire-plugin</artifactId> <version>2.22.1</version> </plugin> <plugin> <artifactId>maven-war-plugin</artifactId> <version>3.2.2</version> </plugin> <plugin> <artifactId>maven-install-plugin</artifactId> <version>2.5.2</version> </plugin> <plugin> <artifactId>maven-deploy-plugin</artifactId> <version>2.8.2</version> </plugin> <!--jetty插件--> <!--jetty start--> <plugin> <groupId>org.eclipse.jetty</groupId> <artifactId>jetty-maven-plugin</artifactId> <version>9.4.12.v20180830</version> <configuration> <!--開啓自動檢測配置,默認爲0,不改變. 單位爲秒 --> <scanIntervalSeconds>2</scanIntervalSeconds> <httpConnector> <!--配置端口號--> <port>8080</port> <!--空閒超時--> <idleTimeout>60000</idleTimeout> <host>localhost</host> </httpConnector> <!--解決靜態文件修改後不刷新的問題--> <!--緣由是若是NIO被支持的話，Jetty會使用內存映射文件來緩存靜態文件，其中包括.js文件。在Windows下面，使用內存映射文件會致使文件被鎖定。解決方案是不使用內存映射文件來作緩存。--> <!--<webDefaultXml>src/main/resources/webdefault.xml</webDefaultXml>--> </configuration> </plugin> </plugins> <resources> <resource> <directory>src/main/java</directory> <includes> <include>**/*.xml</include> </includes> </resource> <resource> <directory>src/main/resources</directory> <includes> <include>**/*.properties</include> <include>**/*.xml</include> </includes> <filtering>true</filtering> </resource> </resources> </build> </project>
---恢復內容結束---
1.什麼是tiles？
從apache tiles的官網咱們能夠看到這樣一段話：
Tiles容許做者定義頁面片斷，這些片斷能夠在運行時組裝成完整的頁面。這些片斷或圖塊能夠用做簡單複用，以便減小公共頁面元素的重複或嵌入在其餘圖塊中以開發一系列可重複使用的模板。這些模板簡化了整個應用程序的一致外觀的開發。
從tiles3.0官方文檔中，對本身的定義是：
Apache Tiles是一個模板組合框架。Tiles最初是爲簡化Web應用程序用戶界面的開發而構建的，但它再也不侷限於JavaEE Web環境。
Tiles容許做者定義頁面片斷，這些片斷能夠在運行時組合成一個完整的頁面。這些片斷或圖塊能夠用做簡單複用，以便減小公共頁面元素的重複或嵌入在其餘圖塊中以開發一系列可重複使用的模板。這些模板簡化了整個應用程序的一致外觀的開發。
就我本身的理解就是對於jsp，咱們是一個jsp一個頁面。就像咱們以前最初學習時，一個class類一個main方法，到後來咱們分層，開始使用框架。對於jsp頁面也是如此，咱們認爲一個jsp一個頁面太耦合，當代碼量很大時，代碼的重複部分就很沒必要要，因而就出現了tiles框架，他的設計模式就是分層的模式，在tiles的設計理念中Tiles 是一種JSP佈局框架，主要目的是爲了將複雜的jsp頁面分層，分類。最後咱們將各類部分合在一塊兒變成一個頁面。因而出現了tiles模板，它的做用就是解耦，利於代碼的維護和複用。
2.tiles框架的學習
複合視圖模式
全部網站都有一些共同點：它們由共享類似結構的頁面組成。頁面共享相同的佈局，而每一個頁面由不一樣的獨立部分組成，但始終位於全部站點的相同位置。
該複合視圖模式正式肯定這個典型的使用，容許建立具備類似的結構，其中頁面的每一個部分在不一樣狀況有所不一樣的頁面。
模式如何工做
將一個頁面分紅這幾個部分。咱們能夠把每一個部分都單獨寫出來。
可能有時候一些頁面的跳轉，咱們能夠看到頂部，頁腳和菜單都沒有什麼變化，變的只是咱們的正文部分。
這是博客園的頁腳：
而後咱們點開博客園的關注：
咱們能夠看到除了正文也就是body基本都是同樣的。這就是tiles模板的做用，咱們能夠把一個頁面變成由幾個jsp填補空白組成。
如您所見，頁面不一樣，但它們的區別僅在於正文部分。可是請注意，頁面是不一樣的，它不像框架集中的框架刷新！
使用複合視圖模式，頁面的其餘部分已被重用，而且已保留佈局一致性。（來自官網）
接下來開始實現。
Tiles使用步驟
新建一個maven WEB項目。
建立成功以後就能夠進行項目的命名，接着就能夠等待項目建立成功，而後咱們開始建立項目的結構。
建立成功以後就進行依賴的導入：
<?xml version="1.0" encoding="UTF-8"?> <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>com.jnshu</groupId> <artifactId>Task4</artifactId> <version>1.0-SNAPSHOT</version> <packaging>war</packaging> <name>Task4 Maven Webapp</name> <!-- FIXME change it to the project's website --> <url>http://www.example.com</url> <properties> <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding> <maven.compiler.source>1.7</maven.compiler.source> <maven.compiler.target>1.7</maven.compiler.target> <tiles.version>3.0.7</tiles.version> </properties> <dependencies> <!-- 單元測試--> <dependency> <groupId>junit</groupId> <artifactId>junit</artifactId> <version>4.12</version> <scope>test</scope> </dependency> <!--tiles包--> <dependency> <groupId>org.apache.tiles</groupId> <artifactId>tiles-extras</artifactId> <version>3.0.7</version> <exclusions> <exclusion> <artifactId>spring-web</artifactId> <groupId>org.springframework</groupId> </exclusion> <exclusion> <artifactId>slf4j-api</artifactId> <groupId>org.slf4j</groupId> </exclusion> <exclusion> <artifactId>commons-collections</artifactId> <groupId>commons-collections</groupId> </exclusion> <exclusion> <artifactId>guava</artifactId> <groupId>com.google.guava</groupId> </exclusion> </exclusions> </dependency> <!-- mybatis包--> <dependency> <groupId>org.mybatis</groupId> <artifactId>mybatis</artifactId> <version>3.4.1</version> </dependency> <!-- mybatis整合spring--> <dependency> <groupId>org.mybatis</groupId> <artifactId>mybatis-spring</artifactId> <version>1.3.1</version> </dependency> <!-- spring包--> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-core</artifactId> <version>4.3.14.RELEASE</version> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-context</artifactId> <version>4.3.14.RELEASE</version> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-expression</artifactId> <version>4.3.14.RELEASE</version> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-beans</artifactId> <version>4.3.14.RELEASE</version> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-tx</artifactId> <version>4.3.14.RELEASE</version> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-web</artifactId> <version>4.3.14.RELEASE</version> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-webmvc</artifactId> <version>4.3.14.RELEASE</version> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-support</artifactId> <version>2.0.8</version> <exclusions> <exclusion> <artifactId>spring-context</artifactId> <groupId>org.springframework</groupId> </exclusion> <exclusion> <artifactId>spring-core</artifactId> <groupId>org.springframework</groupId> </exclusion> <exclusion> <artifactId>commons-logging</artifactId> <groupId>commons-logging</groupId> </exclusion> </exclusions> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-jdbc</artifactId> <version>4.3.14.RELEASE</version> </dependency> <!-- spring包結束--> <!-- mysql--> <dependency> <groupId>mysql</groupId> <artifactId>mysql-connector-java</artifactId> <version>8.0.16</version> </dependency> <!-- druid鏈接池--> <dependency> <groupId>com.alibaba</groupId> <artifactId>druid</artifactId> <version>1.1.17</version> </dependency> <!-- 日誌包--> <!-- log4j2依賴包--> <dependency> <groupId>org.apache.logging.log4j</groupId> <artifactId>log4j-api</artifactId> <version>2.8.2</version> </dependency> <dependency> <groupId>org.apache.logging.log4j</groupId> <artifactId>log4j-core</artifactId> <version>2.8.2</version> </dependency> <!-- slf4j依賴--> <dependency> <groupId>org.slf4j</groupId> <artifactId>slf4j-api</artifactId> <version>1.7.22</version> </dependency> <!-- log4j2和slf4j橋接依賴,起橋接做用--> <dependency> <groupId>org.apache.logging.log4j</groupId> <artifactId>log4j-slf4j-impl</artifactId> <version>2.8.2</version> <exclusions> <exclusion> <artifactId>slf4j-api</artifactId> <groupId>org.slf4j</groupId> </exclusion> </exclusions> </dependency> <!-- 日誌包結束--> <!-- jsp標準標籤庫jstl是一個jsp標籤集合，它封裝了jsp應用的通用核心功能--> <!-- jstl使用須要加入兩個包jstl和taglib--> <dependency> <groupId>javax.servlet</groupId> <artifactId>jstl</artifactId> <version>1.1.2</version> </dependency> <dependency> <groupId>taglibs</groupId> <artifactId>standard</artifactId> <version>1.1.2</version> </dependency> <!-- 提供編寫servlet須要用到的httpServletRequest和httpServletResponse--> <dependency> <groupId>javax.servlet</groupId> <artifactId>servlet-api</artifactId> <version>2.5</version> <scope>provided</scope> </dependency> <dependency> <groupId>javax.servlet.jsp</groupId> <artifactId>jsp-api</artifactId> <version>2.2</version> <scope>provided</scope> </dependency> <!--tiles框架包--> <!--tiles系列--> <dependency> <groupId>org.apache.tiles</groupId> <artifactId>tiles-api</artifactId> <version>${tiles.version}</version> <exclusions> <exclusion> <artifactId>slf4j-api</artifactId> <groupId>org.slf4j</groupId> </exclusion> </exclusions> </dependency> <dependency> <groupId>org.apache.tiles</groupId> <artifactId>tiles-jsp</artifactId> <version>${tiles.version}</version> <exclusions> <exclusion> <artifactId>slf4j-api</artifactId> <groupId>org.slf4j</groupId> </exclusion> </exclusions> </dependency> <!-- https://mvnrepository.com/artifact/org.apache.tiles/tiles-template --> <dependency> <groupId>org.apache.tiles</groupId> <artifactId>tiles-template</artifactId> <version>${tiles.version}</version> <exclusions> <exclusion> <artifactId>slf4j-api</artifactId> <groupId>org.slf4j</groupId> </exclusion> </exclusions> </dependency> <dependency> <groupId>org.apache.tiles</groupId> <artifactId>tiles-core</artifactId> <version>${tiles.version}</version> <exclusions> <exclusion> <artifactId>slf4j-api</artifactId> <groupId>org.slf4j</groupId> </exclusion> </exclusions> </dependency> <!--tiles end--> </dependencies> <build> <finalName>Task4</finalName> <plugins> <plugin> <artifactId>maven-clean-plugin</artifactId> <version>3.1.0</version> </plugin> <!-- see http://maven.apache.org/ref/current/maven-core/default-bindings.html#Plugin_bindings_for_war_packaging --> <plugin> <artifactId>maven-resources-plugin</artifactId> <version>3.0.2</version> </plugin> <plugin> <artifactId>maven-compiler-plugin</artifactId> <version>3.8.0</version> </plugin> <plugin> <artifactId>maven-surefire-plugin</artifactId> <version>2.22.1</version> </plugin> <plugin> <artifactId>maven-war-plugin</artifactId> <version>3.2.2</version> </plugin> <plugin> <artifactId>maven-install-plugin</artifactId> <version>2.5.2</version> </plugin> <plugin> <artifactId>maven-deploy-plugin</artifactId> <version>2.8.2</version> </plugin> <!--jetty插件--> <!--jetty start--> <plugin> <groupId>org.eclipse.jetty</groupId> <artifactId>jetty-maven-plugin</artifactId> <version>9.4.12.v20180830</version> <configuration> <!--開啓自動檢測配置,默認爲0,不改變. 單位爲秒 --> <scanIntervalSeconds>2</scanIntervalSeconds> <httpConnector> <!--配置端口號--> <port>8080</port> <!--空閒超時--> <idleTimeout>60000</idleTimeout> <host>localhost</host> </httpConnector> <!--解決靜態文件修改後不刷新的問題--> <!--緣由是若是NIO被支持的話，Jetty會使用內存映射文件來緩存靜態文件，其中包括.js文件。在Windows下面，使用內存映射文件會致使文件被鎖定。解決方案是不使用內存映射文件來作緩存。--> <!--<webDefaultXml>src/main/resources/webdefault.xml</webDefaultXml>--> </configuration> </plugin> </plugins> <resources> <resource> <directory>src/main/java</directory> <includes> <include>**/*.xml</include> </includes> </resource> <resource> <directory>src/main/resources</directory> <includes> <include>**/*.properties</include> <include>**/*.xml</include> </includes> <filtering>true</filtering> </resource> </resources> </build> </project>
當pom文件導入依賴成功後，咱們先看看咱們從前端拿到的頁面。
這是第一個頁面也就是首頁。
咱們看看第二個頁面：
能夠明顯的看出來咱們兩個頁面的頂部和頁腳是同樣的。
咱們先把第一個頁面中須要用動態數據的找出來。
這兩個位置須要動態數據。在學的人數和找到工做的人數，而且在找到工做的人中找出優秀的學員。
第二個頁面：
就只有這個圖須要動態數據。職業名稱，簡介，門檻，難易程度，成長週期，稀缺程度，薪資待遇，而後是這個翻頁出來的介紹。
針對這些數據咱們進行建立表格。建立完成以後進行程序中實體類的編寫。接着是Dao，Service，ServiceImpl的編寫，咱們使用這個模式進行編寫。
因爲咱們首頁只須要進行兩個地方的數據輸入（頁面的數據從數據庫來），一個是在學和找到工做的人數，這個咱們可使用sql語句的count來進行計算。一個是優秀學員的展現，這個咱們只須要進行一個判斷是否優秀，而後將全部優秀的學員進行展現就能夠了。
第二個頁面，職業就純粹是一個從數據庫讀取的過程，全部的信息都是能夠直接獲得的。
因而咱們的頁面展現只須要寫首頁（一個提取全部的優秀學員，一個統計在學的，一個統計找到工做的。），職業（一個提取全部的職業）
@Mapper public interface StudentMapper { //展現優秀學員 List<Student> show(); //計算找到工做的學員人數 Integer countByWorking(); //計算正在學習的學員人數； Integer countByLearning(); }
@Mapper public interface ProfessionMapper { //展現職業信息 List<Profession> getListProfession(); }
進行完接口的編寫以後，就是service，serviceImpl和resources下面的mapper
service
public interface StudentService { //展現優秀學員 List<Student> show(); //計算找到工做的學員人數 Integer countByWorking(); //計算正在學習的學員人數； Integer countByLearning(); }
public interface ProfessionService { //展現職業信息 List<Profession> getListProfession(); }
serviceImpl
@Service public class StudentServiceImpl implements StudentService { @Autowired StudentMapper studentMapper; @Override public List<Student> show() { return studentMapper.show(); } @Override public Integer countByWorking() { return studentMapper.countByWorking(); } @Override public Integer countByLearning() { return studentMapper.countByLearning(); } }
@Service public class ProfessionServiceImpl implements ProfessionService { @Autowired ProfessionMapper professionMapper; @Override public List<Profession> getListProfession() { return professionMapper.getListProfession(); } }
mapper
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd"> <mapper namespace="com.jnshu.Dao.StudentMapper"> <!-- 查詢只是優秀學員的信息，只展現4位--> <select id="show" resultType="com.jnshu.Entity.Student"> select * from student where excellent=1 limit 4 </select> <!-- 查詢已經找到工做的學員數量--> <select id="countByWorking" resultType="java.lang.Integer" > select count(working) from student where working=1 </select> <!-- 查詢在學的學員數量--> <select id="countByLearning" resultType="java.lang.Integer" > select count(working) from student where working=0 </select> </mapper>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd"> <mapper namespace="com.jnshu.Dao.ProfessionMapper"> <select id="getListProfession" resultType="com.jnshu.Entity.Profession"> select profession.*,COUNT(*) AS proCount from student RIGHT JOIN profession on profession.id = student.profession_id group BY profession.id </select> </mapper>
而後咱們配置好spring的相關配置文件。
<?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.springframework.org/schema/beans" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:context="http://www.springframework.org/schema/context" xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-3.1.xsd"> <context:annotation-config/> <!--開啓組件自動掃描,掃描路徑由base-package屬性指定，表示Spring將會掃描該目錄以及子目錄下全部被 @Repository、@com.jnshu.Service 和 @com.jnshu.Controller 和 @Component四個註解修飾的類，對它們進行裝配--> <context:component-scan base-package="com.jnshu.*"/> <!-- 加載數據庫配置文件--> <context:property-placeholder location="classpath:db.properties"/> <!-- 數據庫鏈接池 --> <bean id="datasource" class="com.alibaba.druid.pool.DruidDataSource" destroy-method="close"> <property name="driverClassName" value="${jdbc.driver}"/> <property name="url" value="${jdbc.url}"/> <property name="username" value="${jdbc.user}"/> <property name="password" value="${jdbc.password}"/> <!-- 最大併發鏈接數 --> <property name = "maxActive" value = "20" /> <!-- 初始化鏈接數量 --> <property name = "initialSize" value = "1" /> <!-- 配置獲取鏈接等待超時的時間 --> <property name = "maxWait" value="60000"/> <!-- 最小空閒鏈接數 --> <property name = "minIdle" value = "10" /> <!-- 配置間隔多久才進行一次檢測，檢測須要關閉的空閒鏈接，單位是毫秒 --> <property name = "timeBetweenEvictionRunsMillis" value ="15" /> <!-- 配置一個鏈接在池中最小生存的時間，單位是毫秒 --> <property name = "minEvictableIdleTimeMillis" value ="60000" /> </bean> <!--讓spring管理sqlSessionFactory spring和Mybatis整合--> <bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean"> <!--注入數據庫鏈接池--> <property name="dataSource" ref="datasource"/> <!-- 加載mybatis的全局配置文件 --> <property name="configLocation" value="classpath:Mybatis-config.xml"/> <!--指定mapper映射文件的位置--> <property name="mapperLocations" value="classpath*:Mapper/*.xml"/> </bean> <!-- 自動掃描 將Mapper接口生成代理注入到Spring 對於在basePackage設置的包（包括子包）下的接口類， 若是接口類的全類名在Mapper.xml文件中和定義過 命名空間一致，將被轉換成spring的BEAN，在調用的地方經過@Autowired方式將能夠注入接口實例--> <bean class="org.mybatis.spring.mapper.MapperScannerConfigurer"> <property name="basePackage" value="com.jnshu.Dao"/> <property name="sqlSessionFactoryBeanName" value="sqlSessionFactory"/> </bean> </beans>
配置好db.properties
還有log4j2.xml的文件
<?xml version="1.0" encoding="UTF-8"?> <configuration status="WARN"> <appenders> <Console name="Console" target="SYSTEM_OUT"> <PatternLayout pattern="%d{DEFAULT} [%t] %-5p %c{36} - %m%n"/> </Console> </appenders> <loggers> <root level="WARN"> <appender-ref ref="Console"/> </root> </loggers> </configuration>
mybatis-config.xml
<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE configuration PUBLIC "-//mybatis.org//DTD Config 3.0//EN" "http://mybatis.org/dtd/mybatis-3-config.dtd"> <configuration> <typeAliases> <typeAlias type="com.jnshu.Entity.Student" alias="student"/> <typeAlias type="com.jnshu.Entity.Profession" alias="profession"/> </typeAliases> </configuration>
而後是web.xml
<?xml version="1.0" encoding="UTF-8"?> <web-app version="3.0" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"> <display-name>Archetype Created Web Application</display-name> <!--第一步加載spring上下文環境的配置文件--> <context-param> <param-name>contextConfigLocation</param-name> <param-value>classpath*:applicationContext.xml</param-value> </context-param> <listener> <description>Spring容器加載監聽器</description> <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class> </listener> <!--第二步字符編碼過濾器--> <filter> <filter-name>characterEncodingFilter</filter-name> <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class> <init-param> <param-name>encoding</param-name> <param-value>UTF-8</param-value> </init-param> <init-param> <param-name>forceEncoding</param-name> <param-value>true</param-value> </init-param> </filter> <!-- 路徑映射 --> <filter-mapping> <filter-name>characterEncodingFilter</filter-name> <url-pattern>/*</url-pattern> </filter-mapping> <!--第三步配置springmvc的核心控制器 DispatcherServlet--> <servlet> <!--servlet名稱--> <servlet-name>DispatcherServlet</servlet-name> <!-- servlet類全路徑--> <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class> <init-param> <param-name>contextConfigLocation</param-name> <param-value>classpath*:spring-mvc.xml</param-value> </init-param> <!--指定當Web應用啓動時，裝載Servlet的次序--> <load-on-startup>1</load-on-startup> </servlet> <!-- Spring MVC配置文件結束 --> <!--第四步：攔截設置--> <servlet-mapping> <servlet-name>DispatcherServlet</servlet-name> <!-- 由SpringMVC攔截全部請求 --> <url-pattern>/</url-pattern> </servlet-mapping> <!--SpringMvc自定義標籤 由後臺的long類型在前臺頁面顯示String類型--> <jsp-config> <taglib> <taglib-uri>/tags</taglib-uri> <!--指定自定義標籤的位置--> <taglib-location>/WEB-INF/DataTag.tld</taglib-location> </taglib> </jsp-config> </web-app>
springmvc.xml
<?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.springframework.org/schema/beans" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:context="http://www.springframework.org/schema/context" xmlns:mvc="http://www.springframework.org/schema/mvc" xmlns:p="http://www.springframework.org/schema/p" xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-3.1.xsd http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-4.0.xsd "> <!--主要是自動掃描控制器，視圖模式，註解的啓動這三個--> <!--注意：若是配置了<context:component-scan>那麼<context:annotation-config/>標籤就能夠不用再xml中配置了，由於前者包含了後者--> <context:component-scan base-package="com.jnshu.Controller"> <!--<context:exclude-filter>指定的不掃描，<context:include-filter>指定的掃描--> <context:include-filter type="annotation" expression="org.springframework.stereotype.Controller"/> </context:component-scan> <!--會自動註冊RequestMappingHandlerMapping與RequestMappingHandlerAdapter兩個Bean, 這是Spring MVC爲@Controller分發請求所必需的，而且提供了數據綁定支持， @NumberFormatannotation支持，@DateTimeFormat支持,@Valid支持讀寫XML的支持（JAXB）和讀寫JSON的支持（默認Jackson）等功能--> <mvc:annotation-driven/> <!--定義tiles視圖解析器--> <bean id="tilesViesResolver" class="org.springframework.web.servlet.view.UrlBasedViewResolver"> <property name="viewClass" value="org.springframework.web.servlet.view.tiles3.TilesView"/> </bean> <bean id="tilesConfigurer" class="org.springframework.web.servlet.view.tiles3.TilesConfigurer"> <property name="definitions"> <list> <value>/WEB-INF/tiles.xml</value> </list> </property> </bean> <!--配置靜態資源訪問 若是你的DispatcherServlet攔截 *.do這樣的URL，就不存在訪問不到靜態資源的問題。 若是你的DispatcherServlet攔截「/」，攔截了全部的請求，同時對*.js,*.jpg的訪問也就被攔截了。 目的：能夠正常訪問靜態文件，不要找不到靜態文件報404--> <!--location是真實的路徑，mapping是對外顯示的映射的路徑。--> <!--<mvc:resources location="/static/image/" mapping="/image/**"/>--> <!--<mvc:resources location="/static/js/" mapping="/js/**"/>--> <!--<mvc:resources location="/static/css/" mapping="/css/**"/>--> <mvc:default-servlet-handler/> <!-- 配置視圖解析器: 把 controller 方法返回值解析爲實際的物理視圖 --> <!-- <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver"--> <!-- p:prefix="/WEB-INF/jsp/" p:suffix=".jsp">--> <!-- </bean>--> </beans>
而後就是咱們的重點tiles的配置文件。
tiles.xml文件,他的做用是,決定了 哪些是能夠複用的,哪些的單獨的 .
<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE tiles-definitions PUBLIC "-//Apache Software Foundation//DTD Tiles Configuration 3.0//EN" "http://tiles.apache.org/dtds/tiles-config_3_0.dtd"> <tiles-definitions> <!-- tiles基礎模板 --> <definition name="baseTemplate" template="/WEB-INF/jsp/template.jsp"> <!--定義模版--> <put-attribute name="tittle" value="首頁"/> <put-attribute name="header" value="/WEB-INF/jsp/header.jsp"/> <put-attribute name="top" value="/WEB-INF/jsp/top.jsp"/> <put-attribute name="menu" value="/WEB-INF/jsp/menu.jsp"/> <put-attribute name="body" value=""/> <put-attribute name="footer" value="/WEB-INF/jsp/footer.jsp" /> </definition> <!--繼承模板--> <definition name="home" extends="baseTemplate"> <put-attribute name="tittle" value="首頁"/> <put-attribute name="body" value="/WEB-INF/jsp/body.jsp"/> </definition> <!--繼承模板--> <definition name="profession" extends="baseTemplate"> <put-attribute name="tittle" value="職業"/> <put-attribute name="body" value="/WEB-INF/jsp/body2.jsp"/> </definition> </tiles-definitions>
template.jsp以它爲模板複用頁面
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%--// 定義格式--%> <%@ taglib prefix="tiles" uri="http://tiles.apache.org/tags-tiles" %> <%--// 引入依賴 tiles標籤庫tiles前綴--%> <%@ taglib prefix="tittle" uri="http://tiles.apache.org/tags-tiles" %> <%--//引入依賴 tittle前綴--%> <!DOCTYPE html> <html> <head> <title><tiles:insertAttribute name="tittle"/></title> <%-- //標題 插入屬性 name--%> <tiles:insertAttribute name="top" /> <%-- //插入top.jsp--%> </head> <body> <%--頭部--%> <tiles:insertAttribute name="header" /> <%--//插入 header.jsp name建立一個definition bean的訪問名稱 insertAttribute將屬性的值插入頁面--%> <%--菜單--%> <tiles:insertAttribute name="menu"/> <%--//插入menu.jsp--%> <%--內容--%> <tiles:insertAttribute name="body"/> <%--//插入 body.jsp--%> <%--尾部--%> <tiles:insertAttribute name="footer"/> <%--//插入footer.jsp--%> </body> </html>
從上到下依次是
tittle這個在tiles.xml中重寫過了，頁面一是首頁，頁面二是職業。
top.jsp，head裏面的內容
<%@ page contentType="text/html;charset=UTF-8" language="java" %> <meta http-equiv="X-UA-Compatible" content="IE=edge" charset="utf-8"> <%--//html meta標籤，content指定ie8瀏覽器，格式utf-8，http-equiv爲稱/值對提供了名稱，把名稱值隊添加到發送給瀏覽器的內容頭部--%> <%--//Edge 模式通知 Windows Internet Explorer 以最高級別的可用模式顯示內容，這實際上破壞了「鎖定」模式。即若是你有IE9的話說明你有IE789，那麼就調用高版本的那個也就是IE9。--%> <link href="${pageContext.request.contextPath}/static/css/bootstrap.min.css" rel="stylesheet" type="text/css"> <%--//html link標籤，訪問個人根目錄下的stati目錄的css目錄，bootstrap.min.css文件--%> <%--//rel="stylesheet" 描述了當前頁面與href所指定文檔的關係.即說明的是,href鏈接的文檔是一個新式表--%> <%--<link href="${pageContext.request.contextPath}/WEB-INF/static/css/bootstrap.css"--%> <%--rel="stylesheet" type="text/css">--%> <link href="${pageContext.request.contextPath}/static/css/Untitled-3.css" rel="stylesheet" type="text/css"> <%--//定位到根目錄下的static目錄，css目錄，Untitled-3.css文件，描述這個連接是一個新式表。--%> <link href="${pageContext.request.contextPath}/static/css/Untitled-1base.css" rel="stylesheet" type="text/css"> <%--//定位到根目錄下的static目錄下的css目錄下的Untitled-1base.css文件，連接的是一個新式表--%> <link href="${pageContext.request.contextPath}/static/css/t11.css" rel="stylesheet" type="text/css"> <%--//連接到根目錄下的static目錄下的css目錄下的t11.css文件，連接的是一個新式表--%> <link href="${pageContext.request.contextPath}/static/css/base.css" rel="stylesheet" type="text/css"> <%--//連接到根目錄的static目錄下的css目錄下的base.css文件，連接的是一個新式表--%> <script src="${pageContext.request.contextPath}/js/jquery.min.js"></script> <%--//html script標籤，在html頁面插入一段js，連接到根目錄下的js目錄下的jquery.min.js文件--%> <script src="${pageContext.request.contextPath}/js/bootstrap.min.js"></script> <%--//html script標籤，在html頁面插入一段js，連接到根目錄下的js目錄下的bootstrap.min.js文件--%>
header.jsp，body裏面的第一部分就是頂部的客服電話，加三個圖標。
<%@ page language="java" pageEncoding="UTF-8"%> <%--//指定頁面的格式--%> <div class="container hidden-xs"> <%-- //html div標籤，用來給頁面加樣式， class=「container」 container 類用於固定寬度並支持響應式佈局的容器--%> <%-- //hidden-xs 針對不一樣尺寸屏幕隱藏或顯示內容。--%> <div class="row header-top"> <%-- //行元素， header-top頭部固定定位--%> <p class="col-xs-12 col-sm-6 col-md-6 col-lg-6">客服電話:010-594-78634</p> <%-- //元素信息 col-xs- 超小屏幕，手機（<768px）col-sm- 小屏幕，平板(>=768px)--%> <%-- //col-md-中等屏幕，桌面顯示器（>=992px）col-lg- 大屏幕（>=1200px） 這個樣式的信息爲客服電話:010-594-78634--%> <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 text-right"> <%-- //text-right 設置內部元素右對齊--%> <div> <a href="#" target="_blank"> <img alt="" src="${pageContext.request.contextPath}/static/image/54537.png"></a> <a href="#" target="_blank"><img alt="" src="${pageContext.request.contextPath}/static/image/45678678.png"></a> <a href="#" target="_blank"> <img alt="" src="${pageContext.request.contextPath}/static/image/54375483543.png"></a> <%-- 顯示三個小圖標--%> </div> </div> </div> </div>
接着是menu.jsp:這個是展現圖片加上首頁，職業，推薦，關於這些，咱們只用把頁面的圖片改成絕對路徑就好了。
<%@ page language="java" pageEncoding="UTF-8"%> <%--//頁面格式--%> <nav class="navbar navbar-default"> <%-- //html nav標籤訂義導航連接的部分（ie8及以前不支持nav）--%> <div class="container"> <%-- //container 類用於固定寬度並支持響應式佈局的容器--%> <div class="navbar-header"> <%-- //定義類 導航條頭部--%> <a href="#" class="navbar-brand"> <%-- // 導航條 指向#--%> <img src="${pageContext.request.contextPath}/static/image/logo.png" alt="Brand" class="img-responsive"> <%-- //內容圖片 連接地址根目錄下的static目錄下的image目錄下的logo.png文件，alt 屬性是一個必需的屬性，它規定在圖像沒法顯示時的替代文本。--%> </a> <button data-target="#open-nav" data-toggle="collapse" class="navbar-toggle btn-primary collapsed" aria-expanded="false"> <%-- //html button標籤 當縮小瀏覽器屏幕的時候，導航條會隱藏，右邊會出來三條橫槓，你點擊這個導航條就會向下顯示出來，默認爲白色橫槓！--%> <span class="icon-bar"></span> <%-- //span標籤 圖標欄--%> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div id="open-nav" class="navbar-collapse collapse" aria-expanded="false" style="height: 1px;"> <ul class="nav navbar-nav navbar-right text-center list-inline"> <%-- //html ul標籤 無序列表 全部元素都在一行--%> <li><a href="${pageContext.request.contextPath}/home">首頁</a></li> <%-- //<li>標籤訂義列表項目 連接指向根目錄下的home文件 文字爲首頁--%> <li><a href="${pageContext.request.contextPath}/profession">職業</a></li> <%-- //<li> 標籤訂義列表項目 連接指向根目錄下的profession文件 文字爲職業--%> <li><a href="">推薦</a></li> <%-- //<li> 標籤訂義列表項目 文字爲 推薦--%> <li><a href="">關於</a></li> <%-- //<li> 標籤訂義列表項目 文字爲 關於--%> </ul> </div> </div> </nav>
接着是兩個頁面不一樣的body部分：這個部分須要用到數據庫的信息，這個信息是從controller傳過來的。最後咱們使用EL表達式讀取屬性信息。最重要的是中間的優秀學員展現，咱們須要用c:foreach標籤去進行讀取數據，而不是用前端的寫死的。
body.jsp
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <%--//引入依賴，jstl標籤庫--%> <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8" isELIgnored="false" %> <%--//定義頁面語言--%> <div id="myCarousel" class="carousel slide"> <%-- //定義一個樣式 表示輪播有滑動的效果--%> <ol class="carousel-indicators"> <%-- //有序列表 ，類名--%> <li class="active" data-slide-to="0" data-target="#myCarousel"></li> <%-- //active 自定義導航欄當前高亮的欄目 data-slide-to是一個索引，他和輪播圖一一對應，從零開始，控制輪播圖的跳轉位置--%> <li data-slide-to="1" data-target="#myCarousel"></li> <%-- // 位置1，輪播圖--%> <li data-slide-to="2" data-target="#myCarousel"></li> <%-- //位置2，輪播圖--%> <li data-slide-to="3" data-target="#myCarousel"></li> <%-- //位置3，輪播圖--%> </ol> <div class="carousel-inner"> <%-- //樣式表示輪播的內容--%> <div class="item active"> <%-- //表示輪播一張張圖片--%> <img alt="First slide" src="${pageContext.request.contextPath}/static/image/547567.jpg"> <%-- //圖形屬性 第一張屬性 連接 根目錄下的static目錄下的image目錄下 的547567.jpg文件--%> </div> <div class="item"> <%-- 第二個--%> <img alt="Second slide" src="${pageContext.request.contextPath}/static/image/453254354.jpg"> <%-- //圖形 第二張屬性 連接 根目錄下的 static目錄下的image目錄下的547567.jpg文件--%> </div> <div class="item"> <%-- //第三個--%> <img alt="Third slide" src="${pageContext.request.contextPath}/static/image/banner-3.jpg"> <%-- //圖形 第三張屬性 連接 根目錄下的static的image下的547567.jpg文件--%> </div> </div> <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> </div> <div class="main container"> <!--第一部分開始 ，大圖標--> <div class="main-a row"> <%-- //從新定義一個類--%> <div class="col-xs-12 col-sm-6 col-md-6 col-lg-3"> <%-- //從新定義一個類 定義大小--%> <div class="row text-center"> <%-- //定義類 中心對齊--%> <ul class="list-unstyled"> <%-- //無序列表--%> <li class="col-xs-12 up-1"> <%-- //選項 定義大小--%> <img alt="" src="${pageContext.request.contextPath}/static/image/45354312.png"> <%-- //這個選項是一個圖片，連接地址根目錄下的static下的image下的45354312.png文件--%> </li> <li class="up-2 col-xs-12">高效</li> <%-- //選項，定義一個大小， 內容文字：高效--%> <li class="up-3 col-xs-12">將三到七年的成長時間,縮短到一年到兩年</li> <%-- //第三個選項，定義大小 ，內容：將三到七年的成長時間,縮短到一年到兩年--%> </ul> </div> </div> <div class="col-xs-12 col-sm-6 col-md-6 col-lg-3"> <%-- //建立一個類，定義大小--%> <div class="row text-center"> <%-- //定義一個類，居中對齊--%> <ul class="list-unstyled"> <%-- //無序列表 --%> <li class="col-xs-12 up-1"> <%-- 這是第一個選項，定義大小--%> <img alt="" src="${pageContext.request.contextPath}/static/image/879789.png"> <%-- 內容是一張圖片，連接地址爲根目錄下的static的image下的879789.png文件--%> </li> <li class="up-2 col-xs-12">規範</li> <%-- 第二個選項，定義大小，內容爲文字：規範--%> <li class="up-3 col-xs-12">標準到實戰教程,不會走彎路</li> <%-- 第三個選項，定義大小，內容爲文字：標準到實戰教程,不會走彎路--%> </ul> </div> </div> <div class="col-xs-12 col-sm-6 col-md-6 col-lg-3"> <%-- //從新建立一個類，定義大小--%> <div class="row text-center"> <%-- //建立一個類 是一行居中對齊--%> <ul class="list-unstyled"> <%-- //無序列表--%> <li class="col-xs-12 up-1"> <%-- 這是第一個選項，定義大小--%> <img alt="" src="${pageContext.request.contextPath}/static/image/786453654365.png"> <%-- 這是第二個選項，是圖片，連接地址爲根目錄下的static的image下的786453654365.png文件--%> </li> <li class="up-2 col-xs-12">人脈</li> <%-- 第二個選項，定義大小，內容爲文字：人脈--%> <li class="up-3 col-xs-12">同班好友,同院學長,技術大師,入學就混職脈圈,爲之後鋪平道路</li> <%-- 第三個選項，定義大小，內容爲文字：同班好友,同院學長,技術大師,入學就混職脈圈,爲之後鋪平道路--%> </ul> </div> </div> <div class="col-xs-12 col-sm-6 col-md-6 col-lg-3 text-center"> <%-- //新建一個類，定義大小，居中對齊--%> <p> <img src="${pageContext.request.contextPath}/static/image/453254312.png">${count}<br> <%-- 第一個內容是圖片 連接地址爲根目錄下的static下的image目錄下的423254312.png文件--%> <span class="up-3">累計在線學習人數</span> <%-- span元素 內容：累計在線學習人數--%> </p> <p> <img src="${pageContext.request.contextPath}/static/image/453254312.png">${number}<br> <%-- 第二個內容仍是圖片，連接地址爲根目錄下的static的image下的423254312.png文件--%> <span class="up-3">學員已經找到滿意工做</span> <%-- span元素 內容 ：學員已經找到滿意工做--%> </p> </div> </div> <!--第二部分開始--> <div class="main-b row"> <%-- 建立一個類 行元素--%> <h3 class="text-center main-tab">如何學習</h3> <%-- 建立類 居中對齊 內容：如何學習--%> <ul class="list-unstyled text-center"> <%-- 無序列表 居中對齊--%> <li class="col-xs-12 col-sm-6 col-md-6 col-lg-3"> <%-- 第一個選項 一行 顯示屏超過1200px顯示4個，而後是2個，最少是一個--%> <span class="up-1 text-center">1</span> <%-- span元素 第一個元素，居中對齊,文字 :1--%> <p class="up-2">匹配你如今的我的狀況尋找適合本身的崗位</p> <%-- 第二個元素 文字: 匹配你如今的我的狀況尋找適合本身的崗位--%> <span class="up-3"></span> <%-- 第三個元素 --%> </li> <li class="col-xs-12 col-sm-6 col-md-6 col-lg-3"> <%-- //第二個選項 一行 分辨率超過1200px顯示4個 而後是2個 最小是一個--%> <span class="up-1 text-center">2</span> <%-- span元素 第一個元素 居中對齊 文字:2--%> <p class="up-2">瞭解職業前景薪金待遇，競爭壓力等</p> <%-- 第二個元素 文字:瞭解職業前景薪金待遇，競爭壓力等--%> <span class="up-3"></span> <%-- 第三個元素--%> </li> <li class="col-xs-12 col-sm-6 col-md-6 col-lg-3"> <%-- 第三個選項 規定大小 超過1200px顯示4個 而後是兩個,最少是1個--%> <span class="up-1 text-center">3</span> <%-- 第一個元素 居中對齊 文字:3--%> <p class="up-2">掌握行業內頂級技能</p> <%-- 第二個元素 文字:掌握行業內頂級技能--%> <span class="up-3"></span> <%-- 第三個元素 :--%> </li> <li class="col-xs-12 col-sm-6 col-md-6 col-lg-3"> <%-- 第四個選項 定義大小 超過1200px顯示 4個,而後是顯示兩個,最少時顯示1個--%> <span class="up-1 text-center">4</span> <%-- 第一個元素 居中對齊 文字：4--%> <p class="up-2">查看職業目標任務</p> <%-- 第二個元素 文字：查看職業目標任務--%> <span class="up-3"></span> <%-- 第三個元素 --%> </li> <li class="col-xs-12 col-sm-6 col-md-6 col-lg-3"> <%-- 四五個選項 定義大小 --%> <span class="up-1 text-center">5</span> <%-- 第一個元素 ，居中對齊 文字：5--%> <p class="up-2">參考學習資料，掌握技能點，逐個完成任務</p> <%-- 第二個元素， 文字：參考學習資料，掌握技能點，逐個完成任務--%> <span class="up-3"></span> <%-- 第三個元素--%> </li> <li class="col-xs-12 col-sm-6 col-md-6 col-lg-3"> <%-- 第六個選項，定義大小--%> <span class="up-1 text-center">6</span> <%-- 第一個元素, 居中對齊 文字:6--%> <p class="up-2">加入班級，和小夥伴們互幫互動，一塊學習</p> <%-- 第二個元素 文字:加入班級，和小夥伴們互幫互動，一塊學習--%> <span class="up-3"></span> <%-- 第三個元素--%> </li> <li class="col-xs-12 col-sm-6 col-md-6 col-lg-3"> <%-- 第七個選項，定義大小--%> <span class="up-1 text-center">7</span> <%-- 第一個元素，居中對齊 文字：7--%> <p class="up-2">選擇導師，一路引導，加速本身成長</p> <%-- 第二個元素 文字：選擇導師，一路引導，加速本身成長--%> <span class="up-3"></span> <%-- 第三個元素--%> </li> <li class="col-xs-12 col-sm-6 col-md-6 col-lg-3"> <%-- 第八個選項 ，定義大小--%> <span class="up-1 text-center">8</span> <%-- 第一個元素，居中對齊 文字：8--%> <p class="up-2">完成職業 技能，升級業界大牛</p> <%-- 第二個元素 文字：完成職業 技能，升級業界大牛--%> <span class="up-3 invisible"></span> <%-- 第三個元素--%> </li> </ul> </div> <!--第三部分開始--> <div class="main-c row"> <%-- 建立優秀學員展現--%> <h3 class="text-center main-tab">優秀學員展現</h3> <%-- 居中對齊 文字：優秀學員展現--%> <c:forEach items="${studentList}" var="student" > <%-- 建立一個表單 ，元素是 studentList 每個對象是student--%> <ul class="list-unstyled text-center" style="margin: 0;"> <%-- 無序列表 居中對齊--%> <li class="col-xs-12 col-sm-6 col-md-6 col-lg-3"> <%-- 第一個選項 ，定義大小 --%> <div> <img src="${pageContext.request.contextPath}${student.picture}" alt="這是圖片"> <%-- 圖片文件 地址爲student.picture--%> <span>${student.company}${student.job}:${student.name}</span> <%-- student.position(職業)對應student.name，一一對應--%> <p class="text-left">${student.expreience}</p> <%-- 文本靠左對齊，學生的經歷--%> </div> </li> </ul> </c:forEach> </div> <!--第四部分開始--> <div class="row main-bottom"> <%-- 戰略合做企業欄目（盒子）--%> <h3 class="text-center">戰略合做企業</h3> <%-- 文本居中對齊 文本：戰略合做企業--%> <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"> <%-- 建立一個類 定義大小--%> <ul class="logo"> <%-- 無序列表--%> <li> <a href=""><img src="${pageContext.request.contextPath}/static/image/123132.png"></a> <%-- 第一個選項 是圖片,連接地址根目錄下的static的image下的123132.png文件--%> </li> <li> <a href=""> <img src="${pageContext.request.contextPath}/static/image/1549865.png"></a> <%-- 第二個選項 是圖片 ,連接地址是根目錄下的static目錄下的image下的1549865.png文件--%> </li> <li> <a href=""> <img src="${pageContext.request.contextPath}/static/image/785345.png"></a> <%-- 第三個選項 是圖片 連接是根目錄下的 static目錄下的image下的785345.png文件--%> </li> <li> <a href=""> <img src="${pageContext.request.contextPath}/static/image/1471.png"></a> <%-- 第四個選項是圖片 連接是根目錄下的static下的image下的1471.png文件--%> </li> <li> <a href=""> <img src="${pageContext.request.contextPath}/static/image/7861.png"></a> <%-- 第五個選項是 圖片 連接時 根目錄下的 static目錄下的image目錄下 的7861.png文件--%> </li> </ul> </div> </div> </div> <div class="main-e"> <%-- 友情連接部分--%> <h3 class="text-center main-tab ">友情連接</h3> <%-- 居中對齊 文字:友情連接--%> <div class="container"> <%-- 建立一個類 container 類用於固定寬度並支持響應式佈局的容器--%> <ul class="text-justify"> <%-- 無序列表--%> <li><a href="#">手機軟件</a></li> <%-- 第一個選項 文字:手機軟件--%> <li><a href="#">教師招聘</a></li> <%-- 第二個選項 文字:教師招聘--%> <li><a href="#">找工做</a></li> <%-- 第三個選項 文字: 找工做--%> <li><a href="#">教師招聘</a></li> <%-- 第四個選項 文字:教師招聘--%> <li><a href="#">找工做</a></li> <%-- 第五個選項 文字 :找工做 --%> <li><a href="#">手機軟件</a></li> <%-- 第六個選項 文字:手機軟件--%> <li><a href="#">教師招聘</a></li> <%-- 第七個選項 文字 : 教師招聘--%> <li><a href="#">手機軟件</a></li> <%-- 第八個選項 文字 :手機軟件--%> <li><a href="#">手機軟件</a></li> <%-- 第九個選項 文字:手機軟件--%> <li><a href="#">找工做</a></li> <%-- 第十個選項 文字 找工做--%> <li><a href="#">手機軟件</a></li> <%-- 第十一個選項 文字 手機軟件--%> <li><a href="#">教師招聘</a></li> <%-- 第十二個選項 文字 教師招聘--%> <li><a href="#">找工做</a></li> <%-- 第十三個選項 文字 找工做--%> <li><a href="#">教師招聘</a></li> <%-- 第十四個選項 文字:教師招聘 --%> <li><a href="#">找工做</a></li> <%-- 第十五個選項 文字 :找工做--%> <li><a href="#">手機軟件</a></li> <%-- 第十六個選項 文字 :手機軟件--%> <li><a href="#">教師招聘</a></li> <%-- 第十七個選項 文字:教師招聘--%> <li><a href="#">手機軟件</a></li> <%-- 第十八個選項 文字:手機軟件--%> <li><a href="#">手機軟件</a></li> <%-- 第十九個選項 文字: 手機軟件--%> <li><a href="#">找工做</a></li> <%-- 第二十個選項 文字 :找工做--%> </ul> </div> </div>
body2.jsp，這個部分描述的職業頁面的大部分信息。咱們須要改變的是將一些信息替換成咱們的數據庫的信息。而後是職業信息這部分咱們也是用的c:foreach標籤去進行一個讀取數據。
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <%--引入jstl標籤庫--%> <%@ page contentType="text/html; charset=UTF-8" language="java" isELIgnored="false" %> <%--定義頁面格式--%> <%@ taglib uri="/tags" prefix="date"%> <%--引入自定義標籤--%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" > <div class="container"> <%-- 建立一個類 container 類用於固定寬度並支持響應式佈局的容器 一行--%> <div class="nav-title">首頁>職業</div> <%-- 建立一個類 , 文字: 首頁 > 職業--%> <div class="nav-bar"> <%-- 建立一個類 --%> <span class="">方向：</span> <%-- span標籤 文字: 方向:--%> <a class="nav-bar-a a-selected" href="">所有</a> <%-- 標籤 文字:所有--%> <a class="nav-bar-a" href="">前端開發</a> <%-- 標籤 文字: 前端開發--%> <a class="nav-bar-a" href="">後端開發</a> <%-- 標籤 文字: 後端開發--%> <a class="nav-bar-a" href="">移動開發</a> <%-- 標籤 文字 : 移動開發--%> <a class="nav-bar-a" href="">整站開發</a> <%-- 標籤 文字 : 整站開發--%> <a class="nav-bar-a" href="">運營維護</a> <%-- 標籤 文字 : 運營維護--%> </div> <div class="caption"> <%-- 建立一個類,描述前端開發--%> <h4>前端開發方向</h4> <%-- 文字說明--%> </div> <div class="row"> <%-- 建立一個類--%> <c:forEach items="${professionList}" var="profession"> <%-- 建立一個表格，數據來自profession，每個對象都是profession--%> <div class="col-md-4 col-sm-6 col-xs-12 top-margin"> <%-- 建立一個樣式 ，設置大小--%> <div class="warp-border"> <%-- 建立一個類--%> <div class="clearfix"> <%-- 建立一個類--%> <div class="icon-people"><img src="${pageContext.request.contextPath}${profession.picture}"></div> <%-- 建立一個類 內容是圖片 圖片連接地址爲 profession.picture。--%> <div class="text"> <%-- 建立一個類 --%> <h4 class="">${profession.name}</h4> <%-- 第一欄 職業名稱 讀取數據庫中的profession.name--%> <p class="text-present">${profession.introduction}</p> <%-- 第二欄 職業介紹 ，讀取數據庫中的profession.introduce--%> </div> </div> <div class="warp-class2"> <%-- 建立類--%> <div class="warp-class2-text"> <%-- 建立類 --%> <div class="iconfont text-padding">門檻 <%-- 建立類 文字:門檻--%> <c:forEach begin="1" end="${profession.sill}"> <%-- 建立 一個表單 從1開始 ,由profession.sill的數量結束.星星數量--%> <img src="${pageContext.request.contextPath}/static/image/xx.png"> <%-- 圖像 連接爲 根目錄下的static的image下的xx.png--%> </c:forEach> </div> </div> <div class="warp-class2-text"> <%-- 建立一個類--%> <div class="iconfont text-padding text-border-left">難易程度 <%-- 建立一個類,形容 難易程度--%> <c:forEach begin="1" end="${profession.grade}"> <%-- 建立一個表單 從 1開始由profession.grade結束 星星的個數--%> <img src="${pageContext.request.contextPath}/static/image/xx.png"> <%-- 圖像 連接地址爲根目錄下的 static下的image下的xx.png文件--%> </c:forEach> </div> </div> </div> <div class="warp-class2"> <%-- 建立一個類--%> <div class="warp-class2-text"> <%-- 建立一個類--%> <div class="iconfont text-padding">成長週期 <span class="iconfont-color">${profession.growth}</span>年</div> <%-- 建立一個類來形容成長週期 成長週期 多少年--%> </div> <div class="warp-class2-text"> <%-- 建立一個類--%> <div class="iconfont text-padding text-border-left">稀缺程度 <span class="iconfont-color">${profession.scarcity}</span>家公司須要</div> <%-- 建立一個類,來形容稀缺程度，--%> </div> </div> <div class="warp-class2"> <%-- 建立類--%> <div class="leftWarp"> 薪資待遇 <%-- 建立類 文字：薪資待遇--%> </div> <div class="rightWarp"> <%-- 建立一個類--%> <div class="rightWarp-class"> <%-- 建立一個類--%> <div class="rightWarp-year">0-1年</div> <%-- 第一種 0-1年--%> <div class="rightWarp-wages">${profession.salary_one}/月</div> <%-- 第二個類來接受第一種薪資--%> </div> <div class="rightWarp-class"> <%-- 建立一個類--%> <div class="rightWarp-year">1-2年</div> <%-- 建立一個類，1-2年--%> <div class="rightWarp-wages">${profession.salary_two}/月</div> <%-- 建立一個類 ，接受1-2年狀況下的月薪--%> </div> <div class="rightWarp-class border-bottom"> <%-- 建立一個類--%> <div class="rightWarp-year">2-3年</div> <%-- 建立一個類，2-3年的狀況下--%> <div class="rightWarp-wages">${profession.salary_three}/月</div> <%-- 建立一個類，來接受2-3年的狀況下的月薪--%> </div> </div> </div> <div class="warp-class2"> <%-- 建立一個類--%> <b class="text-b">有${profession.number}人正在學 <%-- 建立一個類來接受 有多少人正在學--%> 建立時間: <date:date value="${profession.create_time}"/> <%-- 建立一個一個類 來接受建立的時間 ，從數據庫中獲取的。--%> </b> </div> <div class="warp-class2"> <%-- 建立同一個類--%> <p class="text-p">提示:在你學習以前你應該已經掌握XXXXX、XXXXX、XX等語言基礎</p> <%-- 元素 文字：提示:在你學習以前你應該已經掌握XXXXX、XXXXX、XX等語言基礎--%> </div> <div class="flip-container"> <%-- 建立類--%> <p class="flip-title">${profession.name}</p> <%-- 建立一個類 接受職業--%> <p class="flip-text">${profession.introduction}</p> <%-- 建立一個類，來接受職業的介紹--%> </div> </div> </div> </c:forEach> </div> </div>
最後一部分就是footer.jsp
這部分基本不用改，只須要修改圖片的絕對路徑。
<%@ page contentType="text/html;charset=UTF-8" language="java" %> <%--//指定頁面格式--%> <footer class="footer"> <%-- //指定類名footer--%> <div class="container height"> <%-- //class=「container」 container 類用於固定寬度並支持響應式佈局的容器--%> <div class="row"> <%-- //行元素--%> <div class="text-left col-sm-4"> <%-- //左對齊，小屏幕平板（>=768px）--%> <span>技能樹 — 改變你我</span> <%-- //html span標籤 內容：技能樹——改變你我--%> <p class="bottom">關於咱們 | 聯繫咱們 | 合做企業</p> <%-- //底部 內容 關於咱們 | 聯繫咱們 |合做企業--%> </div> <div class="text-center col-sm-4"> <%-- //居中對齊 小屏幕平板（>=768px）--%> <p>旗下網站</p> <%-- //一條內容：旗下網站--%> <span>草船雲孵化器 最強IT特訓營</span> <%-- //span 標籤 ，內容：草船雲孵化器 最強IT特訓營--%> <span>葡萄藤輕遊戲 桌遊精靈</span> <%-- //span標籤 ，內容：葡萄藤輕遊戲 桌遊精靈--%> </div> <div class="text-right col-sm-4"> <%-- //右對齊 ，小屏幕平板（>=768px）--%> <p>微信公衆號</p> <%-- //一條信息 ：微信公衆號--%> <img src="${pageContext.request.contextPath}/static/image/2524.jpg"> <%-- //圖片 連接爲根目錄下的static目錄的image目錄的2524.jpg文件--%> </div> </div> </div> <div class="footer-bottom"> <%-- //底部元素--%> Copyright®2015技能樹 www.jnshu.com All  Rights Reserved丨京ICP備13005880號 <%-- //內容：Copyright®2015技能樹 www.jnshu.com All  Rights Reserved丨京ICP備13005880號--%> </div> </footer>
而後頁面的框架就完成了。
接着寫一個controller
@Controller public class TaskController { @Autowired StudentService studentService; @Autowired ProfessionService professionService; @RequestMapping(value = "/home",method = RequestMethod.GET) public String show(Model model){ //展現優秀學員 List<Student> studentList=studentService.show(); //返回在學人數 Integer count=studentService.countByLearning(); //返回已經工做人數 Integer number=studentService.countByWorking(); model.addAttribute("studentList",studentList); model.addAttribute("count",count); model.addAttribute("number",number); return "home"; } @RequestMapping(value = "/profession",method = RequestMethod.GET) public String find(Model model){ List<Profession> professionList = professionService.getListProfession(); System.out.println(professionList); model.addAttribute("professionList",professionList); return "profession"; } }
這樣一個項目代碼就完成了。
記着須要把你的圖片和css文件放在webAPP下面另外建立一個static 文件夾來存放。最後附上完整的文件結構
而後就是配置web容器運行
個人運行結果。
最後附上個人文件地址。（https://github.com/liweichuan/task）
相關文章
- 1. 使用3D Tiles Overview學習3D Tiles
- 2. Apache Tiles 學習（四）、Tiles實戰
- 3. 手記_Apache Tiles
- 4. Apache Tiles 學習（三）、Apache Tiles的基本使用
- 5. Apache Tiles 學習（二）、Java Web應用中使用Apache Tiles
- 6. 「學習筆記」學習筆記合集
- 7. 【學習筆記】FastCGI學習筆記
- 8. [學習筆記]CentOS 學習筆記01
- 9. 【Java 學習筆記】 Hadoop學習筆記
- 10. 【學習筆記】Unity3d學習筆記（一）
- 更多相關文章...
- • 您已經學習了 XML Schema，下一步學習什麼呢？ - XML Schema 教程
- • 我們已經學習了 SQL，下一步學習什麼呢？ - SQL 教程
- • Tomcat學習筆記（史上最全tomcat學習筆記）
- • 適用於PHP初學者的學習線路和建議
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
