推荐学习书目
Learn Python the Hard Way
Python Sites
PyPI - Python Package Index
http://diveintopython.org/toc/index.html
Pocoo
值得关注的项目
PyPy
Celery
Jinja2
Read the Docs
gevent
pyenv
virtualenv
Stackless Python
Beautiful Soup
结巴中文分词
Green Unicorn
Sentry
Shovel
Pyflakes
pytest
Python 编程
pep8 Checker
Styles
PEP 8
Google Python Style Guide
Code Style from The Hitchhiker's Guide
sugarkeek
V2EX  ›  Python

前后端页面分离如何 JSON 传输富文本?

  •  
  •   sugarkeek · Jul 9, 2019 · 5616 views
    This topic created in 2544 days ago, the information mentioned may be changed or developed.

    基于 Flask 和 Vue 的前后端分离页面,后端使用富文本编辑器后保存的包含富文本的数据如何通过 JSON 接口传输。

    目前想到的方案:

    1. JSON 转义,前端在转义回去解析。=>感觉比较麻烦;
    2. 富文本编辑器换成 Markdown 语法。=>对于没接触 Markdown 的人来说不友好,而且 Markdown 语法中也涉及到特殊字符,也需要转义,还不如直接用富文本转义。

    一个疑问:

    1. 学长之前和我讲 JS 对象保持习惯用单引号 '', Html 标记语言习惯用双引号 "", 这样就不会引起歧义了。可是 JSON 文件中不都是双引号 "":""; 的形式吗?
    Supplement 1  ·  Jul 9, 2019
    json 转义是指 json 里传输的富文本部分转义,不是整个 json 转义。
    16 replies    2019-07-09 18:19:33 +08:00
    jinksw
        1
    jinksw  
       Jul 9, 2019
    不是很懂
    你自己手动拼接的 json 吗? 那样才涉及你自己去转义吧?
    Mutoo
        2
    Mutoo  
       Jul 9, 2019   ❤️ 1
    A1:JSON 是一种跨语言的协议,所以规范里规定 key 以及 string 都用双引号包围。以更好的兼容不同语言的解释器。

    至于你的问题,应该是如何正确将 HTML 文档存到字符串中。可以参考这篇文章:
    https://www.thorntech.com/2012/07/4-things-you-must-do-when-putting-html-in-json/

    前端 vue 可以用 v-html 直接引用这个字符串即可。但还需要考虑安全问题,防止 XSS。
    https://github.com/vuejs/vue/issues/6333
    zjyl1994
        3
    zjyl1994  
       Jul 9, 2019
    嗯?你的 json 是手拼的?我们 json 都会自动处理转义啊?
    icy37785
        4
    icy37785  
       Jul 9, 2019 via iPhone
    json 的转义不都是自的么。你手拼的话容易出错呀,还是让他自动转吧。
    mnssbe
        5
    mnssbe  
       Jul 9, 2019   ❤️ 2
    这时候可以用到“加密算法” base64 来解决你的烦恼
    sugarkeek
        6
    sugarkeek  
    OP
       Jul 9, 2019
    @zjyl1994 #3 还有这种操作吗?我试试。
    est
        7
    est  
       Jul 9, 2019   ❤️ 1
    富文本有多富?

    一般空格换行直接 <pre> 梭哈就行了。
    sugarkeek
        8
    sugarkeek  
    OP
       Jul 9, 2019
    @icy37785 #4 不知道原来能自动转义,我一直以为 json 里传特殊符号会可能会引起歧义,一直都是没敢加。我试试吧。
    sugarkeek
        9
    sugarkeek  
    OP
       Jul 9, 2019
    @Mutoo #2 感谢您的理解,确实是这个意思。我试试。
    IsaacYoung
        10
    IsaacYoung  
       Jul 9, 2019
    {
    html: "<div></div>"
    }
    sugarkeek
        11
    sugarkeek  
    OP
       Jul 9, 2019
    @est #7 哈哈,没想到那么多,目前能想到的就是富文本里双引号、空格、换行
    sugarkeek
        12
    sugarkeek  
    OP
       Jul 9, 2019
    @mnssbe #5 高级的玩法,复盘的时候试试。
    zjyl1994
        13
    zjyl1994  
       Jul 9, 2019
    @chenkeyan1 正常的 json 处理库都会自动转义的,不需要你自己操心
    Asice
        14
    Asice  
       Jul 9, 2019
    感觉要发明个三引号,引号不够用
    doublleft
        15
    doublleft  
       Jul 9, 2019
    js 处理可以 split 一下 \r \n 这种的,起码换行就搞定了
    est
        16
    est  
       Jul 9, 2019
    @chenkeyan1 那就<pre> 就行了。
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Solana   ·   970 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 46ms · UTC 22:56 · PVG 06:56 · LAX 15:56 · JFK 18:56
    ♥ Do have faith in what you're doing.