RESTful具体案例-基于RESTful页面数据交互

基于RESTful页面数据交互

需求分析

（说明:此次案例的重点是在SpringMVC中如何使用RESTful实现前后台交互，所以本案例并没有和数据库进行交互，所有数据使用假数据来完成开发。）

需求一:“新增”图片如下，将新增图书的数据传递到后台，并在控制台打印。

需求二：图片列表查询，从后台返回数据，将数据展示在页面上

步骤分析

• 搭建项目导入jar包

【步骤一：创建一个Web的Maven项目】
【步骤二：pom.xml添加Spring依赖】：

<?xml version="1.0" encoding="UTF-8"?>

<project xmlns="http://maven.apache.org/POM/4.0.0" 
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 
http://maven.apache.org/xsd/maven-4.0.0.xsd">
  <modelVersion>4.0.0</modelVersion>
  
  <groupId>com.itheima</groupId>
  <artifactId>springmvc_07_rest_case</artifactId>
  <version>1.0-SNAPSHOT</version>
  <packaging>war</packaging>
 
  <dependencies>
    <dependency>
      <groupId>javax.servlet</groupId>
      <artifactId>javax.servlet-api</artifactId>
      <version>3.1.0</version>
      <scope>provided</scope>
    </dependency>
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-webmvc</artifactId>
      <version>5.2.10.RELEASE</version>
    </dependency>
    <dependency>
      <groupId>com.fasterxml.jackson.core</groupId>
      <artifactId>jackson-databind</artifactId>
      <version>2.9.0</version>
    </dependency>
  </dependencies>

  <build>
    <plugins>
      <plugin>
        <groupId>org.apache.tomcat.maven</groupId>
        <artifactId>tomcat7-maven-plugin</artifactId>
        <version>2.1</version>
        <configuration>
          <port>80</port>
          <path>/</path>
        </configuration>
      </plugin>
    </plugins>
  </build>
</project>

【步骤三：创建对应的配置类】：

public class ServletContainersInitConfig extends 
AbstractAnnotationConfigDispatcherServletInitializer {
    protected Class<?>[] getRootConfigClasses() {
        return new Class[0];
   }
    protected Class<?>[] getServletConfigClasses() {
        return new Class[]{SpringMvcConfig.class};
   }
    protected String[] getServletMappings() {
        return new String[]{"/"};
   }
    //乱码处理
    @Override
    protected Filter[] getServletFilters() {
        CharacterEncodingFilter filter = new CharacterEncodingFilter();
        filter.setEncoding("UTF-8");
        return new Filter[]{filter};
   }
}
 
@Configuration
@ComponentScan("com.itheima.controller")
//开启json数据类型自动转换
@EnableWebMvc
public class SpringMvcConfig {
}

【步骤四：编写模型类Book】：

public class Book {
    private Integer id;
    private String type;
    private String name;
    private String description;
    //setter...getter...toString略
}

【步骤五：编写BookController】：

@Controller
public class BookController {  
}

【最终目录】：

• 编写Controller类，提供两个方法，一个用来做列表查询，一个用来做新增

@RestController
@RequestMapping("/books")
public class BookController {
	//需求一，新增图书数据到后台
    @PostMapping
    public String save(@RequestBody Book book){//RequestBody接收JSON数据
        System.out.println("book save ==> "+ book);
        return "{'module':'book save success'}";
   }
   //需求二，将后台数据展示到页面
 	@GetMapping
    public List<Book> getAll(){
        System.out.println("book getAll is running ...");
        //把后台数据book对象放到集合List中
        List<Book> bookList = new ArrayList<Book>();
        Book book1 = new Book();
        book1.setType("计算机");
        book1.setName("SpringMVC入门课程");
        book1.setDescription("小试牛刀");
        bookList.add(book1);
        
        Book book2 = new Book();
        book2.setType("计算机");
        book2.setName("SpringMVC实战课程");
        book2.setDescription("一代宗师");
        bookList.add(book2);
        
        Book book3 = new Book();
        book3.setType("计算机");
        book3.setName("SpringMVC实战教程进阶");
        book3.setDescription("一代宗师呕心沥血");
        bookList.add(book3);
        
        return bookList;
        }
}

• 使用PostMan进行测试

【测试新增】：

{
	"type":"计算机从书"，
	"name":"SpringMVC终极开发"，
	"description":"这是一本好书"
}

【测试查询】：

• 将前端页面拷贝到项目中
  【步骤一：拷贝静态页面】：将前端页面下的所有内容拷贝到项目的webapp目录下：
  
  【步骤二：访问pages目录下的books.html】：打开浏览器输入http://localhost/pages/books.html
  
  （1）、出现错误的原因?
  
  SpringMVC拦截了静态资源，根据/pages/books.html去controller找对应的方法，找不到所以会报404的错误。
  （2）、SpringMVC为什么会拦截静态资源呢?
  
  （3）、解决方案?
  SpringMVC需要将静态资源进行放行。

@Configuration

public class SpringMvcSupport extends WebMvcConfigurationSupport {
    //设置静态资源访问过滤，当前类需要设置为配置类，并被扫描加载
    @Override
    protected void addResourceHandlers(ResourceHandlerRegistry registry) {
        //当访问/pages/????时候，从/pages目录下查找内容
 		registry.addResourceHandler("/pages/**").addResourceLocations("/pages/");
        registry.addResourceHandler("/js/**").addResourceLocations("/js/");
        registry.addResourceHandler("/css/**").addResourceLocations("/css/");
        registry.addResourceHandler("/plugins/**").addResourceLocations("/plugins/")
;
   }
}

该配置类是在config目录下，SpringMVC扫描的是controller包，所以该配置类还未生效，要想生效需要将SpringMvcConfig配置类进行修改

@Configuration
@ComponentScan({"com.itheima.controller","com.itheima.config"})
@EnableWebMvc
public class SpringMvcConfig {
}
或者
@Configuration
@ComponentScan("com.itheima")
@EnableWebMvc
public class SpringMvcConfig {
}

• 页面发送ajax请求
  
  
  
  

• 完成页面数据的展示