网站内容编辑器(连接后台服务后台接口到目前为止,前端ueditor静态资源已配置完毕)
优采云 发布时间: 2022-03-23 17:00网站内容编辑器(连接后台服务后台接口到目前为止,前端ueditor静态资源已配置完毕)
连接后台服务
后台界面
至此,前端ueditor静态资源配置完毕,接下来配置后台文件上传接口。
打开 ueditor.config.js 文件并找到如图所示的 serverUrl 字段。我这里配置一下
serverUrl: window.location.origin + '/api/ueditor/jsp/controller.jsp'
这里需要说明的是,前后端是分开的。前端需要在根目录config文件夹下的index文件中配置后端服务代理地址来映射后端服务。我把前端的 /api 目录映射到后端服务的根目录。如图,在dev项中配置proxyTable,使用/api目录映射后台服务接口
所以在配置serverUrl的时候window.location.origin + '/api'找到后台接口,'ueditor/jsp/controller.jsp'映射ueditor服务路径
(因为ueditor的配置是从前端角度分析的,所以java中的contoller是如何实现的,这里不再详述,其他如php、net、asp等类似)
地址前缀
至此,整个前端配置工作已经完成。打开组件并尝试上传图片。观察网络,可以得到后台响应,但是有问题。图片上传成功后,在编辑框中没有体现。显然,只显示图片的名称,没错!还有一个配置项
在后台打开jsp/config.json文件,找到imageUrlPrefix字段,即图片访问路径前缀。
由于后台返回的图片地址是相对地址,如果不配置,图片的绝对路径将从前端当前目录开始计算。可以想象,图片上传成功后,会返回图片在后台的相对地址,那么用前端页面的地址获取的绝对路径肯定有问题。
解决方法是配置 imageUrlPrefix 字段。假设后台的地址是localhost:8080
"imageUrlPrefix": ":8080/root", /* 图片访问路径前缀 */
背景的根路径是root,所以前端在上传图片的时候会用这个前缀加上图片的相对地址,得到图片的绝对地址,并反向显示,从而实现图片的显示
当然,你也可以把这个地址配置为前端路径,使用前面提到的代理方式来访问镜像地址。假设前端地址是localhost:8081
"imageUrlPrefix": ":8081/api", /* 图片访问路径前缀 */
这里需要强调的是,配置的时候一定要记得加上协议头“”或“”,否则上传图片时也找不到前端请求!亲测~~~
发送配置成功上传和反转的图片
向偶像邓哥致敬! (图像入侵和删除)
技术*敏*感*词*帖,欢迎批评指正交流!