orderjs（前端）中的两个函数仅用于将数据插入数据库，但在那之后，它给了我 400 res，页面刚刚重新加载，网络上的所有消息都被自己删除了，所以 loadUser 函数不要'不起作用，路由更改也不起作用，这里的问题是服务器显示他发送了包含该对象的对象，但客户端没有收到任何它接收到 400 res 状态的内容，但页面会自行重新加载所以快速地
应用程序.js
import React, {Component} from 'react';
import {BrowserRouter as Router,
Routes,
Route
} from 'react-router-dom';
import './App.css';
import Navbar from './components/Navbar/Navbar';
import Home from './components/Home/Home';
import Footer from './components/Footer/Footer';
import Order from './components/Order/Order';
import NoPage from './components/nopage/noPage';
import Collab from './components/collaboration/collaboration';
import Art from './components/art/art';
import OrderCompleted from './components/OrderCompleted/OrderCompleted';
const initialState= {
user: {
id: '',
firstname: '',
lastname: '',
email:'',
mobilenumber:'',
adress:'',
city: '',
size:'',
quantity: '',
joined:''
}
}
class App extends Component {
constructor(){
super();
this.state= initialState;
}
loadUser = (data) => {
this.setState( {user:
{ id: data.id,
firstname: data.firstname,
lastname:data.lastname ,
email:data.email,
mobilenumber:data.mobilenumber,
adress:data.adress,
city: data.city,
size:data.size,
quantity: data.quantity,
joined:data.joined
}})
}
render() {
return (
<>
<Router>
<Routes>
<Route path="/" element={<Navbar /> }>
<Route index element={<Home />} />
<Route path="order">
<Route index element={<Order loadUser={this.loadUser}/>} />
<Route path="orderCompleted" element={<OrderCompleted />} />
</Route>
<Route path="collab" element={<Collab />} />
<Route path="art" element={<Art />} />
<Route path="*" element={<NoPage />} />
</Route>
</Routes>
</Router>
<Footer/>
</>
);
}
}
export default App;
Order.js（前端）
import React from 'react';
import MERCH from './MERCH.jpg';
import {Row, Col, Button, Form} from 'react-bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';
import './Order.css';
import { useState } from 'react';
import { useNavigate} from "react-router";
function Order(props) {
const navigate = useNavigate();
const [firstName, setFirstName] = useState('');
const [lastName, setLastName] = useState('');
const [email, setEmail] = useState('');
const [mobileNumber, setMobileNumber] = useState('');
const [adress, setAddress] = useState('');
const [city, setCity] = useState('');
const [size, setSize] = useState('');
const [quantity, setQuantity] = useState('1');
const onOrderSubmitCOD = () => {
fetch('http://localhost:3000/orderCOD', {
method: 'post',
mode: 'cors',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify({
firstname: firstName,
lastname:lastName,
email: email,
mobilenumber: mobileNumber,
adress: adress,
city: city,
size:size,
quantity: quantity
})
})
.then(response => response.json())
.then(user => {
console.log(user)
if (user.id) {
props.loadUser(user);
navigate('/order/orderCompleted');
}
})
.catch(err => console.log(err));
}
const onOrderSubmitCP = () => {
fetch('http://localhost:3000/orderCP', {
method: 'post',
mode: 'cors',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify({
firstname: firstName,
lastname:lastName,
email: email,
mobilenumber: mobileNumber,
adress: adress,
city: city,
size:size,
quantity: quantity
})
})
.then(response => response.json())
.then(usercp => {
if (usercp.id) {
props.loadUser(usercp);
console.log(usercp)
navigate('/order/orderCompleted');
}
})
.catch(err => console.log(err));
}
return(
<div style={{ width: '50%' }} className="center bg-black b br3 pa3 ma4 bw2 shadow-1">
<Form className="font " style={{ width: '90%' }}>
<Row>
<Col>
<Form.Control
placeholder="First name"
value={firstName}
onChange={event => setFirstName(event.target.value)} />
</Col>
<Col>
<Form.Control
placeholder="Last name"
value={lastName}
onChange={event => setLastName(event.target.value)} />
</Col>
</Row>
<Row className="mb-3 mt2">
<Form.Group as={Col} controlId="formGridEmail">
<Form.Label>Email</Form.Label>
<Form.Control type="email"
placeholder="Enter email"
value={email}
onChange={event => setEmail(event.target.value)} />
</Form.Group>
<Form.Group as={Col} controlId="formGridPassword">
<Form.Label>Mobile number</Form.Label>
<Form.Control type="number"
placeholder="Mobile"
value={mobileNumber}
onChange={event => setMobileNumber(event.target.value)} />
</Form.Group>
</Row>
<Form.Group className="mb-3" controlId="formGridAddress1">
<Form.Label>Address</Form.Label>
<Form.Control
placeholder="Adress"
value={adress}
onChange={event => setAddress(event.target.value)}/>
</Form.Group>
<Row className="mb-3">
<Form.Group as={Col} controlId="formGridCity">
<Form.Label>City</Form.Label>
<Form.Control
value={city}
onChange={event => setCity(event.target.value)} />
</Form.Group>
<Form.Group as={Col} controlId="formGridZip">
<Form.Label>Size</Form.Label>
<Form.Select
value={size}
onChange={event => setSize(event.target.value)}>
<option>Choose...</option>
<option>S</option>
<option>M</option>
<option>L</option>
<option>XL</option>
</Form.Select>
</Form.Group>
<Form.Group as={Col} controlId="formGridZip">
<Form.Label>Quantity</Form.Label>
<Form.Select
value={quantity}
onChange={event => setQuantity(event.target.value)}>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
</Form.Select>
</Form.Group>
</Row>
<div className=" gap-2 mt4 b">
<Button onClick={onOrderSubmitCOD} className="b" variant="outline-light" type="Submit" >
ORDER (COD)
</Button>
</div>
<div className=" gap-2 mt4 b">
<Button onClick={onOrderSubmitCP} className="b" variant="outline-light" type="Submit">
ORDER (CP)
</Button>
</div>
</Form>
</div>
)
}
export default Order;
server.js（后端）
const express = require('express');
const cors = require('cors');
const knex = require('knex');
const order=require('./controllers/order');
const db = knex({
client: 'pg',
connection: {
host : '127.0.0.1',
user : 'postgres',
password : 'test',
database : 'dosei'
}
});
const app = express();
app.use(express.json());
app.use(cors());
app.get('/',(req,res)=>{
res.send('its working')
})
app.post('/orderCOD',(req, res)=>order.handleOrderCOD(req, res, db))
app.post('/orderCP',(req, res)=>order.handleOrderCP(req, res, db))
app.get('/collab' , (req, res)=>{
res.send('its working collab')
} )
app.get('/art', (req, res)=>{
res.send('its working art')
})
app.listen(3000, ()=> {
console.log('app is running on port 3000');
})
order.js（后端）
const handleOrderCOD = (req,res, db) => {
const {firstname, lastname, email, mobilenumber, adress, city, size, quantity} = req.body;
if(!firstname || !lastname || !email || !mobilenumber || !adress || !city || !size || !quantity)
{return res.status(400).json('no data to load')};
db.insert({
firstname: firstname,
lastname:lastname,
email:email,
mobilenumber:mobilenumber,
adress:adress,
city:city,
size:size,
quantity:quantity,
joined: new Date()
})
.into('orders')
.returning('*')
.catch(err=>res.status(400).json('unable to order1'))
.then(user =>{
if(user){
res.json(user[0])
} else{
res.status(400).json('unable to order1')
}
})
.catch(err=>res.status(400).json('unable to order2'))
}
const handleOrderCP = (req,res, db) => {
const {firstname, lastname, email, mobilenumber, adress, city, size, quantity} = req.body;
if(!firstname || !lastname || !email || !mobilenumber || !adress || !city || !size || !quantity)
{return res.status(400).json('no data to load')};
db.insert({
firstname: firstname,
lastname:lastname,
email:email,
mobilenumber:mobilenumber,
adress:adress,
city:city,
size:size,
quantity:quantity,
joined: new Date()
})
.into('orderscp')
.returning('*')
.then(usercp =>{
if(usercp){
res.json(usercp[0])
} else{
res.status(400).json('unable to order1')
}
})
.catch(err=>res.status(400).json('unable to order2'))
}
module.exports={
handleOrderCOD,
handleOrderCP
}