vuejs 게시판 만들기 #6 (등록 화면 및 데이터 저장 프로세스)

등록화면 컴포넌트 생성

파일경로 : /src/components/Write.vue

<template>
	<div>
		<h1>게시판 등록</h1>

		<div class="AddWrap">
			<form>
				<table class="tbAdd">
					<colgroup>
						<col width="15%" />
						<col width="*" />
					</colgroup>
					<tr>
						<th>제목</th>
						<td><input type="text" v-model="subject" ref="subject" /></td>
					</tr>
					<tr>
						<th>내용</th>
						<td><textarea v-model="cont" ref="cont"></textarea></td>
					</tr>
				</table>
			</form>
		</div>

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

<script>
export default {
	data() { //변수 생성
		return{
			board_code:'news'
			,subject:''
			,cont:''
			,id:'admin'
			,form:'' //form 전송 데이터
		}
	}
	,methods:{
		fnList(){ //리스트 화면으로 이동 함수
			this.$router.push({path:'./list',query:this.body});
			
		}
		,fnAddProc() { //등록 프로세스
			if(!this.subject) { //제목이 없다면 값을 입력하라고 알려준다.
				alert("제목을 입력해 주세요");
				this.$refs.subject.focus(); //방식으로 선택자를 찾는다.
				return;
			}

			this.form = { //backend로 전송될 POST 데이터
				board_code:this.board_code
				,subject:this.subject
				,cont:this.cont
				,id:this.id
			} 
			
			this.$axios.post('http://localhost:3000/api/board',this.form)
			.then((res)=>{
				if(res.data.success) {
					alert('등록되었습니다.');
					this.fnList();
				} else {
					alert("실행중 실패했습니다.\n다시 이용해 주세요");
				}
			})
			.catch((err)=>{
				console.log(err);
			})
			
		}
	}	
}
</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;}
	.tbAdd td input{width:100%; min-height:30px; box-sizing:border-box; padding:0 10px;}
	.tbAdd td textarea{width:100%; min-height:300px; padding:10px; box-sizing:border-box;}
	.btnWrap{text-align:center; margin:20px 0 0 0;}
	.btnWrap a{margin:0 10px;}
	.btnAdd {background:#43b984}
	.btnDelete{background:#f00;}
</style>

 

잠시 전체 디자인스타일 때문에 공통 스타일을 적용하자.

파일경로 : App.vue

<template>
  <div id="app">
    <Header />
    
    <div class="container"> <!-- class 추가 -->
      <router-view />
    </div>

    <Footer />
  </div>
</template>

<script>
import Header from './components/common/Header';
import Footer from './components/common/Footer';


export default {
  name: 'App',
  components: {
    Header
    ,Footer  
  }
}
</script>

//css 수정
<style>
html,body{padding:0; margin:0;}
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
h1{color:#43b984;}
table{width:100%; border-collapse:collapse;}
.wrap{width:100%;}
.container{width:800px; margin:0 auto;}
a{text-decoration:none;}
.btn{padding:10px; background:#34445c; color:#fff;}
</style>

 

 

등록화면 접근을 위해 라우터를 추가하자.

파일경로 : /src/routes/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
		}
		
	]
})

 

등록화면 확인 (http://localhost:8080/#/board/write)

여기서부터는 backend도 같이 설명을 해야겠다.

폴더가 많아지니 frontend/backend 폴더명을 잘 참고해주세요.

프로젝트 구조

 

 

[backend] 라우터 설정 및 DB 저장(mysql)

- 프론트단에서 http://localhost:3000/api/board post 방식으로 데이터 전송

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

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

router.get("/",dao.list);
router.post("/",dao.add);  / /api/board post 방식으로 접근 시 모듈 실행

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

module.exports = router;

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

const db = require('../../../config/db');

const conn =  db.init();

exports.list = (req,res) => {
	conn.query("select * from tb_board",(err,row) => {
		if(err) throw err;
		res.send({success:true,data:row})
	})
}

exports.add = (req,res) => {
	body = req.body; //전송된 데이터를 받는다.
	sql = " INSERT INTO  tb_board (board_code, subject, cont, id, regdate) values (?, ?, ?, ?,now()) ";
	conn.query(sql,
		[body.board_code
		, body.subject
		, body.cont
		, body.id]
		,(err,result)=>{
		if(err) throw err;

		res.send({success:true});
	})
}

 

[backend] 데이터 등록이 완료되었다.

웹에서 실행해 보자.

url : http://localhost:8080/#/board/wirte