sourcecode

Express에서 HTML을 뷰 엔진으로 사용하려면 어떻게 해야 합니까?

copyscript 2023. 9. 21. 21:12
반응형

Express에서 HTML을 뷰 엔진으로 사용하려면 어떻게 해야 합니까?

저는 시드에서 이 간단한 변경을 시도하여 해당하는 .html 파일(예: index.html)을 만들었습니다.

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

그리고 이 파일은 그대로였습니다.

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

하지만 달리면서 나는

500 오류: 'html' 모듈을 찾을 수 없습니다.

ejs'를 사용할 수 있는 유일한 옵션입니까?나의 의도는 Angular와 결합하여 평이한 HTML을 사용하는 것이었습니다.JS.

다른 링크의 답은 효과가 있겠지만 HTML을 제공하기 위해서는 펑키한 라우팅을 설정하지 않는 한 뷰 엔진을 사용할 필요가 전혀 없습니다.대신 정적 미들웨어를 사용합니다.

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

렌더링 엔진이 비취 대신 html을 받아들이도록 하려면 다음 단계를 수행할 수 있습니다.

  1. 통합을 설치하고 디렉토리로 전환합니다.

     npm install consolidate
 npm install swig

  2. 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');

  3. 보기 템플릿을 "views" 폴더 안에 .html로 추가합니다.노드 서버를 다시 시작하고 브라우저에서 앱을 시작합니다.

이것은 html을 문제없이 렌더링 할 수 있지만, JADE를 배우면서 사용하는 것을 추천합니다.제이드는 놀라운 템플릿 엔진이며 이를 학습하면 더 나은 디자인과 확장성을 달성할 수 있습니다.

apps.js에서 추가하기만 하면 됩니다.

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

이제 뷰 파일을 .html로 유지하면서 ejs 뷰 엔진을 사용할 수 있습니다.

출처 : 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');


이렇게 하면 보기를 .ejs 대신 .html로 저장할 수 있습니다.
html을 지원하지만 ejs를 인식하지 못하는 IDE로 작업하는 동안 꽤 도움이 됩니다.

단순 평이한 html 파일로 angular를 사용하려면 뷰 엔진이 필요 없습니다.다음과 같은 방법이 있습니다.당신의route.js파일:

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

서버 구성에 사용해 보십시오.

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

저는 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);
Here is the content of the index.html file locate inside your 'views' directory: 

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

html에 대한 미들웨어를 주석으로 달아주십시오.

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

대신 사용:

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

답은 매우 간단합니다.*.html 페이지를 렌더링하려면 app.engine('html')을 사용해야 합니다. 시도해 보십시오.문제를 해결해야 합니다.

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 파일이 작동합니다.

html .
렌더 엔진이 하는 일은 html 파일이 아닌 파일을 html 파일로 바꾸는 것입니다.
html합니다를 

res.sendFile("index.html");

를 해야 할 .__dirname+"/index.html"그러니 익스프레스는 정확한 경로를 알 수 있을 겁니다.

HTML 파일은 ejs 엔진을 사용하여 렌더링할 수 있습니다.

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

그리고 "/views" 아래의 파일 이름이 ".ejs"로 되어 있는지 확인합니다.

예를 들어 "index.ejs.

html은 뷰 엔진이 아니지만 ejs는 html 코드를 작성할 수 있는 가능성을 제공합니다.

ejs 템플릿 설치

npm install ejs --save

app.js에서 ejs 참조

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

views/indes.ejs와 같은 뷰에서 ejs 템플릿을 생성하고 라우터에서 ejst tempalte를 사용합니다.

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

라우팅을 통해 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 파일로 바꿨습니다 - 핸들바는 일반 html을 지원합니다.

렌더링 엔진이 비취 대신 html을 받아들이도록 하려면 다음 단계를 수행할 수 있습니다.

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.

이 방법이 효과가 있을 것입니다.

이 간단한 솔루션을 사용해 보세요. 제게 효과가 있었습니다.

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

swig의 도움으로 html 템플릿을 렌더링합니다.

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

언급URL : https://stackoverflow.com/questions/17911228/how-do-i-use-html-as-the-view-engine-in-express

반응형

'sourcecode' 카테고리의 다른 글

Importing CSV data using PHP/MySQL  (0) 2023.09.21
자바 앱과 통합하기 위한 블로그 엔진.어떤 블로그 엔진?  (0) 2023.09.21
console.log javascript [Function]  (0) 2023.09.21
mysql의 테이블이 3개인 내부 조인  (0) 2023.09.21
iframe 응답성 확보  (0) 2023.09.21

'sourcecode'의 다른글

  • 현재글Express에서 HTML을 뷰 엔진으로 사용하려면 어떻게 해야 합니까?

관련글

댓글

티스토리툴바