使用Node+React實現簡單CRUD

前言

這次使用react+antd+fetch寫前端，node+express+mysql寫後端，實現簡單的react+node增刪改查。

安裝準備

react

// 安裝 create-react-app 
cnpm install -g create-react-app 
// 建立 React 工程
create-react-app my-app 
// 進入工程目錄
cd my-app 
// 啟動 React
npm start
複製程式碼

依賴模組

cnpm install express body-parser --save
cnpm install antd --save
cnpm install mysql 
複製程式碼

後端

後端介面和之前基本一樣，根據客戶端傳的引數，對資料庫進行增刪改查操作

// node 服務端

const userApi = require('./api/userApi');
const fs = require('fs');
const path = require('path');
const bodyParser = require('body-parser');
const express = require('express');
const app = express();

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: false}));

// 後端api路由
app.use('/api/user', userApi);

// 監聽埠
app.listen(3000);
console.log('監聽埠 :3000');
複製程式碼

前端

前端主要使用antdUI框架，完成資料的展示。

//引入的模組
import React, { Component } from 'react';
import './App.css';
import 'antd/dist/antd.css';
import { Table, Input, Modal, message,Popconfirm,  Divider,Button} from 'antd';
const Search = Input.Search;
class Fetch extends Component{
 constructor(props) {
   super(props)
   this.state = {
     allUsers: [],
     visible: false,
     user:"",
   }
   this.query = this.query.bind(this)
   this.delUser = this.delUser.bind(this)
   this.showModal = this.showModal.bind(this)
   this.handleName = this.handleName.bind(this)
   this.handleAge = this.handleAge.bind(this)
   this.handleAddress = this.handleAddress.bind(this)
   this.addUser = this.addUser.bind(this)
 }
//修改輸入框內容觸發事件
 handleName (e) {
   this.setState({
       username: e.target.value
   })
 }

 handleAge(e) {
   this.setState({
       userage: e.target.value
   })
 }

 handleAddress(e) {
   this.setState({
       useraddress: e.target.value
   })
 }
 //刪除使用者提示
success = () => {
   message.success('刪除使用者成功');
   this.queryAll() 
 };
 //增加使用者提示，成功後清除資料
 addsuccess = () => {
   message.success('增加使用者成功');
   this.queryAll() 
   this.refs.nameinput.state.value = "";
   this.refs.ageinput.state.value = "";
   this.refs.addinput.state.value = ""
 };

//彈窗
showModal = (record) => {
 this.setState({
   visible: true,
   userid:record.id,
   username:record.name,
   userage:record.age,
   useraddress:record.address
 });
}

handleOk = (e) => {
 console.log(e);
 this.setState({
   visible: false,
 });
}

handleCancel = (e) => {
 //console.log(e);
 this.setState({
   visible: false,
 });
}

...
 componentDidMount () {
 //元件載入完畢之後請求一次全部資料
   this.queryAll() 
 }

 render() {
   const columns = [ {
     title: 'Id',
     dataIndex: 'id',
     key: 'id',
   },
     {
     title: 'Name',
     dataIndex: 'name',
     key: 'name',
   }, {
     title: 'Age',
     dataIndex: 'age',
     key: 'age',
   }, {
     title: 'Address',
     dataIndex: 'address',
     key: 'address',
   },
    {
     title: 'Action',
     key: 'action',
     //資料修改，刪除操作
     render: (text, record) => (
       <span>
         <span  onClick={() => this.showModal(record)}>
           <span className="oper">修改</span>
         </span>
         
         <Divider type="vertical" />
         
         <Popconfirm title="Sure to delete?" onConfirm={() => this.delUser(record.id)}>
             <span className="oper">Delete</span>
           </Popconfirm>
       </span>
     ),
   }];
   

   const data = this.state.allUsers
   return (
     <div className="fetchBox">
   
       <Search style={{width:500+"px"}}
     placeholder="input search text"
     onSearch={value => this.query(value)}
     enterButton
   />
       <Table  className="tableBox" columns={columns} dataSource={data} bordered={true} rowKey={record => record.id} />
//新增使用者資訊，根據ref獲取dom的值，發給伺服器
       <div className="addUser">
       <Input placeholder="姓名"  ref="nameinput"/>
       <Input placeholder="年齡"  ref="ageinput"/>
       <Input placeholder="地址"  ref="addinput"/>
       <Button   onClick={this.addUser.bind(this)}>Submit</Button> 
       </div>

       {/* 彈窗 */}

       <Modal
         title="修改使用者資訊"
         visible={this.state.visible}
         onOk={this.handleOk}
         onCancel={this.handleCancel}
       >
       //修改資料時根據使用者ID顯示修改前的資訊
       <Input style={{marginBottom:20+"px"}}  value={this.state.username} onChange={this.handleName}/>
       <Input style={{marginBottom:20+"px"}} value={this.state.userage} onChange={this.handleAge}/>
       <Input  style={{marginBottom:20+"px"}}  value={this.state.useraddress}  onChange={this.handleAddress}/>
       <Button  style={{margin:0+"px"}}  onClick={this.modUser.bind(this)}>提交</Button> 
       </Modal>
     </div>
     
 )}
}
複製程式碼

fetch

原生fetch中一般用法為：
fetch（url，{
//配置
method:請求使用的方法，如：POST，GET，DELETE，UPDATE，PATCH 和 PUT
headers:請求頭資訊，可能是字串，也有可能是Header物件
body：請求的body資訊;post中傳參位置
mode：請求模式：cors /no-cors/same-origin；
credentials:請求的credentials
cache:請求的cache模式：default,no-store,reload,no-cache,force-cache ,only-if-cached
})
.then((res)=>{})//定義響應型別
.then((res)=>{})// 顯示響應型別 (資料本身)
.catch((res)=>{}); // 捕獲錯誤

請求資料

//獲取全部資料
 queryAll() {
   fetch( '/api/user/allUser',{
   headers: {
     'user-agent': 'Mozilla/4.0 MDN Example',
     'content-type': 'application/json'
   },
   method: 'GET', // *GET, POST, PUT, DELETE, etc.
   })
   .then((res) => {return res.json()})
   .then(data => {
   //  console.log(data)
     this.setState({allUsers: data})
   })
   .catch(e => console.log('錯誤:', e))
 }
//根據條件查詢資料
 query(value) {
     //console.log(value)
     fetch( '/api/user/queryUser?params='+ value,{
     headers: {
       'user-agent': 'Mozilla/4.0 MDN Example',
       'content-type': 'application/json'
     },
     method: 'GET', // *GET, POST, PUT, DELETE, etc.
     })
     .then((response) => {
       return response.json();
       })
     .then(data => {
      // console.log(data)
       this.setState({allUsers: data})
     })
     .catch(e => console.log('錯誤:', e))
     }
複製程式碼

剛進入頁面會進行一次資料的全部請求，查詢功能根據條件查詢資料,把資料在Table元件裡展示

增加資料

//增加資料
 addUser(){
   var  username = this.refs.nameinput.state.value
   var  ageValue = this.refs.ageinput.state.value
   var addValue = this.refs.addinput.state.value
   console.log(username,ageValue,addValue)
   fetch( '/api/user/addUser',{
     headers: {
       'user-agent': 'Mozilla/4.0 MDN Example',
       'content-type': 'application/json'
     },
     body: JSON.stringify({ 
       username: username, 
       age:ageValue,
       address: addValue
     }), 
     method: 'POST', // *GET, POST, PUT, DELETE, etc.
     })
     .then((response) => {
       return response.json();
      })
       .then(data => {
         this.addsuccess()
       })
       .catch(e => console.log('錯誤:', e))
 }
複製程式碼

根據ref獲取Input元件的值，把資料傳給服務端，增加成功後給予提示，並清空輸入框的值

刪除資料

//刪除資料
 delUser(key){
  // console.log(key)
   fetch( '/api/user/deleteUser?id='+ key,{
       headers: {'Content-Type': 'application/json'},
       method: 'DELETE', // *GET, POST, PUT, DELETE, etc.
     })
     .then((response) => {
       return response.json();
       })
     .then(data => {
       this.success()
     })
     .catch(e => console.log('錯誤:', e))
 }
複製程式碼

根據使用者ID條件刪除資料，刪除成功後給予提示

修改資料

//修改資料

modUser(){
  var userid = this.state.userid
  var  username = this.state.username
  var  ageValue = this.state.userage
  var addValue = this.state.useraddress
  //console.log(username,ageValue,addValue)
  fetch( '/api/user/patchUser',{
    headers: {
      'user-agent': 'Mozilla/4.0 MDN Example',
      'content-type': 'application/json'
    },
    body: JSON.stringify({ 
      id:userid,
      username: username, 
      age:ageValue,
      address: addValue
    }), 
    method: 'PATCH', // *GET, POST, PUT, DELETE, etc.
    })
    .then((response) => {
      return response.json();
     })
      .then(data => {
       this.setState({
        visible: false,
      });
      this.queryAll() 
      })
      .catch(e => console.log('錯誤:', e))
}
複製程式碼

點選修改按鈕，彈出修改提交資料框，預設展示已有資訊，修改需要改的資訊

跨域

在package.json中加上proxy代理配置