三大框架之SpringMVC学习之路

1 SpringMVC

1.1 SpringMVC概念

Spring MVC属于SpringFrameWork的后续产品，已经融合在Spring Web Flow里面。Spring 框架提供了构建 Web 应用程序的全功能 MVC 模块。使用 Spring 可插入的 MVC 架构，从而在使用Spring进行WEB开发时，可以选择使用Spring的SpringMVC框架或集成其他MVC开发框架，如Struts1(现在一 般不用)，Struts2(一般老项目使用)等。
SpringMVC就是基于MVC设计模式来实现的。

• springmvc是spring框架的一个模块，springmvc和spring无需通过中间整合层进行整合。
• springmvc是一个基于mvc的web框架。
• springmvc 表现层：方便前后端数据的传输
• Spring MVC 拥有控制器，作用跟Struts类似，接收外部请求，解析参数传给服务层

1.2 什么是MVC

• MVC是模型(Model)、视图(View)、控制器(Controller)的简写，是一种软件设计规范。
• 是将业务逻辑、数据、显示分离的方法来组织代码。
• MVC主要作用是降低了视图与业务逻辑间的双向偶合。
• MVC不是一种设计模式，MVC是一种架构模式。当然不同的MVC存在差异。
  
  Model（模型）：数据模型，提供要展示的数据，因此包含数据和行为，可以认为是领域模型或JavaBean组件（包含数据和行为），不过现在一般都分离开来：Value Object（数据Dao） 和 服务层（行为Service）。也就是模型提供了模型数据查询和模型数据的状态更新等功能，包括数据和业务。
  View（视图）：负责进行模型的展示，一般就是我们见到的用户界面，客户想看到的东西。
  Controller（控制器）：接收用户请求，委托给模型进行处理（状态改变），处理完毕后把返回的模型数据返回给视图，由视图负责展示。也就是说控制器做了个调度员的工作。

1.3 SpringMVC架构（MVC设计模式在BS系统下的应用）

SpringMVC是Spring的一部分，如图：

Spring MVC的特点：

• 轻量级，简单易学
• 高效 , 基于请求响应的MVC框架
• 与Spring兼容性好，无缝结合
• 约定优于配置
• 功能强大：RESTful、数据验证、格式化、本地化、主题等
• 简洁灵活

Spring的web框架围绕DispatcherServlet [ 调度Servlet ] 设计。
DispatcherServlet的作用是将请求分发到不同的处理器。从Spring 2.5开始，使用Java 5或者以上版本的用户可以采用基于注解形式进行开发，十分简洁；

SpringMVC的核心架构：
图一：

图二：

具体流程：

（1）首先浏览器发送请求——>DispatcherServlet，前端控制器收到请求后自己不进行处理，而是委托给其他的解析器进行处理，作为统一访问点，进行全局的流程控制；

（2）DispatcherServlet——>HandlerMapping，处理器映射器将会把请求映射为HandlerExecutionChain对象（包含一个Handler处理器对象、多个HandlerInterceptor拦截器）对象；

（3）DispatcherServlet——>HandlerAdapter，处理器适配器将会把处理器包装为适配器，从而支持多种类型的处理器，即适配器设计模式的应用，从而很容易支持很多类型的处理器；

（4）HandlerAdapter——>调用处理器相应功能处理方法，并返回一个ModelAndView对象（包含模型数据、逻辑视图名）；

（5）ModelAndView对象（Model部分是业务对象返回的模型数据，View部分为逻辑视图名）——> ViewResolver， 视图解析器将把逻辑视图名解析为具体的View；

（6）View——>渲染，View会根据传进来的Model模型数据进行渲染，此处的Model实际是一个Map数据结构；

（7）返回控制权给DispatcherServlet，由DispatcherServlet返回响应给用户，到此一个流程结束。

1.4 案列：展示汽车数据

1.4.1 需求

访问本地链接：http://localhost:8080/car/get后网页得到关于汽车相关信息的JSON数据，如汽车品牌名字，汽车颜色等信息。

1.4.2 创建Maven Module项目

右键工程名——>new——>Module——>选择Maven，然后next——>输入项目名称，然后finish。

1.4.2 创建相关包

依次点击刚刚创建的Maven项目——>src——>main——>java，右键java包，选择new——>package，创建包。


右键刚刚创建的cn.tedu包，选择new——>package，创建包。

重复上述操作，再次创建一个包。最后结构如下。

1.4.3 创建Java项目

1.创建程序运行类RunApp1

右键cn.tedu包，new——>java class。

内容如下：

package cn.tedu;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
@SpringBootApplication//标识为springboot项目
public class RunApp1 {
    public static void main(String[] args) {
       //全新的启动方式，执行run方法会自动启动集成的tomcat中间件，运用了反射机制，类名.class。
        SpringApplication.run(RunApp1.class);
    }
}

@SpringBootApplication注解标识为springboot项目

2.创建汽车Car类

右键pojo，new——>java class。

内容如下：

package cn.tedu.pojo;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
public class Car {
    private Integer id;
    private String name;
    private String color;
    private Double price;
    public Car(Integer id, String name, String color, Double price) {
        this.id = id;
        this.name = name;
        this.color = color;
        this.price = price;
    }

    public Integer getId() {
        return id;
    }

    public void setId(Integer id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

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

    public String getColor() {
        return color;
    }

    public void setColor(String color) {
        this.color = color;
    }

    public Double getPrice() {
        return price;
    }

    public void setPrice(Double price) {
        this.price = price;
    }

    @Override
    public String toString() {
        return "Car{" +
                "id=" + id +
                ", name='" + name + '\'' +
                ", color='" + color + '\'' +
                ", price=" + price +
                '}';
    }
}

3.创建CarController类

右键controller，new——>java class。

内容如下：

package cn.tedu.controller;
import cn.tedu.pojo.Car;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
@RestController//接受浏览器的请求 并返回json数据
@RequestMapping("car")//地址栏组成部分，指明访问端口里的哪个类
public class CarController {
    @RequestMapping("get1")//地址栏组成部分，指明访问类里的哪个方法，方法有参数则需要传参。
    public Car getCar1(Car car){
        System.out.println(car);
        return car;
    }
    @RequestMapping("get2/{x}/{y}/{z}/{w}")//提供占位符，简化网址输入方式
    public String getCar2(@PathVariable Integer x,
                         @PathVariable String y,
                         @PathVariable String z,
                         @PathVariable Double w){
        System.out.println(new Car(x,y,z,w));
        return "id = "+x+",name = "+y+",color = "+z+",price = "+w;
    }
}

1.5 测试

1.5.1 打开端口

回到程序运行类RunApp1，运行程序。

出现此界面表示程序运行成功。

1.5.2 网页输入地址

打开chrome浏览器，地址栏输入http://localhost:8080/car/get1?id=110&name=bmw&color=black&price=999999.99999
回车后显示结果如下：


更改地址测试简化地址的输入方式，地址栏输入http://localhost:8080/car/get2/120/tsl/white/66666.66666回车后显示如下内容：

1.5.3 使用Ajax测试

创建html，内容如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="jquery-1.8.3.min.js"></script>
		<script>
			function a(){
				$.ajax({
					type: "get", //要使用的请求方式
					url: "http://localhost:8080/car/get1", //要使用的请求路径 
					data:{
							"id":"222", //要拼接的数据
							"name":"eee",
							"color":"ddd",
							"price":"2222.222"
							},
					dataType:"json",
					success: function(data){ //成功时的方案 
						console.log(data);//显示出返回的数据
					},
				})				
			}
		</script>
		
	</head>
	<body>
		<a onclick="a();" href="#">ddd</a>
		//点击事件按钮，点击ddd时执行a()函数
	</body>
</html>

执行结果如下：

1.6 数据存入数据库

1.6.1 创建car数据表

可以直接进入Navicat，创建car数据表。

1.6.2 引入JDBC

在pom.xml中增加依赖，

1.6.3 代码编写

在CarController类中添加save()方法。

@RestController
@CrossOrigin
@RequestMapping("car")
public class CarController {
    @RequestMapping("save")
    public void sava(Car car) throws ClassNotFoundException, SQLException {
        Class.forName("com.mysql.cj.jdbc.Driver");//注册驱动
        Connection conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/school?serverTimezone=UTC","root","root");//创建连接
        String sql = "insert into car values(?,?,?,?)";
        PreparedStatement ps = conn.prepareStatement(sql);//获取传输器
        ps.setInt(1,car.getId());
        ps.setString(2,car.getName());
        ps.setString(3,car.getColor());
        ps.setDouble(4,car.getPrice());
        ps.executeUpdate();//执行SQL
        ps.close();//关闭资源
        conn.close();
        System.out.println(car);

    }
}

1.6.4 查看效果

运行启动类RunApp。运行HTML文件。点击ddd。

查看car数据表。

1.7 前端表单数据提交到后端和数据库

1.7.1 创建学生信息表单

HTML文件：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<link rel="stylesheet" href="stu.css" />
	<body>
		<!-- form表单，可以把数据提交给服务器 -->
		<form action="http://localhost:8080/student/save" method="post">
			<table bgcolor="aquamarine" align="left" border="">
				<th height="50px" align="center"><font size="5" color="black">学生信息管理系统</font></th>
				<tr>
					<td>姓名:</td>
				</tr>
				<tr>
					<td><input type="text" placeholder="请输入姓名" name="user"/></td>
				</tr>
				<tr>
					<td>年龄</td>
				</tr>
				<tr>
					<td><input type="number" placeholder="请输入年龄" name="age"/></td>
				</tr>
				<tr>
					<td>性别:（单选框）
						<input type="radio" name="sex" value="1"/>男<!-- 选男就用1表示 -->
						<input type="radio" name="sex" value="2"/>女
					</td>										
				</tr>
				<tr>
					<td>爱好:（多选）
					<input type="checkbox" name="hobby" value="ppq" />乒乓球
					<input type="checkbox" name="hobby" value="ps" />爬山
					<input type="checkbox" name="hobby" value="cg" />唱歌</td>
				</tr>
				<tr>
					<td>学历:（下拉框）
					<select name="edu">
					<option value ="1">专科</option>
					<option value ="2">本科</option></select></td>
				</tr>
				<tr>
					<td>入学日期:</td>
				</tr>
				<tr>
					<td><input type="date" name="intime" /></td>
				</tr>
				<tr>
					<td id="s">
						<input type="submit" value="保存" />
						<input type="reset" value="取消"/>
					</td>
				</tr>		
			</table>			
		</form>
	</body>
</html>

CSS文件：

		tr{
			height: 30px;
		}
		input[type="submit"]{
			background-color: #0000FF;
			width: 50px;
			height: 30px;
			color: #FFFFFF;
			border: 2px solid #ff55ff;
			
		}
		input[type="reset"]{
			background-color: #ff55ff;
			width: 50px;
			height: 30px;
			border: 2px solid blue;
			color: white;
		}
		input[type="text"]{
			height: 25px;
			width: 280px;
			color: #FF55FF;
		}
		input[type="number"]{
			height: 25px;
			width: 280px;
			color: #FF55FF;
		}
		input[type="radio"]{
			margin-left: 10px;
		}
		

1.7.2 创建学生类、学生控制类

Student类：
注意修改特殊数据类型。

package cn.tedu.pojo;
import org.springframework.format.annotation.DateTimeFormat;
import java.util.Arrays;
import java.util.Date;
public class Student {
    private String user;
    private Integer age;
    private Integer sex;
    private String[] hobby;//注意getHobby()要特殊处理
    private Integer edu;
    //页面提交的日期都是String类型，需要自己手动变成Date类型,加一个@DateTimeFormat注解
    @DateTimeFormat(pattern = "yyyy-MM-dd")
    private Date intime;

    public String getUser() {
        return user;
    }

    public void setUser(String user) {
        this.user = user;
    }

    public Integer getAge() {
        return age;
    }

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

    public Integer getSex() {
        return sex;
    }

    public void setSex(Integer sex) {
        this.sex = sex;
    }

    public String getHobby() {
    	String str = "";
    	if(hobby==null){
			return "null";
		}
		for (int i = 0；i < hobby.length;i++){
			str += hobby[i];
			if(i<hobby.lenth-1){
				str += ",";
			}
		}
        return str;
    }

    public void setHobby(String[] hobby) {
        this.hobby = hobby;
    }

    public Integer getEdu() {
        return edu;
    }

    public void setEdu(Integer edu) {
        this.edu = edu;
    }

    public Date getIntime() {
        return intime;
    }

    public void setIntime(Date intime) {
        this.intime = intime;
    }

    @Override
    public String toString() {//重写toString()方法，否则将打印地址值。
        return "Student{" +
                "user='" + user + '\'' +
                ", age=" + age +
                ", sex=" + sex +
                ", hobby=" + Arrays.toString(hobby) +
                ", edu=" + edu +
                ", intime=" + intime +
                '}';
    }
}

StudentController类：

package cn.tedu.controller;

import cn.tedu.pojo.Student;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.SQLException;
@RestController
@CrossOrigin
@RequestMapping("student")
public class StudentController {
    @RequestMapping("save")
    public Student save(Student stu) throws ClassNotFoundException, SQLException {
        Class.forName("com.mysql.cj.jdbc.Driver");
        Connection conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/school?serverTimezone=UTC", "root", "root");
        String sql = "insert into student1 values(null,?,?,?,?,?,?)";
        PreparedStatement ps = conn.prepareStatement(sql);
        ps.setString(1,stu.getUser());
        ps.setInt(2,stu.getAge());
        ps.setInt(3,stu.getSex());
        ps.setString(4,stu.getHobby());
        ps.setInt(5,stu.getEdu());
        long time = stu.getIntime().getTime();//日期格式特殊处理，因为后端和数据库里面的数据类型不匹配
        Date date = new Date(time);
        ps.setDate(6, date);
        ps.executeUpdate();
        ps.close();
        conn.close();
        System.out.println(stu);

    }
}

1.7.3 测试结果

向学生信息表里填写信息，然后点击保存。

数据库内容：