Question

我是Django和React的新手，但是对Python和JavaScript有很好的了解。

我想做的是使用Web MIDI API监视一些MIDI数据，从中推断出一些信息并将其存储在数据库中。它基本上是用于DAW，软件合成器监视系统的，可以将信息作为MIDI传输到浏览器（通过IAC），然后将各种信息存储在数据库中。这需要针对每个用户进行，并分离用户数据。我猜我需要实现一个CRUD API。我目前有一个Python项目可以执行此任务，并将数据保存在格式化为JSON的内存中-计划是将其放入Web应用程序中。

我已经观看并遵循了许多有关集成Django＆React的教程，并且还发现了用于基本登录系统的样板。

https://github.com/justdjango/django-react-boilerplate

如果可能的话，我想使用它并仅添加我需要的功能，谁能指出我从哪里开始的正确方向，以及我将MIDI内容的附加代码添加到此样板的正确方向。 / p>

该项目还有另一个阶段，但我的目标是首先解决这一步骤，并希望从那里可以得到更好的理解。

我已经看了这个问题：

django: keep each users data separate

Answer 1

如果您要创建Web MIDI API，则可以尝试使用此视频，它将为您提供所需的帮助，并且您可以查看他的github链接，该链接也在此youtube视频的描述中。 https://www.youtube.com/watch?v=556e3cLWusc

Answer 2

经过反复试验，我找到了整合它的最佳方法，因此我将在这里为所有希望做这种事情的人提供答案。

我使用了包含所有Web MIDI逻辑的midi.js脚本。

此刻，它看起来像这样：

export default function () {
  navigator.requestMIDIAccess().then(onMIDISuccess);

  function onMIDISuccess(midiAccess) {
    for (var input of midiAccess.inputs.values())
      input.onmidimessage = getMIDIMessage;
  }
}

function getMIDIMessage(msg) {
  console.log(msg.data);
}

然后，我使用了一个react组件，该组件只呈现任何东西，而只能从钩子componentDidMount()中导入并调用此midi逻辑。这是缺少的关键部分，是什么使它起作用。我已经阅读了有关它的内容，这与应用程序的生命周期有关。

看起来像这样：

import { Component } from "react";
import midi from "./midi";

class ReceiveMIDI extends Component {
  componentDidMount() {
    midi();
  }

  render() {
    return null;
  }
}

export default ReceiveMIDI;

到目前为止，这仅适用于将数据记录到控制台，我已经设置了脚手架应用，现在我正在编写一个函数，将MIDI转换为发布请求以将数据存储在控制台中。数据库。

如何将Web MIDI API与React前端和Django后端集成

2 个答案: