简单的 React JS 和 MySQL 集成 - CRUD 应用程序（后端）

大家好，今天我将通过一个简单的 CRUD 应用演示一个非常简单的 React 应用，该应用与 MySql 数据库集成。我知道这个应用看起来很简单，但相信我，它有很多东西值得学习，将来可能会对你有所帮助。

请注意，在本文中我们将讨论后端部分，最后我将链接另一篇与应用程序前端相对应的文章。

因此，为了实现我们的目标，我们需要遵循以下步骤：
创建数据库来存储我们的记录，
创建到数据库的服务器连接，
定义 CRUD 应用程序的端点，
创建反应应用程序并定义前端
，集成前端和后端

以上是我们正在努力实现的目标的高级描述，我们可能会从一个步骤跳到另一个步骤，但最终我们会达到目标。

我已经在系统上安装了 XAMMP 服务器，用于托管 MySQL 数据库。我将在浏览器中输入 localhost/phpmyadmin 打开数据库控制台并创建一个新的数据库（因为我要创建一个博客文章网页，您可以在其中创建、列出、删除和点赞博客文章，所以我将数据库命名为-->> blog_posts）。我将在数据库的“posts”表中添加以下六列：

接下来，我们将在主应用文件夹中创建两个文件夹，一个是服务器文件夹（包含后端结构），另一个是客户端文件夹（包含前端文件）。如果您将父文件夹命名为 blog，则文件夹结构应如下所示：现在，我们将在服务器文件夹中创建一个 config 文件夹，并在其中创建一个 db.js 文件来定义数据库配置： server ->> config ->> db.js：



const mysql = require('mysql')
const db = mysql.createConnection({
host: "localhost",
user: "root",
password: "",
database:"blog_posts" 
})

module.exports = db;

现在在服务器文件夹中，我们将创建一个 index.js 文件，在其中我们将定义所有后端逻辑，即获取、更新和删除查询的端点/路由：



const express = require('express');
const db = require('./config/db')
const cors = require('cors')

const app = express();
const  PORT = 3002;
app.use(cors());
app.use(express.json())

// Route to get all posts
app.get("/api/get", (req,res)=>{
db.query("SELECT * FROM posts", (err,result)=>{
    if(err) {
    console.log(err)
    } 
res.send(result)
});   });

// Route to get one post
app.get("/api/getFromId/:id", (req,res)=>{

const id = req.params.id;
 db.query("SELECT * FROM posts WHERE id = ?", id, 
 (err,result)=>{
    if(err) {
    console.log(err)
    } 
    res.send(result)
    });   });

// Route for creating the post
app.post('/api/create', (req,res)=> {

const username = req.body.userName;
const title = req.body.title;
const text = req.body.text;

db.query("INSERT INTO posts (title, post_text, user_name) VALUES (?,?,?)",[title,text,username], (err,result)=>{
   if(err) {
   console.log(err)
   } 
   console.log(result)
});   })

// Route to like a post
app.post('/api/like/:id',(req,res)=>{

const id = req.params.id;
db.query("UPDATE posts SET likes = likes + 1 WHERE id = ?",id, (err,result)=>{
    if(err) {
   console.log(err)   } 
   console.log(result)
    });    
});

// Route to delete a post

app.delete('/api/delete/:id',(req,res)=>{
const id = req.params.id;

db.query("DELETE FROM posts WHERE id= ?", id, (err,result)=>{
if(err) {
console.log(err)
        } }) })

app.listen(PORT, ()=>{
    console.log(`Server is running on ${PORT}`)
})

后端部分的 Github repo 是：https://github.com/NasreenKhalid/Blog-React-CRUD-MYSQL/tree/master/server

到目前为止，所有后端都已处理完毕，现在我们将创建一个 React 应用程序，所有前端的乐趣都发生在其中，文章前端部分的链接是：
https://dev.to/nasreenkhalid/simple-react-js-and-mysql-integration-crud-app-frontend-3i0l

我希望这篇文章对您有所帮助。

祝大家编码愉快，度过美好的一天！

鏂囩珷鏉ユ簮锛�https://dev.to/nasreenkhalid/simple-react-js-and-mysql-integration-crud-app-backend-5aom