通过POST请求从Firestore数据库获取单个项目不起作用

Question

我有一个Firestore应用程序正在运行(集合："students"，包含5个文档)一个文档的id为：1

我可以用HTML表单来编写集合，这样我就可以添加一个单独的学生。我还可以把所有的学生放在一张桌子上(Bootstrap)。

但当我询问一个学生的个人数据时，我迷路了。

如果我打开一个新的终端(VS代码)并给出命令

$curl "http://localhost:8080/student/1"

然后请求的数据显示在我的终端中{"父亲姓名"："Terpstra"，"姓氏"："Gerrits"，"名字"："Mark"}

但是：当我在HTML页面中使用此表单时

<form id="apply-form" method="post" action="http://localhost:8080/student/:id">
<label for="id">Student ID</label>
<input type="text" id="id" name="id" placeholder="....">
<button class="btn btn-primary btn-sm" type="submit">Get Data</button>
</form>

填写文本字段：1，然后单击提交按钮

我得到的结果是：无法POST/学生/：id

如果我在此表单中使用method="GET"，则浏览器中的结果为：http://localhost:8080/student/:id?id=1

如果我键入url:http://localhost:8080/student/1，那么我会得到请求的数据{"父亲姓名"："Terpstra"，"姓氏"："Gerrits"，"名字"："Mark"}

通过这种方式，我可以检查对数据库的数据请求是否为结果提供了正确的数据。

我不知道HTML表单出了什么问题，这就是我在应用程序中使用的：

====studentController.js

'use strict';
const firebase = require('../db');
const Student = require('../models/student');
const firestore = firebase.firestore();
.....
// 1 of the documents from the collection
const getStudent = async (req, res, next) => {
try {
const id = req.params.id;
const student = await firestore.collection('students').doc(id);
const data = await student.get();
//if(!data.exists) {
if(data == null) {
res.status(404).send('Student with the given ID not found');
}else {
res.send(data.data());
}
} catch (error) {
res.status(400).send(error.message);
}
}
module.exports = {
addStudent,
getAllStudents,
getStudent,
updateStudent,
deleteStudent
}

===========student.routes.js

const express = require('express');
const {addStudent, 
getAllStudents, 
getStudent,
updateStudent,
deleteStudent
} = require('../controllers/studentController');
// in studentController.js staan de functies uitgeschreven
const router = express.Router();
// 1 document aan de collectie toevoegen
router.post('/student', addStudent);
// alle documenten uit de collectie opvragen
router.get('/students', getAllStudents);
// 1 document uit de collectie opvragen
router.get('/student/:id', getStudent);
// 1 document uit de collectie aanpassen
router.put('/student/:id', updateStudent);
// 1 document uit de collectie verwijderen
router.delete('/student/:id', deleteStudent);
module.exports = {
routes: router
}

==========index.js

'use strict';
const express = require('express');
const cors = require('cors');
const bodyParser = require('body-parser');
const config = require('./config');
var studentRoutes = require('./routes/student-routes');
var citieRoutes = require('./routes/citie-routes');
const app = express();
app.use(express.static(__dirname + '/public'));
app.use(express.json());
app.use(cors());
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended:true}));
// app.use('/api', studentRoutes.routes);
app.use('/', studentRoutes.routes);
app.use('/', citieRoutes.routes);
app.listen(config.port, () => console.log('App is listening on url http://localhost:' + config.port));

Answer 1

您的表单格式不正确。当点击提交按钮时，您可以使用类似的东西(在表单的html页面上的脚本中)来格式化API的url，然后转到正确的url。

document.querySelector('form').addEventListener("submit", function (e) {
e.preventDefault()

let param = document.querySelector('input[name="id"]').value
window.location.href = 'http://localhost:8080/student/' + param
})

来源：如何将HTML表单数据作为路径而不是查询字符串附加到URL中？