无法在 EJS 和 Node 中设置路由

Question

app.ts

import express from 'express'
import * as dotenv from 'dotenv'
import path from 'path'
import bodyParser from 'body-parser'
import { newsRouter } from './src/routes/news'

dotenv.config()

const { PORT } = process.env
const app = express()

// static files
app.use(express.static('public'))
app.use('/css', express.static(path.join(__dirname + 'public/css')))
app.use('/assets', express.static(path.join(__dirname + 'public/assets')))
app.use('/js', express.static(path.join(__dirname + 'public/js')))

// Template Engine
app.set('views', './src/views')
app.set('view engine', 'ejs')

app.use(bodyParser.urlencoded({ extended: true }))

app.get('/', newsRouter)

// Listing Port
app.listen(PORT, () => {
  console.log(`Server is Running at port `)
})

news.route.ts

import express from 'express'
import * as newsController from '../controllers/news.controller'

const router = express.Router()

router.get('/', newsController.newsController)
router.get('/article/:id', newsController.articleRouter)

export { router as newsRouter }

news.controller.ts

import { Request, Response } from 'express'
import axios from 'axios'

export const newsController = async (req: Request, res: Response) => {
  await axios
    .get('https://raddy.co.uk/wp-json/wp/v2/posts/')
    .then(response => {
      res.render('news', { articles: response.data })
    })
    .catch(error => {
      if (error.response) {
        console.log(error.response.data)
        console.log(error.response.status)
        console.log(error.response.headers)
      } else if (error.request) {
        console.log(error.request)
      } else {
        console.log('Error', error.message)
      }
      console.log(error.config)
    })
}

export const articleRouter = async (req: Request, res: Response) => {
  const articleID = req.params.id
  console.log('Working.....')
  await axios
    .get(`https://raddy.co.uk/wp-json/wp/v2/posts/${articleID}`)
    .then(response => {
      console.log(response.data)
      res.render('newsSingle', { article: response.data })
    })
    .catch(error => {
      if (error.response) {
        console.log(error.response.data)
        console.log(error.response.status)
        console.log(error.response.headers)
      } else if (error.request) {
        console.log(error.request)
      } else {
        console.log('Error', error.message)
      }
      console.log(error.config)
    })
}

news.ejs

<!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" />
    <title>Document</title>
    <link rel="styleSheet" href="/css/styles.css"
  </head>
  <body>
    <header style="position: sticky; top: 0">
      <h1>Hello First EJS</h1>
    </header>
    <div class="content">
      <% articles.forEach((article, index)=> { %>
      <div class="datas">
        <a href="/article/<%- article.id %>">
          <img src="<%- article.thumbnail_url %>" height="270px" width="auto" />
          <p><%- article.title.rendered %></p>
        </a>
      </div>
      <% }) %>
    </div>
  </body>
</html>

newsSingle.ejs

<!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="/css/single.css"
  </head>
  <body>
    <header style="position: sticky; top: 0">
      <h1>Hello First EJS</h1>
    </header>
    <div class="content">
      <div class="datas">
        <img src="<%- article.thumbnail_url %>" height="270px" width="auto" />
        <p><%- article.content.rendered %></p>
      </div>
    </div>
  </body>
</html>

文件夹结构

EJS
├── src
    ├── controllers
        ├── news.conrtoller.ts
    ├── routes 
        ├── news.route.ts
    ├── types
    ├── views
        ├── partials
        ├── news.ejs
        ├── newsSingle.ejs
├── public
    ├── assets
    ├── css

当我点击 localhost:port 时，它按预期呈现了来自 API 的所有新闻，但下一条路线 localhost:port/article/1212（点击它时获取有关特定新闻的更多详细信息）正在返回 Cannot GET /article/1212 的错误。我的路由错误是什么？甚至我也没有在终端中获得 console.log('Working....')，所以它也没有访问控制器。

已学习 this 教程

Answer 1

这里只需要改一下

app.get("/", newsRouter);

至

app.use("/", newsRouter);

use() function is used to mount the specified middleware function(s) at the path which is being specified. It is mostly used to set up middleware for your application. Parameters: path: It is the path for which the middleware function is being called.

无法在 EJS 和 Node 中设置路由

Unable to set Route in EJS and Node

ejs

node.js