前言
這次使用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代理配置