IT/vue (10) 썸네일형 리스트형 vuejs 게시판 만들기 #10 (삭제하기) backend단 진행 1) 라우터 설정 2) 데이터 삭제 모듈 추가 frontend단 진행 1) 상세페이지 삭제 버튼 및 함수 추가 먼저 backend단 진행 라우터를 설정한다. 파일경로 : 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.put('/',dao.mod); router.put('/',dao.delete); //삭제 모듈 추가 router.all('*',(req, res)=> { res.status.. vuejs 게시판 만들기 #9 (수정하기) backend단 구현순서 1) 라우터 설정 2) 데이터 수정 모듈 구현 frontend단 구현순서 1) 상세화면에서 수정화면으로 이동 기능 구현 2) 수정화면에서 상세 데이터 호출 기능 구현 3) 수정화면에서 수정 프로세스 구현 먼저 backendek단 라우터를 설정하자 파일경로 : back/route/api/board/index.js router.put('/',dao.mod); //상세 라우터 추가 데이터 수정 모듈 추가 파일경로 : back/route/api/board/dao.js exports.mod = (req,res) => { //수정 모듈 body = req.body; //post sql = " UPDATE tb_board SET subject = ?, cont = ?, editdate = n.. 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)=> { .. vuejs 게시판 만들기 #7 (리스트 화면) backend단 준비 1) 리스트 데이터 모듈 생성 2) 페이징 처리에 필요한 데이터 전달 frontend단 준비 1) 리스트 데이터를 받아 화면 처리 2) 페이징 처리 1. backend단 파일경로 : back/route/api/board/dao.js const db = require('../../../config/db'); const conn = db.init(); exports.list = (req,res) => { //리스트 모듈 let ipp = 10; let totalCount = 0; let block = 10; let total_page = 0; let page = 1; let start = 0; let end = ipp; let start_page = 1; let end_page = bl.. vuejs 게시판 만들기 #6 (등록 화면 및 데이터 저장 프로세스) 등록화면 컴포넌트 생성 파일경로 : /src/components/Write.vue 게시판 등록 제목 내용 목록 등록 잠시 전체 디자인스타일 때문에 공통 스타일을 적용하자. 파일경로 : App.vue //css 수정 등록화면 접근을 위해 라우터를 추가하자. 파일경로 : /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'; .. vuejs 게시판 만들기 #5 (axios 사용해서 데이터를 가져오자) axios는 javascript http통신 라이브러리 입니다. 게시판 만들기를 진행한다고 하면 backend URL에 접근해서 데이터를 가지고 올 때 사용합니다. axios 설정하기 파일경로 : /src/main.js import Vue from 'vue' import App from './App.vue' import axios from 'axios'; //axios 호출 import router from './routes'; //설정 라우터 호출 Vue.config.productionTip = true; new Vue({ render: h => h(App) ,router //뷰에 설정 }).$mount('#app') axios 모듈을 설치 후 호출할 수 있습니다. 아래와 같은 에러메세지 확인 모듈이 .. vuejs 게시판 만들기 #4 (router 사용하기) npm으로 vue-router 모듈을 설치 npm i --save vue-router 게시판 리스트 컴포턴트 생성 src/components/board/List.vue 게시판 리스트 src/routes 폴더 생성 후 index.js 파일 생성 import Vue from 'vue'; import Router from 'vue-router'; import HelloWorld from '@/components/HelloWorld'; //메인 컴포넌트 호출 import List from '@/components/board/List'; //게시판 리스트 컴포넌트 호출 Vue.use(Router); //vue 라우터 사용 export default new Router({ //라우터 연결 routes:[ { pat.. vuejs 게시판 만들기 #3 (레이아웃 만들기) 홈페이지 기본 레이아웃을 만들어보자 1. 헤더 컴포넌트를 만들기 경로 : src/components/common/Header.vue 메뉴1 메뉴2 메뉴3 메뉴4 2. 콘텐츠 영역은 프로젝트 생성 시 존재하는 HelloWorld.vue 파일 사용 경로 : src/components//HelloWorld.vue 3. 풋터 컴포넌트를 만들기 경로 : src/components/common/Footer.vue copyRight fyzh99.tistory.com 4. App.vue 파일수정 경로 : src/App.vue 웹 브라우져에서 화면을 실행시켜 확인해 보장 이전 1 2 다음
