历史上最实用springboot加vue实现前后端分离

最新推荐文章于 2024-08-31 16:34:05 发布

梅子丨朱

最新推荐文章于 2024-08-31 16:34:05 发布

阅读量1.5w

点赞数 15

分类专栏：前后端

本文链接：https://blog.csdn.net/Mr_carry/article/details/100537047

版权

前后端专栏收录该内容

1 篇文章 1 订阅

订阅专栏

1.导读

这篇文章主要是讲了目前很火的springboot和vue实现前后端分离的web开发模式，主要是探究前后端分离的一种框架模式开发。属于基本入门篇，其中springboot实现了和spring data JPA的整合实现后端数据交互，其中也会探讨相关框架的整合和相似框架的对比，对于想了解和走进前后端分离的伙伴来说是一个非常值得学习的前后端入门教程。

2.前后端分离。

对于前后端分离来说，对于大部分web开发来说都是利大于弊，相对而言，业务逻辑复杂的项目或者项目庞大的适合前后端分离，一般项目较小或者修改变动较小的项目可以考虑前后端不分离。不过现在的硬件空间便宜的环境下，笔者还是非常建议前后端分离的。

好处：

1）前后端解耦，各自职责明确，分工合理，开发效率较高。

2）减轻服务器压力，各自配置，各自运作，更容易维护。

3）项目模块化更明显，业务逻辑更加清晰，不至于等到项目规模过大的时候无法维护或者更新项目。

4）方便单元测试以及bug调试，互不相干，前后端的人技术职责分开，减少前后端的人打架的概率，技术成本更少...

不好的地方：

1）搭建项目成本相对高一些，因为需要前后端项目同时运作。

2）对于项目的初步设计需要有很好的文档说明，大家都按照一定的约定来开发，这就考验项目技术经理的能力了。

不好的地方：

3.实现

首先搭建一个基本的springboot的项目，建好基本的目录结构。如下图：

这个就是基本的springboot的目录，

1）首先dao层是数据持久层，很多道友也比较喜欢叫它mapper层，起作用是操作sql语句实现和数据库的数据交互。

2）其次是service层，起作用是接收dao层的方法并且封装成适合业务逻辑的一条条服务，目的是提供给controller层调用，其中为了屏蔽掉太过复杂的业务逻辑，我们设置service层为接口，同目录下建立一个对应的实现Impl层。

3）再次是entity层，这个好理解，就是数据实体类，java是一门面向对象的语言，所以我们面向数据库也是实体封装好的，也就意味着我们不需要太多的去关心数据库属性的细节，只需要关心实体类就行了。

4）最后是controller层，这个就是控制service的每一条服务应该流向哪里去的控制器，分发器。

随着上面的顺序，首先解决dao层，怎样和数据库交互，老的方式我们就不说了，这里是整合spring data JPA。详情请看：https://blog.csdn.net/zhuzhezhuzhe1/article/details/80561449

基本上来说spring data JPA就是想实现后端数据持久层天下归一，让我们更少的去配置和编写相关的sql。重要的是srping data JPA实现了大部分的sql功能的函数，还可以执行自己写的sql语句和自定义方法。比如：

这样呢我们就可以在controller层直接调用该方法，如下service层：

controller层：

我们返回的是一个Map，也就是数据，通常里面有很多各种类型的数据，叫接口数据。前后端分离后端只负责数据，不负责页面逻辑。所以接下来问题就是前端如何获取这些数据，我们的目的也是我只提供接口文档的数据，其他的前端的我不关心。

上面的接口通过http://localhost:8080/zh就可以访问到，postmen里面测试如下：

至此，后端算是完了。

前端我们搭建一个简单的vue项目，项目结构如下：

一般利用vue都是采用axios来访问后端数据，故我们在App.vue里简单的写一个测试程序：

<template>
  <div class="info">
    这是从本地后端项目获取的json数据：
    <button v-on:click="postInfo">Greet</button>
    <br>
    {{this.info}}
  </div>
</template>

<script>
  export default {
    name: 'App',
    data() {
      return {
        info: {}
      }
    },
    methods: {
      postInfo: function () {
        this.$axios.get('http://localhost:8089/zh')
          .then(response => (this.info = response))
          .catch(function (error) { // 请求失败处理
            console.log(error);
          });
      }
    }
  }
</script>
<style>
  .info{
    width:100%;
    height: 100%;
  }
</style>

当然，这是失败的，因为跨域请求是会被阻止的，也就是说在本机上两个不同的项目访问也是跨域。解决办法就是我们在后端加一个配置类CorsConfig：

里面写上：

package com.example.demo3.controller;

import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurationSupport;

public class CorsConfig extends WebMvcConfigurationSupport {
    @Override
    protected void addCorsMappings(CorsRegistry registry) {
        System.out.println("----------------------");
        registry.addMapping("/**")
                .allowedOrigins("*")
                .allowCredentials(true)
                .allowedMethods("GET", "POST", "DELETE", "PUT")
                .maxAge(3600);
    }
}

这里就是后端允许跨域访问：

前端vue简单的设置一下访问代理路径：

在config下的index.js里的dev下的proxyTable写上访问的后端接口路径：

proxyTable: {
  // proxy all requests starting with /api to jsonplaceholder
  '/api': {//虚拟目录
    target: 'http://localhost:8089',//后台NodeSpringboot项目的请求网址
    changeOrigin: true,
    pathRewrite: {
      '^/api': ''//由于上面的虚拟目录实际上是不存在的，不去掉的话访问的时候显示的url会变成'http://localhost:3000/api'，所以得去掉
    }
  }

后面的访问路径改成/api/zh就能实现跨域访问了，注意这里的localhost换成了"/api"：

methods: {
  postInfo: function () {
    this.$axios.get('/api/zh')
      .then(response => (this.info = response))
      .catch(function (error) { // 请求失败处理
        console.log(error);
      });
  }
}

最后的vue项目访问的结果为：