我无法在HTML页面中显示来自服务器的输出JSON文件
这是我的服务器端代码段（后端）：
const express = require('express');
const bodyparser = require('body-parser');
const path = require('path');
const mongoose = require('mongoose');
const { quotemodel } = require('./model/user')
mongoose.Promise = global.Promise;
mongoose.connect('mongodb://localhost:27017/qouteDB', { useNewUrlParser: true, useCreateIndex: true, useUnifiedTopology: true });
let app = express();
app.use(express.static(__dirname + '/public'));
app.use(bodyparser.urlencoded({ extended: false }));
app.use(bodyparser.json());
app.get('/', (req, res) => {
res.sendFile(path.join(__dirname, './public/quotes/qoutes.html'))
})
app.post('/post', (req, res) => {
let newQoute = new quotemodel();
newQoute.title = req.body.title;
newQoute.author = req.body.author;
newQoute.body = req.body.body;
newQoute.save(function(err, savedObject) {
if (savedObject) { res.redirect('/viewquotes/' + req.body.author) } else { res.send(err) }
})
})
app.get('/viewquotes/:author', (req, res) => {
console.log('Salam');
quotemodel.findOne({ author: req.params.author }).then((quotemodel) => {
if (!quotemodel) {
res.send().json({
Error: 'Something Went Wornd' + err
})
}
let data = ({
title: quotemodel.title,
author: quotemodel.author,
date: quotemodel.createdAt,
body: quotemodel.body
})
res.send(data)
console.log(data);
})
})
当我运行服务器并转到localhost:3001/时，我的HTML页面正在端口上加载。我可以输入数据，并使用（作者）项目表格插入url。接下来，我使用（作者）作为参数，可以访问MongoDB数据库，并且可以获取我的特定数据并将其作为JSON发送。
我的问题
我想要以下几点：
- [重定向到（/ viewquotes /：author）我的第二页（OutPut）打开
- 并且在打开第二页时，我的JSON数据已呈现到表单中
这是我的模特：
const mongoose = require('mongoose');
const PersianDate = require('persian-date');
PersianDate.toLocale('en')
let DateAt = new PersianDate().format('YYYY/MMMM/DD')
var qouteschema = mongoose.Schema({
author: String,
body: String,
title: String,
createdAt: { type: String, default: DateAt }
})
let quotemodel = mongoose.model('quotemodel', qouteschema);
module.exports = {
quotemodel
}
这是我的HTML表单供输入
<form action="/post" method="POST">
<input id="title" name="title" type="text">
<input id="body" name="body" type="text">
<input id="author" name="author" type="text">
<input id="send" value="send" type="submit">
</form>
这是我的HTML输出格式
<body>
<div>
<input type="text" name="author" id="author">
<input type="text" name="body" id="body">
<input type="text" name="title" id="title">
<input type="date" name="time" id="time">
<input type="button" onclick="NewIncom()">
</div>
<div class="viewquotes"></div>
</body>
<script src=".4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="../viewqoutes.js"></script>
<script src=".min.js"></script>
<script>
function NewIncom() {
axios.get('http://http://localhost:3001/viewquotes')
.then(function(response) {
// handle success
document.getElementById("author").value = response.data.author;
document.getElementById("body").value = response.data.body;
document.getElementById("title").value = response.data.title;
document.getElementById("time").value = response.data.date;
})
}
</script>
听起来像您需要HTML页面的模板引擎。然后，您可以使用发送的数据和响应来填充字段。
EJS非常易于使用。 https://github/tj/ejs
然后您可以执行类似的操作：
<% if (quote) { %>
<form action="/post" method="POST">
<input id="title" name="title" type="text" value="<% quote.title %>">
<input id="body" name="body" type="text" value="<% quote.body %>">
<input id="author" name="author" type="text" value="<% quote.author %>">
<input id="send" value="send" type="submit">
</form>
<% } %>