SpringBoot2 整合 JSP檢視模板 整合 Ueditor富文字編輯器
一般涉及到後臺管理系統,就少不了富文字編輯器,這個可以圖文視訊混排高階工具,筆者通過對比,發現目前市場上最好的三方庫還當屬百度的 ueditor
近年來 SpringBoot 框架可謂越來越火,可是筆者發現 ueditor 只提供了對於 JSP 的版本,網上能找到很多繼承的案列,但是大部分都是修改原始碼,或者
自己去實現上傳檔案的介面這使得一些功能不能被使用或者需要花大量的事件去實現上傳檔案的方法,通過權衡,還是 springboot + jsp + ueditor 的方式最簡單
雖然 jsp 不是 springboot 官方推薦的模板引擎,但是 jsp 畢竟活躍了這麼多年,很多三方庫都是基於它的,所以現在就開始吧!
1,建立一個 jar 型別的 springboot 2.0 以上版本的專案(網上流傳的只有war包才能執行 jsp 的純屬謠言)
2,在 pom 檔案中新增如下
<?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.hwq</groupId> <artifactId>jsp</artifactId> <version>0.0.1-SNAPSHOT</version> <packaging>jar</packaging> <name>jsp</name> <description>整合 JSP 頁面</description> <parent> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-parent</artifactId> <version>2.0.6.RELEASE</version> <relativePath/> </parent> <properties> <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding> <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding> <java.version>1.8</java.version> <maven.compiler.source>1.8</maven.compiler.source> <maven.compiler.target>1.8</maven.compiler.target> <maven.compiler.compilerVersion>1.8</maven.compiler.compilerVersion> </properties> <dependencies> <!-- WEB 開發元件 --> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency> <!-- Servlet 依賴 --> <dependency> <groupId>javax.servlet</groupId> <artifactId>javax.servlet-api</artifactId> </dependency> <!-- JSTL 依賴 --> <dependency> <groupId>javax.servlet</groupId> <artifactId>jstl</artifactId> </dependency> <!-- TomCat 外部依賴 --> <dependency> <groupId>org.apache.tomcat.embed</groupId> <artifactId>tomcat-embed-jasper</artifactId> </dependency> <!-- 百度文字編輯器後臺部分 --> <dependency> <groupId>com.gitee.qdbp.thirdparty</groupId> <artifactId>ueditor</artifactId> <version>1.4.3.3</version> </dependency> <!-- junit 測試依賴 --> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-test</artifactId> <scope>test</scope> </dependency> </dependencies> <build> <plugins> <!-- 目前外掛的版本必須選擇 1.4.2.RELEASE,否則打包之後會出現 JSP 找不到 --> <plugin> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-maven-plugin</artifactId> <version>1.4.2.RELEASE</version> </plugin> </plugins> <resources> <!-- 表示將 webapp 目錄下的內容打包到 META-INF/resources 目錄下 --> <resource> <directory>src/main/webapp</directory> <targetPath>META-INF/resources</targetPath> <includes> <include>**/**</include> </includes> </resource> <!-- 表示將 resources 目錄下的內容打包到類路徑目錄下 --> <resource> <directory>src/main/resources</directory> <includes> <include>**/**</include> </includes> <filtering>false</filtering> </resource> </resources> </build> </project>
3,dependencies 中是一些基本依賴,JSP依賴和 Ueditor 的依賴,build 中的是打包配置,如果沒有必要,直接複製就行
4,在 src/main 目錄下建立 webapp 目錄,在 webapp 目錄下隨便寫一個 jsp 頁面
5,在配置檔案中新增如下配置,第一個配置項就是你 jsp 頁面所存放的相對 webapp 的位置
server.port=80
(如果不想要控制器中轉,只是想直接訪問 jsp 頁面,可以省略下面的配置)
spring.mvc.view.prefix=/
spring.mvc.view.suffix=.jsp
6,書寫專案啟動類
package com.hwq.jsp; import org.springframework.boot.SpringApplication; import org.springframework.boot.autoconfigure.SpringBootApplication; import org.springframework.boot.builder.SpringApplicationBuilder; import org.springframework.boot.web.servlet.support.SpringBootServletInitializer; /** * 想要整合 JSP 頁面,啟動類需要繼承 SpringBootServletInitializer * 需要重寫 configure 方法 * 測試階段要把啟動方式的工作環境調成當前模組,否則多模組下回找不到檢視頁面 */ @SpringBootApplication public class JspApplication extends SpringBootServletInitializer { @Override protected SpringApplicationBuilder configure(SpringApplicationBuilder application) { return application.sources(JspApplication.class); } public static void main(String[] args) { SpringApplication.run(JspApplication.class, args); } }
7,如果使用的是 idea 編輯器,在同時開啟多個模組的時候,會出現路徑找不到的情況,這時候我們需要將工作路徑指向模組路徑
8,編輯啟動類
9,如下圖,選擇專案的啟動類,修改工作目錄為 模組路徑
10,儲存之後啟動,在位址列 輸入 localhost:8080/index.jsp 就能訪問到剛剛書寫的 jsp 頁面了
11,做到這裡,我們就基本整合完畢了,接下來去官網下載 jsp 版本的 ueditor
12,解壓之後,將壓縮包解壓並重命名為 ueditor,並將這個目錄方法 webapp 路徑下
13,將 ueditor 目錄裡面的 index.html 複製到webapp下(注意修改 js 的引入路徑)
14,啟動專案,我們在位址列輸入 localhost 就能訪問到 ueditor 的頁面了
15,做到這裡,我們基本就完成了 ueditor 整個專案的整合,但是由於最後要打成 jar ,我們可以發現,編輯器的檔案是儲存在
ueditor/jsp/upload/ 目錄下的,打成 jar 包之後無法在上傳到這個路徑,我們需要修改這個路徑
16,接下來使用 idea 的功能打包,雙擊如下這個選項,等待