使用VSCode建立Vue+Spring项目（二）：后端项目的开发

系列文章目录

使用VSCode建立Vue+Spring项目（一）：相关软件的安装
使用VSCode建立Vue+Spring项目（二）：后端项目的开发
使用VSCode建立Vue+Spring项目（三）：前后端结合（实现登录页面的跳转）

文章目录

系列文章目录前言一、构建后端spring项目

1.在VSCode中新建后端项目2.配置application.properties文件3.在pom.xml中添加配置4.新建HelloController类5.运行项目二、测试能否返回JSON数据

1.创建Book类，BooksController类2.运行项目3.补充三、跨域资源共享(CORS支持)

1.后端创建BookController类2.新建一个前端项目3.运行前后端项目4.前后端是如何实现数据跨域的？总结

前言

本章介绍如何构建后端spring项目、测试能否成功返回JSON数据，以及前后端如何实现跨域资源共享。

一、构建后端spring项目 1.在VSCode中新建后端项目

输入Ctrl + Shift + P 打开命令面板，输入Spring，选择maven类型工程。选择spring boot版本：2.6.5

选择工程的语言：java ，版本8

设置Group Id为com.example

设置Artifact Id为demo

选择packaging类型为jar

选择java版本为8

选择依赖支持Thymeleaf,Spring Boot DevTools,Spring Web,Lombok,MySQL Driver

选择构建项目的本地存储地址：D:StudyCode
将项目添加到VSCode工作区：

项目结构如图所示：

2.配置application.properties文件

server.port=8443
server.error.path=/error

server.port配置了web容器的端口号。
error.path配置了当项目出错时跳转去的页面。

注意：项目内置有tomcat。

在srcmainresourcesstatic文件夹下新建文件夹error，新建4xx.html，5xx.html，500.html。

4xx.html代码：




    
    Title


404

5xx.html代码：




    
    Title


500

500.html代码：




    
    Title


500-html

3.在pom.xml中添加配置


		8
		UTF-8
		UTF-8

4.新建HelloController类

在路径srcmainjavacomexampledemo下，新建文件夹controller。在controller下新建HelloController.java文件，代码如下：

package com.example.demo.controller;

import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class HelloController {
    @GetMapping("/hello")
    public String hello() {
        // int i=1/0;
        return "hello spring boot!";
    }
}

5.运行项目

右键DemoApplication.java，选择Run Java。

在浏览器中输入：http://localhost:8443/hello
可以看到显示结果：hello spring boot!

二、测试能否返回JSON数据 1.创建Book类，BooksController类

在comexampledemocontroller路径下创建Book类、BooksController类。

Book.java源码：

package com.example.demo.controller;

import java.util.Date;

import com.fasterxml.jackson.annotation.JsonFormat;
import com.fasterxml.jackson.annotation.JsonIgnore;

public class Book {
    private String name;
    private String author;
    @JsonIgnore
    private int price;
    @JsonFormat(pattern = "yyyy-MM-dd")
    private Date publicationDate;

    public String getName() {
        return name;
    }

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

    public String getAuthor() {
        return author;
    }

    public void setAuthor(String author) {
        this.author = author;
    }

    public int getPrice() {
        return price;
    }

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

    public Date getPublicationDate() {
        return publicationDate;
    }

    public void setPublicationDate(Date publicationDate) {
        this.publicationDate = publicationDate;
    }
}

BooksController.java源码：

package com.example.demo.controller;

import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;
import java.util.Date;

@RestController
public class BooksController {
    @GetMapping("/books")
    public Book book(){
        Book book = new Book();
        book.setAuthor("罗贯中");
        book.setName("三国演义");
        book.setPrice(30);
        book.setPublicationDate(new Date());
        return book;
    }
}

2.运行项目

右键DemoApplication.java，选择Run Java运行项目。
在浏览器中输入localhost:8443/books，得到结果显示：数据类型为JSON数据。

3.补充

@RequestMapping和@GetMapping区别：
（1）@RequestMapping可以指定GET、POST请求方式。
（2）@GetMapping等价于@RequestMapping的GET请求方式。

@RestController注解：
相当于@ResponseBody ＋ @Controller合在一起的作用。

三、跨域资源共享(CORS支持) 1.后端创建BookController类

该类包含三个接口，分别为增加、删除、获取。

BookController.java源码

package com.example.demo.controller;

import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.DeleteMapping;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
@RequestMapping("/book")
public class BookController {
    @PostMapping("/")
    @CrossOrigin(value="http://localhost:8081",maxAge=1800,allowedHeaders="*")
    public String addBook(String name){
        return "receive:"+name;
    }

    @DeleteMapping("/{id}")
    @CrossOrigin(value="http://localhost:8081",maxAge=1800,allowedHeaders="*")
    public String deleteBookById(@PathVariable Long id){
        return String.valueOf(id);
    }

    @GetMapping("/")
    @CrossOrigin(value="http://localhost:8081",maxAge=1800,allowedHeaders="*")
    public String getBookName(){
        return "三国演义";
    }
}

代码解读：

@CrossOrigin中的value表示支持的域，这里表示来着localhost:8081域的请求是支持跨域的。maxAge表示探测请求的有效期，对于DELETE、PUT请求或有自定义头信息的请求，在执行过程中会先发送探测请求，探测请求不用每次都发送，可以配置一个有效期，有效期过了之后才会发送探测请求。这个属性默认是1800秒，即30分钟。allowedHeaders表示允许的请求头，*表示所有的请求头都被允许。 2.新建一个前端项目

新建spring boot项目com.example.cor，在main/resource/static文件夹下引用jquery3.3.1.js，并新建HTML文件：index.html(代码如下)




    
    客户端

配置application.properties文件，写入内容：

server.port=8081

3.运行前后端项目

(1)运行后端项目：在终端运行，输入：

mvn spring-boot:run

(2)运行前端项目：在终端运行，如图所示。

(3)浏览器中输入地址：localhost:8081

(4)轮流点击三个按钮

4.前后端是如何实现数据跨域的？

以下是我个人的理解：

总结

通过以上三个案例，基本可以掌握如何创建后端项目、如何运行项目，也能够理解跨域资源共享是如何实现的。
下一章，将开始尝试用VUE前端+Spring后端来实现登录页面的跳转。

使用VSCode建立Vue+Spring项目（二）：后端项目的开发

404

500

500-html

Java相关栏目本月热门文章