详解vue.js+UEditor集成 [前后端分离项目]

大佬教程收集整理的这篇文章主要介绍了详解vue.js+UEditor集成 [前后端分离项目]，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

首先，谈下这篇文章中的前后端所涉及到的技术框架内容。

虽然是后端的管理项目，但整体项目，是采用前后端分离的方式完成，这样做的目的也是产品化的需求；

前端，vue+vuex+vue router+webpack+elementUI的方案完成框架的搭建，其中用到了superUI来作为后端登陆之后的主页面框架，中间集成vue的大型单页应用；

后端，springboot+spring+springmvc+spring serurity+mybatis+maven+redis+dubbo

+zookeeper的方式来构建项目框架和管理，提供给前端restful风格的接口。此处还提供app端、PC WEB端的接口。

UEditor之前一直有在项目中使用，作为国内开源的富文本编辑器，有百度的强大技术支持，整体来说是不错的选择，百度也提供了PHP、asp、.net、jsp的版本。原有的项目是采用整体式的开发方式，采用的是jsp的页面开发技术，所以集成起来相对来说更加容易，只需要按照文档的方式将前端集成进去，然后后端拿到源码之后，针对文件上传的类修改最终存储的方法即可将文件等上传到本身的服务器了。

然而，由于决定了做前后端分离的方式，必然就会有新的坑，特别是还选择了新的技术vue.js+elementUI的这种方式。那么也只能放手一搏，不多啰嗦，介绍完，马上开始正事。

1、下载UEditor官网最新的jsp版本的包，下载完成解压之后得到一个ueditor1_4_3_3-utf8-jsp的文件夹，里面包含的内容如下：

除了jsp的文件夹之外，其余的文件和文件夹复制到前端项目中的static用于存放静态文件的目录下，结构如下：

这里特别说明jsp目录下的资源为何不放进来，因为我们是vue搭建的项目，jsp页面肯定是不会放在前端的项目中的，包括config.json也放在后端用于解析，这里后面会解释这样做的原因。

2、前端将文件放进来之后，暂时先这样，咱们来整理后端的东西。这里将jsp目录下的lib目中的ueditor.jar文件中的所有类全部拿出来（具体方式自己决定，反编译工具或者拿到源码都可以）,放到后端项目中，然后在control层新建一个UeditorController.java的类，如下：

插件相关的请求 * @author Guoqing * */ @RestController @CrossOrigin @requestMapping("/sys/ueditor") public class UeditorController extends BaseController {

@requestMapping(value = "/exec")
@ResponseBody
public String exec(httpServletrequest request) throws UnsupportedEncodingException{
request.setCharacterEncoding("utf-8");
String rootPath = request.getRealPath("/");
return new ActionEnter( request,rootPath).exec();
}
}

大佬总结

以上是大佬教程为你收集整理的详解vue.js+UEditor集成 [前后端分离项目]全部内容，希望文章能够帮你解决详解vue.js+UEditor集成 [前后端分离项目]所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。