Showing
2 changed files
with
62 additions
and
0 deletions
src/routes/thread.js
0 → 100644
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 |
src/views/thread.handlebars
0 → 100644
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 |
-
Please register or login to post a comment