ฉันจะใช้ HTML เป็นเครื่องมือดูใน Express ได้อย่างไร

130

ฉันลองการเปลี่ยนแปลงอย่างง่ายจากเมล็ดและสร้างไฟล์. html ที่เกี่ยวข้อง (เช่น index.html)

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

และไฟล์นี้ยังคงเหมือนเดิม:

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

แต่ในขณะที่ฉันวิ่ง

500 ข้อผิดพลาด: ไม่พบโมดูล 'html'

ตัวเลือกเดียวของฉันคือใช้ 'ejs' ความตั้งใจของฉันคือการใช้ HTML ธรรมดาร่วมกับ AngularJS

html node.js express

— ลิโอเนล
แหล่งที่มา

7

ดูหัวข้อนี้สำหรับคำตอบ: stackoverflow.com/questions/4529586/… หวังว่าสิ่งนี้จะช่วยได้,

— roland

3

app.engine ('html', ต้องการ ('ejs'). renderFile);

— Dinesh Kanivu

91

คำตอบที่ลิงก์อื่นจะใช้งานได้ แต่เพื่อแสดง HTML ไม่จำเป็นต้องใช้เครื่องมือดูเลยเว้นแต่คุณต้องการตั้งค่าการกำหนดเส้นทางแบบขี้ขลาด ให้ใช้มิดเดิลแวร์แบบสแตติกแทน:

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

— แดนโคห์น
แหล่งที่มา

3

ฉันไปข้างหน้าและแสดงความคิดเห็นอ้างอิงถึง app.set ('ดูเครื่องมือ', html) ฉันได้รับข้อความแสดงข้อผิดพลาดว่า "ไม่ได้ระบุเอ็นจิ้นเริ่มต้นและไม่ได้ระบุส่วนขยาย" ซึ่งคาดว่า แต่เมื่อฉันเปลี่ยน res.render ("index") เป็น res.render ("index.html") ฉันได้รับข้อผิดพลาดดังต่อไปนี้: TypeError: คุณสมบัติ 'engine' ของวัตถุ # <View> ไม่ใช่ฟังก์ชั่น

— Julio

4

ไม่มีเอ็นจิ้นการดูอีกต่อไปดังนั้นฉันไม่คิดว่าres.render()จะทำงานได้อีกต่อไป ให้วางไฟล์ HTML ดิบของคุณเข้ามาpublicแล้วปล่อยให้มิดเดิลแวร์แบบสแตติกจัดการกับการให้บริการไฟล์โดยตรง หากคุณต้องการเส้นทางที่ชื่นชอบมากกว่านี้คุณอาจตั้งค่าเครื่องมือดู HTML ของคุณเอง

— Nick McCurdy

6

ดังนั้นสิ่งที่คุณเขียนในการโทร app.get ()?

— ajbraus

5

@ajbraus คุณไม่จำเป็นต้องมีการเรียกใช้ app.get () เลย นี่จะให้บริการไฟล์ html ใดก็ได้ที่คุณมีใน / โฟลเดอร์สาธารณะโดยตรง ดังนั้นในเบราว์เซอร์คุณเพียงชี้ไปที่ html โดยตรงและนั่นคือ ... โดยทั่วไปไม่มีการกำหนดเส้นทาง

— dm76

ปัญหาที่ฉันได้รับจากการทำเช่นนี้คือถ้าคุณรีเฟรชหน้าเว็บหลังจากที่โหลดมันจะทำให้คุณเกิดข้อผิดพลาดว่าข้อผิดพลาด: ไม่มีการระบุเอ็นจิ้นเริ่มต้นและไม่มีการขยาย ถ้าคุณใช้การรับรองความถูกต้อง {ระบุ: LocationStrategy, useClass: HashLocationStrategy}] โฆษณาจะแฮชไปยัง URL ของคุณซึ่งเป็นสาเหตุของความเจ็บปวดด้วยเหตุผลอื่น มีวิธีแก้ไขไหม?

— wuno

33

ในการทำให้เครื่องมือเรนเดอร์ยอมรับ html แทนที่จะเป็น Jade คุณสามารถทำตามขั้นตอนต่อไปนี้

ติดตั้งรวมและswigไปยังไดเรกทอรีของคุณ
```
 npm install consolidate
 npm install swig
```

เพิ่มบรรทัดต่อไปนี้ในไฟล์ app.js ของคุณ

var cons = require('consolidate');

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

เพิ่มเทมเพลตมุมมองของคุณเป็น. html ในโฟลเดอร์“ มุมมอง” รีสตาร์ทโหนดเซิร์ฟเวอร์ของคุณและเริ่มต้นแอปในเบราว์เซอร์

แม้ว่านี่จะทำให้ html ไม่มีปัญหาใด ๆ ฉันขอแนะนำให้คุณใช้ JADE โดยเรียนรู้มัน Jade เป็นเครื่องมือเทมเพลตที่น่าทึ่งและการเรียนรู้สิ่งนี้จะช่วยให้คุณประสบความสำเร็จในการออกแบบและขยายขีดความสามารถที่ดีขึ้น

— AnandShanbhag
แหล่งที่มา

ไม่มี 'engine' วิธีการ - หลังจากทุกขั้นตอน

— ImranNaqvi

คุณใช้ express รุ่นไหน? Express 4.x มี app.engine API ข้อมูลเพิ่มเติมคือ @ expressjs.com/en/api.html#app.engine

— AnandShanbhag

ใช้งานได้ดีมาก! ฉันรักเมื่อคำตอบอายุปีทำงานครั้งแรก

— Matthew Snell

ทำไมมันยังคงไม่สามารถสร้าง css ของฉันและอื่น ๆ ได้

— exe

23

ในแอพของคุณเพียงเพิ่ม

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

ตอนนี้คุณสามารถใช้เครื่องมือดู ejs ในขณะที่ทำให้ไฟล์มุมมองของคุณเป็น. html

แหล่งที่มา: http://www.makebetterthings.com/node-js/how-to-use-html-with-express-node-js/

คุณต้องติดตั้งสองแพ็คเกจนี้:

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

จากนั้นนำเข้าแพ็คเกจที่จำเป็น:

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

วิธีนี้คุณสามารถบันทึกมุมมองของคุณเป็น.htmlแทน.ejs
ค่อนข้างมีประโยชน์ในขณะที่ทำงานกับ IDE ที่สนับสนุน html แต่ไม่รู้จัก ejs

— Sudhanshu Gupta
แหล่งที่มา

1

app.set ('views', path.join (__ dirname, '/ path / to / your / folder')); app.set ("ดูตัวเลือก", {โครงร่าง: false}); app.engine ('html', ฟังก์ชั่น (เส้นทาง, opt, fn) {fs.readFile (เส้นทาง, 'utf-8', ฟังก์ชั่น (ข้อผิดพลาด, str) {ถ้า (ข้อผิดพลาด) ส่งคืน str; return fn (null, str) ;});});

— nilakantha singh deo

16

ลองทำสิ่งนี้เพื่อปรับแต่งเซิร์ฟเวอร์ของคุณ

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

จากนั้นฟังก์ชั่นโทรกลับของคุณไปยังเส้นทางจะมีลักษณะดังนี้:

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

— คอนเนอร์ปลิง
แหล่งที่มา

14

ไม่จำเป็นต้องใช้เอ็นจิ้นการดูหากคุณต้องการใช้เชิงมุมกับไฟล์ HTML ธรรมดา ต่อไปนี้เป็นวิธีดำเนินการ: ในroute.jsไฟล์ของคุณ:

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

— Ashish Rawat
แหล่งที่มา

1

ทางออกที่ง่ายที่สุดอย่างแน่นอน ฉันไม่มีการติดตั้ง / กำหนดค่าเอ็นจิ้นการดูและส่ง HTML แล้ว

— Newclique

7

ฉันขอแนะนำให้ใช้https://www.npmjs.com/package/express-es6-template-engine - เครื่องมือสร้างแม่แบบที่เบามากและรวดเร็วอย่างเห็นได้ชัด ชื่อนี้ทำให้เข้าใจผิดเล็กน้อยเนื่องจากสามารถทำงานได้โดยไม่ต้องใช้ expressjs เช่นกัน

ข้อมูลเบื้องต้นที่จำเป็นสำหรับการรวมเข้าexpress-es6-template-engineในแอพของคุณนั้นค่อนข้างเรียบง่าย

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

ขยายตัวอย่างข้อมูล

นี่คือเนื้อหาของindex.htmlไฟล์ที่ค้นหาภายในไดเรกทอรี 'มุมมอง' ของคุณ:

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

— didinko
แหล่งที่มา

4

คำตอบนั้นง่ายมาก คุณต้องใช้ app.engine ('html') เพื่อแสดง * .html Pages ลองสิ่งนี้มันจะต้องแก้ปัญหา

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 จะใช้งานได้

— Dinesh Kanivu
แหล่งที่มา

2

คำตอบที่ไม่สมบูรณ์ การเปลี่ยนแปลงเหล่านี้อยู่ที่ไหน สมมติว่า app.js แต่คำตอบของคุณต้องเจาะจง นอกจากนี้สิ่งนี้อาจไม่ใช่สิ่งที่จำเป็นต้องเปลี่ยนแปลงทั้งหมดเนื่องจากผลลัพธ์ของการเปลี่ยนแปลง / เพิ่มเติมเพียงสามประการนี้คือ "ไม่พบโมดูล 'ejs'" คำตอบของคุณอาจจะปิด แต่คุณต้องเพิ่มข้อมูลอีกเล็กน้อย

— Newclique

นอกจากนี้การแสดงผลไม่เหมือนกับการให้บริการไฟล์ การแสดงผลจำเป็นต้องใช้เซิร์ฟเวอร์ในการประมวลผลไฟล์ล่วงหน้าและเพิ่มเนื้อหาแบบไดนามิกใด ๆ ที่ถูกส่งผ่านไปยังวิธีการแสดงผล บางทีนั่นอาจเป็นสิ่งที่ OP ต้องการ แต่บางคนสับสนกับการแสดงผล แนวคิดที่แตกต่างกันมาก

— Newclique

@wade สำหรับสร้างการแสดงผลไฟล์ html แทนไฟล์ ejs

— Dinesh Kanivu

3

ไฟล์ HTML สามารถแสดงผลโดยใช้เครื่องมือ ejs:

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

และตรวจสอบให้แน่ใจว่าไฟล์ของคุณภายใต้ "/ views" ถูกตั้งชื่อด้วย ".ejs"

ตัวอย่างเช่น "index.ejs"

— JerryFZhang
แหล่งที่มา

มันใช้งานได้ แต่รู้สึกแฮ็คเล็กน้อย คุณรู้หรือไม่ว่ามีคำเตือนใด ๆ จากการใช้. ejs แทน. html ไชโยสำหรับการแก้ไขที่เร็วที่สุดอาจแนะนำเหมือนกันทั้งหมด!

— mikeym

3

คอมเม้นต์มิดเดิลแวร์สำหรับ html ie

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

ใช้แทน:

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

— Shivam Chhetri
แหล่งที่มา

2

html ไม่ได้เป็นเอ็นจิ้นการดู แต่ ejs มีความเป็นไปได้ที่จะเขียนโค้ด html ภายในมัน

— Wael Chorfan
แหล่งที่มา

1

ไปยังหน้า html ของเซิร์ฟเวอร์ผ่านการกำหนดเส้นทางฉันได้ทำสิ่งนี้แล้ว

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

และเปลี่ยนชื่อไฟล์. html ของฉันเป็น. hbs files - handlebars รองรับ HTML ธรรมดา

— Avinash
แหล่งที่มา

1

ในการทำให้เครื่องมือเรนเดอร์ยอมรับ html แทนที่จะเป็น Jade คุณสามารถทำตามขั้นตอนต่อไปนี้

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.

สิ่งนี้น่าจะใช้ได้

— Md Mehadi Hasan Mozumder
แหล่งที่มา

1

ลองวิธีแก้ปัญหาง่ายๆนี้ได้ผลกับฉัน

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

— Kiryamwibo Yenusu
แหล่งที่มา

1

คุณควรเพิ่มทุกบรรทัดของคุณเองมันไม่ทำงาน

— MushyPeas

1

ติดตั้งเทมเพลต ejs

npm install ejs --save

อ้างอิง ejs ใน app.js

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

สร้างเทมเพลต ejs ในมุมมองเช่น views / indes.ejs และใช้ ejs tempalte ในเราเตอร์

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

— KTA
แหล่งที่มา

0

แสดงแม่แบบ html ด้วยความช่วยเหลือของ 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
แหล่งที่มา

0

ไม่จำเป็นต้องแสดงไฟล์ Html
สิ่งที่เอ็นจิ้นการเรนเดอร์ทำคือเปลี่ยนไฟล์ที่ไม่ใช่ไฟล์ Html ให้เป็นไฟล์ Html
เพื่อส่งไฟล์ Html เพียงทำ:

res.sendFile("index.html");

คุณอาจจำเป็นต้องใช้__dirname+"/index.html"ดังนั้น express จะรู้เส้นทางที่แน่นอน

— GideonMax
แหล่งที่มา