练习 | react + node + mysql制作CRUD应

前端和后端的通信是如何实现的？
同时用npm start启动前后端，如果各项参数彼此符合，则自动相互连接。

mysql

在ubuntu或者cmd中输入如下命令

mysql -uroot -p

再输入密码后，进入mysql命令行界面。
常用指令：

查看数据库：show databases;
新建数据库：create database [数据库名称];
（新建后使用show databases;命令，确认是否新建成功）
使用新数据库：use [数据库名称];
新建表： create table record(id int auto_increment not null primary key,mail varchar(30) not null unique);
查看表：show tables;
查看表中定义的字段：desc record;
向表中插入数据：insert into record(mail) values('a@a.com');
查看表中的数据：select * from record;

react

目录构成

编写顺序：
1.package.json
2.webpack.config.js
3.babelrc
4.Index.html
5.Index.jsx
6.App.jsx
7.api_url.js
8.Touroku.js
9.Touroku.scss

其中node_modules和package-lock.json是执行npm i之后自动生成的。

node

目录构成

其中public文件夹及其中内容是测试用的，可以删除，删除该文件夹不会影响程序运行。

编写顺序：
1.package.json
2.config.js
3.db.js
4.index.js
5.user.js

具体代码：
https://github.com/CyanTiare/react-node-mysql-app

---

以下为编写过程中，执行成功后的截图记录

react的login.jsx中console.log(res.data);打印的内容

image.png

node的user.js中console.log(results[0]);打印的内容

image.png

node的user.js中所返回的数据

image.png

总结：前端console.log打印内容在浏览器开发者工具的console里显示，后端console.log打印内容在terminal里显示

image.png