Spring MVC 基於HTML 教程 (二)

通過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,敬請關注!

如有不當之處請多多指教,如對你有所幫助,請留言或點贊予以支持,謝謝!

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章