时间戳

首页 > 解决方案 > 将 Node.js 应用程序与前端连接 (index.html)

node.js - 将 Node.js 应用程序与前端连接 (index.html)

问题描述

const express = require("express");
require("../db/mongoose");
const Task = require("../model/user");

const app = express();
const port = process.env.PORT || 3000;

app.use(express.json());

app.get("/mytask", (req, res) => {
  Task.find({})
    .then(tasks => {
      res.send(tasks);
    })
    .catch(e => {});
});

app.post("/mytask", (req, res) => {
  const task = new Task(req.body);
  console.log(task);

  task
    .save()
    .then(() => {
      res.send(task);
    })
    .catch(e => {
      res.status(400).send(e);
    });
});

app.listen(port, () => {
  console.log("Server started correcly");
});

这是我的 Express 应用程序，它连接到数据库。

localhost:3000/mytask/

{
    "name": "Test",
    "description": "This is my todo"
}

这工作正常，并使用 Postman 中的 POST 请求将数据正确存储在我的 Mongodb 数据库中。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <h1>Hello Node</h1>

    <form action="/mytask" method="POST">
      <input type="text" name="task" placeholder="task" />
      <input type="text" name="description" placeholder="description" />
      <input type="submit" />
    </form>
  </body>
</html>

现在我想将它连接到我的前端。但是我该怎么做呢？这是我的 html 文件。但是 index.html 不知道节点服务器。我需要做什么？

标签： node.jsmongodbexpresspost

解决方案

我不建议您使用，res.sendFile因此它只会发送静态 HTML。您将无法将变量传递给客户端。有更好的解决方案，res.render但首先您需要配置视图引擎。（这里是ejs解决方案）

const ejs = require('ejs);
app.set('view engine', 'ejs');
app.set('views', __dirname + '/views');

之后：

app.get('/url', (req,res)=>{
    res.render('yourejsFile')
})

如果你想在html扩展名中写入文件，你可以使用

const ejs = require('ejs);
app.engine('html', ejs.renderFile)
app.set('view engine', 'ejs');
app.set('views', __dirname + '/views');

推荐阅读