网站内容编辑器(连接后台服务后台接口到目前为止,前端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", /* 图片访问路径前缀 */

  这里需要强调的是,配置的时候一定要记得加上协议头“”或“”,否则上传图片时也找不到前端请求!亲测~~~

  发送配置成功上传和反转的图片

  

  向偶像邓哥致敬! (图像入侵和删除)

  技术*敏*感*词*帖,欢迎批评指正交流!

0 个评论

要回复文章请先登录注册


官方客服QQ群

微信人工客服

QQ人工客服


线