수정 3번째...

src/components/layout/HeaderLayout.vue

@@ -93,7 +93,7 @@
             </ul>
           </li>
           <li class="nav-item">
-            <a class="nav-link" href="/api/todo/list">Todo</a>
+            <a class="nav-link" href="/api/todo">Todo</a>
           </li>
         </ul>
         <form class="d-flex" role="search">

src/router/index.js

@@ -113,11 +113,11 @@ const routes = [
       )
   },
   {
-    path: '/api/todo/list',
+    path: '/api/todo',
     name: 'TodoListView',
     component: () =>
       import(
-        /* webpackChunkName: "apicall", webpackPrefetch:true */ '../views/3_api/todo/listView.vue'
+        /* webpackChunkName: "api", webpackPrefetch:true */ '../views/3_api/todo/listView.vue'
       )
   }
 ]

src/views/3_api/todo/listView.vue

@@ -1,51 +1,51 @@
 <template>
   <!-- 참조: https://codesandbox.io/s/3v0m1?file=/src/components/board/BoardList.vue -->
   <div>
-    <div class="container text-center">
+    <div class="row">
-      <div class="row">
+      <div class="col justify-content-md-center">
-        <div class="col">total:{{ length }} / {{ total }}</div>
+        <div class="input-group">
-        <div class="col">
+          <span class="input-group-text" id="basic-addon3">PerPage</span>
-          <form class="d-flex" role="search">
+          <input type="text" class="form-control" v-model="perPage" />
-            <input
-              class="form-control me-2"
-              type="search"
-              v-model="searchString"
-              placeholder="통합검색"
-              aria-label="Search"
-            />
-            <button class="btn btn-outline-success" type="submit">
-              Search
-            </button>
-          </form>
         </div>
-        <div class="col">
+      </div>
-          <select name="" id="" v-model="perPage">
+      <div class="col">
-            <option value="">--라인수--</option>
+        <div class="input-group flex-nowrap">
-            <option :value="value" :key="idx" v-for="(value, idx) in total">
+          <input type="text" class="form-control" v-model="searchString" />
-              {{ value }}
+          <span class="input-group-text" id="basic-addon2" @click="searchClick"
-            </option>
+            >검색</span
-          </select>
+          >
         </div>
       </div>
     </div>
-    <table class="table table-striped table-bordered table-hover">
+    <div class="overflow-auto">
-      <thead class="table-light">
+      <b-table
-        <tr>
+        :fields="fields"
-          <th scope="col" :key="field.key" v-for="field in fields">
+        :items="items"
-            {{ field.label }}
+        :per-page="perPage"
-          </th>
+        :current-page="currentPage"
-        </tr>
+        :striped="striped"
-      </thead>
+        :hover="hover"
-      <tbody>
+        :bordered="bordered"
-        <tr :key="row.id" v-for="row in rows">
+        :dark="dark"
-          <td>{{ row.id }}</td>
+        :head-variant="headVariant"
-          <td>{{ row.title }}</td>
+      >
-          <td>{{ row.is_done }}</td>
+        <template #cell(index)="data">
-          <td>{{ row.createdAt }}</td>
+          {{ data.index + 1 }}
-        </tr>
+        </template>
-      </tbody>
+      </b-table>
-    </table>
+      <b-pagination
-    <button :disabled="loading" @click="list">Get posts</button>
+        @page-click="pageClick"
+        v-model="currentPage"
+        :total-rows="getTotal"
+        :per-page="perPage"
+        first-text="First"
+        prev-text="Prev"
+        next-text="Next"
+        last-text="Last"
+        use-router
+      ></b-pagination>
+      {{ total }}
+    </div>
   </div>
 </template>
 
@@ -55,56 +55,86 @@ export default {
   components: {},
   data() {
     return {
-      loading: null,
+      perPage: 5, // 페이지당 보여줄 갯수
+      currentPage: 1, // 현재 페이지
       total: 0,
-      length: 0,
-      page: 0, // 현재 페이지
-      perPage: 0, // 페이지당 보여줄 갯수
       searchString: '',
+      striped: true,
+      hover: true,
+      bordered: true,
+      dark: false,
+      headVariant: 'dark',
       fields: [
         {
-          key: 'id',
+          key: 'index',
           label: '번호'
         },
         {
           key: 'title',
-          label: '제목'
+          label: '타이틀',
+          sortable: true,
+          sortDirection: 'desc'
         },
+        { key: 'content', label: '내용' },
         {
           key: 'is_done',
-          label: '글쓴이'
+          label: '사용여부',
+          formatter: (value) => {
+            return value.toLowerCase() === 'true' ? 'Yes' : 'No'
+          },
+          sortable: true,
+          sortByFormatted: true,
+          filterByFormatted: true
         },
-        {
+        // { key: 'updateAt', label: '수정일' },
-          key: 'created_at',
+        { key: 'createdAt', label: '登録日時' }
-          label: '작성일'
-        }
       ],
-      rows: []
+      items: []
     }
   },
   setup() {},
   created() {
-    const url = 'http://localhost:3000/todo'
+    this.list()
-    this.list(url)
   },
   mounted() {},
   unmounted() {},
   methods: {
-    async list(url) {
+    list() {
-      this.loading = null
+      const parameters = {
-      await axios.get(url).then((response) => {
+        params: {
-        if (response.statusText === 'OK') {
+          page: parseInt(this.currentPage),
-          console.log(response)
+          per_page: parseInt(this.perPage),
-          this.page = response.data.query.page
+          searchString: this.searchString
-          this.per_page = response.data.query.per_page
-          this.searchString = response.data.query.searchString
-          this.total = response.data.total
-          this.rows = response.data.rows
-          this.length = response.data.rows.length
-        } else {
-          throw new Error(`Network response was not ok. \n url => ${url}`)
         }
-      })
+      }
+      console.log(parameters)
+      axios
+        .get('http://localhost:3000/todo', parameters)
+        .then((response) => {
+          // console.log(response)
+          this.currentPage = response.data.page
+          this.perPage = response.data.per_page
+          this.searchString = response.data.searchString
+          this.total = response.data.total
+          this.items = response.data.rows
+        })
+        .catch((err) => {
+          console.log(err)
+        })
+    },
+    pageClick(button, page) {
+      console.log(button)
+      this.currentPage = page
+      this.list()
+    },
+    searchClick() {
+      this.currentPage = 1
+      this.list()
+    }
+  },
+  computed: {
+    getTotal() {
+      return this.total
     }
   }
 }