构建完全的注解版的springMVC应用

这一次讲解如何构建一个简单的Spring MVC应用。

包含的技术有spring mvc中的表单提交，利用ajax的方法来和springmvc通讯两个内容。

涉及ajax的是和user有关的文件。

应用环境是IDEA，当然Eclipse也是可以的。整个项目的环境是Maven+Spring4.3。

祭出文件目录图：

首先看一下pom.xml核心部分jar包的配置。

<dependencies>
    <!-- https://mvnrepository.com/artifact/junit/junit -->
    <dependency>
        <groupId>junit</groupId>
        <artifactId>junit</artifactId>
        <version>4.12</version>
    </dependency>

    <!-- spring start -->
    <!-- https://mvnrepository.com/artifact/org.hamcrest/hamcrest-all -->
    <dependency>
        <groupId>org.hamcrest</groupId>
        <artifactId>hamcrest-all</artifactId>
        <version>1.3</version>
        <scope>test</scope>
    </dependency>
    <!-- https://mvnrepository.com/artifact/org.springframework/spring-context -->
    <dependency>
        <groupId>org.springframework</groupId>
        <artifactId>spring-context</artifactId>
        <version>4.3.18.RELEASE</version>
    </dependency>
    <!-- https://mvnrepository.com/artifact/org.aspectj/aspectjrt -->
    <dependency>
        <groupId>org.aspectj</groupId>
        <artifactId>aspectjrt</artifactId>
        <version>1.9.1</version>
    </dependency>
    <!-- https://mvnrepository.com/artifact/org.springframework/spring-webmvc -->
    <dependency>
        <groupId>org.springframework</groupId>
        <artifactId>spring-webmvc</artifactId>
        <version>4.3.18.RELEASE</version>
    </dependency>
    <!-- spring end -->

    <!-- https://mvnrepository.com/artifact/javax.servlet/javax.servlet-api -->
    <dependency>
        <groupId>javax.servlet</groupId>
        <artifactId>javax.servlet-api</artifactId>
        <version>3.1.0</version>
        <scope>provided</scope>
    </dependency>
    <dependency>
        <groupId>org.junit.jupiter</groupId>
        <artifactId>junit-jupiter-api</artifactId>
        <version>RELEASE</version>
        <scope>compile</scope>
    </dependency>

    <!-- JSTL start -->
    <!-- https://mvnrepository.com/artifact/jstl/jstl -->
    <dependency>
        <groupId>jstl</groupId>
        <artifactId>jstl</artifactId>
        <version>1.2</version>
    </dependency>
    <!-- JSTL end -->

    <!-- https://mvnrepository.com/artifact/org.json/json -->
    <dependency>
        <groupId>org.json</groupId>
        <artifactId>json</artifactId>
        <version>20180130</version>
    </dependency>

    <!-- jsckson start -->
    <!-- https://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-core -->
    <dependency>
        <groupId>com.fasterxml.jackson.core</groupId>
        <artifactId>jackson-core</artifactId>
        <version>2.9.6</version>
    </dependency>
    <!-- https://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-annotations -->
    <dependency>
        <groupId>com.fasterxml.jackson.core</groupId>
        <artifactId>jackson-annotations</artifactId>
        <version>2.9.6</version>
    </dependency>
    <!-- https://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-databind -->
    <dependency>
        <groupId>com.fasterxml.jackson.core</groupId>
        <artifactId>jackson-databind</artifactId>
        <version>2.9.6</version>
    </dependency>
    <!-- jackson end -->
</dependencies>

然后看一下 java/config 目录下的三个文件

这些是Spring MVC的基本配置文件

RootConfig.java

package config;

public class RootConfig {


}

WebAppInitializer.java

package config;

import org.springframework.web.servlet.support.AbstractAnnotationConfigDispatcherServletInitializer;

public class WebAppInitializer extends AbstractAnnotationConfigDispatcherServletInitializer {

    @Override
    protected Class<?>[] getRootConfigClasses() {
        return new Class<?>[] { RootConfig.class };
    }

    @Override
    protected Class<?>[] getServletConfigClasses() {
        return new Class<?>[] { WebConfig.class };
    }

    @Override
    protected String[] getServletMappings() {
        return new String[] { "/" };
    }
}

WebConfig.java

package config;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.ComponentScan;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.ViewResolver;
import org.springframework.web.servlet.config.annotation.DefaultServletHandlerConfigurer;
import org.springframework.web.servlet.config.annotation.EnableWebMvc;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;
import org.springframework.web.servlet.view.InternalResourceViewResolver;

@Configuration
@EnableWebMvc // 启用spring mvc
@ComponentScan("web") // 启用组件扫描
class WebConfig extends WebMvcConfigurerAdapter {

    /**
     * 配置是解析器
     * @param
     * @return org.springframework.web.servlet.ViewResolver
     **/
    @Bean
    public ViewResolver viewResolver() {
        InternalResourceViewResolver resolver = new InternalResourceViewResolver(); // 配置jsp视图解析器
        resolver.setPrefix("WEB-INF/views/"); // 这里是前缀
        resolver.setSuffix(".jsp"); // 这里是后缀
        resolver.setExposeContextBeansAsAttributes(true);
        return resolver;
    }

    /**
     * 配置静态资源的处理
     * @param configurer
     * @return void
     **/
    @Override
    public void configureDefaultServletHandling(DefaultServletHandlerConfigurer configurer) {
        configurer.enable();
    }

}

接下来看一下Model层的文件

User.java

package model;

/**
 * @author ChenZhiMing
 * @date 2018/8/5 14:22
 */

public class User {

    private String name;
    private int age;

    public User() {

    }

    public User(String name, int age) {
        this.name = name;
        this.age = age;
    }

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

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

    public String getName() {
        return name;
    }

    public int getAge() {
        return age;
    }
}

接下来配置一下控制器，也就是Controller

HomeController.java

package web;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;

@Controller
public class HomeController {

    @RequestMapping(value = "/", method = RequestMethod.GET)
    public String home() {
        return "home";
    }

}

InputController.java

package web;

import model.User;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;

@Controller
public class InputController {

    @RequestMapping(value = "/input", method = RequestMethod.GET)
    public String getInput() {
        return "input";
    }

    @RequestMapping(value = "/input", method = RequestMethod.POST)
    public String getInputForm(User user, Model model) {
        System.out.println("name: " + user.getName() + ", age: " + user.getAge());
        model.addAttribute(user);
        return "success";
    }

}

UserController.java

package web;

import model.User;
import org.json.JSONArray;
import org.json.JSONObject;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.*;

@Controller
public class UserController {

    @RequestMapping(value = "/userInfo", method = RequestMethod.GET)
    public String getUserInfo() {
        return "userInfo";
    }

    @RequestMapping(value = "/getJson", method = RequestMethod.POST)
    @ResponseBody
    public User function(@RequestBody User user) {
        System.out.println(user);
        return user;
    }

    public static void main(String[] args) {
        JSONObject jsonObject = new JSONObject();
        jsonObject.put("name", "jane");
        jsonObject.put("age", 12);
        System.out.println(jsonObject.toString());
    }

}

最后在看一下WEB-INF/views中的视图文件

home.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<body>
<h1>welcome</h1>
</body>
</html>

input.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<body>
<form method="post">
    <input type="text" name="name" />
    <input type="text" name="age" />
    <input type="submit" value="submit" />
</form>
</body>
</html>

success.jsp

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page isELIgnored="false" %>
<html>
<head>
    <title>Title</title>
</head>
<body>
<h1>input success</h1>
name: <c:out value="${user.name}" /><br>
age: ${user.age}
</body>
</html>

userInfo.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<c:set value="${pageContext.request.contextPath}" var="path" scope="page"/>
<%@ page isELIgnored="false" %>
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript">
        $().ready(
            function () {
                $("#sub").click(
                    function () {
                        var name = "jane";
                        var age = 18;
                        var user = {"name": name, "age": age};
                        $.ajax({
                            url: 'getJson',
                            type: 'POST',
                            data: user = JSON.stringify(user), // Request body
                            contentType: 'application/json;charset=UTF-8',
                            dataType: 'json',
                            success: function (response) {
                                console.log("success")
                                console.log(response)
                                //请求成功
                                //alert("你好" + response.name + "[" + response.age + "]，当前时间是：" + response.time + "，欢迎访问");
                            },
                            error: function (msg) {
                                //alert(msg);
                                console.log("error")
                            }
                        });
                    });
            });
    </script>
</head>
<body>
<button id="sub">点一下，玩一年</button>
</body>
</html>

下面来看一下实际效果图