Spring Boot + Vue3 前后端分离实战wiki知识库系统

Posted 2021-07-03 Hello 程序猿

V  fcsboy  学习交流

本文章向大家介绍Spring Boot + Vue3 前后端分离，实战wiki知识库系统，主要包括Spring Boot + Vue3 前后端分离，实战wiki知识库系统使用实例、应用技巧、基本知识点总结和需要注意事项，具有一定的参考价值，需要的朋友可以参考一下。

spring boot + vue3 前后端分离处理跨域问题

什么是跨域

请求同域资源：

在协议，域名 （或 ip 地址）相同，端口号相同下的请求资源，可以看做是同域资源

请求跨域资源：

请求的资源只要 是协议 、域名（或 ip 地址）、端口号中任意一个不同的资源都可以认为是跨域资源

如：

端口号不同

127.0.0.1:80 与 127.0.0.1:8888  属于跨域

域名 (或 ip 地址) 不同

127.0.0.1:80 与 www.baidu.com:80  属于跨域

前后端分离项目中的跨域问题

例如：

前端 vue项目： 127.0.0.1:70

后端 SpringBoot项目： 127.0.0.1:8888

我们在前端 vue 项目中存放页面，页面中的数据是通过 axios 发起异步请求从 后端 SpringBoot项目中获取的

因此当我们访问前端页面时候， 我们可以理解为所在的当前所在 127.0.0.1:70 域上，所以访问这个127.0.0.1:70 域 的资源都是OK的，但如果使用 js 的方法访问其他域的资源时 就会出现跨域问题

本次教程拿 验证码 举例：

浏览器输入 127.0.0.1:70 访问登录资源，在 login.vue 中的 created 方法中调用 获取验证码方法 ( 发起axios 请求 127.0.0.1:8888 )

此时就会出现跨域的问题

3、方法一：SpringBoot后端进行处理
在 每个 Controller 类上加入 @CrossOrigin 注解

或者

在 Controller的基类中加上 @CrossOrigin 注解然后其他 Controller 类就有了这个 @Controller

此时跨域访问就不会报错了。

login.vue 访问的后端地址:

4、方法二：在Vue前端进行处理
浏览器 在同一个页面访问不同的域 是存在跨域问题的

但 服务器之间的访问是 没有跨域问题

因此 需要在前端设置代理， 通过代理访问 SpringBoot后端API

安装

cnpm install axios

配置请求 baseURL

在 src / utils / request.js 中

// 创建axios实例
const service = axios.create({
baseURL: '/api',
timeout: 10000
})

/*如果直接把baseURL设置为http://localhost:8888/xxx
然后进行接口访问是会报跨域的，所以下边继续设置代理，
也就是把请求拦截，然后代理发收，也就是在跨域的两者之间做一个中间站，
这个中间站是建立在和前端同域下的，所以二者交互不跨域。
又因为中间站是一个小服务器，和后台交互也不会存在跨域的问题。因此这个方法可以解决跨域
前边提到baseURL设置啥都没事，反正会被拦截，做处理，那我们就索性不设置http://localhost:8888/xxx，
倒不如直接设置/api，这样在处理拦截的时候更方便一些
*/
这样会为所有的 请求url 前面都加上 ‘/api’，方便做 统一代理

配置 proxy

在 vue.config.js 中

module.exports = {
  devServer: {
    // 自动打开浏览器
    open: true,
    port: 70,
    proxy: {
  
      '/api': {
        target: `http://localhost:8888/ruoyi`,
        changeOrigin: true,//开启代理：在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}

login.vue 页面发送验证码的请求

请求 API

import request from '@/utils/request'
// 获取验证码
export function getCodeImg() {
  return request({
    url: '/captcha/captchaImage?type=math',
    method: 'get'
  })
}

相当于请求遇见 /api 才做代理，但真实的请求中没有/api，所以在pathRewrite中把 /api 去掉, 这样既有了标识, 又能在请求接口中把 /api 去掉

前后端分离，流程审批，权限管理

前端从后端剥离，形成一个前端工程，前端只利用Json来和后端进行交互，后端不返回页面，只返回Json数据。前后端之间完全通过public API约定。
前端 Vue + ElementUI + Vue router + Vuex + axios + webpack