javascript 使用express时，HTML页面无法正确呈现,js

knsnq2tg 于 2023-04-28 发布在 Java

关注(0)|答案(3)|浏览(156)

我只是测试显示一个主页（索引。html页面）使用express。js.当我直接从浏览器加载时，这个索引页面在我的浏览器上完美地加载/呈现。然而，当我试图通过快递加载相同的页面。js我没有得到同样的效果。它只是显示所有的元素和图片与其css风格线。谁能告诉我丢了什么？我正在加载的索引页是从一个模板。下面是getwebapp。js文件和路由。我只显示到索引页的路径。

getwebapp.js content：

const express = require('express');
const app = express();
const path = require('path');
const router = express.Router();

app.use(express.static(path.join(__dirname + 'public')));

router.get('/', function(req, res) {
    res.sendFile(path.join(__dirname + '/index.html'));});

router.get('/about", function (req, res) {
    res.sendFile(path.join(__dirname + '/about.html'));});

app.use('/', router);
app.listen(8080, () => console.log('Listening on port 8080....'));
console.log('Server started at ' + Date());

index.html内容（上半部分）

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Hello World</title>

    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <!-- Swiper CSS -->
    <link rel="stylesheet" href="css/swiper.min.css">
    <!-- Styles -->
    <link rel="stylesheet" href="style.css">
    <script src="js/custom.js"></script>
</head>
<body>
   <header class="site-header">
     <div class="nav-bar">
        <div class="container">
            <div class="row">
               <div class="col-12 d-flex flex-wrap justify-content-between align-items-center">
                  <div class="site-branding d-flex align-items-center">
                      <a class="d-block" href="index.html" rel="home"><img class="d-block" src="images/logo.png" alt="logo"></a>
                       </div><!-- .site-branding -->

                       <nav class="site-navigation d-flex justify-content-end align-items-center">
                         <ul class="d-flex flex-column flex-lg-row justify-content-lg-end align-items-center">
                                <li class="current-menu-item"><a href="/">Home</a></li>
                                <li><a href="/about">About us</a></li>
                                <li><a href="/services">Services</a></li>
                                <li><a href="/news">News</a></li>
                                <li><a href="/contact">Contact</a></li>

                                <li class="call-btn button gradient-bg mt-3 mt-md-0">
                                    <a class="d-flex justify-content-center align-items-center" href="#"><img src="images/emergency-call.png"> +34 586 778 8892</a>
                                </li>
                            </ul>
                        </nav><!-- .site-navigation -->

JavaScript

来源：https://stackoverflow.com/questions/54273456/html-page-does-not-render-properly-when-using-express-js

3条答案

按热度按时间

ws51t4hk1#

你不能用node js（express js）直接渲染html页面。使用express.static。我已经阅读了如何使用express js从这个website渲染html页面
希望这能对你有所帮助

赞(0）回复(0）举报 2023-04-28

qcuzuvrc2#

尝试将标题设置为html

app.get("/", function(req, res) {
    res.type('html');
    res.sendFile(path.join(__dirname, "index.html"));
});

如果这不起作用，请尝试：

app.use(express.static(__dirname + '/public'));
app.use(express.static(__dirname + '/files'));
app.use(express.static(__dirname + '/uploads'));

赞(0）回复(0）举报 2023-04-28

3okqufwl3#

我用下面的方法来解决这个问题。
1.首先，我创建了API来为不同的URL呈现Express中的HTML页面，即。
Picture of backend apis
1.然后从前端js文件中，我只是更改了当前页面的URL，以呈现那些已经创建了API的HTML页面。
Picture of url changing for hitting api

赞(0）回复(0）举报 2023-04-28

我来回答

javascript 使用express时，HTML页面无法正确呈现,js

3条答案

相关问题

热门标签

最新问答