【SpringBoot+Vue】001-前言、创建后台项目、处理跨域

﹏ヽ暗。殇╰゛Y 2023-10-05 11:52 4阅读 0赞

# **目录** #

一、前言

1、写在前面的话

2、致敬B站UP主

UP主ID：

视频地址：

二、创建后台项目

1、说明

2、步骤

第一步：创建Spring Boot项目

第二步：填写相关信息

第三步：勾选相关依赖

第四步：完成项目创建，编写application.yaml配置文件

第五步：在resources文件夹下新建一个mapper文件夹

第六步：启动项目，并访问http://localhost:9000/

第七步：编写HelloController进行测试

第八步：重启项目，并访问http://localhost:9000/hello

三、处理跨越

1、说明

2、步骤

创建一个配置类WebConfig即可

说明：

--------------------

# 一、前言 #

## 1、写在前面的话 ##

这个项目是跟着一位B站UP主做的，本来是没打算做笔记的，想着跟着做出来看看效果，了解一下开发流程。当我看了七八节课的时候发现里面确实有很多对我来说比较新的东西，虽然自己的Spring系列已经学得差不多了，但是距离做一个项目来说，仍然非常缺乏应有的经验。对于这些新的东西我不舍得就简单过一遍，否则记不住多少，而且写博客做笔记的话会更加认真、理解也许更加深刻，另一方面，以后用到类似的技术的时候也可以回来翻看。

怎么说呢？像我往常的思路吧，学习一个东西一定尽最大努力发挥其最大价值！我不希望学习像看电影一样，刚看完时心潮澎湃，过几天就风平浪静甚至已经忘记了，我无法阻挡自己忘记它，但我可以延缓忘记它的时间。当然，学习也应该有一种一丝不苟的态度，这样才能达到学习的目的。希望自己能通过对这个项目的学习能够了解到一些实际开发项目时的经验吧！

而且，我们这里做的是最详细的笔记，因为我是一个新手！

## 2、致敬B站UP主 ##

### UP主ID： ###

薄情寡义顽皮猫；

### 视频地址： ###

[https://www.bilibili.com/video/BV1q5411s7wH?p=1][https_www.bilibili.com_video_BV1q5411s7wH_p_1]

**已三连！**

# 二、创建后台项目 #

## 1、说明 ##

先创建一个简单的Spring Boot项目；

## 2、步骤 ##

### 第一步：创建Spring Boot项目 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70][]

### 第二步：填写相关信息 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 1][]

### 第三步：勾选相关依赖 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 2][]

### 第四步：完成项目创建，编写application.yaml配置文件 ###

**配置文件代码：**

# mysql
    spring:
      datasource:
        #MySQL配置
        driverClassName:  com.mysql.cj.jdbc.Driver
        url: jdbc:mysql://localhost:3306/zb?useUnicode=true&characterEncoding=UTF-8&useSSL=false&serverTimezone=UTC
        username: root
        password: root
    
    mybatis:
      mapper-locations: classpath:mapper/*.xml
      type-aliases-package: com.example.demo.model
    
    server:
      port: 9000

**项目截图：**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 3][]

### 第五步：在resources文件夹下新建一个mapper文件夹 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 4][]

### 第六步：启动项目，并访问[http://localhost:9000/][http_localhost_9000] ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 5][]

### 第七步：编写HelloController进行测试 ###

package com.zibo.sport.controller;
    
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.RestController;
    
    @RestController
    public class HelloController {
        
        @RequestMapping("/hello")
        public String hello(){
            return "Hello!";
        }
        
    }

### 第八步：重启项目，并访问[http://localhost:9000/hello][http_localhost_9000_hello] ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 6][]

# 三、处理跨越 #

## 1、说明 ##

我们的项目是前后端分离的，前后端都有自己的Tomcat环境，需要进行跨域处理。跨域处理的方法有很多，我们在后端进行跨域处理；

## 2、步骤 ##

### 创建一个配置类WebConfig即可 ###

package com.zibo.sport.util;
    
    import org.springframework.context.annotation.Configuration;
    import org.springframework.web.servlet.config.annotation.CorsRegistry;
    import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;
    
    @Configuration
    public class WebConfig extends WebMvcConfigurerAdapter {
        //这个方法被淘汰了，我们以后可以使用Nginx
    
        @Override
        public void addCorsMappings(CorsRegistry registry) {
            /*
             * 1、欲访问路径；
             * 2、请求来源；
             * 3、方法；
             * 4、允许携带；
             * 5、最大响应时间；
             */
            registry.addMapping("/**")
                    .allowedOrigins("http://localhost:8080","null")
                    .allowedMethods("GET","POST","PUT","OPTIONS","DELETE")
                    .allowCredentials(true)
                    .maxAge(3600);
        }
    }

### 说明： ###

跨域问题解决之后，我们的后端项目暂时搁置，下面进行前端项目的构建；

[https_www.bilibili.com_video_BV1q5411s7wH_p_1]: https://www.bilibili.com/video/BV1q5411s7wH?p=1
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20201018084713191.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20201018084931144.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/2020101808520683.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20201018085533618.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20201018085905104.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz,size_16,color_FFFFFF,t_70
[http_localhost_9000]: http://localhost:9000/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20201018085719212.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz,size_16,color_FFFFFF,t_70
[http_localhost_9000_hello]: http://localhost:9000/hello
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20201018090158481.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz,size_16,color_FFFFFF,t_70