基于springboot+vue+element+ueditor实现前后端分离的富文本框实现

最近工作中用到了vue+element,springboot这种前后端分离的开发模式。vue+element开发还是轻松加愉快的,不爽的就是发现没有副文本框编辑器Orz~github一番,发现不少资源:vue-quill,vue-kinderitor,vue-ueditor...


刚开始时用的是vue-quill(https://github.com/surmon-china/vue-quill-editor, ps:虽然这货简单,扩展性也较强,但是提供的基本功能太少,在开发插件费时费力,所以pass掉);


再来用了kindeditor(http://kindeditor.net/demo.php),这货也还好用。但是不是今天的主角;


最后就是主角ueditor了(http://ueditor.baidu.com/),在不跨域的情况下是没问题,但是单文件上上传跨域存在问题(对此功能直接放弃,对此部分的实现方式github上有,地址一时找不到了)。

接下来开始贴代码:

<template>
  <div>
    <script :id=id type="text/plain"></script>
  </div>
</template>
<script>
  import '../../static/ueditor/ueditor.config.js'
  import '../../static/ueditor/ueditor.all.min.js'
  import '../../static/ueditor/ueditor.parse.min.js'
  export default {
    name: 'ueditor',
    data () {
      return {
        editor: null,
        _content: "",
        loadComplete: false
      }
    },
    props: {
      id: {
        type: String,
        
  • 1
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 7
    评论
在现代化的软件开发中,前后端分离是一种较为流行的开发模式,因为这种模式具有很多优点:增加了系统的可扩展性、提高了开发效率、让前端人员和后端人员更专注于自己的领域等等。基于springbootvue,我来介绍一下如何实现宿舍管理系统的前后端分离开发。 首先,我们需要搭建好springbootvue的开发环境。接着,创建springboot项目,并集成mybatis等技术实现基本的后端功能。然后,使用vue-cli创建前端项目,并引入axios、vue-router等技术实现前端页面的开发和数据请求。在这一过程中,我们要注意前后端分离的原则,即前端和后端应该各自独立运行,可以分别部署在不同的服务器上,通过http接口进行通信。 接下来,我们就可以开始对宿舍管理系统进行开发了。我们可以先完成一些基本的功能,如登录、注册、修改密码等。接着,再逐步开发宿舍相关的功能,如学生信息管理、宿舍信息管理、宿舍住宿管理等等。在这个过程中,需要注意前后端的数据传输方式。由于是前后端分离的模式,前端需要发送http请求给后端,后端接收请求后返回json格式的数据,前端再根据返回的数据进行渲染。 最后,我们可以对系统进行测试,并部署到服务器上进行实际使用。这样,我们就可以享受到前后端分离带来的诸多好处,如便于维护、快速迭代、高效沟通等。同时,我们也需要注意系统的安全性,如对登录信息进行加密、防止sql注入等措施。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值