본문 바로가기
코리아 IT아카데미/node.js~~~

2022_0126 | node ejs, jade, remail(0124)

by Sharon kim 2022. 1. 26.

 

08-1.js

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

// npm i ejs
const ejs = require('ejs'); //npm i ejs

const app = express();
const port = 3000;

const router = express.Router();

// localhost:3000/ejstest
router.route('/ejstest').post((req, res) => {
    fs.readFile('ejs1.ejs', 'utf-8', (err, data) => {
        if(!err) {
            res.writeHead(200, {'content-type':'text/html'});
            res.end(ejs.render(data));
        }else{
            console.log(err);
        }
    })
})

app.use('/', router);
app.all('*', (req, res) => {

    res.status(404).send('<h2>페이지를 찾을 수 없습니다.</h2>');

});

app.listen(port, () => {
    console.log(`${port} 포트로 서버 실행중...`);
})

 

ejs1.ejs

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>EJS 첫 페이지</title>
</head>

<body>
    <%
        const userid = 'apple';
        const username = '김사과';
    %>

    <h2>EJS 첫 페이지</h2>
    <p>아이디 : <%=userid%></p>
    <p>이름 : <%=username%></p>
    <p>생년월일을 입력하세요</p>
    <p>
    <select>
    <%
        for(let i=1970; i<=2021; i++){
    %>
        <option value="<%=i%>"><%=i%></option>
    <%
        }
    %>
    </select>
    </p>

</body>

</html>

 

08-2.js

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

// npm i ejs
const ejs = require('ejs'); //npm i ejs

const app = express();
const port = 3000;

const router = express.Router();

// localhost:3000/login
router.route('/login').post((req, res) => {
    const userinfo = { userid: 'apple', userpw: '1234' };
    //매개변수를 발생해서 직접 ejs파일에 변수 입력
    fs.readFile('ejs2.ejs', 'utf-8', (err, data) => {
        if(!err) {
            res.writeHead(200, {'content-type':'text/html'});
            res.end(ejs.render(data, userinfo)); // 함수 호출
            // res.end(ejs파일, 매개변수)); 
            // ejs.render(ejs파일, 매개변수)); 
            // ejs 파일에 미리 해당되는 변수를 선언했다면 변수값이 자동으로 입력
        }else{
            console.log(err);
        }
    })
})

app.use('/', router);
app.all('*', (req, res) => {

    res.status(404).send('<h2>페이지를 찾을 수 없습니다.</h2>');

});

app.listen(port, () => {
    console.log(`${port} 포트로 서버 실행중...`);
})

ejs2.ejs

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>로그인 파라미터</title>
</head>

<body>
    <h2>EJS 로그인 파라미터</h2>
    <p>아이디 : <%=userid%></p>
    <p>비밀번호 : <%=userpw%></p>
</body>
</html>

 

08-3.js

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

// npm i ejs
const ejs = require('ejs'); //npm i ejs

const app = express();
const port = 3000;

const router = express.Router();

const header = fs.readFileSync('header.ejs', 'utf-8');
const body = fs.readFileSync('body.ejs', 'utf-8');


// localhost:3000/about
router.route('/about').post((req, res) => {
    const html = ejs.render(header, {
        title: '매개변수로 전달된 제목입니다.',
        content: ejs.render(body, { message: '매개변수로 전달된 텍스트 메세지입니다.' })
    });
    res.writeHead(200, { 'content-type' : 'text/html' })
    res.end(html);
})

app .use('/', router);
app.all('*', (req, res) => {

    res.status(404).send('<h2>페이지를 찾을 수 없습니다.</h2>');

});

app.listen(port, () => {
    console.log(`${port} 포트로 서버 실행중...`);
})

header.ejs

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><%=title%></title>
    <style>
        body{background-color: beige;}
            h2{font-size: 30px; color: brown;}

    </style>
</head>
<body>
    <header>
        <h2><%=title%></h2>
    </header>
    <div>
        <p><%-content%></p>
    </div>
</body>
</html>

body.ejs

<p>예제로 만든 템플릿입니다.</p>
<p>다른 파일로 준비한 것을 읽어와서 사용합니다.</p>
<p><%=message%></p>

pakage.json
jade 설치
npm start로 시작

jade(09-1).js

// https://jade-lang.com/
// 쉬운 방법으로 html 코딩

const express = require('express');
const fs = require('fs');
// npm i jade
const jade = require('jade');

const app = express();
const port = 3000;

const router = express.Router();

router.route('/about').post((req, res) => {
    fs.readFile('jade1.jade', 'utf8', (err, data) => {
        if(!err) {
            const jd = jade.compile(data);
            res.writeHead(200, {'content-type':'text/html'});
            res.end(jd());
        }else{
            console.log(err);
        }
    })
})

app.use('/', router);

app.all('*', (req, res) => {
    res.status(404).send('<h2>페이지를 찾을 수 없습니다.</h2>');
});

app.listen(port, () => {
    console.log(`${port} 포트로 서버 실행중...`);
})

jade1.jade

html 
    head 
        title jade 테스트입니다. 
    body 
        h1 안녕하세요 jade
        p 처음으로 만드는 jade 예제입니다. 
        br 
        a(href="www.naver.com", alt="네이버") 네이버로 이동하기

pakage.json 파일 바꾸지 않고 서버 실행되는 방법은 npm i jade 다음 npm start 하지않고 node 파일명(.js)

그러나 원칙적으로는  start : 실행하는 파일명

jade(09-2).js

const express = require('express');
const fs = require('fs');
// npm i jade
const jade = require('jade');

const app = express();
const port = 3000;

const router = express.Router();

router.route('/userinfo').post((req, res) => {
    fs.readFile('jade2.jade', 'utf8', (err, data) => {
        if(!err) {
            const jd = jade.compile(data);
            res.writeHead(200, {'content-type':'text/html'});
            res.end(jd({userid:'apple', name:'김사과',desc:'착해요'}));
        }else{
            console.log(err);
        }
    })
})

app.use('/', router);

app.all('*', (req, res) => {
    res.status(404).send('<h2>페이지를 찾을 수 없습니다.</h2>');
});

app.listen(port, () => {
    console.log(`${port} 포트로 서버 실행중...`);
})

jade2.jade

html 
    head 
        title 사용자 정보 보기
    body 
        #header 
            h2 사용자 아이디 : #{userid}
            hr 
        #header 
            h2 사용자 이름 : #{name}
            p= desc
        hr
        .article
            a(href="https://www.google.com") 구글로 이동
        hr
        .for 
            - for(let i = 0; i< 10; i++){
                p 
                    a(href="http://localhost:3000/#{i}") 사이트 이동 #{i}  
            - }

gmail함에서 확인 가능 // gmail보안 낮게 한 뒤에야 메일 수신 가능

remail.js

// npm i nodemailer
const nodemailer = require('nodemailer');

const transporter = nodemailer.createTransport({
    service: 'Gmail',
    auth:{
        user: 'k000000@gmail.com',
        pass: ''
    },
    host: 'smtp.mail.com',
    port: '465'
});
//nodemailer 설정
const mailOptions = {
    from: "kimsharon<k000000@gmail.com>",
    to: "kimsharon<k000000@gmail.com>",
    subject: "node.js의 nodemailer 테스트중입니다.",
    html: "<h2>안녕하세요. 메일이 잘 가나요?</h2><p style='color: deeppink'>정말 잘 가네요~~</p>"
};

transporter.sendMail(mailOptions, (err, info) => {
    transporter.close();
    if(err){
        console.log(err);
    }else{
        console.log(info);
    }
});

// 보안 수준이 낮은 앱의 액세스
// https://myaccount.google.com/lesssecureapps

// 계정 액세스 사용을 허용
// https://accounts.google.com/DisplayUnlockCaptcha

'코리아 IT아카데미 > node.js~~~' 카테고리의 다른 글

2022_0124 | 0119와 내용 중복  (0) 2022.01.26
2022_0119 | 미들웨어 실행, postman, Nodemon, Router 미들웨어, Router 객체 생성  (0) 2022.01.26
2022_0117 | FileSystem 모듈, http 모듈, 시스템 이벤트, 익스프레스 모듈  (0) 2022.01.25
2022_0114 | 노드 오류와 예외처리  (0) 2022.01.25
2022_0112 | node 기초  (0) 2022.01.25

관련글

티스토리툴바