通過IDEA 搭建Springmvc 整合HTML,實現前後端數據的傳輸,本文章主要對Springmvc 的進一步學習。
一 、新建Maven項目
1. 打開idea ,點擊File ,選擇new ,點擊Project 。如下圖:
2. 選擇 Maven , 勾選 Create from archetype ,選擇 maven archetype webapp ,點擊Next。
3. 填寫 Groupld 和 Artifactld ,點擊Next 。
4. 配置maven環境 ,點擊Next。
注:在上圖的 properties 中可以添加:
archetypeCatalog:internal 提高創建項目過慢的問題。
5. 填寫 項目名稱和項目路徑,點擊Finish。
6. 項目創建完成 ,結構如下:
二 、配置項目
1. 添加SpringMVC和前端對接的相關依賴
<properties>
<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
<maven.compiler.source>1.8</maven.compiler.source>
<maven.compiler.target>1.8</maven.compiler.target>
<spring.version>5.1.5.RELEASE</spring.version>
</properties>
<dependencies>
<!-- spring-web -->
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-web</artifactId>
<version>${spring.version}</version>
</dependency>
<!-- spring-webmvc -->
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-webmvc</artifactId>
<version>${spring.version}</version>
</dependency>
<!-- spring-context -->
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-context</artifactId>
<version>${spring.version}</version>
</dependency>
<!-- com.alibaba.fastjson -->
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>fastjson</artifactId>
<version>1.2.47</version>
</dependency>
<dependency>
<groupId>net.sf.json-lib</groupId>
<artifactId>json-lib</artifactId>
<version>2.4</version>
<classifier>jdk15</classifier>
</dependency>
<!-- servlet-api -->
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>servlet-api</artifactId>
<version>2.5</version>
<scope>provided</scope>
</dependency>
<!-- jsp-api -->
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>jsp-api</artifactId>
<version>2.0</version>
<scope>provided</scope>
</dependency>
<dependency>
<groupId>junit</groupId>
<artifactId>junit</artifactId>
<version>4.11</version>
<scope>test</scope>
</dependency>
</dependencies>
2. 配置web.xml
在web.xml中配置相關前端控制器。
<web-app>
<display-name>Archetype Created Web Application</display-name>
<!--配置過濾器解決中文亂碼問題-->
<filter>
<filter-name>characterEncodingFilter</filter-name>
<filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
<!--初始化編碼爲 UTF-8-->
<init-param>
<param-name>encoding</param-name>
<param-value>UTF-8</param-value>
</init-param>
</filter>
<!--過濾所有請求-->
<filter-mapping>
<filter-name>characterEncodingFilter</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
<!--前端控制器,核心配置主要處理頁面請求-->
<servlet>
<servlet-name>dispatcherServlet</servlet-name>
<!--DispatcherServlet 第一次發請求時創建-->
<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
<!-- 加載Springmvc 配置文件 -->
<init-param>
<param-name>contextConfigLocation</param-name>
<param-value>classpath:springmvc.xml</param-value>
</init-param>
<!--啓動服務器創建DispatcherServlet ,解決第一次發請求時創建-->
<load-on-startup>1</load-on-startup>
</servlet>
<!-- / : 攔截所有請求,基本配置-->
<servlet-mapping>
<servlet-name>dispatcherServlet</servlet-name>
<!-- 匹配所有請求,此處也可以配置成 *.do 形式 -->
<url-pattern>/</url-pattern>
</servlet-mapping>
</web-app>
3. 配置springmvc.xml 文件
在 springmvc.xml 文件中主要配置,掃描指定的包,加載相應註解,配置視圖解析器,處理後端返回數據以json格式返回等。
<?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:p="http://www.springframework.org/schema/p"
xmlns:context="http://www.springframework.org/schema/context"
xsi:schemaLocation="
http://www.springframework.org/schema/beans
https://www.springframework.org/schema/beans/spring-beans.xsd
http://www.springframework.org/schema/mvc
https://www.springframework.org/schema/mvc/spring-mvc.xsd
http://www.springframework.org/schema/context
https://www.springframework.org/schema/context/spring-context.xsd">
<!-- 自動掃描該包,使SpringMVC認爲包下用了@controller註解的類是控制器 -->
<context:component-scan base-package="com.dongl"/>
<!--開啓springmvc 框架的註解支持-->
<mvc:annotation-driven/>
<!-- 視圖解析器,定義跳轉的文件的前後綴 -->
<bean id="internalResourceViewResolver" class="org.springframework.web.servlet.view.InternalResourceViewResolver">
<!-- 配置視圖跳轉的前綴 -->
<property name="prefix" value="/WEB-INF/views/"/>
<!-- 配置視圖跳轉的後綴 -->
<property name="suffix" value=".html"/>
</bean>
<!-- 向 DispatcherServlet 聲明靜態文件 不攔截-->
<mvc:resources mapping="/static/css/" location="/static/css/**"/>
<mvc:resources mapping="/static/images/" location="/static/images/**"/>
<mvc:resources mapping="/static/js/" location="/static/js/**"/>
<!--靜態資源的請求,就將該請求轉由Web應用服務器默認的Servlet處理 ,該配置可以運行HTML腳本文件-->
<mvc:default-servlet-handler/>
<!--用於把後端數據以JSON格式展示到瀏覽器 支持fastjson.jar -->
<mvc:annotation-driven>
<mvc:message-converters>
<bean class="org.springframework.http.converter.StringHttpMessageConverter">
<constructor-arg value="UTF-8"/>
</bean>
<bean class="com.alibaba.fastjson.support.spring.FastJsonHttpMessageConverter">
<property name="supportedMediaTypes">
<list>
<value>text/html;charset=UTF-8</value>
<value>application/json;charset=UTF-8</value>
</list>
</property>
<property name="fastJsonConfig" ref="fastJsonConfig" />
</bean>
</mvc:message-converters>
</mvc:annotation-driven>
<bean id="fastJsonConfig" class="com.alibaba.fastjson.support.config.FastJsonConfig">
<property name="charset" value="UTF-8" />
</bean>
</beans>
注: <mvc:default-servlet-handler/> :
配置<mvc:default-servlet-handler />後,會在Spring MVC上下文中定義一個org.springframework.web.servlet.resource.DefaultServletHttpRequestHandler,它會像一個檢查員,對進入DispatcherServlet的URL進行篩查,如果發現是靜態資源的請求,就將該請求轉由Web應用服務器默認的Servlet處理,如果不是靜態資源的請求,才由DispatcherServlet繼續處理。
參考博客:https://www.jianshu.com/p/81d613c63d52
三、 寫測試類
1. 新建 控制類 HelloController ,文件如下:
@Controller
public class HelloController {
@RequestMapping("/hello")
public String sayHello(){
System.out.println("Hello Word SpringMVC!");
return "success";
}
@RequestMapping("/param")
public String sayHello(String userName,String password){
System.out.println("用戶名:"+ userName +" , 密碼:" + password);
return "success";
}
}
2. 修改 index.html ,內容如下:
<!DOCTYPE html>
<html>
<body>
<h2>Hello World!</h2>
<a href="/hello" style="color: darkmagenta;">SpringMVC</a>
<br>
<a href="/param?userName=姚明&password=123456" style="color: darkmagenta;">SpringMVC</a>
</body>
</html>
3. 在 WEB-INF 下新建 /views/success.html 文件。
<!DOCTYPE html >
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html charset=UTF-8">
<title>Title</title>
</head>
<body>
<H3 style="color: crimson; align-content: center" >訪問成功!</H3>
</body>
</html>
四、啓動項目,進行測試。
1. 在瀏覽器中輸入:http://localhost:8080/
2. 點擊超鏈接請求後端接口。
後續更新集成spring和mybatis,敬請關注!