robin*

스레드 페이지 제작

1 +const app = require('../server');
2 +const db = require('../db');
3 +
4 +app.get('/thread/:tid', async(req, res) => {
5 + let thread = await db.get('thread').findOne(req.params.tid);
6 + if(!thread) {
7 + res.status(404).send('그런 스레드는 없습니다.');
8 + }
9 + res.render('thread', {thread});
10 +});
...\ No newline at end of file ...\ No newline at end of file
1 +<style>
2 + .card {
3 + padding: 10px;
4 + margin-bottom: 10px;
5 + }
6 +</style>
7 +<section id="app" style="max-width: 600px;margin: 10px auto 0;">
8 + <div class="card">
9 + <h3 class="card-title">
10 + {{thread.title}}
11 + </h3>
12 + <h6 class="card-subtitle text-muted">#1 {{thread.writer}} {{dateFromObjectId thread._id}}</h6>
13 + <p class="card-text">{{thread.content}}</p>
14 + </div>
15 + <div class="card" v-for="thread in threads">
16 + <h6 class="card-subtitle text-muted">\{{thread.writer}} \{{dateFromObjectId(thread._id)}}</h6>
17 + <p class="card-text">\{{thread.content}}</p>
18 + </div>
19 + <textarea class="form-control" id="input-content" v-model="content" rows="5" required></textarea>
20 + <button class="btn btn-primary" @click="write()">작성</button>
21 +</section>
22 +<script src="https://unpkg.com/vue@next"></script>
23 +<script src="/socket.io/socket.io.js"></script>
24 +<script>
25 +let socket;
26 +let app = {
27 + data() {
28 + return {
29 + threads: [],
30 + content: ''
31 + }
32 + },
33 + methods: {
34 + dateFromObjectId(o) {
35 + o = new Date(parseInt(o.toString().substring(0, 8), 16) * 1000);
36 + return `${o.getFullYear()}-${o.getMonth()}-${o.getDate()} ${o.getHours()}:${o.getMinutes()}`;
37 + },
38 + write() {
39 + socket.emit('write', this.content);
40 + this.content = '';
41 + }
42 + },
43 + created() {
44 + socket = io();
45 + socket.emit('init', '{{thread._id}}');
46 + socket.on('thread', (thread) => {
47 + this.threads.push(thread);
48 + });
49 + }
50 +};
51 +Vue.createApp(app).mount('#app');
52 +</script>
...\ No newline at end of file ...\ No newline at end of file