志不强者智不达,言不信者行不果。这篇文章主要讲述React app Express Api无法运行localhost 404(未找到)相关的知识,希望能为你提供帮助。
当我单击提交按钮时,此应用程序应在api中添加信息当我单击添加任务的页面上的按钮时,我不断收到“ POSThttp://localhost:3000/api/task404(未找到)”,我尝试了所有我知道的东西,并在互联网上找到了,但是我没有解决问题,所以我请您帮忙使我的React应用正常运行,我得到这个“ SyntaxError:意外的令牌
Server.js文件
const express = require('express');
const morgan = require('morgan');
const path = require('path');
const{ mongoose } = require('./database');
const app = express();
// Import the library:
var cors = require('cors');
// Then use it before your routes are set up:
app.use(cors());
//Settings
app.set('port', process.env.PORT || 3000);
//Middlewares
app.use(morgan('dev'));
app.use(express.json());
//Routesapp.use('/api/task' ,require('./routes/task.routes'));
//static filesapp.use(express.static(path.join(__dirname,'public')));
//Start server
app.listen(app.get('port'), ()=>
{
console.log(`Server on port ${app.get('port')}`);
});
Data.js文件
import React, {Component} from 'react';
import M from 'materialize-css';
class Data extends Component {constructor(){
super();
this.state = {
title :'',
img : '',
price:0,
more:'',
task:[],
_id:''
};
this.handleChange = this.handleChange.bind(this);
this.addTask = this.addTask.bind(this);
}addTask(e){
if(this.state._id){
fetch(`http://localhost:3000/api/task/${this.state._id}`,{
method: 'PUT',
body: JSON.stringify(this.state),
headers: {
'Accept' : 'application/json',
'Content-Type': 'application/json'
}})
.then(res =>
res.json())
.then(data =https://www.songbingjia.com/android/>
{
console.log(data)
M.toast({html:'Task Updated'});
this.setState({title: ' ',img: '', price:0,more:'', _id: ''});
this.fetchTask();
});
}else{
fetch('http://localhost:3000/api/task',{
method: 'POST',
body: JSON.stringify(this.state),
headers: {
'Accept' : 'application/json',
'Content-Type': 'application/json'
}
})
.then(res =>
res.json())
.then(data =https://www.songbingjia.com/android/>
{
console.log(data)
M.toast({html:'Task Saved'});
this.setState({title:'', img: '' , price:0 ,more:''});
this.fetchTask();
})
.catch(err =>
console.error(err));
}e.preventDefault();
}componentDidMount(){
this.fetchTask();
}fetchTask(){
fetch('http://localhost:3000/api/task')
.then(res =>
res.json())
.then(data =https://www.songbingjia.com/android/>
{
this.setState({task: data});
console.log(this.state.task);
});
}deleteTask(id){
// eslint-disable-next-line no-restricted-globals
if(confirm('Are you sure you want to delete it?')){fetch(`http://localhost:3000/api/task/${id}`,{
method: 'DELETE',
headers: {
'Accept' : 'application/json',
'Content-Type': 'application/json'
}
})
.then(res =>
res.json())
.then(data =https://www.songbingjia.com/android/>
{
console.log(data);
M.toast({html:'Task Deleted'});
this.fetchTask();
});
}
}editTask(id){
fetch(`http://localhost:3000/api/task/${id}`)
.then(res =>
res.json())
.then(data =https://www.songbingjia.com/android/>
{
console.log(data)
this.setState({
title: data.title,
img: data.img,
price: data.price,
more: data.more,
_id: data._id
})
});
}handleChange(e){
const {name, value} = e.target;
this.setState({
[name]: value
});
}render(){
return(
<
div>
{/* navigacion*/}<
div className="container">
<
div className="row">
<
div className="col s10">
<
div className="col s10">
<
div className="card">
<
div className="card-content">
<
form onSubmit={this.addTask}>
<
div className="row">
<
div className="input-field col s7">
<
input name="title" value=https://www.songbingjia.com/android/{this.state.title} onChange={this.handleChange} type="text" placeholder="Insert Title"/>
<
/div>
<
/div>
<
div className="row">
<
div className="input-field col s7">
<
textarea name="img" value=https://www.songbingjia.com/android/{this.state.description} required={true} onChange={this.handleChange} placeholder="Insert img"
className="materialize-textarea">
<
/textarea>
<
/div>
<
/div>
<
div className="row">
<
div className="input-field col s7">
<
input name="price" value=https://www.songbingjia.com/android/{this.state.price} required={true} onChange={this.handleChange} type="Number" placeholder="Insert Price"/>
<
/div>
<
/div>
<
div className="row">
<
div className="input-field col s7">
<
input name="more" value=https://www.songbingjia.com/android/{this.state.more} required={true} onChange={this.handleChange} type="text" placeholder="Insert more"/>
<
/div>
<
/div>
<
button type="submit" className="btn light-blue
darken-4">
Send
<
/button>
<
/form>
<
/div>
<
/div>
<
/div>
<
/div>
<
div className="col-s7">
<
table >
<
thead>
<
tr>
<
th>
Title<
/th>
<
th>
Img<
/th>
<
th>
Price<
/th>
<
th>
Info<
/th>
<
/tr>
<
/thead>
<
tbody >
{
this.state.task.map(task =>
{
return(
<
tr key={task.id}>
<
td>
{task.title}<
/td>
<
td>
{task.img}<
/td>
<
td>
{task.price}<
/td>
<
td>
{task.info}<
/td>
<
td>
<
button className="btn light-blue darken-4"onClick={()=>
this.deleteTask(task._id)} >
<
i className="material-icons">
delete<
/i>
<
/button>
<
button onClick={()=>
this.editTask(task._id)} className="btn light-blue darken-4" style={{margin:'4px'}}>
<
i className="material-icons">
edit<
/i>
<
/button>
<
/td>
<
/tr>
)
})
}
<
/tbody>
<
/table>
<
/div>
<
/div>
<
/div>
<
/div>
)}
}export default Data;
任务路径文件
const express = require('express');
const router = express.Router();
const Task = require('../models/task');
router.get('/',async(req,res)=>
{
const tasks = await Task.find();
console.log(tasks);
res.json(tasks);
} );
router.get('http://localhost:3000/api/task/:id',async(req,res)=>
{
const tasks = await Task.findById(req.params.id);
console.log(tasks);
res.json(tasks);
} );
router.post('http://localhost:3000/api/task', async(req,res)=>
{
const { title,img, price, info } = req.body;
const task = new Task({
title:title,
img:img,
price:price,
info:info});
await task.save();
res.json({status :'Task saved'});
});
router.put('http://localhost:3000/api/task/:id',async (req,res)=>
{
const{ title,img, price,info } = req.body;
const newTask = {
title:title,
img:img,
price:price,
info:info};
await Task.findByIdAndUpdate(req.params.id,newTask);
res.json({status : 'Task Updated'});
});
router.delete('http://localhost:3000/api/task/:id', async(req,res)=>
{
await Task.findByIdAndRemove(req.params.id);
res.json({status:'Task Deleted'});
});
module.exports = router;
答案不要像
string
那样将对象转换为body: JSON.stringify(this.state)
。【React app Express Api无法运行localhost 404(未找到)】只需将其作为JSON对象类型传递。
fetch('http://localhost:3000/api/task',{
method: 'POST',
body: this.state,
headers: {
'Accept' : 'application/json',
'Content-Type': 'application/json'
}
})
推荐阅读
- 在Google Maps android上放置点击监听器
- AppAuth / OpenID-Connect(使用用户名和密码登录())
- 通过单击android studio中的按钮将我的当前位置发送给所有用户
- Azure中使用大量CPU的ASP.NET WebApp
- Python如何比较数据框列和2D列表()
- 如何从JSON中提取嵌套的值()
- tuple()增加运行时间这么多是否正常()
- 使用JMESPath根据另一个查询结果过滤列表
- Python Pandas ffill if语句问题()