Django DRF, как сериализовать поле модели в html код?

Question

[Pan Propan]

есть модель Page.

from django.db import models
from django.utils.safestring import mark_safe
from django.urls import reverse


from pages.mixins import SeoMixin


class Page(SeoMixin):
    title = models.CharField('Заголовок странциы', max_length=128)
    body = models.TextField('Текст страницы')
    created = models.DateTimeField('Добавлено', auto_now_add=True)
    modified = models.DateTimeField('Изменено', auto_now=True)
    slug = models.SlugField('url-страницы')

    class Meta:
        verbose_name = "Страница"
        verbose_name_plural = "Страницы"

    def __str__(self):
        return self.title

    def get_absolute_url(self):
        return reverse('pages', kwargs={'slug': self.slug})

    def render_body(self):
        return mark_safe(self.body)

Есть сериалайзер

from rest_framework import serializers
from .models import Page


class PageSerializer(serializers.ModelSerializer):
    body = serializers.
    class Meta:
        model = Page
        fields = '__all__'

При получении данных от АПИ я хочу чтоб в поле Body содержало HTML код который я могу вставить в шаблон в нужном месте.

Сейчас я получаю такую штуку

Answer 1

[Денис Копица]

По умолчанию при ajax запросе drf рендерит модель в json, со всеми экранированиями и т.д., соответственно за его отображение и обработку отвечает фронт.
Можно поменять рендерер (в т.ч. на основе параметра в запросе), что бы drf отдавал html(pdf, csv, etc) формат. Но в этом случае пропадет возможность работать с данными в ответе как с json-объектом.

Comments

[Pan Propan]

все верно, спасибо.
я не сразу это понял

Answer 2

[Pan Propan]

Попробовал так, не прокатило

class  HtmlField(serializers.Field):
    def to_representation(self, obj):
        return mark_safe(obj.body)

class PageSerializer(serializers.ModelSerializer):
    body = HtmlField(source='*')


Кстати возникла идея, может на стороне Vue стоит текст отформативать в PLAIN TEXT? На фронте к меня Vue стоит

    class Meta:
        model = Page
        fields = ['body', 'title']

p.s. В общем то да. Все сделал на фронте. Vue сам красиво все отобразил.

<template>
    <div class="lead">
        {{ $route.params.slug }}

        <div v-html="page.data.body"></div>
    </div>
</template>

<script>
import axios from 'axios'

const url = 'http://localhost:8000/api/v1/pages/2/'
export default {
  name: 'Page',
  data () {
    return {
      page: null
    }
  },
  mounted () {
    axios
      .get(url)
      .then(response => (this.page = response))
  }
}
</script>

Тем не менее изначальный вопрос актуален.