Node.js Jade : 테이블에 행 추가

Question

Jade 템플릿 엔진과 함께 Node.js를 사용하여 테스트 웹 페이지를 만들고 일부 기능이 실제 프로젝트에서 작동하는지 확인합니다.

클라이언트 IP 주소의 첫 번째 숫자에 따라 테이블이있는 비취 페이지를 렌더링하고 싶습니다. 테이블의 행 수는 이전의 첫 번째 숫자와 같습니다. 예를 들어 클라이언트의 주소가 192.198.94.227 인 경우 테이블의 행은 1 행입니다. 92.61.131.242 인 경우 표의 행 수가 9 개가됩니다.

나는 이것이 매우 어리석게 들린다는 것을 알고 있지만, 실제 웹 사이트에 다양한 테이블 행을 추가 할 수 있는지를 테스트하는 데만 사용하고 있습니다.

Jade 또는 Node.js 코드에서이를 나타낼 수있는 방법이 있습니까? 또는이 작업을 수행 할 수없는 경우 해결 방법이 있습니까?

Answer 1

실제로 Jade는 템플릿 엔진에 지나지 않습니다. 올바른 해결책은 자바 스크립트를 사용하여 DOM (Document Object Model)을 수정하는 것입니다. Jade에 대한 생각은 데이터를 표시하기위한 구조 일뿐입니다. 하지만 그렇게하기 전에 먼저 해당 데이터를 조작해야합니다. Node.js를 사용하여 필요한 정보를 수집 한 다음 JavaScript (jQuery, AngularJS 등)를 사용하여 HTML 템플릿에서 DOM을 조작합니다 (Jade 포함).

Answer 2

비취 템플릿을 사용하여 페이지를 렌더링 할 때 템플릿에 변수 집합을 제공 할 수 있습니다.

이것은 '/ example'요청을 처리하는 대표적인 표현 방법입니다.

첫 번째 인수 req.render은 템플릿 이름을 지정하고 두 번째 인수 (개체)는 템플릿 매개 변수를 지정합니다. 이 경우 두 개의 매개 변수가 있습니다. ip (고객 IP) 및 ipFirstDigit - 고객 IP 주소의 첫 번째 숫자입니다.

p Customer IP: #{ip} 
    p Customer IP first digit: #{ipFirstDigit} 

    table 
    - for (var i = 0; i < ipFirstDigit; i++) 
     tr 
     td #{i+1} 

처음 두 줄은 고객의 IP와 고객 IP의 첫 번째 숫자를 표시 다음과 같이

function remoteAddr(req) { 
    if (req.ip) { 
     return req.ip; 
    } 
    var socket = req.socket; 
    if (socket.socket) { 
     return socket.socket.remoteAddress; 
    } 
    return socket.remoteAddress; 
}; 

app.get('/example', function(req, res){ 
    var ip = remoteAddr(req); 
    res.render('index', { ip: ip, ipFirstDigit:ip.charAt(0) }); 
}); 

옥 템플릿 캔 보인다. 그런 다음 테이블은 고객 IP 값의 첫 번째 숫자에 따라 렌더링됩니다. IP에 대한

출력 : 다음과 같이 92.61.131.242은 다음과 같습니다

<p>Customer IP: 92.61.131.242</p> 
<p>Customer IP first digit: 9</p> 
<table> 
    <tbody> 
    <tr><td>1</td></tr> 
    <tr><td>2</td></tr> 
    <tr><td>3</td></tr> 
    <tr><td>4</td></tr> 
    <tr><td>5</td></tr> 
    <tr><td>6</td></tr> 
    <tr><td>7</td></tr> 
    <tr><td>8</td></tr> 
    <tr><td>9</td></tr> 
    </tbody> 
</table> 

내가 그 프로토 타입에 도움이되기를 바랍니다.