페이징
할 거

백엔드 설정은 pass

limit 걸어서 pageno 하는거

전역 변수 등록

pdf p42

서버 호출할 때마다 서버 주소를 적었음.
main.js에 서버 주소를 적어두고 그거 쓰려고

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

const app = createApp(App)
app.config.globalProperties.$server = "http://172.30.1.59:3000"

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

$server => 변수라는 뜻

BoardList.vue
서버 주소 적어둔 거
axios.get(this.$server+"/board")로 변경.

<script>
import axios from 'axios'
export default {
    name: 'BoardList',
    data() {
        return {
            list: [],
            requestBody: this.$route.query, //route로 보내서 사용하게 추가
            bno: this.$route.query.bno //추가
        }
    },
    methods: {
        detail(bno) {
            //alert('글 번호는 ' + bno);
            this.requestBody.bno = bno
            this.$router.push({path: './detail', query: this.requestBody})
        }
    }, 
    mounted() {
        axios.get(this.$server+"/board")
        .then((res) => {this.list = res.data.list})
        .catch((err) => {alert('문제가 발생했습니다. 다시 시도해주세요.' + err);});
    }
}
</script>

이런 식으로 모든 views의 vue에서 서버 주소 변수로 변경.

---

store까지?
좀더 하려면 react 추가 가능
npm install해서 추가하면 된다

---

페이징

BoardList.vue

template 테이블 닫는 태그 밑에 페이징 추가
script 변수 더 추가,,

<template>
    <div>
        <table class="table table-hover">
            <thead>
                <tr>
                    <th>번호</th>
                    <th>제목</th>
                    <th>글쓴이</th>
                    <th>날짜</th>
                    <th>ip</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="n in list" v-bind:key="n.board_no">
                    <td>{{ n.board_no }}</td>
                    <td v-text="n.board_title" v-on:click="detail(n.board_no)"></td>
                    <td>{{ n.mno }}</td>
                    <td>{{ n.board_date }}</td>
                    <td>{{ n.board_ip }}</td>
                </tr>
            </tbody>
        </table>
        <link href="//cdn.jsdelivr.net/npm/xeicon@2.3.3/xeicon.min.css" rel="stylesheet" />
        <div class="paging">
            <button v-bind:disabled="this.pageNo == 1" v-on:click="board(1)">
                <i class="xi-fast-backward"></i></button>
            <button v-bind:disabled="this.pageNo - 10 < 1" v-on:click="board(this.pageNo - 10)">
                <i class="xi-step-backward"></i></button>
            <button v-bind:disabled="this.pageNo - 1 < 1" v-on:click="board(this.pageNo - 1)">
                <i class="xi-arrow-left"></i></button>
            <button v-for="i in pageList" :key="i" v-on:click="board(i)">{{ i
                }}</button>
            <button v-bind:disabled="this.pageNo + 1 > this.totalPage" v-on:click="board(this.pageNo + 1)">
                <i class="xi-arrow-right"></i>
            </button>
            <button v-bind:disabled="this.pageNo + 10 > this.totalPage" v-on:click="board(this.pageNo + 10)">
                <i class="xi-step-forward"></i></button>
            <button v-bind:disabled="this.pageNo == this.totalPage" v-on:click="board(this.totalPage)">
                <i class="xi-fast-forward"></i></button>
        </div>
        <button @click="$router.push('/write')">글쓰기</button>
    </div>
</template>
<script>
import axios from 'axios'
export default {
    name: 'BoardList',
    data() {
        return {
            list: [], pageList: [],
            requestBody: this.$route.query, //route로 보내서 사용하게 추가
            bno: this.$route.query.bno, //추가
            totalcount: null, totalPage: null, startPage: null, endPage: null,
        }
    },
    methods: {
        paging(totalcount) { // 페이징 관련 일을 여기에서 처리합니다.
            this.totalcount = totalcount;
            this.totalPage = Math.ceil(this.totalcount / 10);
            this.startPage =
                this.pageNo / 11 > 0 ? parseInt(this.pageNo / 11) * 10 + 1 : 1;
            this.endPage =
                this.startPage + 10 > this.totalPage ? (this.totalPage + 10) % 10 : 10;
            this.pageList = [];
            for (let i = 0; i < this.endPage; i++) {
                this.pageList[i] = this.startPage + i;
            }
        },
        board(pageNo) {
            this.requestBody.pageNo = pageNo;
            axios.get("http://172.30.1.59:3000/board", { params: this.requestBody })
                .then(res => {
                    this.list = res.data.list;
                    this.pageNo = res.data.pageNo;
                    this.paging(res.data.totalcount);
                }).catch(err => { alert("문제가 발생했습니다." + err); });
        },
        detail(bno) {
            //alert('글 번호는 ' + bno);
            this.requestBody.bno = bno
            this.$router.push({ path: './detail', query: this.requestBody })
        }
    },
    mounted() {
        axios.get(this.$server + "/board")
            .then((res) => {
                this.list = res.data.list;
                this.pageNo = res.data.pageNo;
                this.paging(res.data.totalcount);
            })
            .catch((err) => { alert('문제가 발생했습니다. 다시 시도해주세요.' + err); });
    }
}
</script>
<style>
.paging {
    width: 100%;
    height: 30px;
    text-align: center;
}
</style>

수정하기

DetailPage.vue

<template>
  <div>
    <div class="board-detail">
      글번호 : {{ detail.board_no }}번글
      <button class="btn btn-primary" v-on:click="del()">삭제</button>
      <button class="btn btn-secondary" v-on:click="up(detail.board_no)">수정</button>
      <br />
      글제목 : {{ detail.board_title }}
      <br />
      글쓴이 : {{ detail.mno }}
      <br />
      쓴날짜 : {{ detail.board_date }}
      <br />내 용 :
      <span v-html="detail.board_content"></span>
      <br />
    </div>
  </div>
</template>
<script>
import axios from "axios";
export default {
  data() {
    return {
      requestBody: this.$route.query,
      detail: {
        board_no: this.$route.query.bno,
        board_title: "기본",
        mno: "기본",
        board_content: "기본",
        board_date: "기본"
      }
    };
  },
  mounted() {
    this.boardDetail();
  },
  methods: {
    up(bno){
        //alert(bno)
        this.requestBody.bno = bno
        this.$router.push({path: './update', query: this.requestBody})
    },
    del() {
      //alert(bno)
      if (confirm("삭제하시겠습니까?")) {
        axios({
          url: this.$server+"/del",
          method: "post",
          params: { bno: this.detail.board_no }
        })
          .then(res => {
            if (res.data.result == 1) {
              this.$router.push({
                path: "./boardList",
                query: this.requestBody
              });
            } else {
              alert("문제가   발생했습니다");
            }
          })
          .catch(err => {alert(err);});
      }
    },
    boardDetail() {
      axios.get(this.$server+"/detail?bno=" + this.$route.query.bno)
        .then(res => {
          this.detail = res.data;
        })
        .catch(err => {
          alert("문제가 발생했습니다. 잠시 후 다시 시도해주세요." + err);
        });
    }
  }
};
</script>
<style scoped></style>