使用Node.js + MySQL + React + Redux来制作CRUD应用程序 Part1

总结

我将使用MySQL作为数据库,使用React + Redux作为前端,创建一个简单的CRUD(创建,读取,更新,删除)应用程序。
在第一部分中,我们会进行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

被问及的问题基本上会以“是”作答。请记住密码。
设置完成后进行连接。

$ mysql -uroot -p
Enter password:[設定したパスワード]

您可以通过使用“exit”来退出连接。

使用MySQL创建数据库和表。

在连接到MySQL之后,首先创建一个数据库。

mysql> CREATE DATABASE sample;

我将查看数据库的创建结果。

mysql> show databases;

使已创建的数据库可用。

mysql> use sample;

接下来我们将创建一个表。
我们将在id列上设置自动递增。
我们将在name和status列上设置非空。
我们将保持name的唯一性。

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)

创建一个用户。
节点是用户,本地主机是主机。
密码将在以后使用,所以记住它。

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)

我再试着做一个。

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设置为自动增长。

创建API服务器

我会随意地创建一个目录,并创建 server.js 文件,并在其中编写内容。

$ mkdir crud-node & cd crud-node
$ npm init -y
$ npm i mysql express body-parser
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}'

最后

在第二部分中,我们将使用React + Redux来构建前端部分。点击这里查看第二部分。

快乐黑客! !)

广告
将在 10 秒后关闭
bannerAds