我只是测试显示一个主页(索引。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 -->
3条答案
按热度按时间ws51t4hk1#
你不能用node js(express js)直接渲染html页面。使用express.static。我已经阅读了如何使用express js从这个website渲染html页面
希望这能对你有所帮助
qcuzuvrc2#
尝试将标题设置为html
如果这不起作用,请尝试:
3okqufwl3#
我用下面的方法来解决这个问题。
1.首先,我创建了API来为不同的URL呈现Express中的HTML页面,即。
Picture of backend apis
1.然后从前端js文件中,我只是更改了当前页面的URL,以呈现那些已经创建了API的HTML页面。
Picture of url changing for hitting api