ฉันจะกำจัด Jade ในขณะที่ใช้ Express กับ Node.JS ได้อย่างไร ฉันต้องการใช้ html ธรรมดา ในบทความอื่น ๆ ฉันเคยเห็นว่ามีคนแนะนำ app.register () ซึ่งตอนนี้เลิกใช้งานแล้วในเวอร์ชันล่าสุด
ฉันจะกำจัด Jade ในขณะที่ใช้ Express กับ Node.JS ได้อย่างไร ฉันต้องการใช้ html ธรรมดา ในบทความอื่น ๆ ฉันเคยเห็นว่ามีคนแนะนำ app.register () ซึ่งตอนนี้เลิกใช้งานแล้วในเวอร์ชันล่าสุด
คำตอบ:
คุณสามารถทำได้ด้วยวิธีนี้:
ติดตั้ง ejs:
npm install ejsตั้งเอนจินเทมเพลตของคุณใน app.js เป็น ejs
// app.js
app.engine('html', require('ejs').renderFile);
app.set('view engine', 'html');ตอนนี้ในไฟล์เส้นทางของคุณคุณสามารถกำหนดตัวแปรเทมเพลตได้
// ./routes/index.js
exports.index = function(req, res){
res.render('index', { title: 'ejs' });};จากนั้นคุณสามารถสร้างมุมมอง html ของคุณในไดเร็กทอรี / views
titleในไฟล์ html ได้อย่างไร?
Jade ยังยอมรับการป้อน html
เพียงแค่เพิ่มจุดที่ท้ายบรรทัดเพื่อเริ่มส่ง html ที่บริสุทธิ์
หากนั่นเป็นเคล็ดลับสำหรับคุณให้ลอง:
doctype html
html. // THAT DOT
<body>
<div>Hello, yes this is dog</div>
</body>PS - ไม่จำเป็นต้องปิด HTML - ซึ่งทำโดยอัตโนมัติโดย Jade
response.sendFileapp.get('/', function (req, res) {
res.sendfile(__dirname + '/index.html');
});)จากการอ้างอิง API ด่วนอย่างเป็นทางการ :
res.sendfile(path, [options], [fn]])โอนไฟล์ตามเส้นทางที่กำหนด
ตั้งค่าเริ่มต้นฟิลด์ส่วนหัวการตอบกลับ Content-Type โดยอัตโนมัติตามนามสกุลของชื่อไฟล์ การโทรกลับ
fn(err)จะเรียกใช้เมื่อการโอนเสร็จสมบูรณ์หรือเมื่อเกิดข้อผิดพลาด
res.sendFileจัดเตรียมแคชฝั่งไคลเอ็นต์ผ่านส่วนหัวแคช http แต่ไม่แคชเนื้อหาไฟล์บนฝั่งเซิร์ฟเวอร์ โค้ดด้านบนจะตีดิสก์ในแต่ละคำขอ
sendfileไม่อนุญาตให้คุณทำเทมเพลตใด ๆ เนื่องจากเพิ่งส่งไบต์จากไฟล์ นอกจากนี้ฉันขอแนะนำไม่ให้ใช้sendfileแบบนี้เพราะนั่นหมายความว่าคุณจะโดนดิสก์ทุกครั้งที่มีคำขอเข้ามา - คอขวดใหญ่ สำหรับหน้าที่มีการเข้าชมสูงคุณควรทำแคชในหน่วยความจำ
ในความคิดของฉันการใช้สิ่งที่ใหญ่พอ ๆ กับ ejs เพื่ออ่านไฟล์ html นั้นค่อนข้างหนักหน่วง ฉันเพิ่งเขียนเอ็นจินแม่แบบของตัวเองสำหรับไฟล์ html ที่เรียบง่ายอย่างน่าทึ่ง ไฟล์มีลักษณะดังนี้:
var fs = require('fs');
module.exports = function(path, options, fn){
var cacheLocation = path + ':html';
if(typeof module.exports.cache[cacheLocation] === "string"){
return fn(null, module.exports.cache[cacheLocation]);
}
fs.readFile(path, 'utf8', function(err, data){
if(err) { return fn(err); }
return fn(null, module.exports.cache[cacheLocation] = data);
});
}
module.exports.cache = {};ฉันเรียกว่า htmlEngine ของฉันและวิธีที่คุณใช้ก็เพียงแค่พูดว่า:
app.engine('html', require('./htmlEngine'));
app.set('view engine', 'html');app.register()ยังไม่ได้รับการตัดค่าเสื่อมราคาจะได้รับเพียงแค่เปลี่ยนชื่อapp.engine()ตั้งแต่ด่วน 3 การเปลี่ยนแปลงวิธีการเครื่องมือแม่แบบได้รับการจัดการ
ความเข้ากันได้ของเครื่องมือเทมเพลต Express 2.x จำเป็นต้องมีการส่งออกโมดูลต่อไปนี้:
exports.compile = function(templateString, options) { return a Function; };เครื่องมือแม่แบบ Express 3.x ควรส่งออกสิ่งต่อไปนี้:
exports.__express = function(filename, options, callback) { callback(err, string); };หากเครื่องมือแม่แบบไม่เปิดเผยวิธีนี้คุณก็ไม่โชคดี
app.engine()วิธีนี้จะช่วยให้คุณสามารถแมปฟังก์ชันใด ๆ กับส่วนขยายได้ สมมติว่าคุณมีไลบรารี markdown และต้องการแสดงไฟล์. md แต่ไลบรารีนี้ไม่รองรับ Express การapp.engine()โทรของคุณอาจมีลักษณะดังนี้:var markdown = require('some-markdown-library'); var fs = require('fs'); app.engine('md', function(path, options, fn){ fs.readFile(path, 'utf8', function(err, str){ if (err) return fn(err); str = markdown.parse(str).toString(); fn(null, str); }); });
หากคุณกำลังมองหาเครื่องมือสร้างเทมเพลตที่ช่วยให้คุณใช้ HTML แบบ 'ธรรมดา' ฉันขอแนะนำdoTเพราะมันเร็วมาก
แน่นอนว่าโปรดทราบว่าโมเดลมุมมอง Express 3 จะทำให้การแคชดูขึ้นอยู่กับคุณ (หรือเครื่องมือสร้างเทมเพลตของคุณ) ในสภาพแวดล้อมการใช้งานจริงคุณอาจต้องการแคชมุมมองของคุณในหน่วยความจำเพื่อไม่ให้คุณทำดิสก์ I / O ในทุกคำขอ
คุณสามารถใช้ EJS กับ Express ว่าเทมเพลตใดเป็น HTML แต่รองรับตัวแปร นี่คือบทแนะนำที่ดีเกี่ยวกับวิธีใช้ EJS แบบด่วน
http://robdodson.me/blog/2012/05/31/how-to-use-ejs-in-express/
ในการทำให้เอนจิ้นการแสดงผลยอมรับ html แทนหยกคุณสามารถทำตามขั้นตอนต่อไปนี้
ติดตั้งรวมและสลับไปยังไดเร็กทอรีของคุณ
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 ภายในโฟลเดอร์“ views” รีสตาร์ทเซิร์ฟเวอร์โหนดของคุณและเริ่มแอพในเบราว์เซอร์
แม้ว่าสิ่งนี้จะแสดง html โดยไม่มีปัญหา แต่ฉันขอแนะนำให้คุณใช้ JADE โดยเรียนรู้มัน Jade เป็นเครื่องมือสร้างเทมเพลตที่น่าทึ่งและการเรียนรู้สิ่งนี้จะช่วยให้คุณออกแบบและปรับขนาดได้ดีขึ้น
ขั้นแรกให้ตรวจสอบเวอร์ชันที่เข้ากันได้ของเครื่องมือแม่แบบโดยใช้บรรทัดด้านล่าง
express -hจากนั้นคุณไม่ต้องใช้มุมมองจากรายการเลือกไม่ดู
express --no-view myappตอนนี้คุณสามารถใช้ html, css, js และรูปภาพทั้งหมดในโฟลเดอร์สาธารณะได้แล้ว
ดูเหมือนว่าคุณต้องการให้บริการไฟล์คงที่ และมีหน้าสำหรับ http://expressjs.com/en/starter/static-files.html
แปลกประหลาดที่ไม่มีใครเชื่อมโยงไปยังเอกสาร
พิจารณาว่าคุณได้กำหนดเส้นทางของคุณไว้แล้วหรือรู้วิธีทำ
app.get('*', function(req, res){
res.sendfile('path/to/your/html/file.html');
});หมายเหตุ: เส้นทางนี้จะต้องถูกวางไว้หลังเส้นทางอื่น ๆ ทั้งหมดเนื่องจาก * ยอมรับทุกอย่าง
เนื่องจาก Jade รองรับ HTML หากคุณต้องการเพียงแค่มี. html ext คุณสามารถทำได้
// app.js
app.engine('html', require('jade').renderFile);
app.set('view engine', 'html');จากนั้นคุณก็เปลี่ยนไฟล์ในมุมมองจาก jade เป็น html
คุณยังสามารถรวมไฟล์ html ของคุณลงในไฟล์ Jade ได้โดยตรง
include ../../public/index.htmlคำตอบเดิม: เครื่องกำเนิดไฟฟ้าด่วนที่ไม่มีหยก
หากคุณต้องการใช้html ธรรมดาใน nodeJS โดยไม่ต้องใช้ jade .. หรืออะไรก็ตาม:
var html = '<div>'
+ 'hello'
+ '</div>';ส่วนตัวฉันทำได้ดีกับสิ่งนั้น
ข้อดีคือความเรียบง่ายเมื่อควบคุม คุณสามารถใช้เทคนิคบางอย่างเช่น'<p>' + (name || '') + '</p>'ternary .. ฯลฯ
หากคุณต้องการโค้ดเยื้องในเบราว์เซอร์คุณสามารถทำได้:
+ 'ok \
my friend \
sldkfjlsdkjf';และใช้ \ t หรือ \ n ตามต้องการ แต่ฉันไม่ชอบแถมเร็วกว่าด้วย