Question

我想使用链接导航到下一页但我面临404错误我将模板从jade更改为ejs

public static <T, S> S nvl(T value, Function<T, S> method, S nullSubstition) {
    return Optional.ofNullable(value).map(method).orElse(nullSubstition);
}

Answer 1

@Asad，为了您转到/login，您必须在服务器端声明此路由。类似的东西：

app.get('/login', (req, res) => {
    res.render('login');
   });

否则，你将永远拥有404。

Answer 2

使用以下依赖项NPM：

"dependencies": {
    "body-parser": "^1.19.0",
    "ejs": "^3.0.1",
    "express": "^4.17.1",
    "mongoose": "^4.13.20"

在app.js文件中：

const express = require("express");
const bodyParser = require("body-parser");
const mongoose = require("mongoose");

const app = express();

app.set('view engine', 'ejs');


app.use(bodyParser.urlencoded({extended: true}));
app.use(express.static("public"));

在Ejs文件中：

<a class="btn btn-dark btn-sm" href="/someFile" >Link to some EJS File</a>

您的文件结构：

project
 node modules
 public
 views
  index.ejs
  someFile.ejs

通过在app.js文件中将视图引擎设置为ejs并在同一app.js中设置静态文件夹，您可以使用“ /”代表href调出同一目录中的其他ejs文件。希望这可以帮助。这是我对Stackoverflow的第一个答案，所以请放轻松。

Answer 3

"Image for Navigating Different Web Pages"

如上图所示，使用ejs模板浏览不同网页的最佳方法是确保在项目的“视图文件夹目录”中创建一个名为“ partials”的文件夹，并在其中放置其他ejs文件。

1）然后在该“ partials文件夹”中创建2个单独的ejs文件，分别称为header.ejs和footer.ejs。

2）然后根据您命名起始ejs文件的方式转到home.ejs或index.ejs文件，然后剪切（“所有内容（包括CSS和锅炉中的bootstrap链接）向下插入到打开的主体标签<body>，然后粘贴到partials文件夹的header.ejs文件中”）。

3）同时剪切（“从“ home”或“ </body>”文件的关闭主体标签index.ejs到“ partials”文件夹中的footer.ejs文件的所有内容”）。然后，无需重复后续页面about.ejs或contact.ejs的页眉和页脚部分，只需将它们链接到partials文件夹中的header.ejs和footer.ejs文件，如下所示：< / p>

// about.ejs文件的示例页面

视觉插图：

<%- include("partials/header"); -%>

<h1> About Page </h1>

<p> This is an about page </p>


<%- include("partials/footer"); -%>

//对其他页面也是如此。

最后，按照上图，使用以下链接将导航链接到header.ejs文件中的定位标记的不同页面上：{p}

“ /” -----到主页。 “ / about” ------到About页面。 “ /联系人” ------到“联系页面”。

我希望这会有所帮助。请让我知道您的看法。

Answer 4

您的 login.ejs 页面上应该有类似的内容。另外，请注意拼写等等。

<a href="/login">...</a>

在服务器文件中

app.get('/login', (req, res) => {

    res.render('login');
    
    });

我遇到了同样的问题，我就是这样解决的。并且实际上应该创建登录文件。

Answer 5

应用js。

const express = require("express");
const ejs = require("ejs");

const startingContent = "Home Page";
const aboutContent ="About Us Page";

const app = express();

app.set('view engine', 'ejs');


app.use(express.urlencoded({extended: true}));

<块引用>

不需要正文解析器，通过使用： app.use(express.urlencoded({extended: true})); .

app.use(express.json());
app.use(express.static("public"));


app.get("/", (req, res)=>{
  res.render("home", {homeStart: startingContent});
});

    

app.get("/about", (req, res)=>{
  res.render("about", {aboutStartingText: aboutContent});
});


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

Answer 6

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>My Site</title>
  <meta charset="utf-8">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link rel="stylesheet" href="/css/styles.css">
  <nav class="navbar navbar-default">
    <div class="container">
      <div class="navbar-header">
        <p class="navbar-brand">My Site</p>
      </div>
      <ul class="nav navbar-nav navbar-right">
        <!-- 6 -->
        <li id="home"><a href="/">HOME</a></li>
        <li id="about"><a href="/about">ABOUT US</a></li>
      </ul>
    </div>
  </nav>

<body>
  <div class="container">

Answer 7

Header.ejs

<块引用>

最佳做法是将页眉和页脚放在文件夹中例子：观看次数

partials
  header.ejs
  footer.ejs
home.ejs
about.ejs

然后在 ejs 文件中进行渲染。

<%- include("partials/header") -%>

<h1>Home</h1>
<p><%= homeStart %></p>

<%- include("partials/footer") -%>

我想使用链接导航到ejs中的另一个页面

7 个答案: