기본 HTML보기를 렌더링?

나는 익스프레스 프레임 워크를 사용하여 땅을 얻기 위해 노력하고있는 기본 Node.js를 응용 프로그램을 가지고있다. 나는 내가 index.html을 파일이 어디 폴더 전망이 있습니다. 웹 브라우저를로드 할 때 나는 다음과 같은 오류가 발생합니다.

다음은 내 코드입니다.

var express = require('express');
var app = express.createServer();

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

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

app.listen(8080, '127.0.0.1')

내가 무슨 말이냐?

해결법

==============================
1.당신은 일반 HTML 페이지를 포함 옥 수 있습니다 :

당신은 일반 HTML 페이지를 포함 옥 수 있습니다 :

뷰 / index.jade
```
include plain.html
```
뷰 / plain.html
```
<!DOCTYPE html>
...
```
및 app.js는 여전히 옥을 렌더링 할 수있다 :
```
res.render(index)
```
==============================
2.이러한 답변의 대부분은 구식이다.

이러한 답변의 대부분은 구식이다.

특급 3.0.0과 3.1.0, 다음 작품을 사용 :
```
app.set('views', __dirname + '/views');
app.engine('html', require('ejs').renderFile);
```
다른 구문과 표현 3.4 이상에 대한주의 사항은 아래의 주석을 참조하십시오 :
```
app.set('view engine', 'ejs');
```
그럼 당신은 뭔가를 같이 할 수 있습니다 :
```
app.get('/about', function (req, res)
{
    res.render('about.html');
});
```
이것은 당신의 의견 하위 폴더에있는 당신의 전망이 가정, 당신은 EJS 노드 모듈을 설치했는지. 그렇지 않은 경우, 노드의 콘솔에서 다음을 실행합니다 :
```
npm install ejs --save
```
==============================
3.Express.js 가이드에서 :보기 렌더링

Express.js 가이드에서 :보기 렌더링

그러니 당신은 당신의 자신의 간단한 렌더러를 만들거나 그냥 옥을 사용합니다 :
```
 app.register('.html', require('jade'));
```
app.register에 대한 자세한.

==============================

4.이 시도. 나를 위해 작동합니다.

이 시도. 나를 위해 작동합니다.

app.configure(function(){

  .....

  // disable layout
  app.set("view options", {layout: false});

  // make a custom html template
  app.register('.html', {
    compile: function(str, options){
      return function(locals){
        return str;
      };
    }
  });
});

....

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

==============================
5.또한 HTML 파일을 읽고 그것을 보낼 수 있습니다 :

또한 HTML 파일을 읽고 그것을 보낼 수 있습니다 :
```
app.get('/', (req, res) => {
    fs.readFile(__dirname + '/public/index.html', 'utf8', (err, text) => {
        res.send(text);
    });
});
```

==============================

6.

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

==============================
7.당신은 express@~3.0.0 변화 귀하의 예제에서 아래의 라인을 사용하는 경우 :

당신은 express@~3.0.0 변화 귀하의 예제에서 아래의 라인을 사용하는 경우 :
```
app.use(express.staticProvider(__dirname + '/public'));
```
이 같은 뭔가 :
```
app.set("view options", {layout: false});
app.use(express.static(__dirname + '/public'));
```
특급 API를 페이지에 설명하고 매력처럼 작동하기 때문에 나는 그것을했다. 이 설정을 사용하면 그것이 당신의 마이크로 생산 테스트를위한 사용하기 쉬운 정도가되도록 추가 코드를 작성할 필요가 없습니다.

전체 코드는 다음과 같습니다 :
```
var express = require('express');
var app = express.createServer();

app.set("view options", {layout: false});
app.use(express.static(__dirname + '/public'));

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

app.listen(8080, '127.0.0.1')
```
==============================
8.또한 명시 3.X 노드 0.6.16에서 동일한 문제에 직면했다. 위의 주어진 솔루션 것 최신 버전 익스프레스 3.x에 대한하지 작업 그들은 app.register 방법을 제거하고 app.engine 방법을 추가했다. 위의 솔루션을 시도하면 다음과 같은 오류와 함께 종료 될 수 있습니다.

또한 명시 3.X 노드 0.6.16에서 동일한 문제에 직면했다. 위의 주어진 솔루션 것 최신 버전 익스프레스 3.x에 대한하지 작업 그들은 app.register 방법을 제거하고 app.engine 방법을 추가했다. 위의 솔루션을 시도하면 다음과 같은 오류와 함께 종료 될 수 있습니다.
```
node.js:201
        throw e; // process.nextTick error, or 'error' event on first tick
              ^
TypeError: Object function app(req, res){ app.handle(req, res); } has no method 'register'
    at Function.<anonymous> (/home/user1/ArunKumar/firstExpress/app.js:37:5)
    at Function.configure (/home/user1/ArunKumar/firstExpress/node_modules/express/lib/application.js:399:61)
    at Object.<anonymous> (/home/user1/ArunKumar/firstExpress/app.js:22:5)
    at Module._compile (module.js:441:26)
    at Object..js (module.js:459:10)
    at Module.load (module.js:348:31)
    at Function._load (module.js:308:12)
    at Array.0 (module.js:479:10)
    at EventEmitter._tickCallback (node.js:192:40)
```
오류 메시지를 제거하는. 당신의 app.configure 기능에 다음 줄을 추가
```
app.engine('html', require('ejs').renderFile);
```
참고 : 당신은 EJS 템플릿 엔진을 설치해야
```
npm install -g ejs
```
예:
```
app.configure(function(){

  .....

  // disable layout
  app.set("view options", {layout: false});

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

....

app.get('/', function(req, res){
  res.render("index.html");
});
```
참고 : 가장 간단한 해결책은보기 엔진으로 EJS 템플릿을 사용하는 것입니다. * .ejs 파일을보기에 당신은 원시 HTML을가 쓸 수 있습니다.

==============================

9.폴더 구조 :

폴더 구조 :

.
├── index.html
├── node_modules
│   ├──{...}
└── server.js

server.js

var express = require('express');
var app = express();

app.use(express.static('./'));

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

app.listen(8882, '127.0.0.1')

index.html을

<!DOCTYPE html>
<html>
<body>

<div> hello world </div>

</body>
</html>

산출:

안녕하세요 세계

==============================
10.당신의 의견 디렉토리를 사용하지 않을 경우, 간단히 이동 HTML 아래의 공용 디렉토리에 파일.

당신의 의견 디렉토리를 사용하지 않을 경우, 간단히 이동 HTML 아래의 공용 디렉토리에 파일.

다음, 대신 '/ 뷰'의 app.configure에이 줄을 추가합니다.
```
server.use(express.static(__dirname + '/public'));
```
==============================
11.다음을 시도 노드에서 HTML 페이지를 렌더링하기 위해,

다음을 시도 노드에서 HTML 페이지를 렌더링하기 위해,
```
app.set('views', __dirname + '/views');

app.engine('html', require('ejs').renderFile);
```
==============================
12.내 프로젝트를 위해 나는이 구조를 만들었습니다 :

내 프로젝트를 위해 나는이 구조를 만들었습니다 :
```
index.js
css/
    reset.css
html/
    index.html
```
이 코드는 /css/reset.css 요청 / 요청, reset.css에 대한 index.html을 제공합니다. 간단한 충분히, 그리고 가장 중요한 부분은 자동으로 캐시 헤더를 추가하는 것입니다.
```
var express = require('express'),
    server = express();

server.configure(function () {
    server.use('/css', express.static(__dirname + '/css'));
    server.use(express.static(__dirname + '/html'));
});

server.listen(1337);
```
==============================
13.익스프레스 4.0.0로, 당신이해야 할 유일한 것은 app.js 2 개 라인 밖으로 주석입니다 :

익스프레스 4.0.0로, 당신이해야 할 유일한 것은 app.js 2 개 라인 밖으로 주석입니다 :
```
/* app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade'); */ //or whatever the templating engine is.
```
그리고 다음 공개 / 디렉토리에 정적 파일을 놓습니다. 예 : /public/index.html
==============================
14.나는이 라인 아래에 추가 그리고 그것은 나를 위해 일

나는이 라인 아래에 추가 그리고 그것은 나를 위해 일
```
    app.set('view engine', 'html');
    app.engine('html', require('ejs').renderFile);
```

==============================

15.익스프레스 노선의 res.sendFile () 함수를 사용해보십시오.

익스프레스 노선의 res.sendFile () 함수를 사용해보십시오.

var express = require("express");
var app     = express();
var path    = require("path");


app.get('/',function(req,res){
  res.sendFile(path.join(__dirname+'/index.html'));
  //__dirname : It will resolve to your project folder.
});

app.get('/about',function(req,res){
  res.sendFile(path.join(__dirname+'/about.html'));
});

app.get('/sitemap',function(req,res){
  res.sendFile(path.join(__dirname+'/sitemap.html'));
});

app.listen(3000);

console.log("Running at Port 3000");

여기에 읽기 : http://codeforgeek.com/2015/01/render-html-file-expressjs/

==============================
16.단순히 자신을 작은 렌더러를 썼다 그래서 나는 단순히 HTML 파일을 제공하기위한 EJS에 의존하고 싶지 않았다 :

단순히 자신을 작은 렌더러를 썼다 그래서 나는 단순히 HTML 파일을 제공하기위한 EJS에 의존하고 싶지 않았다 :
```
const Promise = require( "bluebird" );
const fs      = Promise.promisifyAll( require( "fs" ) );

app.set( "view engine", "html" );
app.engine( ".html", ( filename, request, done ) => {
    fs.readFileAsync( filename, "utf-8" )
        .then( html => done( null, html ) )
        .catch( done );
} );
```
==============================
17.1) 가장 좋은 방법은 일련의 정적 폴더에 있습니다. 메인 파일에서 (app.js | server.js | ???) :

1) 가장 좋은 방법은 일련의 정적 폴더에 있습니다. 메인 파일에서 (app.js | server.js | ???) :
```
app.use(express.static(path.join(__dirname, 'public')));
```
공공 / CSS / form.html 공공 / CSS /있는 style.css

그럼 당신은 "공개"폴더에서 정적 파일을 가지고 :
```
http://YOUR_DOMAIN/form.html
http://YOUR_DOMAIN/css/style.css
```
2)

당신은 당신의 파일 캐시를 만들 수 있습니다. 사용 방법 fs.readFileSync
```
var cache = {};
cache["index.html"] = fs.readFileSync( __dirname + '/public/form.html');

app.get('/', function(req, res){    
    res.setHeader('Content-Type', 'text/html');
    res.send( cache["index.html"] );                                
};);
```
==============================
18.나는이 편안하고 API를 표현하고 도움이되지었지만이 페이지에 여러 번 착륙과 각도 응용 프로그램을 설정하려고했습니다. 여기에 내가 일을 그 무엇을 발견 :

나는이 편안하고 API를 표현하고 도움이되지었지만이 페이지에 여러 번 착륙과 각도 응용 프로그램을 설정하려고했습니다. 여기에 내가 일을 그 무엇을 발견 :
```
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'));
});
```
그런 다음 API 노선에 대한 콜백과 같이 : res.jsonp (사용자);

귀하의 클라이언트 측 프레임 워크는 라우팅 처리 할 수 있습니다. Express는 API를 제공하기위한 것입니다.

내 홈 경로는 다음과 같습니다 :
```
app.get('/*', function(req, res) {
    res.sendfile('./public/index.html'); // load the single view file (angular will handle the page changes on the front-end)
});
```

==============================

19.

res.sendFile(__dirname + '/public/login.html');

==============================
20.여기에 명시 서버의 전체 파일 데모입니다!

여기에 명시 서버의 전체 파일 데모입니다!

https://gist.github.com/xgqfrms-GitHub/7697d5975bdffe8d474ac19ef906e906

당신을 위해 도움이되기를 바랍니다!

HTML 페이지에 대한 // 간단한 Express 서버! // ES6 스타일 CONST =이 ( '표현')를 요구 표현; CONST는 FS = ( 'FS') 요구; CONST 호스트 = '127.0.0.1'; CONST 포트 = 3000; CONST 응용 프로그램 =)은 (표현; 캐시는 [] =하자, 확인 // 배열입니다! 캐시 [0] = fs.readFileSync (__dirname + '/index.html이'); 캐시 [1] = fs.readFileSync (__dirname + '/views/testview.html'); app.get ( '/'(REQ, 해상도) => { res.setHeader ( '콘텐츠 유형', 'text / html과'); res.send (캐시 [0]); }); app.get ( '/ 테스트'(REQ, 해상도) => { res.setHeader ( '콘텐츠 유형', 'text / html과'); res.send (캐시 [1]); }); app.listen (포트 () => { CONSOLE.LOG (` 서버는 HTTP에서 실행 : // $ {호스트 이름} : $ {포트} / 서버 호스트 이름 $ {호스트 이름} 포트 $ {포트}에서 수신 대기! '); });
==============================
21.코드에 다음과 같은 라인을 추가

코드에 다음과 같은 라인을 추가

건배 :)
==============================
22.나는 "/"이전에 그들이 미들웨어 정적에 의해 처리되었다 익스프레스 경로에 의해 처리 될 요청을 허용하고 싶었다. 이 날 index.html을의 일반 버전 또는 응용 프로그램의 설정에 따라, JS 및 CSS 축소 된 + 연결된로드 된 버전을 렌더링 할 수있다. 수정되지 않은 - -보기 폴더에, 구성 익스프레스과 같이 앤드류 Homeyer의 대답에 의해 영감을, 나는 나의 HTML 파일을 드래그하기로 결정

나는 "/"이전에 그들이 미들웨어 정적에 의해 처리되었다 익스프레스 경로에 의해 처리 될 요청을 허용하고 싶었다. 이 날 index.html을의 일반 버전 또는 응용 프로그램의 설정에 따라, JS 및 CSS 축소 된 + 연결된로드 된 버전을 렌더링 할 수있다. 수정되지 않은 - -보기 폴더에, 구성 익스프레스과 같이 앤드류 Homeyer의 대답에 의해 영감을, 나는 나의 HTML 파일을 드래그하기로 결정
```
   app.engine('html', swig.renderFile);
   app.set('view engine', 'html');
   app.set('views', __dirname + '/views');  
```
그래서 같은 경로 핸들러를 생성
```
 app.route('/')
        .get(function(req, res){
            if(config.useConcatendatedFiles){
                return res.render('index-dist');
            }
            res.render('index');       
        });
```
이 꽤 잘했다.

==============================

23.server.js에 포함하십시오

server.js에 포함하십시오

var express = require("express");
var app     = express();
var path    = require("path");


app.get('/',function(req,res){
  res.sendFile(path.join(__dirname+'/index.html'));
  //__dirname : It will resolve to your project folder.
});

==============================
24.당신은 이미 그 안에 모든 그것의 내용이있는 HTML 파일을 제공하려는 경우, 그것은, 그냥 할 필요가 '봉사' '렌더링'할 필요가 없습니다. 서버 업데이트 또는 페이지 전에 분사 내용이 브라우저로 전송되어있을 때 렌더링이며, 다른 답변은 표시로, EJS 같은 추가 종속성을 필요로한다.

당신은 이미 그 안에 모든 그것의 내용이있는 HTML 파일을 제공하려는 경우, 그것은, 그냥 할 필요가 '봉사' '렌더링'할 필요가 없습니다. 서버 업데이트 또는 페이지 전에 분사 내용이 브라우저로 전송되어있을 때 렌더링이며, 다른 답변은 표시로, EJS 같은 추가 종속성을 필요로한다.

당신은 단순히 자신의 요청에 따라 파일 브라우저를 직접하려면이 같은 res.sendFile ()를 사용한다 :
```
const express = require('express');
const app = express();
var port = process.env.PORT || 3000; //Whichever port you want to run on
app.use(express.static('./folder_with_html')); //This ensures local references to cs and js files work

app.get('/', (req, res) => {
  res.sendFile(__dirname + '/folder_with_html/index.html');
});

app.listen(port, () => console.log("lifted app; listening on port " + port));
```
그렇지 이런 식으로 표현 외에 추가 종속성이 필요합니다. 당신은 단지 서버가 이미 생성 된 HTML 파일을 보내려면, 위에서 그렇게 할 수있는 매우 가벼운 방법입니다.
==============================
25.일반 HTML을 위해 당신은 어떤 NPM 패키지 또는 미들웨어가 필요하지 않습니다

일반 HTML을 위해 당신은 어떤 NPM 패키지 또는 미들웨어가 필요하지 않습니다

단지 이것을 사용 :
```
app.get('/', function(req, res) {
    res.sendFile('index.html');
});
```
==============================
26.var에 급행 =은 ( '표현')이 필요합니다; var에 응용 프로그램 =)은 (표현; app.use (express.static (__이 dirname + '공개 /'));

var에 급행 =은 ( '표현')이 필요합니다; var에 응용 프로그램 =)은 (표현; app.use (express.static (__이 dirname + '공개 /'));
```
app.get('/', function(req, res) {
    res.render('index.html');
});


app.listen(3400, () => {
    console.log('Server is running at port 3400');
})
```
공용 폴더에 index.html 파일을 넣어
```
<!DOCTYPE html>
<html>
<head>
    <title>Render index html file</title>
</head>
<body>
    <h1> I am from public/index.html </h1>
</body>
</html>
```
이제 터미널에서 다음 코드를 실행
==============================
27.나는 보통 이것을 사용

나는 보통 이것을 사용
```
app.configure(function() {
    app.use(express.static(__dirname + '/web'));
});
```
즉, / 웹 디렉토리에서 아무것도를 공유하는 것이기 때문에 그냥주의하십시오.

나는 그것이 도움이되기를 바랍니다
==============================
28.당신은 Node.js를에 대한 명시 적 프레임 워크를 사용하는 경우

당신은 Node.js를에 대한 명시 적 프레임 워크를 사용하는 경우

NPM EJS 설치

다음 설정 파일을 추가
```
app.set('port', process.env.PORT || 3000);
app.set('views', __dirname + '/views');
app.set('view engine', 'ejs');
app.set('view engine', 'jade');
app.use(express.favicon());
app.use(express.logger('dev'));
app.use(express.bodyParser());
app.use(express.methodOverride());
app.use(app.router)
```
;

수출 모듈 form.js에서 페이지를 렌더링 뷰 디렉토리에 HTML 파일을 EJS 파일 이름의 확장으로와 form.html.ejs

다음 form.js를 만들

( 'form.html.ejs') res.render;

from https://stackoverflow.com/questions/4529586/render-basic-html-view by cc-by-sa and MIT license

'MONGODB' 카테고리의 다른 글

[MONGODB] MongoDB의 배열로부터 제거 개체 (0)	2019.12.01
[MONGODB] 유성이 게시 이해 / 구독 (0)	2019.12.01
[MONGODB] MongoDB를 선택 COUNT GROUP BY (0)	2019.11.30
[MONGODB] MongoDB의 쿼리 도움말 - 하위 오브젝트의 모든 키의 값에 대한 쿼리 (0)	2019.11.30
[MONGODB] MongoDB의에서 수집 기록 내부 배열을 정렬하는 방법 (0)	2019.11.30

복붙노트

[MONGODB] 기본 HTML보기를 렌더링?

기본 HTML보기를 렌더링?

해결법

1.당신은 일반 HTML 페이지를 포함 옥 수 있습니다 :

2.이러한 답변의 대부분은 구식이다.

3.Express.js 가이드에서 :보기 렌더링

4.이 시도. 나를 위해 작동합니다.

5.또한 HTML 파일을 읽고 그것을 보낼 수 있습니다 :

6.

7.당신은 express@~3.0.0 변화 귀하의 예제에서 아래의 라인을 사용하는 경우 :

9.폴더 구조 :

10.당신의 의견 디렉토리를 사용하지 않을 경우, 간단히 이동 HTML 아래의 공용 디렉토리에 파일.

11.다음을 시도 노드에서 HTML 페이지를 렌더링하기 위해,

12.내 프로젝트를 위해 나는이 구조를 만들었습니다 :

13.익스프레스 4.0.0로, 당신이해야 할 유일한 것은 app.js 2 개 라인 밖으로 주석입니다 :

14.나는이 라인 아래에 추가 그리고 그것은 나를 위해 일

15.익스프레스 노선의 res.sendFile () 함수를 사용해보십시오.

16.단순히 자신을 작은 렌더러를 썼다 그래서 나는 단순히 HTML 파일을 제공하기위한 EJS에 의존하고 싶지 않았다 :

17.1) 가장 좋은 방법은 일련의 정적 폴더에 있습니다. 메인 파일에서 (app.js | server.js | ???) :

18.나는이 편안하고 API를 표현하고 도움이되지었지만이 페이지에 여러 번 착륙과 각도 응용 프로그램을 설정하려고했습니다. 여기에 내가 일을 그 무엇을 발견 :

19.

20.여기에 명시 서버의 전체 파일 데모입니다!

21.코드에 다음과 같은 라인을 추가

23.server.js에 포함하십시오

25.일반 HTML을 위해 당신은 어떤 NPM 패키지 또는 미들웨어가 필요하지 않습니다

26.var에 급행 =은 ( '표현')이 필요합니다; var에 응용 프로그램 =)은 (표현; app.use (express.static (__이 dirname + '공개 /'));

27.나는 보통 이것을 사용

28.당신은 Node.js를에 대한 명시 적 프레임 워크를 사용하는 경우

'MONGODB' 카테고리의 다른 글

티스토리툴바