Làm cách nào để sử dụng HTML làm công cụ xem trong Express?

130

Tôi đã thử thay đổi đơn giản này từ hạt giống và tạo các tệp .html tương ứng (ví dụ: index.html).

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

và tập tin này vẫn giữ nguyên:

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

nhưng trong khi chạy tôi nhận được

Lỗi 500: Không thể tìm thấy mô-đun 'html'

Là lựa chọn duy nhất của tôi để sử dụng 'ejs'? Ý định của tôi là sử dụng HTML đơn giản để kết hợp với AngularJS.

html node.js express

— Julio
nguồn

7

Xem chủ đề này để biết câu trả lời: stackoverflow.com/questions/4529586/ Hy vọng điều này sẽ giúp,

— roland

3

app.engine ('html', yêu cầu ('ejs'). renderFile);

— Dinesh Kanivu

91

Các câu trả lời ở liên kết khác sẽ hoạt động, nhưng để cung cấp HTML, không cần sử dụng công cụ xem, trừ khi bạn muốn thiết lập định tuyến thú vị. Thay vào đó, chỉ sử dụng phần mềm trung gian tĩnh:

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

— Dan Kohn
nguồn

3

Tôi đã tiếp tục và nhận xét tham chiếu đến app.set ('view engine', html). Sau đó tôi nhận được một thông báo lỗi rằng "Không có công cụ mặc định nào được chỉ định và không có tiện ích mở rộng nào được cung cấp", điều này được mong đợi. Nhưng khi tôi thay đổi res.render ("index") thành res.render ("index.html"), tôi đã gặp lỗi sau: TypeError: property 'engine' của object # <View> không phải là một hàm.

— Julio

4

Không có công cụ xem nữa, vì vậy tôi không nghĩ res.render()sẽ làm việc nữa. Thay vào đó, hãy đặt các tệp HTML thô của bạn vào publicvà để phần mềm trung gian tĩnh xử lý trực tiếp các tệp. Nếu bạn cần các tuyến đường lạ hơn thế này, có lẽ bạn có thể thiết lập công cụ xem HTML của riêng mình.

— Nick McCurdy

6

Vì vậy, những gì bạn viết trong cuộc gọi app.get ()?

— ajbraus 7/07/2015

5

@ajbraus bạn thậm chí không cần một cuộc gọi app.get (). Điều này sẽ chỉ phục vụ bất cứ tập tin html nào bạn có trong thư mục / công khai trực tiếp. Vì vậy, trong trình duyệt, bạn chỉ cần trỏ trực tiếp vào html và về cơ bản là ... không có định tuyến

— dm76

Vấn đề tôi gặp phải là vấn đề này là nếu bạn làm mới trang sau khi tải nó sẽ báo lỗi cho bạn Lỗi: Không có công cụ mặc định nào được chỉ định và không có tiện ích mở rộng nào được cung cấp. sau đó nếu bạn sử dụng Auth, {cung cấp: LocationStrargety, useClass: HashLocationStrargety}], nó sẽ quảng cáo băm vào url của bạn, điều này gây đau khổ vì những lý do khác. Có cách nào để giái quyết vấn đề này không?

— wuno

33

Để làm cho công cụ kết xuất chấp nhận html thay vì ngọc, bạn có thể làm theo các bước sau;

Cài đặt hợp nhất và swig vào thư mục của bạn.
```
 npm install consolidate
 npm install swig
```

thêm các dòng sau vào tệp app.js của bạn

var cons = require('consolidate');

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

thêm các mẫu xem của bạn dưới dạng .html bên trong thư mục xem lượt xem. Khởi động lại máy chủ nút của bạn và khởi động ứng dụng trong trình duyệt.

Mặc dù điều này sẽ hiển thị html mà không có vấn đề gì, tôi khuyên bạn nên sử dụng JADE bằng cách học nó. Jade là một công cụ mẫu tuyệt vời và học hỏi điều này sẽ giúp bạn đạt được thiết kế & khả năng mở rộng tốt hơn.

— AnandShanbhag
nguồn

không có phương pháp 'động cơ' - sau tất cả các bước

— ImranNaqvi

Phiên bản nào của express bạn đang sử dụng? Express 4.x chứa API app.engine. Thông tin thêm là @ expressjs.com/en/api.html#app.engine

— AnandShanbhag

Làm việc tuyệt vời! Tôi yêu khi câu trả lời một năm tuổi làm việc lần đầu tiên.

— Matthew Snell

tại sao nó vẫn không thể kết xuất css của tôi và khác

— exe

23

Trong apps.js của bạn chỉ cần thêm

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

Bây giờ bạn có thể sử dụng công cụ xem ejs trong khi giữ các tệp xem của bạn dưới dạng .html

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

Bạn cần cài đặt hai gói này:

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

Và sau đó nhập các gói cần thiết:

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

Bằng cách này, bạn có thể lưu chế độ xem của mình dưới dạng .html thay vì .ejs .
Khá hữu ích khi làm việc với các IDE hỗ trợ html nhưng không nhận ra ejs.

— Sudhanshu Gupta
nguồn

1

app.set ('lượt xem', path.join (__ dirname, '/ path / to / your / thư mục')); app.set ("tùy chọn xem", {layout: false}); app.engine ('html', function (path, opt, fn) {fs.readFile (path, 'utf-8', function (error, str) {if (error) return str; return fn (null, str) ;});});

— nilakantha singh deo

16

Hãy thử điều này cho cấu hình máy chủ của bạn

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

sau đó các hàm gọi lại của bạn đến các tuyến sẽ trông như sau:

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

— Connor Leech
nguồn

14

Không có công cụ xem là cần thiết, nếu bạn muốn sử dụng góc với tệp html đơn giản. Đây là cách thực hiện: Trong route.jstệp của bạn :

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

— Ashish Rawat
nguồn

1

Hoàn toàn là giải pháp dễ nhất. Tôi không có công cụ xem được cài đặt / cấu hình và html được gửi.

— Newclique

7

Tôi khuyên bạn nên sử dụng https://www.npmjs.com/package/express-es6-template-engine - công cụ mẫu cực kỳ nhẹ và cực kỳ nhanh. Tên này là một chút sai lệch vì nó có thể làm việc mà không có expressjs quá.

Những điều cơ bản cần có để tích hợp express-es6-template-enginetrong ứng dụng của bạn khá đơn giản và khá dễ thực hiện:

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

Mở rộng đoạn trích

Dưới đây là nội dung của index.htmltệp nằm trong thư mục 'lượt xem' của bạn:

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

— didinko
nguồn

4

Trả lời rất đơn giản. Bạn phải sử dụng app.engine ('html') để hiển thị * .html Pages. Hãy thử điều này. Nó phải giải quyết vấn đề.

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

tập tin .html sẽ hoạt động

— Dinesh Kanivu
nguồn

2

Câu trả lời không đầy đủ. Những thay đổi này được thực hiện ở đâu? Giả sử app.js nhưng câu trả lời của bạn cần phải cụ thể. Ngoài ra, điều này có thể không phải là tất cả những gì cần thay đổi bởi vì kết quả của việc thực hiện chỉ ba thay đổi / bổ sung này là "Không thể tìm thấy mô-đun 'ejs'". Câu trả lời của bạn có lẽ là gần nhưng bạn cần thêm một chút thông tin nữa.

— Newclique

Ngoài ra, kết xuất không giống như phục vụ một tập tin. Kết xuất yêu cầu máy chủ xử lý trước một tệp và thêm bất kỳ nội dung động nào được truyền vào phương thức kết xuất. Có thể đó là những gì OP muốn nhưng một số người kết hợp kết xuất với phục vụ. Khái niệm rất khác nhau.

— Newclique

@wade của nó để hiển thị tệp html chứ không phải tệp ejs.

— Dinesh Kanivu

3

Các tệp HTML có thể được hiển thị bằng công cụ ejs:

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

Và đảm bảo các tệp của bạn trong "/ lượt xem" được đặt tên bằng ".ejs".

Ví dụ: "index.ejs".

— JerryFZhang
nguồn

Nó hoạt động nhưng cảm thấy một chút hacky. Bạn có biết nếu có bất kỳ sự cẩn thận nào khi sử dụng .ejs thay cho .html không? Chúc mừng cho sửa chữa nhanh nhất đề nghị tất cả như nhau!

— mikeym

3

Nhận xét phần mềm trung gian cho html tức là

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

Thay vào đó sử dụng:

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

— Shivam Chhetri
nguồn

2

html không phải là một công cụ xem, nhưng ejs cung cấp khả năng viết mã html trong đó

— Wael Chorfan
nguồn

1

đến các trang html máy chủ thông qua định tuyến, tôi đã làm điều này.

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

và đổi tên các tệp .html của tôi thành các tệp .hbs - tay cầm hỗ trợ html đơn giản

— Avinash
nguồn

1

Để làm cho công cụ kết xuất chấp nhận html thay vì ngọc, bạn có thể làm theo các bước sau;

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.

Điều này sẽ làm việc

— Md Mehadi Hasan Mozumder
nguồn

1

Hãy thử giải pháp đơn giản này, nó hiệu quả với tôi

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

— Kiryamwibo Yenusu
nguồn

1

bạn nên thêm tất cả các dòng của bạn, điều này tự nó không hoạt động.

— MushyPeas

1

Cài đặt mẫu ejs

npm install ejs --save

Giới thiệu ejs trong app.js

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

Tạo mẫu ejs trong chế độ xem như lượt xem / indes.ejs và sử dụng temjte của ejs trong bộ định tuyến

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

— kta
nguồn

0

Kết xuất mẫu html với sự trợ giúp của swig.

//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
nguồn

0

Các tập tin Html không cần phải được hiển thị.
những gì một công cụ kết xuất làm là biến một tệp không phải là tệp Html thành tệp Html.
để gửi tệp Html, chỉ cần làm:

res.sendFile("index.html");

bạn có thể cần phải sử dụng __dirname+"/index.html"vì vậy express sẽ biết đường dẫn chính xác.

— GideonMax
nguồn