ftl檔案引入css，js

阿新 • • 發佈：2019-01-17

ftl引入css，js

>檔案結構一覽

>jar包一覽

>web.xml

關鍵一句話，就是springmvc的那個servlet，因為要用RESTFul風格，所以攔截/,並且讓它去讀springMVC來初始化(java /src 根路徑)。


<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns="http://java.sun.com/xml/ns/javaee"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" 

id="WebApp_ID" version="2.5">
<display-name>justforfun</display-name>
<welcome-file-list>
    <welcome-file>index.html</welcome-file>
</welcome-file-list>

<servlet>
    <servlet-name>springMVC</servlet-name>
    <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class 
>
    <init-param>
        <param-name>contextConfigLocation</param-name>
        <param-value>classpath*:/springMVC.xml</param-value>
    </init-param>
    <load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
    <servlet-name 
>springMVC</servlet-name>
    <url-pattern>/</url-pattern>
</servlet-mapping>

>springMVC.xml

配置ftl config和viewResolver都是網上找的，直接copy過去，關鍵是mvc:resources，後面的location注意要放到可以被訪問的地方（tomcat中WEB-INF下的東東貌似別人是訪問不到的）,spring的問檔中說可以放在跟目錄下或者神馬著名的可被訪問的目錄(好像應該這麼翻譯)META-INF.


<?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:tx="http://www.springframework.org/schema/tx"
xmlns:context="http://www.springframework.org/schema/context"
xmlns:mvc="http://www.springframework.org/schema/mvc"
xsi:schemaLocation="http://www.springframework.org/schema/beans
http://www.springframework.org/schema/beans/spring-beans-3.0.xsd
http://www.springframework.org/schema/tx
http://www.springframework.org/schema/tx/spring-tx-3.0.xsd
http://www.springframework.org/schema/context
http://www.springframework.org/schema/context/spring-context-3.0.xsd
http://www.springframework.org/schema/mvc
http://www.springframework.org/schema/mvc/spring-mvc-3.0.xsd">

<!-- 自動掃描的包名 -->
<context:component-scan base-package="com.app,com.core,JUnit4"></context:component-scan>

<!-- 預設的註解對映的支援 -->
<mvc:annotation-driven />

<!-- freemarker config -->
<bean id="freemarkerConfig"
    class="org.springframework.web.servlet.view.freemarker.FreeMarkerConfigurer">
    <property name="templateLoaderPath" value="/WEB-INF/ftl/" />
</bean>

<!-- View resolvers can also be configured with ResourceBundles or XML files.
    If you need different view resolving based on Locale, you have to use the
    resource bundle resolver. -->
<bean id="viewResolver"
class="org.springframework.web.servlet.view.freemarker.FreeMarkerViewResolver">
    <property name="cache" value="true" />
    <property name="prefix" value="" />
    <property name="suffix" value=".ftl" />
    <property name="contentType" value="text/html; charset=UTF-8"/>
</bean>

<!-- 攔截器 -->
<!-- <mvc:interceptors> <bean class="com.core.mvc.MyInteceptor" /> </mvc:interceptors> -->
<!-- 對靜態資原始檔的訪問 方案一 （二選一） -->
<!-- <mvc:default-servlet-handler /> -->

<!-- 對靜態資原始檔的訪問 方案二 （二選一） -->
<mvc:resources mapping="/images/**" location="/META-INF/resources/images/"
    cache-period="31556926" />
<mvc:resources mapping="/js/**" location="/META-INF/resources/js/"
    cache-period="31556926" />
<mvc:resources mapping="/css/**" location="/META-INF/resources/css/"
    cache-period="31556926" />

>ftl檔案

匯入spring.ftl是為了獲得一個路徑，@s.url,這個東東會自動加上你工程的名字，例如s.url '/css/default.css'/,會變成justforfun/css/default.css,千萬注意！！！script一定不能寫成<script 某某某 />，應該寫成<script 某某某></script>,要不然這行後面的東西在html裡面都解析不到了，被這個糾結了好久，不知道為神馬，希望大牛看到能告知告知。
<#import "spring.ftl" as s />
<!DOCTYPE>
<html>
<head>
    <title>
        首頁
    </title>
    <link rel="stylesheet" type="text/css" href="<@s.url '/css/default.css'/>"/>
    <script type="text/javascript" src="<@s.url '/js/jquery.min.js'/>">
    </script>
</head>
<body>
    <h1>
        首頁的試煉
    </h1>
    <div>
       bingo!
       <img src = "<@s.url '/images/img1.jpg'/>"/>
    </div>
</body>

>spring的controller

這個僅僅返回index就好了。


package com.app.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;

@Controller
@RequestMapping("/")
public class IndexController {

@RequestMapping(method=RequestMethod.GET)
public String index(){
    return "index";
}

}

>最終效果

可以見到，圖片，css，js，都沒問題，而且因為springMVC裡面設定了UTF-8，所以顯示的是中文而不是亂碼。

ps,增強你的效率vimer

找到了一個老哥配置的gvim，非常不錯，在eclipse裡面可以用viplugin這個外掛，在環境變數裡面加入vim的路徑，:vim即可直接啟用vim編輯，美中不足的是沒有加上command-T這個外掛，因為用ruby，windows下各種不成功，可惜。linux下推薦janus這個vim外掛管理器很好很強大，而且command-T也預設安裝了，:help janus有很大驚喜另外，用zsh吧，好好配置一下，它的tab功能比bash強好多。
http://www.codeweblog.com/code/snippet_574132_13357

ftl檔案引入css，js

>jar包一覽

>web.xml

>springMVC.xml

>ftl檔案

>spring的controller

>最終效果

ps,增強你的效率vimer

pps 為什麼上面圖片不顯示？？？

ftl檔案引入css，js

HTML檔案裡把所有的css、js檔案引入後，其他的HTML檔案引入該頁面後，可以使用該頁面引入的css和js

python學習之網站的編寫（HTML，CSS，JS）（十一）----------如何利用其它html檔案中的CSS（也就是可以將共同的地方提取出來，放大一個檔案中，利於使用）

Node.js學習筆記（一）——完整的響應html頁面（包括css，js檔案）

怎麼載入資原始檔css，js，img資料夾裡的檔案呢？-Thinkphp5

打包公用的jsp，css，js到jar，其他war包引入後使用

如何在jsp檔案中引入css和js檔案

uni-app 專案引入第三方js外掛，單個js檔案引入成功，呼叫該外掛方法

django 解決css，js檔案304導致無法載入顯示問題

用Django開發網頁時發現無法引用css，js檔案

在vue項目npm run build後，index.html中引入css和js 報MIME type問題

Eclipse中maven環境搭配，使用jetty啟動後不能更改css，js檔案的解決方法

在Django中使用css，js等靜態檔案

angular4.0引入安裝第三方外掛以及自己寫的css，js

Django套用現成模板，匯入css，js，images等檔案

Eclipse中maven環境使用jetty啟動後不能儲存更改後的css，js等靜態檔案的解決方法

關於CI框架引入CSS與JS檔案

ThinkPHP3.2.3框架模板檔案中匯入css，js檔案相關問題

tp5怎麼引入css、js檔案

jsp如何引入css和js檔案

ftl檔案引入css，js

>jar包一覽

>web.xml

>springMVC.xml

>ftl檔案

>spring的controller

>最終效果

ps,增強你的效率vimer

pps 為什麼上面圖片不顯示？？？

相關推薦