springboot+ueditor+OSS+若依框架+vue-cli3前后端分离

最新推荐文章于 2024-11-25 10:07:00 发布

误入歧途的羔羊

最新推荐文章于 2024-11-25 10:07:00 发布

阅读量2.5k

点赞数 2

分类专栏： java 文章标签： vue java spring boot 前后端分离 vueUEditorWrap

本文链接：https://blog.csdn.net/xyllp/article/details/106311944

版权

本文介绍了如何在SpringBoot后端和Vue前端环境中集成UEditor，包括前端组件安装、配置代理、环境变量设置，以及后端的UEditor jar包引入、配置文件修改和Controller编写。在实施过程中，遇到并解决了前端路径映射、后台打包、图片访问路径和弹出窗口被遮挡等问题。

摘要由CSDN通过智能技术生成

一、准备UEditor

在官网下载合适的UEditor(这里使用的是jsp版本)

解压 $\color{red}{红色框部分是前端需要的}$ ， $\color{blue}{jsp文件夹里面的是后台需要的}$

二、vue-ueditor-wrap组件

安装vue-ueditor-wrap

npm i vue-ueditor-wrap

在main.js引入vue-ueditor-wrap

import VueUeditorWrap from 'vue-ueditor-wrap'

在main.js中进行全局组件挂载

Vue.component('vue-ueditor-wrap', VueUeditorWrap)

参考vue-ueditor-wrap的github

三、前端配置UEditor

在public目录下新建ueditor文件夹，将属于前端的ueditor内容复制到该文件夹内

在这里插入图片描述

在env文件中配置 $\color{red}{VUE\_ APP\_UEDITOR\_HOME\_URL}$ 和 $\color{red}{VUE\_APP\_UEDITOR\_SERVER\_URL}$ ，用于在vue文件中使用vue-ueditor-wrap

# 开发环境配置
ENV = 'development'

# 若依管理系统/开发环境
VUE_APP_BASE_API = '/dev-api'

# 路由懒加载
VUE_CLI_BABEL_TRANSPILE_MODULES = true

VUE_APP_UEDITOR_HOME_URL = '/ueditor/'

VUE_APP_UEDITOR_SERVER_URL = '/dev-api/ueditor'

在这里插入图片描述
说明：

红色部分：使用vue-ueditor-wrap需要配置的部分，这样做的好处是，当ueditor的服务器地址变化后，只需要修改环境配置文件即可，而不是到每个用到的页面去替换修改
蓝色部分：表示在哪个环境(开发环境，生产环境，…环境)的前缀，推荐配置的时候加上，这样进行NGINX反向代理或者接口访问的时候，可以统一入口url
绿色部分：ueditor后台访问地址

在vue.config.js中找到devServer配置Dev代理

// webpack-dev-server 相关配置
  devServer: {
   
    host: '0.0.0.0',
    port: port,
    proxy: {
   
      // detail: https://cli.vuejs.org/config/#devserver-proxy
      [process.env.VUE_APP_BASE_API]: {
   
        target: `http://localhost:8080`,
        changeOrigin: true,
        pathRewrite: {
   
          ['^' + process.env.VUE_APP_BASE_API]: ''
        }
      },
      // 加入ueditor服务端地址的代理
      [process.env.VUE_APP_UEDITOR_SERVER_URL]: {
   
        target: `http://localhost:8080`,
        changeOrigin: true,
        pathRewrite: {
   
          ['^' + process.env.VUE_APP_UEDITOR_SERVER_URL]: ''
        }
      },
    },
    disableHostCheck: true
  },

四、后台配置UEditor

在项目路径下新建lib目录，并将jsp文件夹下的jar包拷贝进去，值得注意的是，你需要查看一下jsp文件夹下的jar包在项目里面是不是已经有了，如果有的话，就不需要拷贝进去了， $\color{red}{其实就是缺哪个，拷贝哪个}$

在这里插入图片描述
因为我的项目里面已经有了其他的jar包，所以就只导入了json.jar和ueditor-1.1.2.jar

修改pom文件引入本地jar包依赖

<dependency>
       <groupId>ueditor</groupId>
       <artifactId>ueditor</artifactId>
       <version>1.1.2</version>
       <scope>system</scope>
       <systemPath>${project.basedir}/lib/ueditor-1.1.2.jar</systemPath>