[Spring Boot +Vue.js] 게시판 만들기 5 - 게시글 목록 조회 (mapper, axios)

 

 

 

 

back단부터 정리해보려고 한다. 일단 다음과 같이 폴더를 생성해준다.

 

 

 

 

📑 mybatis 연결

 

<application.properties>

#jdbc oracle
spring.datasource.driver-class-name=oracle.jdbc.driver.OracleDriver
spring.datasource.url=jdbc:oracle:thin:@localhost:1521/xe
spring.datasource.username=thdnjs0946
spring.datasource.password=1234

server.port=8081

# encoding
server.servlet.encoding.charset=UTF-8
server.servlet.encoding.force=true
server.servlet.encoding.enabled=true

#mybatis
mybatis.mapper-locations=classpath:mybatis/mapper/*.xml
mybatis.type-aliases-package=com.vueSpring.board_project.board.domain

 

mybatis 설정을 다음과 같이 해준다. 여기서 오타나 경로에 주의하자. 경로 에러때문에 찾는데 시간을 허비하였다 ㅠㅠ 

 

 

🎈 1. application.properties 오타 

 

Factory method 'sqlSessionFactory' threw exception; nested exception is java.io.IOException: Failed to parse mapping resource: 'file [C:\Users\Admin\VueProject\board_project\build\resources\main\mybatis\mapper\BoardMapper.xml]'

 

위와 같은 에러는 application.properties에서 Type-aliases 이름 경로 설정을 잘못한 것. 

 

 

 🎈 2. mapper namespace 오타

 

Request processing failed; nested exception is org.apache.ibatis.binding.BindingException: Invalid bound statement (not found)

 

따지고 보면 1번 2번 둘다 경로를 잘못 설정해줌 ㅠㅠ com.vueSpring.board_project.board.dao.boardDao 이건데 가운데 board 경로를 빼먹었으니 뜰리가 있나

 

 

 

📑 BoardMapper.xml

 

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper
        PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.vueSpring.board_project.board.dao.BoardDao">


    <select id="selectList" resultType="BoardVO">
        select * from board
    </select>


</mapper>

 

<mapper namespace>에 연결해줄 mapper 클래스 경로를 적어주면 된다. 나는 여기서 BoardDao랑 Mapper.xml을 연결함. 이렇게 되면 <select> <update> <delete> 등 id에 적은 명칭이 BoardDao 의 명칭과 같을 경우 연결된다. 

 

resultType에 원래는 아래와 같이 적어줘야 되지만 application.properties에서 type-aliases 경로를 설정해뒀기 때문에 간편하게 BoardVO만 적어도 되는 것. 

com.vueSpring.board_project.board.domain.BoardVO

 

 

📑 BoardDao

 

interface로 설정했기에 선언부만 있다. 

 

package com.vueSpring.board_project.board.dao;

import com.vueSpring.board_project.board.domain.BoardVO;
import org.apache.ibatis.annotations.Mapper;

import java.util.List;

@Mapper
public interface BoardDao {

    public List<BoardVO> selectList();
}

 

 

📑 BoardService, BoardServiceImpl

 

package com.vueSpring.board_project.board.service;

import com.vueSpring.board_project.board.dao.BoardDao;
import com.vueSpring.board_project.board.domain.BoardVO;
import org.springframework.stereotype.Service;

import java.util.List;
@Service
public interface BoardService {

    public List<BoardVO> getList();

}

 

package com.vueSpring.board_project.board.service;

import com.vueSpring.board_project.board.dao.BoardDao;
import com.vueSpring.board_project.board.domain.BoardVO;
import lombok.AllArgsConstructor;
import lombok.extern.slf4j.Slf4j;
import org.springframework.stereotype.Service;

import java.util.List;

@AllArgsConstructor
@Service
@Slf4j
public class BoardServiceImpl implements BoardService{


    private BoardDao boardDao;

    public List<BoardVO> getList(){
        log.info("service ==================== list");
        return boardDao.selectList();
    }

}

 

 

📑 BoardController

 

package com.vueSpring.board_project.board.controller;

import com.vueSpring.board_project.board.domain.BoardVO;
import com.vueSpring.board_project.board.service.BoardService;
import lombok.AllArgsConstructor;
import lombok.extern.slf4j.Slf4j;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import java.util.List;

@AllArgsConstructor
@RequestMapping("/board")
@RestController
@Slf4j
public class BoardController {

    private BoardService boardService;

    @GetMapping(value = "/list")
    public List<BoardVO> getList(){
        log.info("controller ====================== list");
        return boardService.getList();
    }
}

 

 

 

 

---

 

백단 구상이 완료되었다면 프론트단을 완성하려고 한다. 일단 vue.js에서 서버와 통신할 수 있게 axios를 설치해준다.

 

npm install --save axios

 

axios 라이브러리 사용을 위해 main.js에 추가해준다. 

 

import { createApp } from 'vue'
import App from './App.vue'
import BootstrapVue3 from 'bootstrap-vue-3'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue-3/dist/bootstrap-vue-3.css'
import router from './router'
import axios from 'axios'
import dayjs from 'dayjs'



const app = createApp(App)

app.config.globalProperties.$axios = axios; //전역변수로 설정 컴포넌트에서 this.$axios 호출할 수 있게 설정
app.config.globalProperties.$serverUrl = '//localhost:8081' //api server
app.config.globalProperties.$dayjs = dayjs;
app.use(BootstrapVue3)

app.use(router).mount('#app')

 

 

<List.vue>

<template>
<!--  <div>
    <b-table striped hover :lsit="list" :fields="fields"></b-table>
  </div>-->

  <div class="board-list">
    <div class="common-buttons">
      <button type="button" class="w3-button w3-round w3-blue-gray" v-on:click="fnWrite">등록</button>
    </div>
    <table class="w3-table-all">
      <thead>
      <tr>
        <th>No</th>
        <th>제목</th>
        <th>작성자</th>
        <th>등록일시</th>
      </tr>
      </thead>
      <tbody>
      <tr v-for="(row, idx) in list" :key="idx">
        <td>{{ row.bno }}</td>
        <td>{{ row.title }}</td>
        <td>{{ row.loginID }}</td>
        <td>{{ $dayjs(row.regdate).format("YYYY-MM-DD")}}</td>
      </tr>
      </tbody>
    </table>
  </div>
</template>

<script>

import axios from 'axios'
export default {
  name: "List.vue",
  data() {
    return {
      /*fields: [
        {
          key: 'bno',
          label: '글번호'
        },
        {
          key: 'title',
          label: '제목'
        },
        {
          key: 'loginID',
          label: '글쓴이'
        },
        {
          key: 'regdate',
          label: '등록일'
        }

      ],*/

      list: {},

    }
  },
  mounted() {
    this.fnGetList();
  },
  methods:{
    fnGetList(){
      axios.get(this.$serverUrl+"/board/list",{
      }).then((res)=>{
        this.list = res.data
        console.log("list" + res.data);
      }).catch((err)=>{
        if (err.message.indexOf('Network Error') > -1) {
          alert('네트워크가 원활하지 않습니다.\n잠시 후 다시 시도해주세요.')
        }
      })
    }
  },
  components : {

  }
}
</script>

<style scoped>

</style>

 

원래는 bootstrap-vue 이용해서 화면단 만들어보려고 했는데 생각처럼 잘 돌아가지 않아서 기본 테이블 구성을 이용하려고 한다. 

 

axios 사용법에 대해 알아보려면 아래 링크에서 참고! 

 

https://axios-http.com/kr/docs/intro

시작하기 | Axios Docs

 

---

 

 

src/assets/common.css 파일을 만들어준다. 아래의 코드를 입력하고 common.css 파일을 읽을 수 있게 main.js에 import한다. 

 

/* common.css */
.board-list {
    width: 768px;
    margin: auto;
}

.board-detail {
    width: 768px;
    margin: auto;
    text-align: left;
}

.board-contents {
    padding: 12px 8px;
    border-bottom: 1px solid #eee;
}

.common-buttons {
    padding: 8px;
    text-align: right;
}

 

import './assets/common.css'

 

 

---

 

w3.css는 CDN을 통해 적용한다. public/index.html 파일 안에 다음 코드를 넣어준다. 

 

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

 

 

http://192.168.20.119:8082/board/list 주소창에 입력하면 다음과 같은 화면이 뜬다. 

 

 

 

 

참고 : https://onethejay.tistory.com/66