前后端连接（springboot+vue）--项目阶段3

一时失言乱红尘 2024-04-26 04:18 5阅读 0赞

**目录**

前言介绍

一、整体流程介绍

二、前后端连接步骤

（一）后端配置

（二）前端配置

（三）前端页面与后端实体属性绑定并发起请求

五、前后端打通页面

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

## 前言介绍 ##

>  **前后端分离的SpringBoot项目**
> 
>  **后端：**本文详细讲解了Java的springboot项目的创建到mysql数据库和表的创建，并使用nybatis-plus实现了后端对数据库的增删改查。文章的后端页面还有视频可以看，是比较适合小白的一个教程（实际开发使用mybatis比较多，手动写SQL语句）
> 
> **前端：**然后创建前端vue页面，使前后端能连接起来。vue使用的是Element-ui的组件去完成的。通过异步请求的方式，不浪费资源。
> 
> **连接方式：** 他们前后端连接起来是通过axios去连接的。

## **一、整体流程介绍** ##

**后端（1.7）**

[1.MySQL建立数据库和表---后端建立springboot项目-----使用springboot+mybatis-plus整合进行增删改查][1.MySQL_---_springboot_-----_springboot_mybatis-plus]

**前端（除了1和7都是）**

[2.下载node.js][2._node.js]\-----[创建vue项目（含有路由][vue]）

[3.引入element-ui--使用element-ui组件创建一个新页面][3._element-ui--_element-ui]

4.使用npm下载axios（本文四**---**二.7）

5.使用axios解决前后端跨域问题（本文四）

6.前端request设置请求后端的路径（本文四**---**二.8）

**7.**去后端也加上一个允许前端请求的类(本文四**---**一)

8.在新建的前端页面里面把死数据改成连接后端的活数据（以下全部在五里面）

9.通过钩子函数去请求后端接口

10.返回给当前页面的模板对象属性

11.运行前后端，访问前端页面成功获取到后端数据

## 二、前后端连接步骤 ##

#### （一）后端配置  ####

说明：前端和后端的端口不一样，所以浏览器不能直接请求连接，要通过axiso去配置他们连接的路径这些，才能实现通信。

**6.**在后端spring boot项目新建一个包**config**，里面建一个和前端请求通信的配置类**CorsConfig**

把这个复制到类里面就好了

> 解读：允许来自前端8080端口的访问

package com.example.jiu.config;
    
    import org.springframework.context.annotation.Bean;
    import org.springframework.context.annotation.Configuration;
    import org.springframework.web.bind.annotation.CrossOrigin;
    import org.springframework.web.cors.CorsConfiguration;
    import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
    import org.springframework.web.filter.CorsFilter;
    
    @CrossOrigin
    @Configuration
    public class CorsConfig {
    
        //当前跨域请求最大有效时长。这里默认1天
        private static final long MAX_AGE = 24 * 60 * 60;
    
        @Bean
        public CorsFilter corsFilter() {
            UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
            CorsConfiguration corsConfiguration = new CorsConfiguration();
            corsConfiguration.addAllowedOrigin("http://localhost:8080"); // 1 设置前端的访问源地址
            corsConfiguration.addAllowedHeader("*"); // 2 设置访问源请求头
            corsConfiguration.addAllowedMethod("*"); // 3 设置访问源请求方法
            corsConfiguration.setMaxAge(MAX_AGE);
            source.registerCorsConfiguration("/**", corsConfiguration); // 4 对接口配置跨域设置
            return new CorsFilter(source);
        }
    }

如下：

![170733665a7547c6ad6b23c61061a17a.png][]

####  ####

#### （二）前端配置 ####

**7.**前端首先要下载axios，在前端项目里面使用命令去进行下载就好了

npm install axios --save

**8.**Vue项目的**src**下新建一个**utils**的文件包，然后包里面新建一个**request.js**文件，里面写着向后端的80端口发起请求的配置

import axios from 'axios'
    
    const request = axios.create({
        baseURL: 'http://localhost:80',
        timeout: 5000
    })
    export default request

如下：

![ac0fab1161574735b5493fd0c9c219ad.png][]

#### （三）前端页面与后端实体属性绑定并发起请求 ####

在UserView.vue页面里面

**9.**把前端写死的数据换成和后端对应的数据并向后端发起请求

<template>
      <div>
          <el-table
        :data="tableData"
        style="width: 100%">
        
        <el-table-column
          prop="id"                 
          label="ID"
          width="180">
        </el-table-column>
        <el-table-column
          prop="username"
          label="账户"
          width="180">
        </el-table-column>
        <el-table-column
          prop="password"
          label="密码">
        </el-table-column>
      </el-table>
      </div>
    </template>
    
    <script>
    // 2.导入request请求：因为request没有放入全局文件main.js里面，这个想要使用必须自己导入
    import request from '@/utils/request';
    export default {
    data() {
      return {
        // 3.tableData是上面模板里面的属性，要对这个属性进行插入后端的数据，所以这个数组里面写死的数据全部给删了
        tableData: []
      }
    },
    //4.定义一个钩子函数，当这个页面被加载的时候，这个钩子就向后端发起请求拿到数据
    mounted(){
      this.gouzi();   //这里为了方便，就自定义命名为钩子，实际开发中有规范的命名
    },
    //5.定义一个方法
    methods:{
      //6.谁的方法？钩子的方法
      gouzi(){
        //7.钩子要干嘛?向后端发起请求,明确说明使用get还是post，还有后端的哪里发起请求
        //request文件里面封装了后端的端口，这里相当于访问是后端的ttp://localhost:80/user
        request.get('/user')
        .then(Response=>{
          //8.Response拿到数据要给谁啊?当前是给模板data,  data的哪个属性？当然是本页面的tableData数组里面了
           this.tableData= Response.data
        })
      }
    }
    }
    </script>

## 五、前后端打通页面 ##

把前后端都开启运行起来，然后前端8080端口就可以得到后端80端口mysql数据库的这个数据了

![3154664d29a54010b1b8de6094a0c4b8.png][]

**有什么问题都可以评论区留言，看见都会回复的**

**如果你觉得本篇文章对你有所帮助的，多多支持吧！！！**

**点赞收藏评论，当然也可以点击文章底部的红包或者👇订阅付费文章创作支持一下了。抱拳了！**

> **vip文章：**[http://t.csdn.cn/Uq5j1][http_t.csdn.cn_Uq5j1]
> 
> **bug大全订阅文章**：[http://t.csdn.cn/j6UyR][http_t.csdn.cn_j6UyR]

[1.MySQL_---_springboot_-----_springboot_mybatis-plus]: https://blog.csdn.net/m0_52861000/article/details/132247104?spm=1001.2014.3001.5502
[2._node.js]: https://blog.csdn.net/m0_52861000/article/details/129127440?spm=1001.2014.3001.5502
[vue]: https://blog.csdn.net/m0_52861000/article/details/130181571
[3._element-ui--_element-ui]: https://blog.csdn.net/m0_52861000/article/details/130194365
[170733665a7547c6ad6b23c61061a17a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/638e85382b6b4f22ad3e31d38ddc4f28.png
[ac0fab1161574735b5493fd0c9c219ad.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/c3b8e1a72ba541058314a2805f07eec3.png
[3154664d29a54010b1b8de6094a0c4b8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/bd5fa2d5153c4055aba2fdd4a3e8be7f.png
[http_t.csdn.cn_Uq5j1]: http://t.csdn.cn/Uq5j1
[http_t.csdn.cn_j6UyR]: http://t.csdn.cn/j6UyR