UEditor之——與SpringMVC整合
阿新 • • 發佈：2019-01-04
一、引言
相信大家做專案時，很多時候都會用到富文字編輯器。今天是2016年8月的最後一天，那麼就給大家帶來一篇關於JSP UEditor整合SpringMVC的文章吧，UEditor是百度的一款富文字編輯器產品，網址為：http://ueditor.baidu.com/website/ ， 但是直接使用Editor時，會將編輯的圖片直接上傳到伺服器的專案所在路徑，如果每次部署專案的時候，都是全量部署(刪除伺服器上原有專案，重新部署)，則之前上傳的圖片都會清空，所以，一般情況下，我們最好是將圖片上傳到伺服器上某個單獨的目錄下，這樣，即使我們全量部署專案，之前上傳的圖片也就不會丟失了。好，那我們一起來看如何將Editor整合，並將圖片儲存到單獨的目錄下。
二、準備
三、實戰
1、新建專案，匯入UEditor
這裡，我們新建Maven工程ueditor，將下載的UEditor解壓後重命名為ueditor，並將資料夾拷貝到webapp/static目錄下，如下圖所示：
2、匯入jar包
如圖：
3、編輯pom.xml
<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.lyz</groupId> <artifactId>lyz</artifactId> <version>1.0.0-SNAPSHOT</version> <packaging>war</packaging> <properties> <spring.version>4.0.5.RELEASE</spring.version> <hibernate.version>4.3.5.Final</hibernate.version> </properties> <dependencies> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-core</artifactId> <version>${spring.version}</version> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-context</artifactId> <version>${spring.version}</version> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-context-support</artifactId> <version>${spring.version}</version> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-orm</artifactId> <version>${spring.version}</version> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-web</artifactId> <version>${spring.version}</version> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-webmvc</artifactId> <version>${spring.version}</version> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-tx</artifactId> <version>${spring.version}</version> </dependency> <!-- hibernate --> <dependency> <groupId>org.hibernate</groupId> <artifactId>hibernate-core</artifactId> <version>${hibernate.version}</version> </dependency> <!-- 配置HttpClient --> <dependency> <groupId>commons-logging</groupId> <artifactId>commons-logging</artifactId> <version>1.1.1</version> </dependency> <dependency> <groupId>commons-codec</groupId> <artifactId>commons-codec</artifactId> <version>1.4</version> </dependency> <!-- <dependency> <groupId>commons-httpclient</groupId> <artifactId>commons-httpclient</artifactId> <version>3.0.1</version> </dependency> --> <!-- Java EE --> <dependency> <groupId>javax.persistence</groupId> <artifactId>persistence-api</artifactId> <version>1.0</version> </dependency> <dependency> <groupId>javax.servlet</groupId> <artifactId>javax.servlet-api</artifactId> <version>3.0.1</version> </dependency> <dependency> <groupId>jstl</groupId> <artifactId>jstl</artifactId> <version>1.2</version> </dependency> <dependency> <groupId>com.alibaba</groupId> <artifactId>druid</artifactId> <version>1.0.5</version> </dependency> <dependency> <groupId>mysql</groupId> <artifactId>mysql-connector-java</artifactId> <version>5.1.30</version> </dependency> <dependency> <groupId>com.google.guava</groupId> <artifactId>guava</artifactId> <version>17.0</version> </dependency> <dependency> <groupId>net.sf.ezmorph</groupId> <artifactId>ezmorph</artifactId> <version>1.0.6</version> <type>jar</type> <scope>compile</scope> </dependency> <dependency> <groupId>net.sf.json-lib</groupId> <artifactId>json-lib</artifactId> <version>2.2.3</version> <classifier>jdk15</classifier> </dependency> <dependency> <groupId>com.thoughtworks.xstream</groupId> <artifactId>xstream</artifactId> <version>1.4.4</version> </dependency> <dependency> <groupId>ch.qos.logback</groupId> <artifactId>logback-classic</artifactId> <version>1.0.13</version> </dependency> <dependency> <groupId>org.codehaus.jackson</groupId> <artifactId>jackson-mapper-asl</artifactId> <version>1.9.13</version> </dependency> <dependency> <groupId>org.codehaus.jackson</groupId> <artifactId>jackson-core-asl</artifactId> <version>1.9.13</version> </dependency> <dependency> <groupId>commons-fileupload</groupId> <artifactId>commons-fileupload</artifactId> <version>1.2.2</version> </dependency> <dependency> <groupId>org.apache.commons</groupId> <artifactId>commons-io</artifactId> <version>1.3.2</version> <scope>compile</scope> </dependency> <dependency> <groupId>com.esotericsoftware.reflectasm</groupId> <artifactId>reflectasm</artifactId> <version>1.09</version> </dependency> <dependency> <groupId>xmlpull</groupId> <artifactId>xmlpull</artifactId> <version>1.1.3.1</version> <scope>provided</scope> </dependency> <dependency> <groupId>xpp3</groupId> <artifactId>xpp3</artifactId> <version>1.1.4c</version> <scope>provided</scope> </dependency> <dependency> <groupId>com.thoughtworks.xstream</groupId> <artifactId>xstream</artifactId> <version>1.4.7</version> <scope>provided</scope> </dependency> <dependency> <groupId>org.apache.poi</groupId> <artifactId>poi</artifactId> <version>3.7</version> </dependency> <dependency> <groupId>c3p0</groupId> <artifactId>c3p0</artifactId> <version>0.9.1.2</version> </dependency> <dependency> <groupId>cglib</groupId> <artifactId>cglib-nodep</artifactId> <version>2.1_3</version> </dependency> <dependency> <groupId>commons-pool</groupId> <artifactId>commons-pool</artifactId> <version>1.2</version> </dependency> <dependency> <groupId>org.aspectj</groupId> <artifactId>aspectjweaver</artifactId> <version>1.6.0</version> </dependency> <!-- quartz --> <dependency> <groupId>org.quartz-scheduler</groupId> <artifactId>quartz</artifactId> <version>2.2.1</version> </dependency> <dependency> <groupId>org.quartz-scheduler</groupId> <artifactId>quartz-jobs</artifactId> <version>2.2.1</version> </dependency> <!-- joda time --> <dependency> <groupId>joda-time</groupId> <artifactId>joda-time</artifactId> <version>2.4</version> </dependency> <dependency> <groupId>xml-apis</groupId> <artifactId>xml-apis</artifactId> <version>1.4.01</version> </dependency> <dependency> <groupId>org.apache.httpcomponents</groupId> <artifactId>fluent-hc</artifactId> <version>4.3.5</version> <scope>provided</scope> </dependency> <dependency> <groupId>org.apache.httpcomponents</groupId> <artifactId>httpclient</artifactId> <version>4.3.5</version> <scope>provided</scope> </dependency> <dependency> <groupId>org.apache.httpcomponents</groupId> <artifactId>httpclient-cache</artifactId> <version>4.3.5</version> <scope>provided</scope> </dependency> <dependency> <groupId>org.apache.httpcomponents</groupId> <artifactId>httpcore</artifactId> <version>4.3.2</version> <scope>provided</scope> </dependency> <dependency> <groupId>org.apache.httpcomponents</groupId> <artifactId>httpmime</artifactId> <version>4.3.5</version> <scope>provided</scope> </dependency> <dependency> <groupId>org.json</groupId> <artifactId>json</artifactId> <version>20140107</version> </dependency> <dependency> <groupId>org.slf4j</groupId> <artifactId>slf4j-simple</artifactId> <version>1.6.1</version> </dependency> <dependency> <groupId>org.slf4j</groupId> <artifactId>slf4j-api</artifactId> <version>1.6.1</version> </dependency> <dependency> <groupId>commons-pool</groupId> <artifactId>commons-pool</artifactId> <version>1.5.6</version> </dependency> <dependency> <groupId>codec</groupId> <artifactId>codec</artifactId> <version>1.0</version> <scope>system</scope> <systemPath>${project.basedir}/lib/commons-codec-1.9.jar</systemPath> </dependency> <dependency> <groupId>fileupload</groupId> <artifactId>fileupload</artifactId> <version>1.3.1</version> <scope>system</scope> <systemPath>${project.basedir}/lib/commons-fileupload-1.3.1.jar</systemPath> </dependency> <dependency> <groupId>commons-io</groupId> <artifactId>commons-io</artifactId> <version>2.4</version> <scope>system</scope> <systemPath>${project.basedir}/lib/commons-io-2.4.jar</systemPath> </dependency> <dependency> <groupId>json</groupId> <artifactId>json</artifactId> <version>1.0</version> <scope>system</scope> <systemPath>${project.basedir}/lib/json.jar</systemPath> </dependency> <dependency> <groupId>ueditor</groupId> <artifactId>ueditor</artifactId> <version>1.1.2</version> <scope>system</scope> <systemPath>${project.basedir}/lib/ueditor-1.1.2.jar</systemPath> </dependency> </dependencies> <build> <finalName>lyz</finalName> <plugins> <plugin> <groupId>org.apache.maven.plugins</groupId> <artifactId>maven-compiler-plugin</artifactId> <version>3.1</version> <configuration> <source>1.7</source> <target>1.7</target> </configuration> </plugin> <plugin> <groupId>org.apache.maven.plugins</groupId> <artifactId>maven-jar-plugin</artifactId> <version>2.4</version> </plugin> <plugin> <groupId>org.apache.maven.plugins</groupId> <artifactId>maven-eclipse-plugin</artifactId> <configuration> <wtpmanifest>true</wtpmanifest> <wtpapplicationxml>true</wtpapplicationxml> <wtpversion>2.0</wtpversion> </configuration> </plugin> </plugins> </build> </project>
4、設定web.xml
<?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_3_0.xsd" id="WebApp_ID" version="3.0"> <display-name>lyz</display-name> <!-- 配置spring監聽器 --> <listener> <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class> </listener> <!-- 載入配置檔案路徑 --> <context-param> <param-name>contextConfigLocation</param-name> <param-value>classpath*:applicationContext*.xml</param-value> </context-param> <!-- springmvc配置 --> <servlet> <servlet-name>lyz</servlet-name> <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class> <init-param> <param-name>contextConfigLocation</param-name> <param-value>classpath*:lyz-servlet*.xml</param-value> </init-param> <load-on-startup>1</load-on-startup> </servlet> <servlet-mapping> <servlet-name>lyz</servlet-name> <url-pattern>/</url-pattern> </servlet-mapping> <!-- 配置OpenSessionInView --> <filter> <filter-name>hibernateFilter</filter-name> <filter-class>org.springframework.orm.hibernate4.support.OpenSessionInViewFilter</filter-class> <!-- singleSession預設為true,若設為false則等於沒用OpenSessionInView --> <init-param> <param-name>singleSession</param-name> <param-value>true</param-value> </init-param> </filter> <filter-mapping> <filter-name>hibernateFilter</filter-name> <url-pattern>/*</url-pattern> </filter-mapping> <filter> <filter-name>CorsFilter</filter-name> <filter-class>com.lyz.utils.cors.filter.CorsFilter</filter-class> </filter> <filter-mapping> <filter-name>CorsFilter</filter-name> <url-pattern>/*</url-pattern> </filter-mapping> <!-- 字元編碼過濾器 --> <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> <welcome-file-list> <welcome-file>index.html</welcome-file> <welcome-file>index.htm</welcome-file> <welcome-file>index.jsp</welcome-file> <welcome-file>default.html</welcome-file> <welcome-file>default.htm</welcome-file> <welcome-file>default.jsp</welcome-file> </welcome-file-list> </web-app>
5、新建applicationContext.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:p="http://www.springframework.org/schema/p"
xmlns:context="http://www.springframework.org/schema/context"
xmlns:aop="http://www.springframework.org/schema/aop"
xmlns:tx="http://www.springframework.org/schema/tx"
xmlns:mvc="http://www.springframework.org/schema/mvc"
xmlns:cache="http://www.springframework.org/schema/cache"
xsi:schemaLocation="http://www.springframework.org/schema/beans
http://www.springframework.org/schema/beans/spring-beans-4.0.xsd
http://www.springframework.org/schema/context
http://www.springframework.org/schema/context/spring-context-4.0.xsd
http://www.springframework.org/schema/tx
http://www.springframework.org/schema/tx/spring-tx-4.0.xsd
http://www.springframework.org/schema/aop
http://www.springframework.org/schema/aop/spring-aop-4.0.xsd
http://www.springframework.org/schema/mvc
http://www.springframework.org/schema/mvc/spring-mvc-4.0.xsd
http://www.springframework.org/schema/cache
http://www.springframework.org/schema/cache/spring-cache-4.0.xsd">
<!-- 掃描專案包的根路徑 -->
<context:component-scan base-package="com.lyz" />
<!-- database connection pool configuration -->
<bean id="dataSource" class="com.alibaba.druid.pool.DruidDataSource" init-method="init" destroy-method="close">
<!-- 基本屬性 url、user、password -->
<!-- 原配置 -->
<property name="url" value="jdbc:mysql://127.0.0.1:3306/shop?characterEncoding=utf8" />
<property name="username" value="root" />
<property name="password" value="root" />
<!-- 配置初始化大小、最小、最大 -->
<property name="initialSize" value="1" />
<property name="minIdle" value="1" />
<property name="maxActive" value="20" />
<!-- 配置獲取連線等待超時的時間 -->
<property name="maxWait" value="60000" />
<!-- 配置間隔多久才進行一次檢測，檢測需要關閉的空閒連線，單位是毫秒 -->
<property name="timeBetweenEvictionRunsMillis" value="60000" />
<!-- 配置一個連線在池中最小生存的時間，單位是毫秒 -->
<property name="minEvictableIdleTimeMillis" value="300000" />
<property name="validationQuery" value="SELECT 'x'" />
<property name="testWhileIdle" value="true" />
<property name="testOnBorrow" value="false" />
<property name="testOnReturn" value="false" />
<!-- 開啟PSCache，並且指定每個連線上PSCache的大小 -->
<property name="poolPreparedStatements" value="false" />
<property name="maxPoolPreparedStatementPerConnectionSize" value="20" />
<!-- 配置監控統計攔截的filters -->
<property name="filters" value="stat" />
</bean>
<!-- 配置sessionFactory -->
<bean id="sessionFactory" class="org.springframework.orm.hibernate4.LocalSessionFactoryBean">
<property name="dataSource" ref="dataSource" />
<property name="packagesToScan" value="com.lyz.**.entity"></property>
<property name="hibernateProperties">
<props>
<prop key="javax.persistence.validation.mode">none</prop>
<prop key="hibernate.dialect">org.hibernate.dialect.MySQL5InnoDBDialect</prop>
<prop key="hibernate.show_sql">true</prop>
<prop key="hibernate.format_sql">true</prop>
</props>
</property>
</bean>
<!-- 配置spring宣告式事物管理 -->
<bean id="transactionManager" class="org.springframework.orm.hibernate4.HibernateTransactionManager">
<property name="dataSource" ref="dataSource" />
<property name="sessionFactory" ref="sessionFactory" />
</bean>
<!-- 配置註解驅動 -->
<tx:annotation-driven transaction-manager="transactionManager" />
<!-- 配置spring宣告式事物管理:第二種方式：基於xml -->
<!-- 配置事務切入點，侷限方法名（採用XML方法配置） -->
<tx:advice id="advice" transaction-manager="transactionManager">
<tx:attributes>
<!-- 配置那些方法需要切入什麼事務型別 -->
<tx:method name="save*" propagation="REQUIRED" rollback-for="java.lang.Exception"/>
<tx:method name="delete*" propagation="REQUIRED" rollback-for="java.lang.Exception"/>
<tx:method name="update*" propagation="REQUIRED" rollback-for="java.lang.Exception"/>
<tx:method name="remove*" propagation="REQUIRED" rollback-for="java.lang.Exception"/>
<tx:method name="add*" propagation="REQUIRED" rollback-for="java.lang.Exception"/>
<tx:method name="*" propagation="SUPPORTS"/>
</tx:attributes>
</tx:advice>
<!-- 上面只配置了方法的事務型別，並沒有配置向哪些類（物件）切入 -->
<!-- 關聯切入表示式 -->
<aop:config>
<aop:advisor advice-ref="advice" pointcut="execution(* com.lyz.**.service.*.*(..))"/>
<aop:advisor advice-ref="advice" pointcut="execution(* com.lyz.**.service.impl.*.*(..))"/>
</aop:config>
</beans> 6、新建applications.properties
這個檔案主要用來設定一些配置資訊，比如圖片訪問路徑，上傳路徑等，具體如下所示：
lyz.uploading.url=d:/lyz/static
lyz.visit.url=/upload/
lyz.resource.url=http://127.0.0.1:80997、配置log4j
#\u8F93\u51FA\u5230\u63A7\u5236\u53F0
log4j.appender.stout=org.apache.log4j.ConsoleAppender
log4j.appender.stout.layout=org.apache.log4j.PatternLayout
log4j.appender.stout.layout.ConversionPattern=[%p]%d{yyyy-MM-dd HH:mm:ss} %l: %m%n
#log4j.appender.stout.layout.ConversionPattern=[%p]%d{yyyy-MM-dd HH:mm:ss}: %m%n
#\u8F93\u51FA\u5230\u6587\u4EF6
log4j.appender.fout=org.apache.log4j.FileAppender
log4j.appender.fout.file=d:/Tomcat_Project/logs/wine.log
#log4j.appender.fout.file=/opt/apache-tomcat-7.0.56/logs/wine.log
log4j.appender.fout.layout=org.apache.log4j.PatternLayout
log4j.appender.fout.layout.ConversionPattern=[%p]%d{yyyy-MM-dd HH:mm:ss} %l: %m%n
#log4j.appender.stout.layout.ConversionPattern=[%p]%d{yyyy-MM-dd HH:mm:ss}: %m%n
#\u8F93\u51FA\u7EA7\u522B
log4j.rootLogger=INFO, stout8、配置lyz-servlet
<?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:mvc="http://www.springframework.org/schema/mvc"
xmlns:beans="http://www.springframework.org/schema/beans"
xmlns:context="http://www.springframework.org/schema/context"
xmlns:tx="http://www.springframework.org/schema/tx"
xsi:schemaLocation="http://www.springframework.org/schema/mvc
http://www.springframework.org/schema/mvc/spring-mvc-3.0.xsd
http://www.springframework.org/schema/beans
http://www.springframework.org/schema/beans/spring-beans.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">
<!-- <mvc:resources mapping="/resources/**" location="/resources/" /> -->
<mvc:resources mapping="/static/**" location="/static/" />
<mvc:annotation-driven />
<context:component-scan base-package="com.lyz.**.controller"/>
<!-- Map simple view name such as "test" into /WEB-INF/test.jsp -->
<bean
class="org.springframework.web.servlet.view.InternalResourceViewResolver">
<property name="prefix" value="/WEB-INF/jsp/" />
<property name="suffix" value=".jsp" />
</bean>
<bean id="multipartResolver"
class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
<property name="defaultEncoding" value="utf-8" />
<property name="maxUploadSize" value="10485760000" />
<property name="maxInMemorySize" value="40960" />
</bean>
</beans>9、建立實體類Shop
建立實體類主要的目的是方便執行整個專案框架，具體如下：
package com.lyz.entity;
import java.io.Serializable;
import javax.persistence.Column;
import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;
import javax.persistence.Table;
/**
* 實體類shop
* @author liuyazhuang
*
*/
@Entity
@Table(name="c_shop")
public class Shop implements Serializable {
private static final long serialVersionUID = -6980546472329430674L;
@Id
@Column(name="id")
@GeneratedValue(strategy=GenerationType.IDENTITY)
private Long id;
public Shop() {
super();
}
public Shop(Long id) {
super();
this.id = id;
}
public Long getId() {
return id;
}
public void setId(Long id) {
this.id = id;
}
@Override
public String toString() {
return "Shop [id=" + id + "]";
}
}
10、建立讀取properties檔案的工具類LoadPropertiesDataUtils
package com.lyz.utils;
import java.io.IOException;
import java.io.InputStream;
import java.util.Properties;
/**
* 載入Properties檔案資料的工具類
* @author liuyazhuang
*
*/
public final class LoadPropertiesDataUtils{
private volatile static Properties mProperties;
static{
mProperties = new Properties();
InputStream in = LoadPropertiesDataUtils.class.getResourceAsStream("/applications.properties");
try{
mProperties.load(in);
} catch (IOException e){
e.printStackTrace();
}
}
public static String getValue(String key){
if(mProperties == null) return "";
return mProperties.getProperty(key, "");
}
}
11、建立隨機數工具類
這個類的主要作用是生成指定位數的隨機數，具體如下所示：
package com.lyz.utils;
import java.util.Random;
/**
* 隨機數工具類
* @author liuyazhuang
*
*/
public final class RandomUtils {
/**
* 獲取指定位數的隨機數
* @param num
* @return
*/
public static String getRandom(int num){
Random random = new Random();
StringBuilder sb = new StringBuilder();
for(int i = 0;i < num; i++){
sb.append(String.valueOf(random.nextInt(10)));
}
return sb.toString();
}
}
12、建立字串工具類StringUtils
package com.lyz.utils;
/**
* 字串工具類
* @author liuyazhuang
*
*/
public final class StringUtils {
/**
* 判斷字串是否為空
* @param str
* @return
*/
public static boolean isEmpty(String str){
return (str == null || "".equals(str.trim()));
}
/**
* 獲取名稱字尾
* @param name
* @return
*/
public static String getExt(String name){
if(name == null || "".equals(name) || !name.contains("."))
return "";
return name.substring(name.lastIndexOf(".")+1);
}
}
13、建立解決跨域的類CorsFilter
package com.lyz.utils.cors.filter;
import java.io.IOException;
import javax.servlet.FilterChain;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.springframework.web.filter.OncePerRequestFilter;
/**
* 解決跨域
* @author liuyazhuang
*
*/
public class CorsFilter extends OncePerRequestFilter {
@Override
protected void doFilterInternal(HttpServletRequest request, HttpServletResponse response, FilterChain filterChain)
throws ServletException, IOException {
response.addHeader("Access-Control-Allow-Origin", "*");
response.addHeader("Access-Control-Allow-Methods",
"GET, POST, PUT, DELETE, OPTIONS");
response.addHeader("Access-Control-Allow-Headers",
"origin, content-type, accept, x-requested-with, sid, mycustom, smuser");
filterChain.doFilter(request, response);
}
}
14、建立跳轉到首頁的控制器類IndexController
package com.lyz.controller;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
/**
* 首頁controller，主要的功能是跳轉到首頁
* @author liuyazhuang
*
*/
@Controller
@RequestMapping(value="/index")
public class IndexController {
/**
* 跳轉到首頁
* @param request
* @param response
*/
@RequestMapping(value="/page", method = RequestMethod.GET)
public String page(HttpServletRequest request, HttpServletResponse response){
return "/index";
}
}
15、建立上傳檔案的類UploadImageController
package com.lyz.controller;
import java.io.File;
import java.io.FileOutputStream;
import java.io.OutputStream;
import java.util.HashMap;
import java.util.Map;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.springframework.stereotype.Controller;
import org.springframework.util.FileCopyUtils;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;
import com.lyz.utils.LoadPropertiesDataUtils;
import com.lyz.utils.RandomUtils;
import com.lyz.utils.StringUtils;
/**
* 上傳圖片的controller
* @author liuyazhuang
*
*/
@Controller
@RequestMapping(value="/resource/upload")
public class UploadImageController {
/**
* 上傳圖片
* @param file
* @param request
* @param response
* @return
*/
@ResponseBody
@RequestMapping(value="/images")
public Map<String, Object> images (MultipartFile upfile, HttpServletRequest request, HttpServletResponse response){
Map<String, Object> params = new HashMap<String, Object>();
try{
String basePath = LoadPropertiesDataUtils.getValue("lyz.uploading.url");
String visitUrl = LoadPropertiesDataUtils.getValue("lyz.visit.url");
if(basePath == null || "".equals(basePath)){
basePath = "d:/lyz/static"; //與properties檔案中lyz.uploading.url相同，未讀取到檔案資料時為basePath賦預設值
}
if(visitUrl == null || "".equals(visitUrl)){
visitUrl = "/upload/"; //與properties檔案中lyz.visit.url相同，未讀取到檔案資料時為visitUrl賦預設值
}
String ext = StringUtils.getExt(upfile.getOriginalFilename());
String fileName = String.valueOf(System.currentTimeMillis()).concat("_").concat(RandomUtils.getRandom(6)).concat(".").concat(ext);
StringBuilder sb = new StringBuilder();
//拼接儲存路徑
sb.append(basePath).append("/").append(fileName);
visitUrl = visitUrl.concat(fileName);
File f = new File(sb.toString());
if(!f.exists()){
f.getParentFile().mkdirs();
}
OutputStream out = new FileOutputStream(f);
FileCopyUtils.copy(upfile.getInputStream(), out);
params.put("state", "SUCCESS");
params.put("url", visitUrl);
params.put("size", upfile.getSize());
params.put("original", fileName);
params.put("type", upfile.getContentType());
} catch (Exception e){
params.put("state", "ERROR");
}
return params;
}
}
16、引入jquery
我們在webapp/static目錄下建立lib目錄，然後將jquery匯入到lib目錄下，如下圖所示：
17、建立index.jsp
在webapp/WEB_INF/jsp目錄下建立index.jsp，具體如下：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>UEditor</title>
<script type="text/javascript">
var basePath = "<%=basePath%>";
</script>
<script type="text/javascript" src="../static/lib/jquery-1.12.0.min.js"></script>
<script type="text/javascript" src="../static/ueditor/ueditor.config.js"></script>
<script type="text/javascript" src="../static/ueditor/ueditor.all.js"></script>
<script type="text/javascript" src="../static/ueditor/lang/zh-cn/zh-cn.js"></script>
<script type="text/javascript" src="../static/index/index.js"></script>
</head>
<body>
<div>
<textarea id="myEditor"></textarea>
</div>
</body>
</html>18、建立index.js檔案
我們在webapp/static目錄下建立index資料夾，並在index資料夾中建立index.js，主要內容如下：
$(function(){
//富文字編輯器
UE.getEditor('myEditor')
UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;
UE.Editor.prototype.getActionUrl = function(action){
if(action == '/resource/upload/images'){
return basePath+'resource/upload/images';
}else{
return this._bkGetActionUrl.call(this, action);
}
}
});19、編輯UEditor的config.json檔案
編輯後的檔案如下圖所示：
/* 前後端通訊相關的配置,註釋只允許使用多行方式 */
{
/* 上傳圖片配置項 */
"imageActionName": "/resource/upload/images", /* 執行上傳圖片的action名稱 */
"imageFieldName": "upfile", /* 提交的圖片表單名稱 */
"imageMaxSize": 2048000, /* 上傳大小限制，單位B */
"imageAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* 上傳圖片格式顯示 */
"imageCompressEnable": true, /* 是否壓縮圖片,預設是true */
"imageCompressBorder": 1600, /* 圖片壓縮最長邊限制 */
"imageInsertAlign": "none", /* 插入的圖片浮動方式 */
"imageUrlPrefix": "http://127.0.0.1:8099", /* 圖片訪問路徑字首 */
"imagePathFormat": "/upload/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上傳儲存路徑,可以自定義儲存路徑和檔名格式 */
/* {filename} 會替換成原檔名,配置這項需要注意中文亂碼問題 */
/* {rand:6} 會替換成隨機數,後面的數字是隨機數的位數 */
/* {time} 會替換成時間戳 */
/* {yyyy} 會替換成四位年份 */
/* {yy} 會替換成兩位年份 */
/* {mm} 會替換成兩位月份 */
/* {dd} 會替換成兩位日期 */
/* {hh} 會替換成兩位小時 */
/* {ii} 會替換成兩位分鐘 */
/* {ss} 會替換成兩位秒 */
/* 非法字元 \ : * ? " < > | */
/* 具請體看線上文件: fex.baidu.com/ueditor/#use-format_upload_filename */
/* 塗鴉圖片上傳配置項 */
"scrawlActionName": "uploadscrawl", /* 執行上傳塗鴉的action名稱 */
"scrawlFieldName": "upfile", /* 提交的圖片表單名稱 */
"scrawlPathFormat": "/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上傳儲存路徑,可以自定義儲存路徑和檔名格式 */
"scrawlMaxSize": 2048000, /* 上傳大小限制，單位B */
"scrawlUrlPrefix": "", /* 圖片訪問路徑字首 */
"scrawlInsertAlign": "none",
/* 截圖工具上傳 */
"snapscreenActionName": "uploadimage", /* 執行上傳截圖的action名稱 */
"snapscreenPathFormat": "/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上傳儲存路徑,可以自定義儲存路徑和檔名格式 */
"snapscreenUrlPrefix": "", /* 圖片訪問路徑字首 */
"snapscreenInsertAlign": "none", /* 插入的圖片浮動方式 */
/* 抓取遠端圖片配置 */
"catcherLocalDomain": ["127.0.0.1", "localhost", "img.baidu.com"],
"catcherActionName": "catchimage", /* 執行抓取遠端圖片的action名稱 */
"catcherFieldName": "source", /* 提交的圖片列表表單名稱 */
"catcherPathFormat": "/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上傳儲存路徑,可以自定義儲存路徑和檔名格式 */
"catcherUrlPrefix": "", /* 圖片訪問路徑字首 */
"catcherMaxSize": 2048000, /* 上傳大小限制，單位B */
"catcherAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* 抓取圖片格式顯示 */
/* 上傳視訊配置 */
"videoActionName": "uploadvideo", /* 執行上傳視訊的action名稱 */
"videoFieldName": "upfile", /* 提交的視訊表單名稱 */
"videoPathFormat": "/ueditor/jsp/upload/video/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上傳儲存路徑,可以自定義儲存路徑和檔名格式 */
"videoUrlPrefix": "", /* 視訊訪問路徑字首 */
"videoMaxSize": 102400000, /* 上傳大小限制，單位B，預設100MB */
"videoAllowFiles": [
".flv", ".swf", ".mkv", ".avi", ".rm", ".rmvb", ".mpeg", ".mpg",
".ogg", ".ogv", ".mov", ".wmv", ".mp4", ".webm", ".mp3", ".wav", ".mid"], /* 上傳視訊格式顯示 */
/* 上傳檔案配置 */
"fileActionName": "uploadfile", /* controller裡,執行上傳視訊的action名稱 */
"fileFieldName": "upfile", /* 提交的檔案表單名稱 */
"filePathFormat": "/ueditor/jsp/upload/file/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上傳儲存路徑,可以自定義儲存路徑和檔名格式 */
"fileUrlPrefix": "", /* 檔案訪問路徑字首 */
"fileMaxSize": 51200000, /* 上傳大小限制，單位B，預設50MB */
"fileAllowFiles": [
".png", ".jpg", ".jpeg", ".gif", ".bmp",
".flv", ".swf", ".mkv", ".avi", ".rm", ".rmvb", ".mpeg", ".mpg",
".ogg", ".ogv", ".mov", ".wmv", ".mp4", ".webm", ".mp3", ".wav", ".mid",
".rar", ".zip", ".tar", ".gz", ".7z", ".bz2", ".cab", ".iso",
".doc", ".docx", ".xls", ".xlsx", ".ppt", ".pptx", ".pdf", ".txt", ".md", ".xml"
], /* 上傳檔案格式顯示 */
/* 列出指定目錄下的圖片 */
"imageManagerActionName": "listimage", /* 執行圖片管理的action名稱 */
"imageManagerListPath": "/ueditor/jsp/upload/image/", /* 指定要列出圖片的目錄 */
"imageManagerListSize": 20, /* 每次列出檔案數量 */
"imageManagerUrlPrefix": "", /* 圖片訪問路徑字首 */
"imageManagerInsertAlign": "none", /* 插入的圖片浮動方式 */
"imageManagerAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* 列出的檔案型別 */
/* 列出指定目錄下的檔案 */
"fileManagerActionName": "listfile", /* 執行檔案管理的action名稱 */
"fileManagerListPath": "/ueditor/jsp/upload/file/", /* 指定要列出檔案的目錄 */
"fileManagerUrlPrefix": "", /* 檔案訪問路徑字首 */
"fileManagerListSize": 20, /* 每次列出檔案數量 */
"fileManagerAllowFiles": [
".png", ".jpg", ".jpeg", ".gif", ".bmp",
".flv", ".swf", ".mkv", ".avi", ".rm", ".rmvb", ".mpeg", ".mpg",
".ogg", ".ogv", ".mov", ".wmv", ".mp4", ".webm", ".mp3", ".wav", ".mid",
".rar", ".zip", ".tar", ".gz", ".7z", ".bz2", ".cab", ".iso",
".doc", ".docx", ".xls", ".xlsx", ".ppt", ".pptx", ".pdf", ".txt", ".md", ".xml"
] /* 列出的檔案型別 */
}
imageUrlPrefix為圖片訪問字首。
20、配置tomcat server.xml檔案
由於我們將圖片放到了專案外面，獨立於tomcat，所以我們要在tomcat的server.xml檔案中設定虛擬路徑，如下在<Host></Host>節點中新增如下程式碼：
<Context docBase="d:/lyz/static" path="/upload" reloadable="true"/>如下圖所示：
至此，我們完成了整個專案的開發，下面我們來執行這個專案
四、執行測試
我們將專案釋出到tomcat,在瀏覽器位址列輸入http://127.0.0.1:8099/ueditor/index/page,原因是我將tomcat埠設定為8099,
此時，檢視我的圖片儲存路徑d:/lyz/static
沒有任何圖片。那現在我們編輯圖片吧。如下圖，我在UEditor中編輯了一張圖片：
我們再開啟d:/lyz/static目錄：
圖片已經上傳到我們的指定的配置目錄中了。
至此整個工程建立執行結束。