栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > 后端开发 > Java

springMVC与前端交互

Java 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

springMVC与前端交互

第一步 加依赖

pom.xml

    
      org.springframework
      spring-webmvc
      5.2.10.RELEASE
    
    
          javax.servlet
          javax.servlet-api
          3.1.0
          provided
    
    
        com.fasterxml.jackson.core
        jackson-databind
        2.13.3
    
    
      org.projectlombok
      lombok
      1.18.22
  

其中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


      
        
          org.apache.tomcat.maven
          tomcat7-maven-plugin
          2.1
          
        	2000 
            / 
          
        
          
              org.apache.maven.plugins
              maven-compiler-plugin
              
                  8
                  8
              
          
      
  
第四步 编写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 strings){
        viewData("/list", strings);
        return "list";
    }

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

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

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

    //集合传参
    @RequestMapping("/jsonlist")
    public  List jsonlist(@RequestBody List 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替换原来的属性名来和前端映射啦!

暑期编程PK赛 得CSDN机械键盘等精美礼品!
转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/1016919.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号