Форматирование содержимого CMS django-admin в ReactJS из интерфейса REST - PullRequest
0 голосов
/ 25 июня 2019

Недавно я решил погрузиться в JavaScript и ReactJS, чтобы начать создавать одностраничное приложение.

Я создал серверную часть для своего проекта с django rest Framework и планирую использовать графический интерфейс django-admin в качестве моей CMS.

Вот моя модель Django для одного из API:

class Project(models.Model):
    title = models.CharField(max_length=200)

    description = models.TextField()

    image = models.ImageField(upload_to = 'images/')

    body = models.TextField()

    time = models.DateTimeField()

    author = models.ForeignKey(
        'auth.user',
        on_delete=models.CASCADE,
    )

    def __str__(self):
        return self.title

Я вполне могу использовать этот контент, реагируя с помощью axios, и это позволяет мне минимально отформатировать структуру. Например:

class Projects extends React.Component {
    state = {
        home: []
    };

    componentDidMount() {
        this.getHome();
    }

    getHome() {
        axios
          .get('http://192.168.1.19:8000/api/projects/')
          .then(res => {
              this.setState({home: res.data});
          })
          .catch(err => {
              console.log(err);
          });
    }

    render() {
        return(
            <div class="posts">
                {this.state.home.map(item => (
                    <div key={item.id}>
                        <img src={} alt="placeholder" />
                        <h1>{item.title}</h1>
                        <h5>{item.description}</h5>
                        <br />
                        <p>{item.body}</p>
                        <br />
                        <p>Posted at: {item.time}</p>
                        <br />
                    </div>
                ))}
            </div>
        );
    }
}

На данный момент это очень простой макет, представляющий данные, которые можно прочитать из API.

Мне нужно иметь возможность форматировать содержимое в {item.body}. В настоящее время я использую TinyMCE для создания разметки в CMS django-admin.

Пример того, что я получаю, передавая данные через API:

<h1>Hello World!</h1><br /><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p><br /><p>Lorem ipsum dolor sit amet, consectetur</p>

Все это упаковано в строку в запросе json, что нормально, но приложение реагирования просто отображает необработанную строку.

Я хочу сделать это без dangerouslySetInnerHTML, так как этот метод, по-видимому, является проблемой безопасности, за исключением произвольного кода.

И сервер django, и сервер реакции будут работать на одной и той же машине, но я хочу, чтобы риски были минимальными.

Очень ценю любые идеи на этот счет, я все еще новичок в веб-разработке.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...