实验六：使用SpringMVC完成下面的项目

一、实验内容

使用SpringMVC框架完成下面项目，对候选人（下图知识演示样式，换成自己喜欢的人）的投票选择后，跳转道相应页面。并增加一个年龄填空和输出以练习前后端的传入传出练习。

二、实验解法

根据题目的要求，本次实验并不难，实验目的实质是熟悉SpringMVC开发步骤。在这里主要讲的是SpringMVC的开发步骤，前端并没有什么复杂操作，所以略过。

1. 创建web项目

由于省事，web项目推荐使用maven骨架来创建，当然，不使用骨架也是可以的，参考不使用骨架创建web项目

然后next，填写你的项目名称，再next，由于使用骨架需要进行联网下载，稍等片刻即可。骨架目录其实也并不完整，src/main中缺少了java与resources目录，需要自己补全。

2. 导入SpringMVC中所要用到的maven依赖

由于maven依赖具有传递性，所以其实只用添加一个spring-webmvc，里面即可带有其他需要用到的依赖，足以完成springmvc的开发。如下图所示

在这里我使用的是thymeleaf，而不是jsp，所以需要导入thymeleaf依赖。

  <dependencies>
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-webmvc</artifactId>
      <version>5.0.5.RELEASE</version>
    </dependency>

    <dependency>
      <groupId>org.thymeleaf</groupId>
      <artifactId>thymeleaf-spring5</artifactId>
      <version>3.0.12.RELEASE</version>
    </dependency>
  </dependencies>

3. 在web.xml中配置SpringMVC前端控制器(DispatcherServlet)

springmvc与struts2的实现原理不同，springmvc的入口是一个servlet。springmvc中已为我们提供了前端控制器，我们需要配置servlet，完成前端控制器的配置。

<load-on-startup>1</load-on-startup>：服务器一启动即加载此servlet
注意：web-app标签中有要求标签的出现顺序，filter -> listener -> servlet 由上到下依次编写

<!-- 字符过滤 -->
 <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>
  </filter>
  <filter-mapping>
    <filter-name>characterEncodingFilter</filter-name>
    <url-pattern>/*</url-pattern>
  </filter-mapping>

  <servlet>
    <servlet-name>dispatcherServlet</servlet-name>
    <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
    <load-on-startup>1</load-on-startup>
  </servlet>
  <servlet-mapping>
    <servlet-name>dispatcherServlet</servlet-name>
    <url-pattern>/</url-pattern>
  </servlet-mapping>

4. 创建springmvc配置文件

springmvc配置文件的默认命名规则是：[servlet-name]-servlet.xml。如果你想起别名，则需要告知servlet，去哪里找配置文件。
如下所示

<servlet>
    <servlet-name>DispatcherServlet</servlet-name>
    <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
    <init-param>
        <param-name>contextConfigLocation</param-name>
        <param-value>classpath:spring-mvc.xml</param-value>
    </init-param>
    <load-on-startup>1</load-on-startup>
</servlet>

在这里，我就用默认的命名规则来完成操作
新建一个dispatcherServlet-servlet.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:mvc="http://www.springframework.org/schema/mvc"
       xmlns:context="http://www.springframework.org/schema/context"
       xsi:schemaLocation="
        http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd
        http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc.xsd
        http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context.xsd
">
<!-- 组件扫描 告知springmvc到哪里去找controller -->
    <context:component-scan base-package="com.test.controller"/>
    <!-- 资源访问权限开放 当RequestMapping映射找不到目标的映射地址的时候，将交还给服务器去处理 -->
    <mvc:default-servlet-handler/>
    <!--注解驱动，以使得访问路径与方法的匹配可以通过注解配置 通俗点就是@RequestMapping没配置这个就用不了-->
    <mvc:annotation-driven/>

<!-- 配置thymeleaf作为视图解析器 -->
    <bean id="thymeleafViewResolver" class="org.thymeleaf.spring5.view.ThymeleafViewResolver">
        <property name="characterEncoding" value="UTF-8"/>
        <property name="templateEngine" ref="templateEngine"/>
    </bean>

    <bean id="templateEngine" class="org.thymeleaf.spring5.SpringTemplateEngine">
        <property name="templateResolver" ref="templateResolver"/>
        <property name="enableSpringELCompiler" value="true"/>
    </bean>

    <bean id="templateResolver" class="org.thymeleaf.spring5.templateresolver.SpringResourceTemplateResolver">
        <property name="prefix" value="/templates/"/>
        <property name="suffix" value=".html"/>
        <property name="templateMode" value="HTML5"/>
        <property name="characterEncoding" value="UTF-8"/>
        <property name="cacheable" value="false"/>
    </bean>
</beans>

5. 创建一个偶像类，用于封装数据

package com.yjx.pojo;

public class Idol {
    private String name;
    private int age;
    private String picture;

    public String getPicture() {
        return picture;
    }

    public void setPicture(String picture) {
        this.picture = picture;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public int getAge() {
        return age;
    }

    public void setAge(int age) {
        this.age = age;
    }
}

6. 编写Controller类

Controller类完成图片与偶像的匹配，严格意义上来说，这段代码是应该放到service层中的。在源码下载中已将这段放到service层中，需要的同学可以到源码下载中下载学习。

package com.yjx.controller;

import com.yjx.pojo.Idol;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.PostMapping;

@Controller
public class MyController {
    @PostMapping("/vote")
    public String vote(Idol idol, Model model) {
        String idolName = idol.getName();
        if (idolName.equals("医学奇才钟南山")) {
            idol.setPicture("/static/zns.jpg");
        } else if (idolName.equals("杂交水稻之父袁隆平")){
            idol.setPicture("/static/ylp.jpg");
        } else if (idolName.equals("物理全才杨振宁")){
            idol.setPicture("/static/yzn.jpg");
        } else if (idolName.equals("周杰伦")){
            idol.setPicture("/static/JarChou.jpg");
        } else if (idolName.equals("蔡徐坤")){
            idol.setPicture("/static/cxk.jpg");
        }
        model.addAttribute("myIdol",idol);
        return "voteResult";
    }
}

7. 测试结果

8. 源码下载

由于本次实验省略掉了前端的编写，可能会有些小伙伴看不懂，或者自己编写的时候出现了一些异常。有需要的伙伴可以点击下载源码，资源免积分/C币的。