ฉันมีแอพพื้นฐาน node.js ที่ฉันพยายามจะลงมือทำโดยใช้เฟรมเวิร์ก Express ฉันมีviewsโฟลเดอร์ที่ฉันมีindex.htmlไฟล์ แต่ฉันได้รับข้อผิดพลาดต่อไปนี้เมื่อโหลดเว็บเบราว์เซอร์
ข้อผิดพลาด: ไม่พบโมดูล 'html'
ด้านล่างเป็นรหัสของฉัน
var express = require('express');
var app = express.createServer();
app.use(express.staticProvider(__dirname + '/public'));
app.get('/', function(req, res) {
res.render('index.html');
});
app.listen(8080, '127.0.0.1')ฉันหายไปนี่อะไร
คำตอบ:
คุณสามารถมีหยกรวมถึงหน้า HTML ธรรมดา:
ใน views / index.jade
include plain.htmlใน views / plain.html
<!DOCTYPE html>
...และ app.js ยังสามารถแสดงหยกได้:
res.render(index)คำตอบเหล่านี้จำนวนมากล้าสมัย
ใช้ express 3.0.0 และ 3.1.0 ได้ผลดังต่อไปนี้:
app.set('views', __dirname + '/views');
app.engine('html', require('ejs').renderFile);ดูความคิดเห็นด้านล่างสำหรับทางเลือกไวยากรณ์และคำเตือนสำหรับ express 3.4+:
app.set('view engine', 'ejs');จากนั้นคุณสามารถทำสิ่งที่ชอบ:
app.get('/about', function (req, res)
{
res.render('about.html');
});สิ่งนี้จะถือว่าคุณมีมุมมองของคุณในviewsโฟลเดอร์ย่อยและคุณได้ติดตั้งejsโมดูลโหนด ถ้าไม่ใช่ให้รันสิ่งต่อไปนี้บนคอนโซลโหนด:
npm install ejs --saveจากคำแนะนำ Express.js: ดูการแสดงผล
ดูชื่อไฟล์ในแบบฟอร์ม
Express.ENGINEโดยที่ENGINEเป็นชื่อของโมดูลที่จะต้องใช้ ตัวอย่างเช่นมุมมองlayout.ejsจะบอกระบบมุมมองrequire('ejs')โมดูลที่กำลังโหลดจะต้องส่งออกวิธีการexports.render(str, options)ที่สอดคล้องกับ Express อย่างไรก็ตามapp.register()สามารถใช้ในการแมปเอ็นจิ้นไปยังนามสกุลไฟล์เพื่อให้ตัวอย่างfoo.htmlสามารถแสดงผลโดย jade
ดังนั้นไม่ว่าคุณจะสร้าง renderer แบบง่าย ๆ ของคุณเองหรือคุณแค่ใช้ jade:
app.register('.html', require('jade'));เพิ่มเติมapp.registerเกี่ยวกับ
โปรดทราบว่าใน Express 3 วิธีนี้จะถูกเปลี่ยนชื่อ
app.engine
app.engine('.html', require('ejs').renderFile);
คุณสามารถอ่านไฟล์ HTML และส่งมันได้:
app.get('/', (req, res) => {
fs.readFile(__dirname + '/public/index.html', 'utf8', (err, text) => {
res.send(text);
});
});ลองนี้ มันใช้งานได้สำหรับฉัน
app.configure(function(){
.....
// disable layout
app.set("view options", {layout: false});
// make a custom html template
app.register('.html', {
compile: function(str, options){
return function(locals){
return str;
};
}
});
});
....
app.get('/', function(req, res){
res.render("index.html");
});app.registerผมเห็นข้อผิดพลาดใน บางทีมันเลิกใช้แล้วใน express 3.0.0.rc3? TypeError: Object function app(req, res){ app.handle(req, res); } has no method 'register'
app.get('/', function (req, res) {
res.sendfile(__dirname + '/public/index.html');
});หากคุณใช้express@~3.0.0 ให้เปลี่ยนบรรทัดด้านล่างจากตัวอย่างของคุณ:
app.use(express.staticProvider(__dirname + '/public'));เพื่อสิ่งนี้:
app.set("view options", {layout: false});
app.use(express.static(__dirname + '/public'));ฉันทำมันตามที่อธิบายไว้ในหน้า Express apiและมันใช้งานได้อย่างมีเสน่ห์ ด้วยการตั้งค่านั้นคุณไม่จำเป็นต้องเขียนรหัสเพิ่มเติมดังนั้นจึงเป็นเรื่องง่ายพอที่จะใช้สำหรับการผลิตขนาดเล็กหรือการทดสอบของคุณ
รหัสเต็มรายการด้านล่าง:
var express = require('express');
var app = express.createServer();
app.set("view options", {layout: false});
app.use(express.static(__dirname + '/public'));
app.get('/', function(req, res) {
res.render('index.html');
});
app.listen(8080, '127.0.0.1')app.use(express.static(__dirname + '/public'));หลังจากที่คุณเริ่มเซิร์ฟเวอร์ด้วยapp.listen?
ฉันยังต้องเผชิญกับปัญหาเดียวกันในและexpress 3.X วิธีการแก้ปัญหาดังกล่าวข้างต้นได้รับจะไม่ทำงานสำหรับรุ่นล่าสุดnode 0.6.16 express 3.xพวกเขาลบapp.registerวิธีการและapp.engineวิธีการเพิ่ม หากคุณลองวิธีการแก้ปัญหาข้างต้นคุณอาจพบข้อผิดพลาดดังต่อไปนี้
node.js:201
throw e; // process.nextTick error, or 'error' event on first tick
^
TypeError: Object function app(req, res){ app.handle(req, res); } has no method 'register'
at Function.<anonymous> (/home/user1/ArunKumar/firstExpress/app.js:37:5)
at Function.configure (/home/user1/ArunKumar/firstExpress/node_modules/express/lib/application.js:399:61)
at Object.<anonymous> (/home/user1/ArunKumar/firstExpress/app.js:22:5)
at Module._compile (module.js:441:26)
at Object..js (module.js:459:10)
at Module.load (module.js:348:31)
at Function._load (module.js:308:12)
at Array.0 (module.js:479:10)
at EventEmitter._tickCallback (node.js:192:40)เพื่อกำจัดข้อความแสดงข้อผิดพลาด เพิ่มบรรทัดต่อไปนี้ในapp.configure function
app.engine('html', require('ejs').renderFile);หมายเหตุ: คุณต้องติดตั้งejsแม่แบบเอ็นจิ้น
npm install -g ejsตัวอย่าง:
app.configure(function(){
.....
// disable layout
app.set("view options", {layout: false});
app.engine('html', require('ejs').renderFile);
....
app.get('/', function(req, res){
res.render("index.html");
});หมายเหตุ:ทางออกที่ง่ายที่สุดคือการใช้เทมเพลต ejs เป็นวิวเอ็นจิน คุณสามารถเขียน HTML แบบ raw ใน * .ejs ดูไฟล์ได้
ejsทั่วโลกหรือไม่?
โครงสร้างโฟลเดอร์:
.
├── index.html
├── node_modules
│ ├──{...}
└── server.jsserver.js
var express = require('express');
var app = express();
app.use(express.static('./'));
app.get('/', function(req, res) {
res.render('index.html');
});
app.listen(8882, '127.0.0.1')index.html
<!DOCTYPE html>
<html>
<body>
<div> hello world </div>
</body>
</html>เอาท์พุท:
สวัสดีชาวโลก
หากคุณไม่จำเป็นต้องใช้ไดเรกทอรีมุมมองเพียงแค่ย้ายไฟล์ html ไปยังสาธารณะไดเรกทอรีด้านล่าง
จากนั้นเพิ่มบรรทัดนี้ลงใน app.configure แทน '/ views'
server.use (express.static (__ dirname + '/ public'));
หากต้องการแสดงผลหน้า Html ในโหนดให้ลองดังต่อไปนี้
app.set('views', __dirname + '/views');
app.engine('html', require('ejs').renderFile);คุณต้องติดตั้งejsโมดูลผ่านnpmlike:
npm install ejs --saveสำหรับโครงการของฉันฉันได้สร้างโครงสร้างนี้:
index.js
css/
reset.css
html/
index.htmlรหัสนี้ทำหน้าที่ index.html สำหรับ/การร้องขอและ reset.css สำหรับ/css/reset.cssการร้องขอ พอที่ง่ายและส่วนที่ดีที่สุดก็คือว่ามันจะเพิ่มส่วนหัวของแคช
var express = require('express'),
server = express();
server.configure(function () {
server.use('/css', express.static(__dirname + '/css'));
server.use(express.static(__dirname + '/html'));
});
server.listen(1337);1) วิธีที่ดีที่สุดคือตั้งโฟลเดอร์แบบคงที่ ในไฟล์หลักของคุณ (app.js | server.js | ???):
app.use(express.static(path.join(__dirname, 'public')));public / css / form.html
public / css / style.css
จากนั้นคุณได้รับไฟล์คงที่จากโฟลเดอร์ "สาธารณะ":
http://YOUR_DOMAIN/form.html
http://YOUR_DOMAIN/css/style.css2)
คุณสามารถสร้างแคชไฟล์ของคุณ
ใช้วิธีการ fs.readFileSync
var cache = {};
cache["index.html"] = fs.readFileSync( __dirname + '/public/form.html');
app.get('/', function(req, res){
res.setHeader('Content-Type', 'text/html');
res.send( cache["index.html"] );
};);ด้วย Express 4.0.0 สิ่งเดียวที่คุณต้องทำคือใส่เครื่องหมาย 2 บรรทัดใน app.js:
/* app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade'); */ //or whatever the templating engine is.จากนั้นปล่อยไฟล์สแตติกของคุณลงในไดเรกทอรี / public ตัวอย่าง: /public/index.html
ฉันเพิ่มด้านล่าง 2 บรรทัดและมันใช้ได้สำหรับฉัน
app.set('view engine', 'html');
app.engine('html', require('ejs').renderFile);npm install ejs --saveในไดเรกทอรีทำงานของคุณ
ลอง res.sendFile () ฟังก์ชั่นในเส้นทางด่วน
var express = require("express");
var app = express();
var path = require("path");
app.get('/',function(req,res){
res.sendFile(path.join(__dirname+'/index.html'));
//__dirname : It will resolve to your project folder.
});
app.get('/about',function(req,res){
res.sendFile(path.join(__dirname+'/about.html'));
});
app.get('/sitemap',function(req,res){
res.sendFile(path.join(__dirname+'/sitemap.html'));
});
app.listen(3000);
console.log("Running at Port 3000");อ่านที่นี่: http://codeforgeek.com/2015/01/render-html-file-expressjs/
ฉันไม่ต้องการพึ่ง ejs เพียงแค่ส่งไฟล์ HTML ดังนั้นฉันก็แค่เขียน renderer ตัวเล็ก ๆ เอง:
const Promise = require( "bluebird" );
const fs = Promise.promisifyAll( require( "fs" ) );
app.set( "view engine", "html" );
app.engine( ".html", ( filename, request, done ) => {
fs.readFileAsync( filename, "utf-8" )
.then( html => done( null, html ) )
.catch( done );
} );ฉันพยายามตั้งค่าแอพเชิงมุมด้วย RESTful API แบบด่วนและลงจอดบนหน้านี้หลายครั้งแม้ว่ามันจะไม่เป็นประโยชน์ นี่คือสิ่งที่ฉันพบว่าใช้งานได้:
app.configure(function() {
app.use(express.static(__dirname + '/public')); // set the static files location
app.use(express.logger('dev')); // log every request to the console
app.use(express.bodyParser()); // pull information from html in POST
app.use(express.methodOverride()); // simulate DELETE and PUT
app.use(express.favicon(__dirname + '/public/img/favicon.ico'));
});จากนั้นในการติดต่อกลับสำหรับเส้นทาง API ของคุณมีลักษณะดังนี้: res.jsonp(users);
เฟรมเวิร์กฝั่งไคลเอ็นต์ของคุณสามารถจัดการการจัดเส้นทาง Express ใช้สำหรับการให้บริการ API
เส้นทางบ้านของฉันมีลักษณะเช่นนี้:
app.get('/*', function(req, res) {
res.sendfile('./public/index.html'); // load the single view file (angular will handle the page changes on the front-end)
});res.sendFile(__dirname + '/public/login.html');นี่คือตัวอย่างไฟล์ด่วนของเซิร์ฟเวอร์ด่วน!
https://gist.github.com/xgqfrms-GitHub/7697d5975bdffe8d474ac19ef906e906
หวังว่ามันจะช่วยคุณได้!
// simple express server for HTML pages!
// ES6 style
const express = require('express');
const fs = require('fs');
const hostname = '127.0.0.1';
const port = 3000;
const app = express();
let cache = [];// Array is OK!
cache[0] = fs.readFileSync( __dirname + '/index.html');
cache[1] = fs.readFileSync( __dirname + '/views/testview.html');
app.get('/', (req, res) => {
res.setHeader('Content-Type', 'text/html');
res.send( cache[0] );
});
app.get('/test', (req, res) => {
res.setHeader('Content-Type', 'text/html');
res.send( cache[1] );
});
app.listen(port, () => {
console.log(`
Server is running at http://${hostname}:${port}/
Server hostname ${hostname} is listening on port ${port}!
`);
});เพิ่มบรรทัดต่อไปนี้ในรหัสของคุณ
แทนที่ "jade" ด้วย "ejs" & "XYZ" (เวอร์ชั่น) ด้วย "*" ในไฟล์ package.json
"dependencies": {
"ejs": "*"
}จากนั้นในไฟล์ app.js ของคุณเพิ่มรหัสต่อไปนี้:
app.engine('html', require('ejs').renderFile);
app.set('view engine', 'html');
และจดจำไฟล์. HTML ทั้งหมดในมุมมองโฟลเดอร์
ไชโย :)
สำหรับ html ธรรมดาคุณไม่จำเป็นต้องมีแพ็คเกจหรือมิดเดิลแวร์ใด ๆ
เพียงใช้สิ่งนี้:
app.get('/', function(req, res) {
res.sendFile('index.html');
});เป็นเรื่องน่าเศร้าที่ประมาณปี 2020 ยังคงมีการแสดงออกยังไม่ได้เพิ่มวิธีการแสดงหน้า HTML โดยไม่ต้องใช้sendFileวิธีการของresponseวัตถุ การใช้sendFileไม่ใช่ปัญหา แต่ผ่านการโต้แย้งในรูปแบบของการpath.join(__dirname, 'relative/path/to/file')รู้สึกไม่ถูกต้อง ทำไมผู้ใช้ควรเข้าร่วม__dirnameกับเส้นทางของไฟล์ มันควรจะทำตามค่าเริ่มต้น ทำไมรากของเซิร์ฟเวอร์ไม่สามารถกำหนดค่าไดเรกทอรีโครงการได้ นอกจากนี้การติดตั้งการสร้างเท็มเพลตแบบพึ่งพาเพื่อแสดงไฟล์ HTML แบบคงที่นั้นไม่ถูกต้องอีกครั้ง ฉันไม่ทราบวิธีที่ถูกต้องในการแก้ไขปัญหา แต่ถ้าฉันต้องใช้ HTML แบบคงที่ฉันจะทำสิ่งต่อไปนี้:
const PORT = 8154;
const express = require('express');
const app = express();
app.use(express.static('views'));
app.listen(PORT, () => {
console.log(`Server is listening at port http://localhost:${PORT}`);
});ตัวอย่างข้างต้นถือว่าโครงสร้างโครงการมีviewsไดเรกทอรีและไฟล์ HTML แบบคงที่อยู่ข้างใน ตัวอย่างเช่นสมมติว่าที่viewsไดเรกทอรีมีสองไฟล์ HTML ชื่อindex.htmlและabout.htmlจากนั้นในการเข้าถึงพวกเขาเราสามารถเข้าชม: localhost:8153/index.htmlหรือเพียงแค่localhost:8153/โหลดindex.htmlหน้าเว็บและโหลดlocalhost:8153/about.html about.htmlเราสามารถใช้วิธีที่คล้ายกันในการให้บริการแอพตอบโต้ / เชิงมุมโดยจัดเก็บสิ่งประดิษฐ์ในviewsไดเรกทอรีหรือเพียงแค่ใช้dist/<project-name>ไดเรกทอรีเริ่มต้นและกำหนดค่าในเซิร์ฟเวอร์ js ดังต่อไปนี้:
app.use(express.static('dist/<project-name>'));ฉันต้องการอนุญาตให้คำขอ "/" ได้รับการจัดการโดยเส้นทางด่วนซึ่งก่อนหน้านี้พวกเขาได้รับการจัดการโดยมิดเดิ้ลสแตติก สิ่งนี้จะทำให้ฉันสามารถแสดงดัชนีปกติของ index.html หรือเวอร์ชันที่โหลดการตัดแบ่ง + JS และ CSS แบบย่อซึ่งขึ้นอยู่กับการตั้งค่าแอปพลิเคชัน แรงบันดาลใจจากคำตอบของ Andrew Homeyerฉันตัดสินใจลากไฟล์ HTML ของฉัน - ไม่ได้แก้ไข - ลงในโฟลเดอร์มุมมองกำหนดค่า Express อย่างนั้น
app.engine('html', swig.renderFile);
app.set('view engine', 'html');
app.set('views', __dirname + '/views'); และสร้างตัวจัดการเส้นทางเช่นนั้น
app.route('/')
.get(function(req, res){
if(config.useConcatendatedFiles){
return res.render('index-dist');
}
res.render('index');
});วิธีนี้ใช้ได้ผลดีทีเดียว
ใน server.js โปรดระบุ
var express = require("express");
var app = express();
var path = require("path");
app.get('/',function(req,res){
res.sendFile(path.join(__dirname+'/index.html'));
//__dirname : It will resolve to your project folder.
});หากคุณพยายามที่จะให้บริการไฟล์ HTML ที่มีเนื้อหาทั้งหมดอยู่ข้างในนั้นก็ไม่จำเป็นต้อง 'เรนเดอร์' มันก็แค่ต้อง 'เสริฟ' การแสดงผลคือเมื่อคุณอัปเดตเซิร์ฟเวอร์หรือฉีดเนื้อหาก่อนที่หน้าจะถูกส่งไปยังเบราว์เซอร์และต้องมีการอ้างอิงเพิ่มเติมเช่น ejs ดังที่คำตอบอื่น ๆ แสดง
หากคุณต้องการนำเบราว์เซอร์ไปยังไฟล์ตามคำขอของพวกเขาคุณควรใช้res.sendFile ()ดังนี้:
const express = require('express');
const app = express();
var port = process.env.PORT || 3000; //Whichever port you want to run on
app.use(express.static('./folder_with_html')); //This ensures local references to cs and js files work
app.get('/', (req, res) => {
res.sendFile(__dirname + '/folder_with_html/index.html');
});
app.listen(port, () => console.log("lifted app; listening on port " + port));วิธีนี้คุณไม่ต้องการการพึ่งพาเพิ่มเติมนอกเหนือจากการด่วน หากคุณต้องการให้เซิร์ฟเวอร์ส่งไฟล์ html ที่สร้างขึ้นของคุณไปแล้วข้างต้นเป็นวิธีที่มีน้ำหนักเบามาก
index.js
var express = require('express');
var app = express();
app.use(express.static(__dirname + '/public'));
app.get('/', function(req, res) {
res.render('index.html');
});
app.listen(3400, () => {
console.log('Server is running at port 3400');
})วางไฟล์ index.html ของคุณในโฟลเดอร์สาธารณะ
<!DOCTYPE html>
<html>
<head>
<title>Render index html file</title>
</head>
<body>
<h1> I am from public/index.html </h1>
</body>
</html>ตอนนี้เรียกใช้รหัสต่อไปนี้ใน terminal ของคุณ
node index.js
ฉันมักจะใช้สิ่งนี้
app.configure(function() {
app.use(express.static(__dirname + '/web'));
});แค่ระวังเพราะมันจะแบ่งปันอะไรในสารบบเว็บ /
ฉันหวังว่ามันจะช่วย
ถ้าคุณใช้ express framework ไปที่ node.js
ติดตั้ง npm ejs
จากนั้นเพิ่มไฟล์กำหนดค่า
app.set('port', process.env.PORT || 3000);
app.set('views', __dirname + '/views');
app.set('view engine', 'ejs');
app.set('view engine', 'jade');
app.use(express.favicon());
app.use(express.logger('dev'));
app.use(express.bodyParser());
app.use(express.methodOverride());
app.use(app.router);
แสดงหน้าจากโมดูลส่งออก form.js มีไฟล์ html ในมุมมอง dir ที่มีนามสกุลของชื่อไฟล์ ejs เป็น
form.html.ejs
จากนั้นสร้าง form.js
res.render('form.html.ejs');