我正在关注 YouTube 上关于 Rest API 的教程,它基本上完成了,但是当我点击“Find Ninjas”时它不起作用,相反我得到了这两个错误:
index.js:24 GET http://127.0.0.1:4000/api/ninjas?lng=-80&lat=25 404(未找到); 语法错误:意外的标记'<', "
我在 Postman 上测试过它并且工作得很好,它只发生在实时服务器页面中。这是我的代码:
const express = require('express');
const bodyParser = require('body-parser');
const mongoose = require('mongoose');
const app = express();
mongoose.set('strictQuery', true);
mongoose.connect('mongodb://127.0.0.1/ninjago');
mongoose.Promise = global.Promise;
app.use(express.static('public'));
app.use(bodyParser.json());
app.use((req, res, next) => {
res.header('Access-Control-Allow-Origin', '*');
next();
});
app.use('/api', require('../routes/api.js'));
app.use(function (err, req, res, next) {
res.status(422).send({ error: err._message });
});
app.listen(process.env.port || 4000, () => {
console.log('Now listening for requests');
});
const express = require('express');
const router = express.Router();
const Ninja = require('../models/ninja.js');
router.get('/ninjas', (req, res, next) => {
Ninja.aggregate([
{
$geoNear: {
near: {
type: "Point",
coordinates: [parseFloat(req.query.lng), parseFloat(req.query.lat)],
},
distanceField: "dist.calculated",
maxDistance: 100000,
spherical: true
},
},
])
.then(function (ninjas) {
res.setHeader('Content-Type', 'application/json');
res.send(ninjas);
})
.catch(next);
});
router.post('/ninjas', (req, res, next) => {
Ninja.create(req.body).then(function(ninja){
res.send(ninja);
}).catch(next);
});
router.put('/ninjas/:id', (req, res, next) => {
Ninja.findByIdAndUpdate({_id: req.params.id}, req.body).then(function(){
Ninja.findOne({_id: req.params.id}).then(function(ninja){
res.send(ninja);
});
});
});
router.delete('/ninjas/:id', (req, res, next) => {
Ninja.findByIdAndDelete({_id: req.params.id}).then(function(ninja){
res.send(ninja);
});
});
module.exports = router;
import React, { useState, useEffect } from 'react';
import ReactDOM from 'react-dom/client';
import './style.css';
function Ninjas() {
const [ninjas, setNinjas] = React.useState([]);
const handleSubmit = (event) => {
event.preventDefault();
const lng = event.target.lng.value;
const lat = event.target.lat.value;
fetch(`/api/ninjas?lng=${lng}&lat=${lat}`)
.then((response) => response.json())
.then((data) => {
setNinjas(data);
})
.catch((error) => {
console.log(error);
});
};
const ninjasList = ninjas.map((ninja, index) => (
<li key={index}>
<span className={ninja.obj.available}></span>
<span className="name">{ninja.obj.name}</span>
<span className="rank">{ninja.obj.rank}</span>
<span className="dist">{Math.floor(ninja.dis / 1000)} km</span>
</li>
));
return (
<div id="ninja-container">
<form id="search" onSubmit={handleSubmit}>
<label>Enter your Latitude:</label>
<input type="text" name="lat" placeholder="latitude" required />
<label>Enter your Longitude:</label>
<input type="text" name="lng" placeholder="longitude" required />
<input type="submit" value="Find Ninjas" />
</form>
<ul>{ninjasList}</ul>
</div>
);
}
const root = document.getElementById('ninjas');
const appRoot = ReactDOM.createRoot(root);
appRoot.render(<Ninjas />);
还有我的 HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../src/style.css">
<!-- Importar dependências do React -->
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<!-- Importar o Babel para transpilar o código do React -->
<script src="https://unpkg.com/@babel/[email protected]/babel.min.js"></script>
<title>Ninjago</title>
</head>
<body>
<h1 class="title">Ninjago - a Ninja REST API</h1>
<div id="homepage">
<h1>Hire a ninja in your area!</h1>
<div id="ninjas"></div>
</div>
<script src="../dist/bundle.js"></script>
</body>
</html>
我已经尝试更改我的端口(和实时服务器的端口)但它没有用。它应该显示我的地理位置(纬度和经度)附近的忍者