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>© 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:[email protected]: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'
}
}
}
}
Author And Source
이 문제에 관하여(20211227), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@gegus1220/20211227저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)