使用idea创建一个纯净的html5 idea怎么创建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继续处理。

 三、 写测试类

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，敬请关注！

如有不当之处请多多指教，如对你有所帮助，请留言或点赞予以支持，谢谢！