springMVC与前端交互

第一步 加依赖

pom.xml

    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-webmvc</artifactId>
      <version>5.2.10.RELEASE</version>
    </dependency>
    <dependency>
          <groupId>javax.servlet</groupId>
          <artifactId>javax.servlet-api</artifactId>
          <version>3.1.0</version>
          <scope>provided</scope>
    </dependency>
    <dependency>
        <groupId>com.fasterxml.jackson.core</groupId>
        <artifactId>jackson-databind</artifactId>
        <version>2.13.3</version>
    </dependency>
    <dependency>
      <groupId>org.projectlombok</groupId>
      <artifactId>lombok</artifactId>
      <version>1.18.22</version>
  </dependency>

其中jackson是反序列列化的，用于实体类的属性映射装配
lombok简化实体类get,set等等的代码

第二步 编写配置类

SpringConfig.java

package config;

import org.springframework.context.annotation.ComponentScan;

//spring容器
@ComponentScan({"service"})//扫业务层的包
public class SpringConfig {
}

SpringWebConfig.java

package config;

import org.springframework.context.annotation.ComponentScan;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.EnableWebMvc;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

//springWeb容器
@ComponentScan({"testcontroller"})//扫web控制层的包
@EnableWebMvc//开启JSON数据自动转换
public class SpringWebConfig  implements WebMvcConfigurer{
    //跨域设置
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")  // 允许跨域访问的路径
                .allowedOrigins("*")// 允许跨域访问的域名
                .allowedMethods("*")   // 允许跨域访问的方法
                .allowedHeaders("*")   // 允许跨域访问的请求头
                .allowCredentials(true)   // 是否允许证书 不需要配置
                .maxAge(24 * 60 * 60);          // 暴露在请求头的有效时间
    }
}

ServletContainersInitConfig.java

package config;

import org.springframework.web.filter.CharacterEncodingFilter;
import org.springframework.web.servlet.support.AbstractAnnotationConfigDispatcherServletInitializer;
import javax.servlet.Filter;

public class ServletContainersInitConfig extends AbstractAnnotationConfigDispatcherServletInitializer {
    @Override//拦截路径配置
    protected String[] getServletMappings() {
        return new String[]{"/"};
    }
    @Override//加载spring容器
    protected Class<?>[] getRootConfigClasses() {
        return new Class[]{SpringConfig.class};
    }
    @Override//加载springWeb容器
    protected Class<?>[] getServletConfigClasses() {
        return new Class[]{SpringWebConfig.class};
    }

    //处理请求体的中文乱码问题
    @Override
    protected Filter[] getServletFilters() {
        CharacterEncodingFilter filter = new CharacterEncodingFilter();
        filter.setEncoding("utf-8");
        return new Filter[]{filter};
    }
}

第三步 加web启动插件

pom.xml

<build>
      <plugins>
        <plugin>
          <groupId>org.apache.tomcat.maven</groupId>
          <artifactId>tomcat7-maven-plugin</artifactId>
          <version>2.1</version>
          <configuration>
        	<port>2000</port> <!--  端口号  -->
            <path>/</path> <!--  项目根路径  -->
          </configuration>
        </plugin>
          <plugin>
              <groupId>org.apache.maven.plugins</groupId>
              <artifactId>maven-compiler-plugin</artifactId>
              <configuration>
                  <source>8</source>
                  <target>8</target>
              </configuration>
          </plugin>
      </plugins>
  </build>

第四步 编写controller

为了能够用实体类接前端的数据，先写两个实体类

---

TestUser.java

package testcontroller;

import lombok.Data;

@Data
public class TestUser {
    int id;
    String user;
}

Teacher.java

package testcontroller;

import lombok.Data;

@Data
public class Teacher {
    int no;
    TestUser user;
}

---

编写controller测试
TestController.java

package testcontroller;


import org.springframework.web.bind.annotation.*;
import java.util.Arrays;
import java.util.List;

@RestController
@RequestMapping("/test")
public class TestController {

//    测试路径 http://localhost:20000/test/hello
    @RequestMapping("/hello")
    public String sayHello(){
        return "hello";
    }


//    测试路径 http://localhost:20000/test/commonParam?id=1&user=123
    //普通传参，名字对应
    @RequestMapping("/commonParam")
    public  String commonParam(int id,String user){
        viewData("/commonParam",id+user);
        return id+user;
    }
//    测试路径 http://localhost:20000/test/commonParamDif?id=1&user=123
    //普通传参，名字不对应对应
    @RequestMapping("/commonParamDif")
    public  String commonParamDif(int id,@RequestParam("user") String userName){
        viewData("/commonParamDif",id+userName);
        return id+userName;
    }
//    测试路径 http://localhost:20000/test/commonParamDif?id=1&user=123
    //无引用 pojo传参,名称得一样可以自动装配
    @RequestMapping("/pojo")
    public  String pojo(TestUser user){
        viewData("/pojo","");
        System.out.println(user);
        return "pojo";
    }
//    测试路径 http://localhost:20000/test/pojo2?user.id=1&user.user=123&no=100
    //含引用 pojo传参,名称得一样可以自动装配
    @RequestMapping("/pojo2")
    public  String pojo2(Teacher teacher){
        viewData("/pojo2",teacher);
        return "pojo2";
    }
//    测试路径 http://localhost:20000/test/array?strings=strings1&strings=strings2&strings=strings3
    //数组传参
    @RequestMapping("/array")
    public  String array(String[] strings){
        viewData("/array", Arrays.toString(strings));
        return "array";
    }
//    测试路径 http://localhost:20000/test/list?strings=strings1&strings=strings2&strings=strings3
    //集合传参
    @RequestMapping("/list")
    public  String list(@RequestParam List<String> strings){
        viewData("/list", strings);
        return "list";
    }

//--------------------------下方为JSON传参-----------------------------------

    //数组传参
    @RequestMapping("/jsonarray")
    public  List<String>  jsonarray(@RequestBody List<String> strings){
        viewData("/jsonarray", strings);
        return strings;
    }

    //pojo传参
    @RequestMapping("/jsonpojo")
    public TestUser jsonpojo(@RequestBody TestUser user){
        viewData("/jsonpojo", user);
        return user;
    }

    //集合传参
    @RequestMapping("/jsonlist")
    public  List<TestUser> jsonlist(@RequestBody List<TestUser> users){
        viewData("/jsonlist", users);
        return users;
    }

    public void viewData(String path,Object s){
        System.out.println("Current path:"+path+"\ndata from web:"+s);
    }
}

注意：json传参参考postman，其中{{url2000}}是我在postman中设置的变量，值为http://localhost:2000，可以自行设置替换，也可直接填写http://localhost:2000。

json 数组传参

---

// 路径 http://localhost:2000/test/jsonarray
["strings1","strings12","strings13"]

---

json pojo传参

---

以下两张图参考第一张图

// 路径 http://localhost:2000/test/jsonpojo
{
    "id":1,
    "user":"needto"
}

---

json 集合传参

---

// 路径 http://localhost:2000/test/jsonlist
[
    {
    "id":1,
    "user":"needto"
    },
    {
    "id":2,
    "user":"needto2"
    }
]

最后，我们还有一个问题，那就是pojo的实体类属性名必须和前端json对应位置的名称一致，不然接不到数据，有什么办法能灵活控制吗？即使不一致也能接到数据呢？
答案当然是有的。
jackson为我们提供了一个注解@JsonProperty(“name”),只要将该注解放在实体类属性上面，将name改成对应前端位置的名称，就可不改变实体类属性名的情况下，将name替换原来的属性名来和前端映射啦！