기본 HTML 보기를 렌더링하시겠습니까?

programing

기본 HTML 보기를 렌더링하시겠습니까?

sourcetip 2022. 12. 26. 21:52

기본 HTML 보기를 렌더링하시겠습니까?

Express 프레임워크를 사용하여 시작하려고 하는 기본 Node.js 앱을 가지고 있습니다.는 나나 a a a가 있다views★★★★★★★★★★★★★★★★★★★★가 있는 폴더index.html그러나 웹 페이지를 로드할 때 다음과 같은 오류가 발생합니다.

Error: Cannot find module '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')

내가 뭘 놓쳤지?

oid에는 플레인 HTML 페이지를 포함할 수 있습니다.

views/index.displays에 추가

include plain.html

뷰/오브젝트 내의

<!DOCTYPE html>
...

app.display는 여전히 옥을 렌더링할 수 있습니다.

res.render(index)

이 답변들 중 많은 것들이 시대에 뒤떨어져 있다.

express 3.0.0 및 3.1.0을 사용하면 다음 작업이 수행됩니다.

app.set('views', __dirname + '/views');
app.engine('html', require('ejs').renderFile);

express 3.4+ 의 대체 구문 및 경고에 대해서는, 다음의 코멘트를 참조해 주세요.

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

그런 다음 다음과 같은 작업을 수행할 수 있습니다.

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

은 여러분이 합니다.views및 「」가 되어 것을 합니다.ejs " 가 작업을 수행합니다.그렇지 않은 경우 노드 콘솔에서 다음 작업을 수행합니다.

npm install ejs --save

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

의 표시는 .Express.ENGINE서, snowledge.ENGINE는 필요한 모듈의 이름입니다.예를 들어 뷰는 뷰 시스템을 에 알립니다. 단, 로드되는 모듈은 Express에 준거하기 위해 메서드를 내보내야 합니다.app.register()는 엔진을 파일 할 수 를 들어, 「파일 」는 「파일 확장자」입니다.이에 、 를를 、 ,, 、foo.html옥으로 만들 수 있다.

그래서 당신은 당신만의 간단한 렌더러를 만들거나 옥을 사용한다.

 app.register('.html', require('jade'));

상세 정보app.register.

Express 3에서는 이 메서드의 이름이 변경되어 있습니다.

HTML 파일을 읽어 송신할 수도 있습니다.

app.get('/', (req, res) => {
    fs.readFile(__dirname + '/public/index.html', 'utf8', (err, text) => {
        res.send(text);
    });
});

이거 먹어봐.나한테는 효과가 있어

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

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

express@~3.0.0 을 사용하고 있는 경우는, 다음의 행을 예로부터 변경합니다.

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

다음과 같은 것이 있습니다.

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

express 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')

도 같은 했습니다.express 3.X ★★★★★★★★★★★★★★★★★」node 0.6.16 버전에서는 express 3.x그들이 제거했다.app.register 및 된 " " " "app.engine if. 위의 오류가 할 수 .위의 솔루션을 시도하면 다음과 같은 오류가 발생할 수 있습니다.

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 function

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

주 : 치해야야 note note note note note note를 설치해야 .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을 쓸 수 있습니다.

폴더 구조:

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

server.displaces

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.displaces를 표시합니다.

<!DOCTYPE html>
<html>
<body>

<div> hello world </div>

</body>
</html>

출력:

안녕 세계

보기 디렉토리를 사용할 필요가 없는 경우 html 파일을 아래 공용 디렉토리로 이동하기만 하면 됩니다.

그런 다음 이 행을 '/filename' 대신 app.configure에 추가합니다.

server.use(server.static(_public name + '/public'));

경우는, HTML 를 할 수 있습니다.sendFile() 하지 않는

const express =  require("express")
const path = require("path")
const app = express()
app.get("/",(req,res)=>{
    res.sendFile(**path.join(__dirname, 'htmlfiles\\index.html')**)
})
app.listen(8000,()=>{
    console.log("server is running at Port 8000");
})

html 파일 내에 HTML 파일이 있기 때문에 경로 모듈을 사용하여 index.html 경로가 노드의 기본 모듈입니다.방금 사용한 루트 폴더에 파일이 있는 경우

res.sendFile(path.join(__dirname, 'htmlfiles\\index.html'))

에 inside inside inside app.get()가 있을 것이다

프로젝트를 위해 다음과 같은 구조를 만들었습니다.

index.js
css/
    reset.css
html/
    index.html

index.을 index.html로 합니다./reset.css에 요구 및 의 경우/css/reset.css요청한다.간단하지만 가장 좋은 점은 캐시 헤더를 자동으로 추가하는 것입니다.

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

노드에서 Html 페이지를 렌더링하려면 다음을 수행합니다.

app.set('views', __dirname + '/views');

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

할 .ejs 통해 합니다.npm들면 다음과 같습니다.
```
   npm install ejs --save
```

Express 4.0.0에서는 app.js에서 두 줄만 코멘트하면 됩니다.

/* app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade'); */ //or whatever the templating engine is.

그런 다음 정적 파일을 /public 디렉토리에 놓습니다.예: /public/index.html

Express 4.x

res.send File(패스 [, 옵션][, fn])

.html 파일 전송, 템플릿 엔진 없음...

//...
// Node modules
const path = require('path')
//...
// Set path to views directory
app.set('views', path.join(__dirname, 'views'))
/**
 * App routes
 */
app.get('/', (req, res) => {
  res.sendFile('index.html', { root: app.get('views') })
})
//...

.
├── node_modules
│
├── views
│   ├──index.html
└── app.js

아래에 두 줄을 추가했는데 효과가 있습니다.

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

Express 루트에서 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/

단순히 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 );
} );

1) 정적 폴더를 설정하는 것이 가장 좋습니다.메인 파일 ( app . js | server . js | ? )?):

app.use(express.static(path.join(__dirname, 'public')));

cspublic/css/form.devp
public/css/style.css

그런 다음 "public" 폴더에서 정적 파일을 가져옵니다.

http://YOUR_DOMAIN/form.html
http://YOUR_DOMAIN/css/style.css

파일 캐시를 생성할 수 있습니다.
.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"] );                                
};);

express RESTful 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(users);

클라이언트측 프레임워크로 루팅을 처리할 수 있습니다.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)
});

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

코드에 다음 행을 추가합니다.

"jade"를 "ejs" 및 "X.Y"로 바꿉니다.패키지에 "*"가 포함된 Z(버전)json 파일
```
  "dependencies": {
   "ejs": "*"
  }
```
그런 다음 app.js 파일 다음 코드를 추가합니다.

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

app.set('view engine', 'html');
'모두 기억해주세요'보기의 HTML 파일 폴더

건배 :)

express 서버의 전체 파일 데모입니다!

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

당신에게 도움이 되길 바랍니다!

// simple express server for HTML pages!
// ES6 style

const express = require('express');
const fs = require('fs');
const hostname = '127.0.0.1';
const port = 3000;
const app = express();

let cache = [];// Array is OK!
cache[0] = fs.readFileSync( __dirname + '/index.html');
cache[1] = fs.readFileSync( __dirname + '/views/testview.html');

app.get('/', (req, res) => {
    res.setHeader('Content-Type', 'text/html');
    res.send( cache[0] );
});

app.get('/test', (req, res) => {
    res.setHeader('Content-Type', 'text/html');
    res.send( cache[1] );
});

app.listen(port, () => {
    console.log(`
        Server is running at http://${hostname}:${port}/ 
        Server hostname ${hostname} is listening on port ${port}!
    `);
});

2020년경에 express가 HTML 페이지를 렌더링하는 방법을 추가하지 않은 것은 매우 슬프다.sendFile의 방법response물건.사용.sendFile문제가 아니라 의론의 전달이다.path.join(__dirname, 'relative/path/to/file')기분이 좋지 않아요사용자가 가입해야 하는 이유__dirname파일 경로로 이동하시겠습니까?디폴트로 되어 있습니다.서버의 루트를 프로젝트 디렉토리의 디폴트로 할 수 없는 이유는 무엇입니까?또한 스태틱 HTML 파일을 렌더링하기 위해 템플릿 의존성을 설치하는 것도 올바르지 않습니다.이 문제에 어떻게 대처해야 할지 모르겠습니다만, 정적인 HTML을 사용할 필요가 있는 경우는, 다음과 같은 작업을 실시합니다.

const PORT = 8154;

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

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

app.listen(PORT, () => {
    console.log(`Server is listening at port http://localhost:${PORT}`);
});

위의 예에서는 프로젝트 구조가 다음과 같이 구성되어 있다고 가정합니다.viewsHTML을 사용합니다.를 들어, 예를 들면, '아까', '아까', '아까', '아까',views에는 HTML 2라는 이름의2개의 .index.html ★★★★★★★★★★★★★★★★★」about.html에 접속을 '찾아보다'라는 사이트를하면 됩니다localhost:8153/index.html 그냥 '그냥'일 수도 있어요.localhost:8153/을 싣다index.html와 " " "localhost:8153/about.html을 싣다about.html를 리액션/각도 할 수 views 「」를 하고 있습니다.dist/<project-name>자, 이제 JS는요.

app.use(express.static('dist/<project-name>'));

index.displaces를 표시합니다.

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


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>

이제 단말기에서 다음 코드를 실행합니다.

노드 index.display

플레인 html의 경우 npm 패키지나 미들웨어는 필요 없습니다.

이것만 사용해 주세요.

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

"/"에 대한 요청을 이전에 스태틱 미들웨어에 의해 처리되었던 익스프레스 루트로 처리할 수 있도록 하고 싶었습니다.이를 통해 응용 프로그램 설정에 따라 index.html의 일반 버전 또는 연결 + 최소화된 JS 및 CSS를 로드한 버전을 렌더링할 수 있습니다.Andrew Homeyer의 답변에 영감을 받아 수정되지 않은 HTML 파일을 뷰 폴더로 드래그하여 Express를 설정하기로 결정했습니다.

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

이 일은 꽤 잘 풀렸다.

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

이미 모든 내용을 담고 있는HTML 파일을 제공하려고 하면, 「렌더」할 필요는 없습니다.그냥 「서비스」하면 됩니다.렌더링은 페이지가 브라우저로 전송되기 전에 서버를 업데이트하거나 콘텐츠를 주입하는 경우로, 다른 답변과 같이 ejs와 같은 추가 종속성이 필요합니다.

단순히 브라우저의 요구에 따라 파일을 지정하는 경우 다음과 같이 res.send File()을 사용해야 합니다.

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

이렇게 하면 express 이외의 추가 의존 관계가 필요하지 않습니다.이미 작성한 html 파일을 서버에서 전송하고 싶은 경우 위의 방법은 매우 간단합니다.

저는 이걸 주로 써요.

app.configure(function() {
    app.use(express.static(__dirname + '/web'));
});

이 경우 /web 디렉토리의 모든 항목이 공유되므로 주의하십시오.

도움이 되었으면 좋겠다

언급URL : https://stackoverflow.com/questions/4529586/render-basic-html-view

저작자표시

'programing' 카테고리의 다른 글

Jackson을 사용하여 JSON을 ArrayList로 역직렬화 (0)	2022.12.26
요소가 jQuery로 표시되는지 여부를 검출합니다. (0)	2022.12.26
이미지가 jQuery로 로드되었는지 확인합니다(오류 없음). (0)	2022.12.07
Python 프로젝트용 .gitignore 파일을 추가하기 위한 베스트 프랙티스? (0)	2022.12.07
mysql을 사용하여 쿼리 결과를 변수에 저장하는 방법 (0)	2022.12.07

현재글기본 HTML 보기를 렌더링하시겠습니까?

각종 프로그래밍 정보를 다루는 블로그입니다.

JQuery, spring, c++, Spring3, java, c#, Javascript,

Today :
Yesterday :

sourcetip

기본 HTML 보기를 렌더링하시겠습니까?

기본 HTML 보기를 렌더링하시겠습니까?

'programing' 카테고리의 다른 글

'programing'의 다른글

티스토리툴바

« 2025/01 »
일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

기본 HTML 보기를 렌더링하시겠습니까?

기본 HTML 보기를 렌더링하시겠습니까?

'programing' 카테고리의 다른 글

'programing'의 다른글

관련글

티스토리툴바