수정 3번째...
This commit is contained in:
parent
1bef1de9dc
commit
8aea00a6ef
@ -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">
|
||||
|
||||
@ -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'
|
||||
)
|
||||
}
|
||||
]
|
||||
|
||||
@ -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="col">total:{{ length }} / {{ total }}</div>
|
||||
<div class="col">
|
||||
<form class="d-flex" role="search">
|
||||
<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 class="row">
|
||||
<div class="col justify-content-md-center">
|
||||
<div class="input-group">
|
||||
<span class="input-group-text" id="basic-addon3">PerPage</span>
|
||||
<input type="text" class="form-control" v-model="perPage" />
|
||||
</div>
|
||||
<div class="col">
|
||||
<select name="" id="" v-model="perPage">
|
||||
<option value="">--라인수--</option>
|
||||
<option :value="value" :key="idx" v-for="(value, idx) in total">
|
||||
{{ value }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="input-group flex-nowrap">
|
||||
<input type="text" class="form-control" v-model="searchString" />
|
||||
<span class="input-group-text" id="basic-addon2" @click="searchClick"
|
||||
>검색</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<table class="table table-striped table-bordered table-hover">
|
||||
<thead class="table-light">
|
||||
<tr>
|
||||
<th scope="col" :key="field.key" v-for="field in fields">
|
||||
{{ field.label }}
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr :key="row.id" v-for="row in rows">
|
||||
<td>{{ row.id }}</td>
|
||||
<td>{{ row.title }}</td>
|
||||
<td>{{ row.is_done }}</td>
|
||||
<td>{{ row.createdAt }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<button :disabled="loading" @click="list">Get posts</button>
|
||||
<div class="overflow-auto">
|
||||
<b-table
|
||||
:fields="fields"
|
||||
:items="items"
|
||||
:per-page="perPage"
|
||||
:current-page="currentPage"
|
||||
:striped="striped"
|
||||
:hover="hover"
|
||||
:bordered="bordered"
|
||||
:dark="dark"
|
||||
:head-variant="headVariant"
|
||||
>
|
||||
<template #cell(index)="data">
|
||||
{{ data.index + 1 }}
|
||||
</template>
|
||||
</b-table>
|
||||
<b-pagination
|
||||
@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: 'created_at',
|
||||
label: '작성일'
|
||||
}
|
||||
// { key: 'updateAt', label: '수정일' },
|
||||
{ key: 'createdAt', label: '登録日時' }
|
||||
],
|
||||
rows: []
|
||||
items: []
|
||||
}
|
||||
},
|
||||
setup() {},
|
||||
created() {
|
||||
const url = 'http://localhost:3000/todo'
|
||||
this.list(url)
|
||||
this.list()
|
||||
},
|
||||
mounted() {},
|
||||
unmounted() {},
|
||||
methods: {
|
||||
async list(url) {
|
||||
this.loading = null
|
||||
await axios.get(url).then((response) => {
|
||||
if (response.statusText === 'OK') {
|
||||
console.log(response)
|
||||
this.page = response.data.query.page
|
||||
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}`)
|
||||
list() {
|
||||
const parameters = {
|
||||
params: {
|
||||
page: parseInt(this.currentPage),
|
||||
per_page: parseInt(this.perPage),
|
||||
searchString: this.searchString
|
||||
}
|
||||
})
|
||||
}
|
||||
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
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user