nodejs + mysql + React + ReduxでCRUDアプリを作る Part1

# 概要
シンプルなCRUD(create, read, update, delete)アプリをデータベースはmysql, フロントエンドはReact + Reduxで作ってみます.
このPart1ではmysqlの設定, node.jsでAPIサーバーの作成まで行います.

# mysqlのインストール, 接続
まずmysqlをインストールします.

```
$ brew update
$ brew install mysql
```
インストールが終わったら内容を見てみます.

```
$ brew info mysql
```
次にデータベースを起動します. 起動は```mysql.server start```(停止は```mysql.server stop```)

```
$ mysql.server start
Starting MySQL
. SUCCESS! 
```
パスワードを設定しておきます.

```
$ mysql_secure_installation
```
聞かれることは基本的にYesで答えます. パスワードは覚えておきましょう.
設定が終わったら接続します.

```
$ mysql -uroot -p
Enter password:[設定したパスワード]
```
接続は```exit```で抜けれます.
# mysqlでDB, テーブルの作成

mysqlに接続した状態でまずDBを作成します.

```
mysql> CREATE DATABASE sample;
```
DBの作成結果を確認します.

```
mysql> show databases;
```
作成したDBを使用可能にします.

```
mysql> use sample;
```
次にテーブルを作成します.
idカラムには```auto_increment```を設定しておきます.
nameとstatusには```not null```を設定します.
nameは```unique```にしておきます.

```
mysql> create table user (id int auto_increment not null primary key, name varchar(10) not null unique, status varchar(10) not null);
```
テーブルの作成結果を確認します.

```
mysql> show tables;
+------------------+
| Tables_in_sample |
+------------------+
| user             |
+------------------+
1 row in set (0.01 sec)
```

テーブルの定義を確認する

```
mysql> desc user;
+--------+-------------+------+-----+---------+----------------+
| Field  | Type        | Null | Key | Default | Extra          |
+--------+-------------+------+-----+---------+----------------+
| id     | int(11)     | NO   | PRI | NULL    | auto_increment |
| name   | varchar(10) | NO   | UNI | NULL    |                |
| status | varchar(10) | NO   |     | NULL    |                |
+--------+-------------+------+-----+---------+----------------+
3 rows in set (0.00 sec)
```

ユーザーを作成します.
nodeがユーザー, localhostがホストになります.
パスワードは後で使うので覚えておきましょう.

```
mysql> create user 'node'@'localhost' identified with mysql_native_password by 'パスワード';
```

ユーザーの作成結果を確認します.

```
mysql> SHOW GRANTS for 'node'@'localhost';
```

参照可能テーブルを指定します.

```
mysql> GRANT ALL ON sample.* to node@localhost;
```
権限の付与結果を確認します.

```
mysql> SHOW GRANTS for 'node'@'localhost';
```

試しにサンプルデータを作成してみます.

```
mysql> insert into user(name, status) values('Katsuomi', 'student');
```
確認してみます.

```
mysql> select * from staff;
+----+----------+---------+
| id | name     | status  |
+----+----------+---------+
|  1 | Katsuomi | student |
+----+----------+---------+
1 row in set (0.01 sec)
```
もう1人作ってみます

```
mysql> insert into user(name, status) values('Junki', 'student');
```
確認します.

```
mysql> select * from user;
+----+----------+---------+
| id | name     | status  |
+----+----------+---------+
|  1 | Katsuomi | student |
|  2 | Junki    | student |
+----+----------+---------+
2 rows in set (0.00 sec)
```

無事にidがauto_incrementされていることを確認しました.

# APIサーバーの作成
適当にディレクトリを作って```server.js```を作り, そこに書いていきます.

```
$ mkdir crud-node & cd crud-node
$ npm init -y
$ npm i mysql express body-parser
```
```:server.js
const express = require('express');
const mysql = require('mysql');
const bodyParser = require('body-parser');
const cors = require('cors')({origin: true});
const app = express();
app.use(bodyParser.json());
app.use(cors);

const client = mysql.createConnection({
    host: 'localhost',
    user: 'node',
    password: '******',
    port : 3306,
    database: 'sample'
});

client.connect(function (err) {
    if (err) {
        console.error('error connecting: ' + err.stack);
        return;
    }
    console.log('connected as id ' + client.threadId);
});

// read 
app.get('/user', (req, res) => {
    client.query('SELECT * from user;', (err, rows, fields) => {
        if (err) throw err;
      
        res.send(rows);
    });
});

// create 
app.post('/user/create', (req, res) => {
    const name = req.body.name;
    const status = req.body.status;
    client.query('INSERT INTO user SET ?', {name: name, status: status}, (err, result) => {
        if (err) throw err;
        res.send(result);
    })
});

// update 
app.put('/user/update', (req, res) => {
    const id = req.body.id;
    const status = req.body.status;
    client.query('UPDATE user SET status = ? WHERE id = ?', [status, id], (err, result) => {
        if (err) throw err;
        client.query('SELECT * from user;', (err, rows, fields) => {
            if (err) throw err;
            res.send(rows);
        });
    })
});

// delete 
app.delete('/user/delete', (req, res) => {
    const id = req.body.id;
    client.query(`DELETE FROM user WHERE id = ?`, [id], (err, result) => {
        if (err) throw err;
        client.query('SELECT * from user;', (err, rows, fields) => {
            if (err) throw err;
            res.send(rows);
        });
    });
});

app.listen(3001, () => console.log('Listening on port 3001!'))
```
それではcurlでテストしていきましょう.

### 作成

```
$ curl -X POST -H "Content-Type:application/json" http://localhost:3001/user/create  -d '{"name":"taro", "status": "adult"}'
```
### 更新

```
$ curl -X PUT -H "Content-Type:application/json" http://localhost:3001/user/update  -d '{"name":"taro", "status": "student"}'
```
### 閲覧

```
curl http://localhost:3001/user
```

### 削除

```
$ curl -X DELETE -H "Content-Type:application/json" http://localhost:3001/user/delete  -d '{"id":1}'
```

# 最後に
Part2ではReact + Reduxでフロントエンドを作っていきます.
Part2は[こちら](https://qiita.com/YuasaJunki/items/f0d74a5847a68affe789)
# Happy Hacking :sunglasses: !