vuejs 게시판 만들기 #8 (상세페이지)

backend단

1) 라우터 추가 

2) DB 데이터 출력 모듈 추가

 

frontend단

1) 라우터 추가

2) 리스트화면에서 상세페이지 이동 기능 추가

3) 패키지 설치 (상세페이지에서 replace 함수 사용때문에)

4) 상세페이지 화면 개발

 

먼저 backend단 진행~~

router 설정

파일경로 : back/routes/api/board/index.js

const router = require('express').Router();
const dao = require('./dao');

router.get("/",dao.list);

router.get('/:num',dao.view); //상세페이지 추가

router.post("/",dao.add);


router.all('*',(req, res)=> {
	res.status(404).send({success:false, msg:'board unknown uri ${req.path}'});
})

module.exports = router;

 

DB데이터 출력 모듈 

파일경로 : back/routes/api/board/dao.js

내용 추가

exports.view = (req,res) => {
	body = req.query;
	num = req.params.num;
	sql = " SELECT * FROM tb_board WHERE board_code = ? AND num = ? ";
    
	conn.query(sql,[body.board_code, num],(err,view) => {
		if(err) throw err;
		
		res.send({success:true, view:view});
	})
}

backend단에서 router 설정이 잘 되어있는지 확인

web url : http://localhost:3000/api/board/[num :  글 고유번호]?board_code=news

(ex : http://localhost:3000/api/board/1?board_code=news)   

backend단 상세데이터는 잘 노출된다 :)

 

frontend단 구현

frontend단도 라우터를 구현하자

파일경로 : /front/src/route/index.js

import Vue from 'vue';
import Router from 'vue-router';
import HelloWorld from '@/components/HelloWorld'; //메인 컴포넌트 호출
import List from '@/components/board/List'; //게시판 리스트 컴포넌트 호출
import Write from '@/components/board/Write'; //게시판 리스트 컴포넌트 호출

Vue.use(Router); //vue 라우터 사용

export default new Router({ //라우터 연결
	routes:[
		{
			path:'/'
			,name:HelloWorld
			,component:HelloWorld
		}
		,{
			path:'/board/list'
			,name:List
			,component:List
		}
		,{
			path:'/board/write'
			,name:Write
			,component:Write
		}
		,{
			path:'/board/view'  //상세페이지 추가
			,name:View
			,component:View
		}
		
	]
})

 

 

리스트화면에서 상세페이지 이동 이벤트 및 함수 추가

파일경로 : /front/src/components/board/List.vue

<!-- a 태그에 fnView 함수 추가 -->
<tr>
  <th>no</th>
  <th>제목</th>
  <th>아이디</th>
  <th>날짜</th>
</tr>
<tr v-for="(row, idx) in list" :key="idx">
  <td>{{no-idx}}</td>
  <td class="txt_left"><a href="javascript:;" @click="fnView(`${row.num}`)">{{row.subject}}</a></td>
  <td>{{row.id}}</td>
  <td>{{row.regdate.substring(0,10)}}</td>
</tr>

------------------------------ 아래 내용생략 -------------------------

<!-- 스크립트 method 영역에 fnView 함수 추가 -->
, methods:{
	--- 생략 ---
    , fnView(num) {
			this.body.num = num;
			this.$router.push({path:'./view',query:this.body}); //추가한 상세페이지 라우터
	}
}

 

패키지설치 (replace 사용)

npm i --save core/js

 

상세페이지 화면 구현

파일경로 : /front/src/components/board/View.vue

<template>
	<div>
		<h1>게시판 상세보기</h1>

		<div class="AddWrap">
			<form>
				<table class="tbAdd">
					<colgroup>
						<col width="15%" />
						<col width="*" />
					</colgroup>
					<tr>
						<th>제목</th>
						<td>{{subject}}</td>
					</tr>
					<tr>
						<th>내용</th>
						<td class="txt_cont" v-html="cont"></td>
					</tr>
				</table>
			</form>
		</div>

		<div class="btnWrap">
			<a href="javascript:;" @click="fnList" class="btn">목록</a>
		</div>	
	</div>
</template>

<script>
export default {
	data() {
		return {
			body:this.$route.query
			,subject:''
			,cont:''
			,view:''
			,num:this.$route.query.num
		}
	}
	,mounted() {
		this.fnGetView();
	}
	,methods:{
		fnGetView() {
			this.$axios.get('http://localhost:3000/api/board/'+this.body.num,{params:this.body})
			.then((res)=>{
				this.view = res.data.view[0];
				this.subject = this.view.subject;
				this.cont = this.view.cont.replace(/(\n)/g,'<br/>');
			})
			.catch((err)=>{
				console.log(err);
			})
		}
		,fnList(){
			delete this.body.num;
			this.$router.push({path:'./list',query:this.body});
		}
	}
}
</script>

<style scoped>
	.tbAdd{border-top:1px solid #888;}
	.tbAdd th, .tbAdd td{border-bottom:1px solid #eee; padding:5px 0; }
	.tbAdd td{padding:10px 10px; box-sizing:border-box; text-align:left;}
	.tbAdd td.txt_cont{height:300px; vertical-align:top;}
	.btnWrap{text-align:center; margin:20px 0 0 0;}
	.btnWrap a{margin:0 10px;}
	.btnAdd {background:#43b984}
	.btnDelete{background:#f00;}
</style>

 

웹 화면에서 확인!!

web url : http://localhost:8080/#/board/list 에서 게시글을 클릭 후 상세화면 접근