这一次讲解如何构建一个简单的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>
下面来看一下实际效果图