基于React Hooks的CRUD

最新推荐文章于 2024-06-09 16:29:41 发布

上庸者-不服周

最新推荐文章于 2024-06-09 16:29:41 发布

阅读量330

点赞数

分类专栏： react 文章标签： react.js 前端

本文链接：https://blog.csdn.net/m0_37911706/article/details/125295041

版权

react 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

一、页面效果

二、前端目录结构

三、App.js

import logo from './logo.svg';
import './App.css';
import React,{ useState,Fragment,useEffect } from "react";
import axios from "axios";
import UserTable from "./components/tables/UserTable";
import AddUserForm from "./components/forms/AddUserForm";
import EditUserForm from "./components/forms/EditUserForm";

function App() {

    const initFormState = { id: null,username: '',gender: '',birthday:'',phone:'',address:''};
    const [users,setUsers] = useState(initFormState);
    const [editing,setEditing] = useState(false);
    const [currentUser,setCurrentUser] = useState(initFormState);

    useEffect(()=>{
        getUsers();
    },[editing])

    //CRUD 操作
    //1、查询所有
    const getUsers = ()=> {
        axios.get('http://localhost:8089/api/employees').then(res=> {
            setUsers(res.data.empData);
        }).catch(err => {
            console.log(err);
        })
    }
    //2、增加
    const addUser = (user)=> {
        axios.post("http://localhost:8089/api/add",user).then(res=> {
            getUsers();
        })
    }

    //3.删除
    const deleteUser= (eid)=> {
        setEditing(false);
        axios.post("http://localhost:8089/api/del",{
            id:eid
        }).then(res=> {
            getUsers();
        })
    }

    //4、修改
    const updateUser= (user)=> {
        setEditing(false);
        axios.put("http://localhost:8089/api/update",user).then(res=> {
            getUsers();
        })
    }
    const editRow = (user)=> {
        setEditing(true);
        setCurrentUser({
            id:user.id,
            name: user.name,
            gender:user.gender,
            birthday: user.birthday,
            phone: user.phone,
            address: user.address
        })
    }
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
      </header>
      <h1>CRUD App with Hooks</h1>
      <div className="flex-row">
          <div className="flex-large">
              {
                  editing?(
                      <Fragment>
                          <h2>Edit User</h2>
                          <EditUserForm
                              setEditing = { setEditing }
                              currentUser = { currentUser }
                              updateUser = { updateUser }
                          />
                      </Fragment>
                  ):(
                      <Fragment>
                          <h2>Add User</h2>
                          <AddUserForm addUser={ addUser }/>
                      </Fragment>
                  )
              }
          </div>
          <div className="flex-large">
              <h2>View Users</h2>
              <UserTable users={ users } deleteUser={deleteUser} editRow={ editRow }/>
          </div>
      </div>
    </div>
  );
}
export default App;

四、App.css

.flex-row{
  display: flex;
}
.flex-large{
  margin-left: 260px;
}

五、UserTable.js

import React from "react";
const UserTable = (props) => {
    return (
        <table border={1}>
            <thead>
               <tr>
                   <th width= "100">Id</th>
                   <th width= "100">Name</th>
                   <th width= "100">Gender</th>
                   <th width= "150">Birthday</th>
                   <th width= "100">Phone</th>
                   <th width= "200">Address</th>
                   <th width= "200">Actions</th>
               </tr>
            </thead>
            <tbody>
            {
                props.users.length>0? (
                    props.users.map((user)=>{
                        return (
                            <tr key={user.id}>
                                <td>{ user.id }</td>
                                <td>{ user.name }</td>
                                <td>{ user.gender }</td>
                                <td>{ user.birthday }</td>
                                <td>{ user.phone }</td>
                                <td>{ user.address }</td>
                                <td>
                                    <button onClick={ ()=>{ props.editRow(user) } }>Edit</button>
                                    &nbsp;&nbsp;&nbsp;
                                    <button onClick={()=> props.deleteUser(user.id)}>Delete</button>
                                </td>
                            </tr>
                        )
                    })
                ):(
                    <tr>
                        <td colSpan={3}>没有用户信息</td>
                    </tr>
                )
            }
            </tbody>
        </table>
    )
}
export default UserTable;

六、AddUserForm.js

import React, { useState } from "react";

const AddUserForm = (props)=> {
    const initFormState = { name: '',gender: '',birthday: '',phone: '',address: ''};
    const [user,setUser] = useState(initFormState);

    const handleInputChange = (event)=>{ //'event'代表事件对象
        const { name,value} = event.target //解构事件对象的name和value
        setUser({...user,[name]:value})
    }

    return (
        <form
            onSubmit={(event)=> {
                event.preventDefault(); //屏蔽默认提交
                if (!user.name || !user.gender){ //如果'name'和'gender'为空，则返回
                    return
                }
                props.addUser(user);
                setUser(initFormState)
             }
            }
        >
           <label>Name：
               <input type="text" name={"name"} value={user.name} onChange={handleInputChange}/>
           </label>
            <br/><br/>
            <label>Gender：
                <input type="text" name={"gender"} value={user.gender } onChange={handleInputChange}/>
            </label>
            <br/><br/>
            <label>Birthday：
                <input type="date" name={"birthday"} value={user.birthday} onChange={handleInputChange}/>
            </label>
            <br/><br/>
            <label>Phone：
                <input type="text" name={"phone"} value={user.phone } onChange={handleInputChange}/>
            </label>
            <br/><br/>
            <label>Address：
                <input type="text" name={"address"} value={user.address } onChange={handleInputChange}/>
            </label>
            <br/><br/>
            <button>Add User</button>
        </form>
    )
}
export default AddUserForm;

七、EditUserForm.js

import React,{ useState,useEffect } from "react";

const EditUserForm = (props)=> {
    const [user,setUser] = useState(props.currentUser);

    useEffect(() => {
            setUser(props.currentUser)
        }, [ props ])

    const handleInputChange = (event)=> {
        const {name,value} = event.target;
        setUser({...user,[name]:value});
    }

    return (
        <form
            onSubmit={(event)=> {
                event.preventDefault();
                props.updateUser(user);
              }
            }
        >
            <label>Id：
                <input type="text" name={"id"} value={user.id} onChange={handleInputChange} disabled/>
            </label>
            <br/><br/>
            <label>Name：
                <input type="text" name={"name"} value={user.name} onChange={handleInputChange}/>
            </label>
            <br/><br/>
            <label>Gender：
                <input type="text" name={"gender"} value={user.gender } onChange={handleInputChange}/>
            </label>
            <br/><br/>
            <label>Birthday：
                <input type="date" name={"birthday"} value={user.birthday } onChange={handleInputChange}/>
            </label>
            <br/><br/>
            <label>Phone：
                <input type="text" name={"phone"} value={user.phone } onChange={handleInputChange}/>
            </label>
            <br/><br/>
            <label>Address：
                <input type="text" name={"address"} value={user.address } onChange={handleInputChange}/>
            </label>
            <br/><br/>
            <button>Update User</button>
            &nbsp;&nbsp;&nbsp;
            <button onClick={()=> props.setEditing(false)}>Cancel</button>
        </form>
    )
}
export default EditUserForm;

八、后台接口部分：

1、安装相关模块：

npm install sequelize

npm install mysql2

npm install cors

2、数据库部分：

(1)配置文件(dbconfig.js)：

var Sequelize = require('sequelize');
var DB = new Sequelize('dbms','root','123456',{
    host: 'localhost',
    port: 3306,
    dialect: 'mysql',
    pool: {
        max: 30,
        min: 5,
        idle: 10000
    }
});
module.exports = DB;

(2)模型文件(EmployeeModel.js):

var Sequelize = require('sequelize');
var DB = require('../dbconfig');

const EmployeeModel = DB.define('employee',{
    id: {
        type: Sequelize.INTEGER,
        primaryKey: true,
        autoIncrement: true
    },
    name: {
        type: Sequelize.STRING(30),
        allowNull: false
    },
    gender: {
        type: Sequelize.STRING(4),
        allowNull: false
    },
    birthday: {
        type: Sequelize.DATE,
        allowNull: false
    },
    phone: {
        type: Sequelize.STRING(11),
        allowNull: false
    },
    address: {
        type: Sequelize.STRING(100),
        allowNull: false
    }
},
    {
        freezeTableName: true,
        timestamps: false
    })

module.exports = EmployeeModel;

(3)接口文件(employees.js):

var express = require('express');
var router = express.Router();
var EmployeeModel = require('../config/model/EmployeeModel');

/*
* 获取所有员工信息： http://localhost:8089/api/employees
*/
router.get('/employees',function (req,res) {

    EmployeeModel.findAll({
        raw: true
    }).then(result=> {
        res.json({
            code: 1001,
            empData: result
        })
    }).catch(err=>{
        console.log(err)
    })
})
/*
   增加信息：http://localhost:8089/api/add
*/
router.post('/add',(req, res) => {
    //console.log(req.body.name)
    EmployeeModel.create({
        name: req.body.name,
        gender: req.body.gender,
        birthday: req.body.birthday,
        phone: req.body.phone,
        address: req.body.address
    }).then(result=> {
        res.json({
            code: 1001,
            msg: 'Success'
        })
    }).catch(err=> {
        console.log(err);
    })
})
/*
   删除信息：http://localhost:8089/api/del
*/
router.post('/del',(req, res) => {
    let sid = req.body.id;
    EmployeeModel.destroy({
        where:{
            id: sid
        }
    }).then(result=>{
        res.json({
            code: 1001,
            msg: '删除成功!'
        })
    }).catch(err=> {
        console.log(err);
    })
})

/*
   更新信息：http://localhost:8089/api/update
 */
router.put('/update',(req, res) => {
    EmployeeModel.findOne({
        where: {
            id: req.body.id
        }
    }).then(function (user) {
        user.update({
            name: req.body.name,
            gender: req.body.gender,
            birthday: req.body.birthday,
            phone: req.body.phone,
            address: req.body.address
        }).then(result=>{
            res.json({
                code: 1001,
                msg: '更新成功'
            })
        }).catch(err=> {
            console.log(err);
        })
    })
})
module.exports = router;