ReactからFlask経由でMariaDBにデータを登録する

18:54

先日react-markdownを使いました。

入力した内容を保存したいため、DataBaseにデータを保存する方法について調べました。

ReactでAPIをつかってデータを保存したいけど、方法がわからない方の参考になればと思います。

なお、環境はDockerを使ったReact環境を利用します。

環境構築については、以下のブログを参考にしてください。

react-markdownの使い方については、以下を参照してください。

データの保存は以下の手順で進めていきます。

保存先テーブルの作成

保存用のテーブルを作成します。

テーブルの構成は単純なものにします。

テーブル名は、「markdown」とします。

カラム名は、「body」としてデータの保存型を「TEXT型」とします。

    
CREATE TABLE test.markdown (body text)

testはdatabase名です。勉強用に作っているためtestとしています。

メモ

本来は主キーや、その他の項目が必要です。今回は勉強用のためbodyのみにしています。

MariaDBのコンテナに接続します。

    
docker exec -it db sh

コンテナに接続できたらmysqlにログインします。

    
mysql --user=test --password=test

上記で作成したCREATE文を実行します。

ここまでが、保存先テーブルの作成です。

ログアウトは「quit」を入力します。そのあと、「exit」でコンテナからログアウトします。

FlaskでAPIを作成

FlaskでAPIを作成します。

APIのメソッドはPOST形式とします。

URLは/markdownです。

json形式で取得し、bodyの値を取得します。

URL	/markdown
メソッド	POST
フォーマット	JSON
パラメータ	{'body' : '# TEST'}

APIのイメージができたのでFlaskのapp.pyを修正します。

    
import os

from flask import Flask, request
from flask_cors import CORS

import pymysql.cursors
import json 

RESULT_CODE_SUCESS = 'sucess'

app = Flask(__name__)
CORS(app) 

@app.route("/", methods=["GET"])
def test():  
    return "Hello World"

RESULT_CODE_SUCESS
@app.route('/mariadb')
def mariadb():
    conn = pymysql.connect(
        host='db',
        port=3306,
        user=os.environ.get('MYSQL_USER'),
        password=os.environ.get('MYSQL_PASSWORD'),
        db=os.environ.get('MYSQL_DATABASE'),
        cursorclass=pymysql.cursors.DictCursor
    )

    with conn.cursor() as cur:
        sql = "SELECT * FROM user"
        cur.execute(sql)
        results = cur.fetchall()

    return results[0]

@app.route('/markdown', methods=["POST"])
def post_markdown():
    conn = pymysql.connect(
        host='db',
        port=3306,
        user=os.environ.get('MYSQL_USER'),
        password=os.environ.get('MYSQL_PASSWORD'),
        db=os.environ.get('MYSQL_DATABASE'),
        cursorclass=pymysql.cursors.DictCursor
    )

    cur = conn.cursor() 

    markdown = request.json["body"] 
    cur.execute(f"INSERT INTO markdown(body) values('{markdown}')")
    conn.commit()

    return RESULT_CODE_SUCESS

APIはjson形式で受け取るため、jsonをインポートします。

post_markdown()の関数を追加し、リクエストで取得したbodyパラメータを取得してINSERT文を使ってDBに登録します。

成功したら文字列でsucessを返却します。

以上がFlaskでのAPIの作成内容です。

ReactでAPIを呼び出して保存

React側に保存用のボタンを用意します。保存ボタンをクリックするとAPIを使ってtextareaの内容をDBに登録します。

更新するファイルはReactのapp.jsファイルです。

    
project/
　┗ web/
　　　┣ Dockerfile
　　　┗ src/
　　　　　┗ react-project/
　　　　　　　┗ src/
　　　　　　　　　┗ app.js

下記のように書き換えます。

    
import { useState } from "react";

import ReactMarkdown from "react-markdown";
import remarkGfm from 'remark-gfm';

import axios from 'axios';

function App() {

  const [text, setText] = useState("");

  const onChangeText = (event) => setText(event.target.value);
  const onClickText = () => {
    const markdown = {
      body: text
    };
    axios.post(`http://localhost:5000/markdown`, markdown)
      .then(res => {
        console.log(res.data);
      })
  };

  return (
    <div className="App">
      <textarea 
        value={text} 
        style={{ width: '50%', height: '300px' }} 
        onChange={onChangeText}
      ></textarea>
      <button onClick={onClickText}>保存</button>
      <ReactMarkdown remarkPlugins={[remarkGfm]}>{text}</ReactMarkdown>
    </div>
  );
}

export default App;

docker-compose.ymlファイルが存在する場所でコマンドを実行し、コンテナを起動します。