분류 전체보기 (52) 썸네일형 리스트형 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'; .. nodejs cors 알아보자 (도메인간 교차통신허용) frontend ,backend 구성해서 어플리케이션 만들 때 개발진행상황에서 front단에서 backend단 http통신이 필요할 때 보안상 타 서버이므로 통신이 실패한다. 이럴 때 cors 라이브러리를 사용해서 교차 통신이 가능하게 지원해 준다. cors 모듈이 없으므로 설치하자. npmp i --save cors cors 설정 파일경로 : app.js var createError = require('http-errors'); var express = require('express'); var path = require('path'); var cookieParser = require('cookie-parser'); var logger = require('morgan'); var db = require.. 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 모듈을 설치 후 호출할 수 있습니다. 아래와 같은 에러메세지 확인 모듈이 .. nodejs mysql 연결 후 DB 데이터 호출 mysql 연결을 알아봤다. 서버 localhost:3000/api/board URL 접근 시 mysql 연결해서 데이터를 확인하자 먼저 mysql 테이블을 생성하자. CREATE TABLE `tb_board` ( `num` int(10) NOT NULL AUTO_INCREMENT, `board_code` varchar(20) DEFAULT NULL, `subject` varchar(300) DEFAULT NULL, `cont` text, `id` varchar(50) DEFAULT NULL, `filename` varchar(200) DEFAULT NULL, `ori_filename` varchar(200) DEFAULT NULL, `filesize` int(10) DEFAULT NULL, `regda.. 이전 1 2 3 4 5 ··· 7 다음
