使用 Pug 表示：GET http://localhost:3004/contact 404 (Not Found)

Question

我正在使用 Express.js 和 Pug 作为视图引擎创建一个应用程序。它有一个导航栏，可将用户重定向到 3 个可能的页面：主页、联系方式 和我们的服务.

这里的问题是只有主页成功出现。其余页面（contact.pug 和 our-services.pug）向我显示错误：“GET http://localhost:3004/contact 404（未找到）”，尽管导航栏确实出现在每个页面的顶部页。

我确保所有页面：

路由文件夹中存在一个呈现页面的js文件:

(routes/contact.js)

    var express = require('express');
    var router = express.Router();
    var valid = require("../mychecker");
    
    router.get('/contact', function(req, res){
       if(valid()){
        res.render('contact', {
           name:"You can contact us here"
        });
       }
       else res.send("you are using this website outside working hours.");
     })
    
    module.exports = router;

每个页面的router导入app.js使用app.use().
可以使用 layout.pug 中的“按钮”访问每个页面。它是包含在每个 page.pug 文件中的导航栏。

我已尝试检查主页代码与联系人和我们的服务页面代码之间的任何差异，但我没有发现任何差异。

这是我的 app.js 文件：

var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');

var homeRouter = require('./routes/homepage');
var contactRouter = require('./routes/contact');
var servicesRouter = require('./routes/our-services');

var app = express();

app.listen(3004, function(){
  console.log('Express listening on port', this.address().port);
});
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'pug');

app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

app.use(['/','/home'], homeRouter);
app.use('/contact', contactRouter);
app.use('/our-services', servicesRouter);


// catch 404 and forward to error handler
// error handler
app.use(function(err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};

  // render the error page
  res.status(err.status || 500);
  res.render('error');
});


module.exports = app;

这是我的 layout.pug 文件：

doctype html
html
  head
      style(type="text/css").
          nav {
              background-color: black;
              margin:0;
              padding:5px;
          }
          nav a{
              color:aliceblue;
              text-decoration: none;
              margin: 0 10px 10px 0;
          }

      nav
          ul 
                  a(href="home") Home              
                  a(href="our-services") Services              
                  a(href="contact") Contact 
  body
    block content

最后，这是每个 page.pug 文件的样子： (views/contact.pug)

extends layout

block content
   body
      h1=name

Answer 1

在 app.js 中创建、导入和使用路由器文件时，您在此处提供的路由：

app.use('/contact', contactRouter);

用于您的家乡路线之上。这意味着联系页面的 link 是- HTTP://localhost:3004/contact/contact。对于您创建的每个路由器都是如此。

如果您希望页面 url 成为 localhost:3004/contact/ ，您应该将语句更改为：

router.get('/', function(req, res){
       if(valid()){
        res.render('contact', {
           name:"You can contact us here"
        });
       }
       else res.send("you are using this website outside working hours.");
     })

使用 Pug 表示：GET http://localhost:3004/contact 404 (Not Found)

Express using Pug: GET http://localhost:3004/contact 404 (Not Found)

javascript

node.js

express

pug