Notice
Recent Posts
Recent Comments
Link
«   2024/12   »
일 월 화 수 목 금 토
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
Tags more
Archives
Today
Total
관리 메뉴

SYDev

[Express] 7. Read Topic 본문

대딩코딩/웹개발 스터디

[Express] 7. Read Topic

시데브 2023. 12. 1. 16:02

소제목 눌렀을 때 페이지 구현

 파일명: main.js

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

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

//Controllers
const homeController = require('./controllers/homeController.js');
const topicController = require('./controllers/topicController.js')

app.get('/', homeController.getTopics);
app.get('/topic/read/:topic_id', topicController.viewTopic);    //각 topic의 id 페이지로 이동했을 때, controller의 viewtopic 실행

app.listen(port, () => {
    console.log(`Example app listening on port ${port}`);
});

 

 파일명: topicController.js

const topicModel = require('../models/topicModel.js');  //topicModel.js 모듈의 getTopic 함수를 사용하기 위해 require 
const homeModel = require('../models/homeModel.js');    //topics를 이용하기 위해 require

module.exports = {
    viewTopic: async (req, res) => {
        const topicId = req.params.topic_id;
        const topic = await topicModel.getTopic(topicId);
        const topics = await homeModel.home(); 

        res.render('topic.ejs', {topics: topics, topic: topic});
    }
}

>> topic.ejs 파일을 렌더링하는 역할

>> getTopic 함수는 homeModel.js에서 가져옴

 

 파일명: topicModel.js

require('dotenv').config();
const mysql = require('mysql2/promise');

const db = mysql.createPool({
    host: process.env.DB_HOST,
    user: process.env.DB_USER,
    password: process.env.DB_PASSWORD,
    database: process.env.DB_NAME
});

module.exports = {
    //topicId를 매개변수로 받는 getTopic 함수(비동기)
    getTopic: async (topicId) => {
        const query = 'SELECT * FROM Topics WHERE topic_id=?;';
        const topic = await db.query(query, [topicId]);

        return topic[0][0];
    }
}

>> DB에서 topic id 정보 불러오는 역할

 

 파일명: topic.ejs

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <a href="/"><h1>WEB</h1></a>
    <ol>
        <% for(let topic of topics) { %>
            <li><a href="/topic/read/<%= topic.topic_id %>"><%= topic.title %></a></li>
        <% } %>
    </ol>
    <a href="/post/create">create</a>

    <h1><%= topic.title %></h1>
    <p><%= topic.content %></p>
</body>
</html>

>> 이전 index.ejs와 거의 유사하나 몇 가지 차이점 존재

>> h1, li 태그에 a 태그를 씌워 페이지 주소를 이동시키는 기능 추가 

>> 특정 토픽 페이지로 이동했을 때, 해당 토픽의 이름(topic.title)과 텍스트 정보(topic.content)를 출력

'대딩코딩 > 웹개발 스터디' 카테고리의 다른 글

[Express] 9. Create Topic GET  (0) 2023.12.01
[Express] 8. View의 확장  (1) 2023.12.01
[Express] 6. Controller  (0) 2023.12.01
[Express] 5. Model  (0) 2023.12.01
[Express] 4. View  (0) 2023.12.01
'대딩코딩/웹개발 스터디' Related Articles more