Berikan tampilan HTML dasar?

279

Saya memiliki aplikasi node.js dasar yang saya coba turunkan menggunakan kerangka Express. Saya memiliki viewsfolder tempat saya memiliki index.htmlfile. Tapi saya menerima kesalahan berikut saat memuat browser web.

Kesalahan: Tidak dapat menemukan modul 'html'

Di bawah ini adalah kode saya. 

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')

Apa yang kulewatkan di sini?

javascript  html  node.js  mongodb  express 
— aherrick
sumber

Jawaban:

298

Anda dapat membuat giok menyertakan halaman HTML biasa:

dalam views / index.jade

include plain.html

dalam views / plain.html

<!DOCTYPE html>
...

dan app.js masih bisa membuat rade:

res.render(index)
— Andrew Homeyer
sumber
1
Hanya untuk mencatat bahwa yang saya inginkan hanya melayani satu file .html karena aplikasi saya adalah satu halaman;)
— diosney
1
Bisakah kami menyertakan beberapa halaman HTML / JS dengan metode ini?
— user3398326
6
tidakkah Anda bisa membuat halaman html itu tanpa templat jade hanya untuk pengujian awal ekspres?
— PositiveGuy
1
Jadi apakah kita harus membuat template giok untuk masing-masing file HTML kita?
— Chris - Jr
4
Lebih banyak peretasan daripada solusi.
— Ozil
226

Banyak dari jawaban ini sudah ketinggalan zaman.

Menggunakan express 3.0.0 dan 3.1.0, yang berikut ini berfungsi:

app.set('views', __dirname + '/views');
app.engine('html', require('ejs').renderFile);

Lihat komentar di bawah untuk sintaks alternatif dan peringatan untuk express 3.4+:

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

Maka Anda dapat melakukan sesuatu seperti:

app.get('/about', function (req, res)
{
    res.render('about.html');
});

Ini mengasumsikan Anda memiliki pandangan Anda di viewssubfolder, dan bahwa Anda telah menginstal ejsmodul node. Jika tidak, jalankan berikut ini di konsol Node:

npm install ejs --save
— Drew Noakes
sumber
@MichaelDausmann, Cheers, saya sudah memasukkan info itu dalam jawabannya.
— Drew Noakes
mengapa res.render memerlukan ekstensi .html dalam kasus ini tetapi tidak dalam kasus default dengan jade. dengan kode boilerplate, itu hanya memanggil res.render ('index', {title: 'Express'}); tapi di sini, ini: res.render ('about.html');
— Transendensi
6
Dengan Express 3.4.2: app.set ('view engine', 'ejs');
— roland
3
Anda harus menggunakan perintah 'npm install ejs --save' untuk memperbarui package.json Anda
— Tom Teman
8
mengapa anda membutuhkan ejs?
— PositiveGuy
71

Dari Panduan Express.js: Lihat Rendering

Lihat nama file mengambil formulir Express.ENGINE, di mana ENGINEadalah nama modul yang akan diperlukan. Misalnya tampilan layout.ejsakan memberitahu sistem tampilan untukrequire('ejs') , modul yang sedang dimuat harus mengekspor metodeexports.render(str, options) untuk mematuhi Express, namun app.register()dapat digunakan untuk memetakan mesin ke file ekstensi, sehingga misalnya foo.htmldapat dirender oleh jade.

Jadi baik Anda membuat penyaji sederhana Anda sendiri atau Anda hanya menggunakan jade:

 app.register('.html', require('jade'));

Lebih tentang app.register.

Perhatikan bahwa dalam Express 3, metode ini diganti namanya app.engine

— Ivo Wetzel
sumber
57
Note- app.register telah berganti nama menjadi app.engine di Express 3.
— Spongeboy
8
Lihat jawaban dari Andrew Homeyer. Itu adalah jawaban yang sebenarnya.
— David Betz
7
Dari beberapa jawaban lain, untuk Express 4 saya akhirnya menggunakanapp.engine('.html', require('ejs').renderFile);
— CrazyPyro
Di express 4, Anda juga bisa menggunakan: app.set ('view engine', 'jade');
— Daniel Huang
48

Anda juga dapat membaca file HTML dan mengirimkannya:

app.get('/', (req, res) => {
    fs.readFile(__dirname + '/public/index.html', 'utf8', (err, text) => {
        res.send(text);
    });
});
— keegan3d
sumber
23
solusi ini buruk karena tidak ada caching file; itu dibaca untuk setiap permintaan.
— Marcel Falliere
2
berpotensi cukup mudah untuk menyimpannya secara manual. Simpan saja file read variabel, dan hanya baca lagi, jika variabel tersebut kosong Anda juga bisa menggunakan objek JS dan menyimpan berbagai file dalam berbagai variabel, dengan cap waktu. Tentu ini lebih berhasil daripada yang dilakukan kebanyakan orang, tetapi bagus untuk orang yang baru mengenal simpul. Sangat mudah dimengerti
— Naman Goel
5
Astaga. Ini mengalahkan seluruh titik yang berorientasi pada konvensi, arsitektur ramping (seperti MVC).
— David Betz
@MarcelFalliere Anda berasumsi bahwa dia ingin men-cache file, atau bahwa dia tidak ingin menggunakan solusi caching khusus. Terima kasih keegan3d untuk jawabannya.
— Benny
@MarcelFalliere Lalu, apa solusi yang tepat? Saya melihat jawaban lain yang membutuhkan dependensi baru. Apakah perlu hanya untuk melayani file html?
— JCarlosR
45

coba ini. ini bekerja untuk saya.

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");
});
— spektrum
sumber
2
mengalami masalah dengan konfigurasi yang tepat di atas, jadi saya menghapus titik dari ".html" dan menambahkan ini: app.set ('view engine', 'html'); app.set ('views', __dirname + '/ views'); untuk hasil yang sempurna
— Bijou Trouvaille
8
Ini agak aneh ... Anda harus menyajikan html sebagai file statis. Ini juga memberi Anda manfaat dari caching yang lebih baik. Membuat "compiler html" khusus tampaknya salah. Jika Anda perlu mengirim file dari dalam rute (yang sangat jarang perlu Anda lakukan) baca dan kirimkan saja. Kalau tidak hanya mengarahkan ke html statis.
— idyo
2
@Enyo komentar ini sepertinya aneh, mengingat BAGAIMANA CARA melakukan apa yang Anda katakan harus dilakukan adalah PERTANYAAN YANG DIAJUKAN, dan jawaban Anda adalah lakukan saja. Bagaimana Anda menyajikan html statis dengan caching?
— Kyeotic
3
Saya melihat kesalahan aktif app.register. Mungkin sudah tidak digunakan lagi di express 3.0.0.rc3? TypeError: Object function app(req, res){ app.handle(req, res); } has no method 'register'
— Drew Noakes
1
@enyo, Anda melewatkan titik arsitektur berjajar. Ketika polanya adalah controller / view (atau / processor / view, apa pun arsitektur spesifik Anda), Anda tidak dapat menyimpang dari itu dengan dengan model ekstensi yang usang. Anda perlu memperlakukan HTML Anda sebagai konten yang dirender seperti yang lainnya. Tetap KERING, Bung.
— David Betz
19

Jika Anda menggunakan express@~3.0.0 ubah baris di bawah ini dari contoh Anda:

app.use(express.staticProvider(__dirname + '/public'));

untuk sesuatu seperti ini:

app.set("view options", {layout: false});
app.use(express.static(__dirname + '/public'));

Saya membuatnya seperti yang dijelaskan pada halaman api ekspres dan berfungsi seperti pesona. Dengan pengaturan itu, Anda tidak perlu menulis kode tambahan sehingga cukup mudah digunakan untuk produksi atau pengujian mikro Anda.

Kode lengkap tercantum di bawah ini:

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')
— Mark Karwowski
sumber
1
Mengapa Anda ulangi app.use(express.static(__dirname + '/public'));setelah Anda memulai server app.listen?
— fatuhoku
2
apa perbedaan melayani halaman html sebagai statis vs hanya memuatnya non-statis dengan express?
— PositiveGuy
14

Saya juga menghadapi masalah yang sama di express 3.Xdan node 0.6.16. Solusi yang diberikan di atas tidak akan berfungsi untuk versi terbaru express 3.x. Mereka menghapus app.registermetode dan menambahkan app.enginemetode. Jika Anda mencoba solusi di atas, Anda mungkin berakhir dengan kesalahan berikut.

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)

Untuk menghilangkan pesan kesalahan. Tambahkan baris berikut keapp.configure function

app.engine('html', require('ejs').renderFile);

Catatan: Anda harus menginstal ejsmesin template

npm install -g ejs

Contoh: 

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");
});

Catatan: Solusi paling sederhana adalah dengan menggunakan template ejs sebagai view engine. Di sana Anda dapat menulis HTML mentah di file tampilan * .ejs.

— Jak
sumber
3
Apakah Anda harus menginstal ejssecara global?
— Drew Noakes
ini memberitahu saya tidak dapat menemukan file 'index.html'
— MetaGuru
9

struktur folder:

.
├── index.html
├── node_modules
│   ├──{...}
└── server.js

server.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>

keluaran:

Halo Dunia

— KARTHIKEYAN.A
sumber
7

Jika Anda tidak harus menggunakan direktori views , Cukup pindahkan file html ke direktori publik di bawah ini.

dan kemudian, tambahkan baris ini ke app.configure alih-alih '/ views'.

server.use (express.static (__ dirname + '/ public'));
— spektrum
sumber
5

Untuk membuat halaman Html di node coba yang berikut ini,

app.set('views', __dirname + '/views');

app.engine('html', require('ejs').renderFile);

  • Anda perlu menginstal ejsmodul melalui npmseperti:

       npm install ejs --save
— Trojan
sumber
Solusi ini bekerja untuk saya. Meskipun saya mencoba opsi statis juga. Bisakah Anda menjelaskan mekanisme di baliknya? Terima kasih!
— harshad
4

Untuk proyek saya, saya telah membuat struktur ini:

index.js
css/
    reset.css
html/
    index.html

Kode ini melayani index.html untuk /permintaan, dan reset.css untuk /css/reset.csspermintaan. Cukup sederhana, dan bagian terbaiknya adalah secara otomatis menambahkan header cache .

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);
— Znarkus
sumber
3

1) Cara terbaik adalah mengatur folder statis. Di file utama Anda (app.js | server.js | ???):

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

public / css / form.html
public / css / style.css

Maka Anda mendapat file statis dari folder "publik":

http://YOUR_DOMAIN/form.html
http://YOUR_DOMAIN/css/style.css

2)

Anda dapat membuat cache file Anda.
Gunakan metode 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"] );                                
};);
— Tomáš
sumber
tidak buruk! di sini adalah demo file lengkap! https://gist.github.com/xgqfrms-GitHub/7697d5975bdffe8d474ac19ef906e906
— xgqfrms
3

Dengan Express 4.0.0, satu-satunya hal yang harus Anda lakukan adalah mengomentari 2 baris di app.js:

/* app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade'); */ //or whatever the templating engine is.

Dan kemudian jatuhkan file statis Anda ke direktori / publik. Contoh: /public/index.html

— u84six
sumber
3

Saya menambahkan di bawah 2 baris dan berfungsi untuk saya

    app.set('view engine', 'html');
    app.engine('html', require('ejs').renderFile);
— Naren Chejara
sumber
itu memberi saya kesalahan berikut "Kesalahan: Tidak dapat menemukan modul 'ejs' di Function.Module._resolveFilename (module.js: 338: 15) di Function.Module._load (module.js: 280: 25) di Module.require ( module.js: 364: 17) di butuhkan (module.js: 380: 17) "
— Lygub Org
@LygubOrg dijalankan npm install ejs --savedi direktori kerja Anda.
— A1rPun
1
apakah perlu menambahkan ketergantungan hanya untuk melayani file html?
— JCarlosR
3

Coba fungsi res.sendFile () di rute Express.

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");

Baca di sini: http://codeforgeek.com/2015/01/render-html-file-expressjs/

— Shaikh Shahid
sumber
3

Saya tidak ingin bergantung pada ejs hanya untuk mengirimkan file HTML, jadi saya sendiri yang menulis renderer kecil:

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 );
} );
— Der Hochstapler
sumber
2

Saya mencoba menyiapkan aplikasi bersudut dengan API RESTful yang cepat dan mendarat di halaman ini beberapa kali meskipun itu tidak membantu. Inilah yang saya temukan yang berhasil:

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'));
});

Kemudian dalam panggilan balik untuk rute api Anda terlihat seperti: res.jsonp(users);

Kerangka kerja sisi klien Anda dapat menangani perutean. Express adalah untuk melayani API.

Rute rumah saya terlihat seperti ini:

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)
});
— Connor Leech
sumber
2

Ini adalah demo file lengkap dari server ekspres!

https://gist.github.com/xgqfrms-GitHub/7697d5975bdffe8d474ac19ef906e906

berharap ini akan membantu Anda!

// 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}!
    `);
});
Luaskan cuplikan

— xgqfrms
sumber
1

Tambahkan Baris berikut ke kode Anda

  1. Ganti "jade" dengan "ejs" & "XYZ" (versi) dengan "*" di file package.json

      "dependencies": {
   "ejs": "*"
  }

  2. Kemudian di File app.js Anda Tambahkan Kode berikut:

    app.engine('html', require('ejs').renderFile);

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

  3. Dan Ingat Simpan Semua file .HTML dalam Folder tampilan

Bersulang :)

— Amulya Kashyap
sumber
1

Untuk html biasa, Anda tidak memerlukan paket npm atau middleware

gunakan saja ini:

app.get('/', function(req, res) {
    res.sendFile('index.html');
});
— Shivam Chhetri
sumber
1

Sangat menyedihkan bahwa sekitar tahun 2020 masih express belum menambahkan cara untuk merender halaman HTML tanpa menggunakan sendFilemetode responseobjek. Menggunakan sendFilebukanlah masalah tetapi menyampaikan argumen kepadanya dalam bentuk path.join(__dirname, 'relative/path/to/file')tidak terasa benar. Mengapa pengguna harus bergabung __dirnameke jalur file? Ini harus dilakukan secara default. Mengapa root server tidak dapat dengan defalut direktori proyek? Juga, menginstal ketergantungan templating hanya untuk membuat file HTML statis lagi tidak benar. Saya tidak tahu cara yang benar untuk mengatasi masalah ini, tetapi jika saya harus menyajikan HTML statis, maka saya akan melakukan sesuatu seperti:

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}`);
});

Contoh di atas mengasumsikan bahwa struktur proyek memiliki viewsdirektori dan file HTML statis ada di dalamnya. Sebagai contoh, katakanlah, viewsdirektori memiliki dua file HTML bernama index.htmldan about.html, untuk mengaksesnya, kita dapat mengunjungi: localhost:8153/index.htmlatau hanya localhost:8153/untuk memuat index.htmlhalaman dan localhost:8153/about.htmlmemuatnya about.html. Kita dapat menggunakan pendekatan serupa untuk melayani aplikasi reaksi / sudut dengan menyimpan artefak di viewsdirektori atau hanya menggunakan dist/<project-name>direktori default dan mengkonfigurasinya di server js sebagai berikut:

app.use(express.static('dist/<project-name>'));
— Vighnesh Raut
sumber
0

Saya ingin mengizinkan permintaan untuk "/" ditangani oleh rute Express di mana sebelumnya mereka telah ditangani oleh middleware statika. Ini memungkinkan saya untuk membuat versi biasa index.html atau versi yang memuat gabungan JS dan CSS yang diperkecil, tergantung pada pengaturan aplikasi. Terinspirasi oleh jawaban Andrew Homeyer , saya memutuskan untuk menyeret file HTML saya - tidak dimodifikasi - ke folder views, konfigurasikan Express seperti

   app.engine('html', swig.renderFile);
   app.set('view engine', 'html');
   app.set('views', __dirname + '/views');

Dan menciptakan pengendali rute seperti itu 

 app.route('/')
        .get(function(req, res){
            if(config.useConcatendatedFiles){
                return res.render('index-dist');
            }
            res.render('index');       
        });

Ini bekerja dengan cukup baik.

— K. Francis
sumber
0

Di server.js, harap sertakan

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.
});
— shumana chowdhury
sumber
0

Jika Anda mencoba menyajikan file HTML yang SUDAH memiliki semua konten di dalamnya, maka file tersebut tidak perlu 'dirender', hanya perlu 'disajikan'. Rendering adalah ketika Anda memiliki server memperbarui atau menyuntikkan konten sebelum halaman dikirim ke browser, dan itu memerlukan dependensi tambahan seperti ejs, seperti yang ditunjukkan oleh jawaban lain.

Jika Anda hanya ingin mengarahkan browser ke file berdasarkan permintaan mereka, Anda harus menggunakan res.sendFile () seperti ini:

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));

Dengan cara ini Anda tidak perlu dependensi tambahan selain express. Jika Anda hanya ingin agar server mengirim file html yang sudah Anda buat, cara di atas adalah cara yang sangat ringan untuk melakukannya.

— aleph_one
sumber
0

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');
})

Masukkan file index.html Anda ke folder publik

<!DOCTYPE html>
<html>
<head>
    <title>Render index html file</title>
</head>
<body>
    <h1> I am from public/index.html </h1>
</body>
</html>

Sekarang jalankan kode berikut di terminal Anda

simpul index.js

— Ahmad Sharif
sumber
-1

Saya biasanya menggunakan ini

app.configure(function() {
    app.use(express.static(__dirname + '/web'));
});

Berhati-hatilah karena itu akan membagikan apa pun di direktori / web.

Saya harap ini membantu

— DiogoNeves
sumber
-2

jika Anda menggunakan kerangka express ke node.js

instal npm ejs

kemudian tambahkan file konfigurasi 

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)

;

membuat halaman dari ekspor module form.js memiliki file html di dir dilihat dengan ekstensi nama file ejs sebagai form.html.ejs

kemudian buat form.js

res.render('form.html.ejs');

— aruneshtechno
sumber
Kekacauan apa ini?
— Vighnesh Raut
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.