1

我对 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 内容的附加代码到这个样板的正确方向。

这个项目还有另一个阶段，但我的目标是首先完成这一步，希望我能从那里获得更好的理解。

我看过这个问题：

django：将每个用户的数据分开

4

1 回答 1

1

经过一番反复试验，我找到了集成它的最佳方法，所以我会在这里为其他想要做这种事情的人回答。

我使用了一个包含所有 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 组件，它只呈现导入并从 hook 中调用这个 midi 逻辑componentDidMount()。这是缺少的关键部分，也是使它起作用的原因。我已经阅读了一些关于它的内容，它与应用程序的生命周期有关。

看起来像这样：

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

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

  render() {
    return null;
  }
}

export default ReceiveMIDI;

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

于 2020-08-15T21:35:01.950 回答