Javascript 将post方法从react发送到express server
我有一个应用程序,在前端运行react,在后端运行express 我想从前端将1发布到后端服务器。但我正在和这个问题作斗争 post方法 我没有得到任何错误 我可以在react应用程序中控制台来自后端服务器的数据。它工作顺利。在 我指的是重要的部分 应用程序的逻辑 这是一个石头剪刀布游戏,允许用户玩对电脑 React使用裁判功能进行评估,如果球员获胜,则裁判功能输出1 如果计算机获胜,则输出2 然后,如果裁判员功能输出1且computerChoice有一个值,则该功能 sendOne被触发 这个函数应该使用fetch函数将一个(表示用户的分数)发送到后端 提前感谢您的任何帮助Javascript 将post方法从react发送到express server,javascript,node.js,reactjs,express,post,Javascript,Node.js,Reactjs,Express,Post,我有一个应用程序,在前端运行react,在后端运行express 我想从前端将1发布到后端服务器。但我正在和这个问题作斗争 post方法 我没有得到任何错误 我可以在react应用程序中控制台来自后端服务器的数据。它工作顺利。在 我指的是重要的部分 应用程序的逻辑 这是一个石头剪刀布游戏,允许用户玩对电脑 React使用裁判功能进行评估,如果球员获胜,则裁判功能输出1 如果计算机获胜,则输出2 然后,如果裁判员功能输出1且computerChoice有一个值,则该功能 sendOne被触发 这个
const regular = require("./model/regular"),
http = require("http"),
express = require("express"),
app = express(),
cors = require("cors"),
bodyParser = require("body-parser"),
middleWareBodyParser = bodyParser.urlencoded({ extended: false }),
mongoose = require("mongoose"),
Regular = require("./model/regular"),
//Bonus = require("./model/user"),
dbIndentification = require("./db-indentification"),
port = process.env.PORT || 5000,
//port = http://localhost:5000 (not working)
db = dbIndentification;
app.use(express.json());
app.use(
cors({
origin: port,
optionsSuccessStatus: 200,
})
);
app.use(function(req, res, next) {
//Enabling CORS
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Methods", "GET,HEAD,OPTIONS,POST,PUT");
res.header(
"Access-Control-Allow-Headers",
"Origin, X-Requested-With, Content-Type, Accept, x-client-key, x-client-token, x-client-secret, Authorization"
);
next();
});
app.use(
bodyParser.urlencoded({
extended: true,
})
);
//app.use("/", router);
mongoose.connect(db, { useUnifiedTopology: true, useNewUrlParser: true });
app.post("/", middleWareBodyParser, (req, res) => {
console.log(req);
});
let score = {};
new Regular(score).save();
//Get information from database and send to the front
let obj = Regular.find({ regular: 1 }, function(err, docs) {
if (err) {
console.log(err);
} else {
console.log("First function call : ", docs);
app.get("/", function(req, res) {
res.send({ backEnd: docs });
});
}
}).countDocuments();
const server = http.createServer(app);
server.listen(5000);
前端代码
import React, { Fragment, useState, useEffect, useRef } from "react";
import Bonus from "./bonus";
import Regular from "./regular";
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
import paperIcon from "./buttons/paper-icon";
import regeneratorRuntime from "regenerator-runtime";
import axios from "axios";
export default function Main() {
const [response, setResponse] = useState(0);
const [userChoice, setUserChoice] = useState("");
const [computerChoice, setComputerChoice] = useState("");
const [toggle, setToggle] = useState(true);
const ENDPOINT = "http://localhost:5000/";
const [showLoading, setShowLoading] = useState(false);
const timerToClearSomewhere = useRef(null);
//Send the pathname to the main page each time you reload the page.
window.history.replaceState(null, "Main", "/");
const [data, setData] = useState({ hits: [] });
useEffect(() => {
const fetchData = async () => {
const result = await axios(ENDPOINT);
setData(result.data);
setResponse(result.data.backEnd);
};
fetchData();
}, []);
console.log("response :" + response);
function referee() {
var training = {};
function learn(winner, loser) {
if (!training[winner]) training[winner] = {};
training[winner][loser] = 1;
}
const judge = (play1, play2) => {
let playerOne = 1;
let playerTwo = 2;
if (play1 === play2) {
return "tie";
}
return training[play1][play2] === 1 ? playerOne : playerTwo;
};
const validate = (choice) => {
return choice in training;
};
const choices = () => {
return Object.keys(training);
};
return {
learn: learn,
judge: judge,
validAction: validate,
getChoices: choices,
};
}
let ref = referee();
ref.learn("rock", "scissors");
ref.learn("paper", "rock");
ref.learn("scissors", "paper");
const changeToggle = (e) => {
setToggle((state) => !state);
};
const result = () => {
if (computerChoice != "") {
let result = ref.judge(userChoice, computerChoice);
if (result === 1) {
console.log(result);
const sendOne = () => {
const body = JSON.stringify({user:1}); /////////////////>>>>> HERE
const options = {
method: "POST",
headers: { "content-type": "application/x-www-form-urlencoded" },
body,
ENDPOINT,
};
fetch(options)
.then((response) => {
console.log("sent");
})
.catch((er) => {
console.log(er);
});
};
sendOne();
}
}
};
result();
let display = {};
const toggleFunction = () => {
if (toggle) {
return (display = { display: "block" });
} else {
return (display = { display: "none" });
}
};
toggleFunction();
vtps: return (
<Fragment>
<Router>
<div className={"main"}>
<nav>
<ul style={display}>
<li>
<Link
to={"/regular"}
onClick={() => {
setToggle((state) => !state);
}}
>
{"Regular"}
</Link>
</li>
<li>
<Link
to={"/bonus"}
onClick={() => {
setToggle((state) => !state);
}}
>
{"Bonus"}
</Link>
</li>
</ul>
</nav>
<Switch>
<Route
path={"/regular"}
render={() => (
<Regular
userchoice={userChoice}
setuserchoice={setUserChoice}
toggle={toggle}
onClick={changeToggle}
computerchoice={computerChoice}
setcomputerchoice={setComputerChoice}
referee={ref}
/>
)}
/>
<Route
path={"/bonus"}
render={() => (
<Bonus toggle={toggle} onClick={changeToggle} />
)}
/>
</Switch>
</div>
</Router>
</Fragment>
);
}
"name": "cv",
"version": "1.0.0",
"private": true,
"proxy": "http://localhost:5000/",
"description": "Mansan's CV",
"main": "index.js",