Question

我最近决定深入研究JavaScript和ReactJS，开始制作一个单页应用程序。

我已经使用django rest框架为我的项目创建了后端，并且现在计划使用django-admin gui作为我的CMS。

这是我对其中一种api的Django模型：

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在django-admin CMS中创建标记。

我通过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请求中将它们打包成一个字符串，这很好，但是react应用仅显示原始字符串。

我想在没有dangerouslySetInnerHTML的情况下执行此操作，因为就任意代码而言，此方法似乎是安全问题。

django和react服务器都将在同一台机器上运行，但是我想降低风险。

非常感谢任何想法，我仍然是Web开发的新手。

从REST API在ReactJS前端中格式化django-admin CMS内容

0 个答案: