我有一个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));
您的表单格式不正确。当点击提交按钮时,您可以使用类似的东西(在表单的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中?