IT (32) 썸네일형 리스트형 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.. nodejs mysql 연결 최초 접근 시 mysql connection을 설정해서 확인을 해보자 경로 : 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 mysql = require('mysql'); //추가 var indexRouter = require('./routes/index'); var usersRouter = require('./routes/users'); var app = express(); // view engine setup.. nodejs router에 대해 알아보자 router는 설정한 경로를 찾아가서 해당 하는 모듈을 실행을 시킨다. 가령 html에서 A.html, B.html파일이 있다고 생각해 보자. A.html에서 B.html로 이동하고 싶으면 A.html에서 B 화면으로 이동 작성하고 해당 영역을 클릭하면 B.html 화면으로 이동한다. nodejs는 각각의 url에 따른 다른 모듈을 접근할 때에 router 설정이 필요하다. router 설정방법 (nodejs express 프로젝트로 생성) 경로 : app.js var createError = require('http-errors'); var express = require('express'); var path = require('path'); var cookieParser = require('cooki.. 이전 1 2 3 4 다음
