Express'te görünüm motoru olarak HTML'yi nasıl kullanırım?

130

Bu basit değişikliği tohumdan denedim ve karşılık gelen .html dosyalarını (örneğin, index.html) oluşturdum.

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

ve bu dosya aynı kaldı:

exports.index = function(req, res){
  res.render('index');
};

ama koşarken anlıyorum

500 Hatası: 'html' modülü bulunamıyor

"Ejs" kullanmak için tek seçeneğim mi? Niyetim, AngularJS ile birlikte düz HTML kullanmaktı.

html node.js express

— Julio
kaynak

7

Bir cevap için bu konuya bakın: stackoverflow.com/questions/4529586/… Bunun yardımcı

— olacağını

3

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

— Dinesh Kanivu

91

Diğer bağlantıdaki yanıtlar işe yarayacaktır, ancak HTML'yi sunmak için, eğlenceli bir yönlendirme ayarlamak istemediğiniz sürece, bir görünüm motoru kullanmaya gerek yoktur. Bunun yerine, statik ara yazılımı kullanın:

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

— Dan Kohn
kaynak

3

Devam ettim ve app.set ('motoru görüntüle', html) referansını yorumladım. Daha sonra "Varsayılan motor belirtilmedi ve uzantı sağlanmadı" şeklinde beklenen bir hata mesajı aldım. Ancak res.render'ı ("index") res.render ("index.html") olarak değiştirdiğimde aşağıdaki hatayı aldım: TypeError: # <View> nesnesinin özelliği 'motor' bir işlev değil.

— Julio

4

Daha fazla görüntüleme motoru yok, bu yüzden res.render()artık çalışacağını düşünmüyorum . Bunun yerine, ham HTML dosyalarınızı yerleştirin publicve statik ara yazılımın dosyaları doğrudan sunmasını sağlayın. Bundan daha meraklı rotalara ihtiyacınız varsa, muhtemelen kendi HTML görünüm motorunuzu kurabilirsiniz.

— Nick McCurdy

6

Peki app.get () call'a ne yazarsınız?

— ajbraus

5

@ajbraus bir app.get () çağrısına bile ihtiyacınız yok. Bu sadece / public klasöründe sahip olduğunuz html dosyalarına doğrudan hizmet edecektir. Yani tarayıcıda, doğrudan html'yi işaret edersiniz ve bu kadar ... temelde yönlendirme yok

— dm76

Bununla karşılaştığım sorun, sayfayı yükledikten sonra yenilerseniz size Hata: Varsayılan motor belirtilmedi ve uzantı sağlanmadı diyen bir hata veriyor. sonra Auth, {provide: LocationStrategy, useClass: HashLocationStrategy}] kullanırsanız, url'nize başka nedenlerden dolayı acı veren bir hash ekler. Bunun bir yolu var mı?

— wuno

33

Oluşturma motorunun jade yerine html'yi kabul etmesini sağlamak için aşağıdaki adımları takip edebilirsiniz;

Konsolide et ve dizininize swig yükleyin .

 npm install consolidate
 npm install swig

app.js dosyanıza aşağıdaki satırları ekleyin

var cons = require('consolidate');

// view engine setup
app.engine('html', cons.swig)
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'html');

görünüm şablonlarınızı .html olarak "görünümler" klasörüne ekleyin. Düğüm sunucunuzu yeniden başlatın ve uygulamayı tarayıcıda başlatın.

Bu html'yi sorunsuz hale getirecek olsa da, JADE'i öğrenerek kullanmanızı tavsiye ederim. Jade harika bir şablon motorudur ve bunu öğrenmek, daha iyi tasarım ve ölçeklenebilirlik elde etmenize yardımcı olacaktır.

— AnandShanbhag
kaynak

yöntemi yoktur 'motoru' - tüm adımlardan sonra

— ImranNaqvi

Express'in hangi sürümünü kullanıyorsunuz? Express 4.x, app.engine API'sini içerir. Daha fazla bilgi: @ expressjs.com/en/api.html#app.engine

— AnandShanbhag

Harika çalıştı! Bir yaşındaki cevabın ilk seferinde işe yaramasını seviyorum.

— Matthew Snell

neden hala css'imi ve diğerlerini oluşturamıyor

— exe

23

Apps.js dosyanıza şunu ekleyin:

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.engine('html', require('ejs').renderFile);
app.set('view engine', 'html');

Artık görünüm dosyalarınızı .html olarak tutarken ejs görünüm motorunu kullanabilirsiniz.

kaynak: http://www.makebetterthings.com/node-js/how-to-use-html-with-express-node-js/

Bu iki paketi kurmanız gerekiyor:

`npm install ejs --save`
`npm install path --save`

Ve sonra gerekli paketleri içe aktarın:

`var path = require('path');`

Bu şekilde görünümlerinizi .ejs yerine .html olarak kaydedebilirsiniz .
Html'yi destekleyen ancak ej'leri tanımayan IDE'lerle çalışırken oldukça yararlıdır.

— Sudhanshu Gupta
kaynak

1

app.set ('görünümler', yol.join (__ dizin adı, '/ yol / / klasörünüz')); app.set ("görünüm seçenekleri", {düzen: yanlış}); app.engine ('html', function (yol, opt, fn) {fs.readFile (yol, 'utf-8', işlev (hata, str) {if (hata) dönüş str; dönüş fn (null, str) ;});});

— nilakantha singh deo

16

bunu sunucu yapılandırmanız için deneyin

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

rotalara geri arama işlevleriniz şöyle görünecektir:

function(req, res) {
    res.sendfile('./public/index.html');
};

— Connor Leech
kaynak

14

Basit düz html dosyasıyla açısal kullanmak istiyorsanız, görünüm motoruna gerek yoktur. Bunu nasıl yapacağınız aşağıda açıklanmıştır: route.jsDosyanızda:

router.get('/', (req, res) => {
   res.sendFile('index.html', {
     root: 'yourPathToIndexDirectory'
   });
});

— Ashish Rawat
kaynak

1

Kesinlikle en kolay çözüm. Yüklü / yapılandırılmış bir görünüm motorum yok ve html gönderildi.

— Newclique

7

Https://www.npmjs.com/package/express-es6-template-engine - son derece hafif dalga ve son derece hızlı şablon motoru kullanmanızı öneririm . Expressjs olmadan da çalışabildiği için isim biraz yanıltıcıdır.

express-es6-template-engineUygulamanıza entegre etmek için gereken temel bilgiler oldukça basittir ve uygulanması oldukça basittir:

const express = require('express'),
  es6Renderer = require('express-es6-template-engine'),
  app = express();
  
app.engine('html', es6Renderer);
app.set('views', 'views');
app.set('view engine', 'html');
 
app.get('/', function(req, res) {
  res.render('index', {locals: {title: 'Welcome!'}});
});
 
app.listen(3000);

Snippet'i genişlet

Burada, index.html'görünümler' dizininizin içinde bulunan dosyanın içeriği yer almaktadır :

<!DOCTYPE html>
<html>
<body>
    <h1>${title}</h1>
</body>
</html>

— didinko
kaynak

4

Cevap çok basit. * .Html Sayfalarını işlemek için app.engine ('html') kullanmanız gerekir. Bunu deneyin. Sorunu Çözmeli.

app.set('views', path.join(__dirname, 'views'));
**// Set EJS View Engine**
app.set('view engine','ejs');
**// Set HTML engine**
app.engine('html', require('ejs').renderFile);

.html dosyası çalışacaktır

— Dinesh Kanivu
kaynak

2

Eksik cevap. Bu değişiklikler nerede yapılır? App.js varsayılıyor, ancak cevabınızın spesifik olması gerekiyor. Ayrıca, bu büyük olasılıkla değiştirilmesi gerekenlerin hepsi değildir, çünkü yalnızca bu üç değişikliği / eklemeyi yapmanın sonucu "modül 'ejs' bulunamıyor". Cevabınız büyük olasılıkla yakın ama biraz daha fazla bilgi eklemeniz gerekiyor.

— Newclique

Ayrıca, oluşturma, bir dosyayı sunmakla aynı şey değildir. Oluşturma, sunucunun bir dosyayı önceden işlemesini ve oluşturma yöntemine geçirilen dinamik içeriği eklemesini gerektirir. Belki OP'nin istediği buydu, ancak bazı insanlar sunmayı servisle birleştiriyor. Çok farklı kavramlar.

— Newclique

@wade, ejs dosyası yerine html dosyasını oluşturmak içindir.

— Dinesh Kanivu

3

HTML dosyaları ejs motoru kullanılarak oluşturulabilir:

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

Ve "/ views" altındaki dosyalarınızın ".ejs" ile adlandırıldığından emin olun.

Örneğin "index.ejs".

— JerryFZhang
kaynak

Çalışıyor ama biraz huysuz hissediyor. .Html yerine .ejs kullanmaktan kaynaklanan herhangi bir uyarı olup olmadığını biliyor musunuz? Muhtemelen en hızlı düzeltme için alkışlar aynı şeyi önerdi!

— mikeym

3

Html ie için ara yazılımı yorumlayın

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

Bunun yerine şunu kullanın:

app.get("/",(req,res)=>{
    res.sendFile("index.html");
});

— Shivam Chhetri
kaynak

2

html bir görünüm motoru değildir, ancak ejs içinde html kodu yazma imkanı sunar

— Wael Chorfan
kaynak

1

html sayfalarını yönlendirme yoluyla sunucuya, bunu yaptım.

var hbs = require('express-hbs');
app.engine('hbs', hbs.express4({
  partialsDir: __dirname + '/views/partials'
}));
app.set('views', __dirname + '/views');
app.set('view engine', 'hbs');

ve .html dosyalarımı .hbs dosyaları olarak yeniden adlandırdı - gidonlar düz html'yi destekler

— Avinash
kaynak

1

Oluşturma motorunun jade yerine html'yi kabul etmesini sağlamak için aşağıdaki adımları takip edebilirsiniz;

Install consolidate and swig to your directory.

 npm install consolidate
 npm install swig

add following lines to your app.js file

var cons = require('consolidate');

// view engine setup
app.engine('html', cons.swig)
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'html');

add your view templates as .html inside “views” folder. Restart you node server and start the app in the browser.

Bu çalışmalı

— Md Mehadi Hasan Mozumder
kaynak

1

Bu basit çözümü deneyin, benim için çalıştı

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

— Kiryamwibo Yenusu
kaynak

1

tüm satırlarınızı eklemelisiniz, bu kendi başına çalışmıyor.

— MushyPeas

1

Ejs şablonu yükleyin

npm install ejs --save

App.js'de ej'lere bakın

app.set('views', path.join(__dirname, 'views'));`
app.set('view engine', 'ejs');

Views / indes.ejs gibi görünümlerde bir ejs şablonu oluşturun ve yönlendiricide ejs tempalte kullanın

router.get('/', function(req, res, next) {
    res.render('index', { title: 'Express' });
});

— kta
kaynak

0

Swig yardımıyla html şablonunu oluşturun.

//require module swig    
    var swig = require('swig');

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

— Harendra Singh
kaynak

0

Html dosyalarının işlenmesine gerek yoktur.
bir render motorunun yaptığı şey, bir Html dosyası olmayan bir dosyayı bir Html dosyasına dönüştürmektir.
bir Html dosyası göndermek için şunu yapmanız yeterlidir:

res.sendFile("index.html");

kullanmanız gerekebilir, __dirname+"/index.html"böylece express kesin yolu bilecektir.

— GideonMax
kaynak