vue 根据后端数据渲染文件模板,编辑并实时预览效果

vue 根据后端数据渲染文件模板,编辑并实时预览效果,第1张

最近有个需求,用户要线上编辑模板文件,以前直接考虑用富文本编辑方式,用户想怎么编辑就怎么编辑,但这次需求后端提到输入的关键信息要入库,并且有select选项插入。整篇带样式的html由后端返回。
初步想法是分左右栏,左侧预览右侧form,最开始想收到后端的html后再插入document,但动态插入的dom无法做到数据响应,变换下思路,把需要动态显示的dom事先初始化dom中,等模板html渲染完成后再插入到对应位置。

和后端约定的数据格式,tempStr是html,动态插值用${}表示,form是表单描述,用于渲染表单:

思路:

templatevue:

效果

暂时type只区分了select,可以加入radio、checkbox等表单形式。

我最开始接触是在Vue的官网上,开始是作为一个小节出现,现在已经是个专门的大章节来专门讲Vue服务端渲染的内容。

服务端渲染 简单来说就是在服务器上把数据和模板拼接好以后发送给客户端显示。

回顾下前端的 历史 ,最开始的站点是简单的静态网站。后端大哥把html文件推送给用户,用户浏览器解析这些字符串进行显示。那个时候就是 服务端渲染 。可是后来由于网站内容越来越复杂、特效越来越炫酷,这种‘兼职’状态已经不能满足需求,细分之下的前端出现了。

随后为了方便的开发,开始提倡 前后端分离,大家各做各的,彼此之间通过基于>

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zz/12654705.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-27
下一篇 2023-05-27

发表评论

登录后才能评论

评论列表(0条)

保存