20211227

//파일명 : App.vue

<el-container>
  <el-header>
    <el-menu class="el-menu-demo" mode="horizontal" :router="true">
      <el-menu-item index="home" ref="home">홈</el-menu-item>
      <el-menu-item index="login" ref="login" v-show="!logged">로그인</el-menu-item>
      <el-menu-item index="logout" ref="logout" v-show="logged">로그아웃</el-menu-item>
      <el-menu-item index="mypage" ref="mypage" v-show="logged">마이페이지</el-menu-item>
      <el-menu-item index="join" ref="join">회원가입</el-menu-item>
      <el-menu-item index="board" ref="board">게시판</el-menu-item>
    </el-menu>
  </el-header>
  <!-- v-if= 태그를 생성시키지 않음  -->
  <!-- v-show= 태그 생성, 숨김으로  -->

  <el-main>
    <router-view></router-view>
  </el-main>
 
  <el-footer>&copy; vue project</el-footer>
</el-container>

//파일명 : store/index.js
// CMD> npm i vuex@next --save
import {createStore} from 'vuex';
import axios from 'axios';

export default createStore({

// 상태변수(전역변수)
// 어떤 컴포넌트에서 바꿀수 있는 변수
state : {
    counter : 20,
    menu    : 'home',
    items   : [],
},

// 결과 값을 가지고 가는 메소드
getters : {
    getItems(state) {
        return state.items;
    },

    getMenu(state) {
        return state.menu;
    },

    getCounter(state) { // 그대로 값
        return state.counter;
    },

    getCounter1: state => { // 가공된 값
        return state.counter * 2;
    }
},

// 결과 값을 바꾸는 것(동기)
mutations : {
    setItems(state, value) {
        state.items = value;
    },

    setMenu : (state, value) => {
        state.menu = value;
    },

    setCounter : (state, value) => {
        state.counter = value;
    },

    setCounter1 (state, value) {
        state.counter = value + 100;
    }
},

// 결과 값을 바꾸는 것(비동기)
actions : {
    // 사용하고자 하는 컴포넌트에서 page정보를 전달함
    async handleData(context, payload) {
        const page =  payload.page;

        const url = `http://ihongss.com/json/board.json?page=${page}`;
        const headers = {"Content-Type":"application/json"};
        const response = await axios.get(url, {headers:headers});
        if(response.data.ret === 'y'){
            context.commit('setItems', response.data.data);
        }
    }
}

});

// 파일명 : Board.vue

<div>
    <el-card shadow="always">
        <h3>게시판</h3>

        <el-tabs tab-position="left">
            <el-tab-pane label="자유게시판">
                <menu-1></menu-1>
            </el-tab-pane>
            <el-tab-pane label="질문및답변">
                <menu-2></menu-2>
            </el-tab-pane>
        </el-tabs>
    </el-card>
</div>

// 파일명 : board/Menu1.vue : 자유게시판

<div>
    <h3>Menu1.vue</h3>

    <el-table :data="items" style="width: 100%;cursor:pointer;" 
        size="mini" @row-click="rowClick">
        <el-table-column prop="no" label="글번호" width="80" />
        <el-table-column prop="title" label="제목" width="180" />
        <el-table-column prop="writer" label="작성자" width="120" />
        <el-table-column prop="hit" label="조회수" width="80" />
        <el-table-column prop="regdate" label="날짜" />
    </el-table>

    <el-pagination layout="prev, pager, next" :total="200" @current-change="currentChange"></el-pagination>
</div>

// 파일명 : board/Menu2.vue : 자유게시판

<div>
    <h3>Menu2.vue</h3>

    <el-table :data="items" style="width: 100%;cursor:pointer;" size="mini"  @row-click="rowClick">
        <el-table-column prop="no" label="글번호" width="80" />
        <el-table-column prop="title" label="제목" width="180" />
        <el-table-column prop="writer" label="작성자" width="120" />
        <el-table-column prop="hit" label="조회수" width="80" />
        <el-table-column prop="regdate" label="날짜" />
    </el-table>
    <el-pagination layout="prev, pager, next" :total="500" @current-change="currentChange"></el-pagination>
</div>

//파일명 : BoardOne.vue

<div>
    <h3>BoardOne.vue</h3>
    {{bno}}, {{no}}
</div>

======================================
// 벡엔드 만들기
CMD> npm i vue -g -g 프로그램 설치, --save node_modules
CMD> npm i @vue/cli -g
CMD> vue --version
CMD> vue create 20211111_vue
CMD> npm run serve

크롬에서 locahost:8080

CMD> npm i express-generator -g -g 프로그램 설치
CMD> express --version
현재버전 4.16.1
CMD> express -e exp_20211227
CMD> cd exp_20211227
CMD> npm install
CMD> node ./bin/www (소스코드 변경 적용안됨)
크롬에서 localhost:3000

CMD> npm i nodemon -g -g 프로그램 설치
CMD> nodemon --inspect ./bin/www (소스코드 변경 적용됨)

// 파일명 : routes/board.js
var express = require('express');
var router = express.Router();

// npm i mongodb --save
const db = require('mongodb').MongoClient;
// mongodb://아이디:암호@서버주소:포트번호/DB명
const dbUrl = 'mongodb://id200:pw200@1.234.5.158:37017/db200';

//get(조회), post(추가), put(수정), delete(삭제)

// 글쓰기 : localhost:3000/board/insert
// req : request : 들어오는 값의 정보
// res : response : 전달하는 값
router.post('/insert', async function(req, res, next) {
try {
console.log("--------------------------");
console.log(req.body);
//{ no: 100, title: '제목', writer: '홍길동', content: 'aaa' }
console.log("--------------------------");

    //1. DB접속
    const dbConn = await db.connect(dbUrl);
    const coll   = dbConn.db("db200").collection("board");
    const result = coll.insertOne(req.body);
    console.log(result);

    const obj = {status:200};
    res.send(obj);
}
catch(err){
    console.error(err);
    res.send({status:888});
}

});

module.exports = router;

// 파일명 : BoardWrite.vue

<div>
    <el-card shadow="always">
        <h3>게시글쓰기</h3>
        {{board}}
        <input type="text" v-model="board.no" placeholder="글번호" />
        <input type="text" v-model="board.title" placeholder="글제목" />
        <input type="text" v-model="board.writer" placeholder="작성자" />
        <input type="text" v-model="board.content" placeholder="글내용" />
        <button @click="handleBoajhgjyhgjhghjrdWrite">글쓰기</button>
    </el-card>
</div>

//파일명 : vue.config.js
module.exports = {
devServer:{
proxy : {
// 이파일 수정시 반드시 vue를 제시작!!!
// 벡엔드의 http://localhost:3000이
// vue에서 url 주소를 생략하여 사용가능 하도록 설정
'/board' : {
target:'http://localhost:3000',
changeOrigin :true,
logLevel : 'debug'
}
}
}
}