vue2_frontend init..
This commit is contained in:
commit
58481fe5ab
23
.gitignore
vendored
Normal file
23
.gitignore
vendored
Normal file
@ -0,0 +1,23 @@
|
|||||||
|
.DS_Store
|
||||||
|
node_modules
|
||||||
|
/dist
|
||||||
|
|
||||||
|
|
||||||
|
# local env files
|
||||||
|
.env.local
|
||||||
|
.env.*.local
|
||||||
|
|
||||||
|
# Log files
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
pnpm-debug.log*
|
||||||
|
|
||||||
|
# Editor directories and files
|
||||||
|
.idea
|
||||||
|
.vscode
|
||||||
|
*.suo
|
||||||
|
*.ntvs*
|
||||||
|
*.njsproj
|
||||||
|
*.sln
|
||||||
|
*.sw?
|
||||||
8
.prettierrc
Normal file
8
.prettierrc
Normal file
@ -0,0 +1,8 @@
|
|||||||
|
{
|
||||||
|
"semi": false,
|
||||||
|
"bracketSapcing": true,
|
||||||
|
"singleQuote": true,
|
||||||
|
"useTabs": false,
|
||||||
|
"trailingComma": "none",
|
||||||
|
"printWith": 80
|
||||||
|
}
|
||||||
24
README.md
Normal file
24
README.md
Normal file
@ -0,0 +1,24 @@
|
|||||||
|
# vue2_frontend
|
||||||
|
|
||||||
|
## Project setup
|
||||||
|
```
|
||||||
|
npm install
|
||||||
|
```
|
||||||
|
|
||||||
|
### Compiles and hot-reloads for development
|
||||||
|
```
|
||||||
|
npm run serve
|
||||||
|
```
|
||||||
|
|
||||||
|
### Compiles and minifies for production
|
||||||
|
```
|
||||||
|
npm run build
|
||||||
|
```
|
||||||
|
|
||||||
|
### Lints and fixes files
|
||||||
|
```
|
||||||
|
npm run lint
|
||||||
|
```
|
||||||
|
|
||||||
|
### Customize configuration
|
||||||
|
See [Configuration Reference](https://cli.vuejs.org/config/).
|
||||||
3
babel.config.js
Normal file
3
babel.config.js
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
module.exports = {
|
||||||
|
presets: ['@vue/cli-plugin-babel/preset']
|
||||||
|
}
|
||||||
19
jsconfig.json
Normal file
19
jsconfig.json
Normal file
@ -0,0 +1,19 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"target": "es5",
|
||||||
|
"module": "esnext",
|
||||||
|
"baseUrl": "./",
|
||||||
|
"moduleResolution": "node",
|
||||||
|
"paths": {
|
||||||
|
"@/*": [
|
||||||
|
"src/*"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"lib": [
|
||||||
|
"esnext",
|
||||||
|
"dom",
|
||||||
|
"dom.iterable",
|
||||||
|
"scripthost"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
19880
package-lock.json
generated
Normal file
19880
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
53
package.json
Normal file
53
package.json
Normal file
@ -0,0 +1,53 @@
|
|||||||
|
{
|
||||||
|
"name": "vue2_frontend",
|
||||||
|
"version": "0.1.0",
|
||||||
|
"private": true,
|
||||||
|
"scripts": {
|
||||||
|
"serve": "vue-cli-service serve",
|
||||||
|
"build": "vue-cli-service build",
|
||||||
|
"lint": "vue-cli-service lint"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"axios": "^0.27.2",
|
||||||
|
"bootstrap": "^5.2.0",
|
||||||
|
"bootstrap-vue": "^2.22.0",
|
||||||
|
"core-js": "^3.8.3",
|
||||||
|
"vue": "^2.6.14",
|
||||||
|
"vue-router": "^3.5.1",
|
||||||
|
"vuex": "^3.6.2"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@babel/core": "^7.12.16",
|
||||||
|
"@babel/eslint-parser": "^7.12.16",
|
||||||
|
"@vue/cli-plugin-babel": "~5.0.0",
|
||||||
|
"@vue/cli-plugin-eslint": "~5.0.0",
|
||||||
|
"@vue/cli-plugin-router": "~5.0.0",
|
||||||
|
"@vue/cli-plugin-vuex": "~5.0.0",
|
||||||
|
"@vue/cli-service": "~5.0.0",
|
||||||
|
"eslint": "^8.22.0",
|
||||||
|
"eslint-config-prettier": "^8.3.0",
|
||||||
|
"eslint-plugin-prettier": "^4.0.0",
|
||||||
|
"eslint-plugin-vue": "^8.0.3",
|
||||||
|
"vue-template-compiler": "^2.6.14"
|
||||||
|
},
|
||||||
|
"eslintConfig": {
|
||||||
|
"root": true,
|
||||||
|
"env": {
|
||||||
|
"node": true
|
||||||
|
},
|
||||||
|
"extends": [
|
||||||
|
"plugin:vue/essential",
|
||||||
|
"eslint:recommended",
|
||||||
|
"plugin:prettier/recommended"
|
||||||
|
],
|
||||||
|
"parserOptions": {
|
||||||
|
"parser": "@babel/eslint-parser"
|
||||||
|
},
|
||||||
|
"rules": {}
|
||||||
|
},
|
||||||
|
"browserslist": [
|
||||||
|
"> 1%",
|
||||||
|
"last 2 versions",
|
||||||
|
"not dead"
|
||||||
|
]
|
||||||
|
}
|
||||||
BIN
public/favicon.ico
Normal file
BIN
public/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
17
public/index.html
Normal file
17
public/index.html
Normal file
@ -0,0 +1,17 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||||
|
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
||||||
|
<title><%= htmlWebpackPlugin.options.title %></title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<noscript>
|
||||||
|
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
|
||||||
|
</noscript>
|
||||||
|
<div id="app"></div>
|
||||||
|
<!-- built files will be auto injected -->
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
37
src/App.vue
Normal file
37
src/App.vue
Normal file
@ -0,0 +1,37 @@
|
|||||||
|
<template>
|
||||||
|
<div id="app">
|
||||||
|
<HeaderLayout />
|
||||||
|
<router-view />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import HeaderLayout from '@/components/layout/HeaderLayout.vue'
|
||||||
|
export default {
|
||||||
|
name: 'App',
|
||||||
|
components: {
|
||||||
|
HeaderLayout
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
#app {
|
||||||
|
font-family: Avenir, Helvetica, Arial, sans-serif;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
text-align: center;
|
||||||
|
color: #2c3e50;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav {
|
||||||
|
padding: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav a {
|
||||||
|
font-weight: bold;
|
||||||
|
color: #2c3e50;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav a.router-link-exact-active {
|
||||||
|
color: #42b983;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
BIN
src/assets/logo.png
Normal file
BIN
src/assets/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.7 KiB |
130
src/components/HelloWorld.vue
Normal file
130
src/components/HelloWorld.vue
Normal file
@ -0,0 +1,130 @@
|
|||||||
|
<template>
|
||||||
|
<div class="hello">
|
||||||
|
<h1>{{ msg }}</h1>
|
||||||
|
<p>
|
||||||
|
For a guide and recipes on how to configure / customize this project,<br />
|
||||||
|
check out the
|
||||||
|
<a href="https://cli.vuejs.org" target="_blank" rel="noopener"
|
||||||
|
>vue-cli documentation</a
|
||||||
|
>.
|
||||||
|
</p>
|
||||||
|
<h3>Installed CLI Plugins</h3>
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<a
|
||||||
|
href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener"
|
||||||
|
>babel</a
|
||||||
|
>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a
|
||||||
|
href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener"
|
||||||
|
>router</a
|
||||||
|
>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a
|
||||||
|
href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-vuex"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener"
|
||||||
|
>vuex</a
|
||||||
|
>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a
|
||||||
|
href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener"
|
||||||
|
>eslint</a
|
||||||
|
>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<h3>Essential Links</h3>
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="https://forum.vuejs.org" target="_blank" rel="noopener"
|
||||||
|
>Forum</a
|
||||||
|
>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="https://chat.vuejs.org" target="_blank" rel="noopener"
|
||||||
|
>Community Chat</a
|
||||||
|
>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="https://twitter.com/vuejs" target="_blank" rel="noopener"
|
||||||
|
>Twitter</a
|
||||||
|
>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<h3>Ecosystem</h3>
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<a href="https://router.vuejs.org" target="_blank" rel="noopener"
|
||||||
|
>vue-router</a
|
||||||
|
>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a
|
||||||
|
href="https://github.com/vuejs/vue-devtools#vue-devtools"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener"
|
||||||
|
>vue-devtools</a
|
||||||
|
>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener"
|
||||||
|
>vue-loader</a
|
||||||
|
>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a
|
||||||
|
href="https://github.com/vuejs/awesome-vue"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener"
|
||||||
|
>awesome-vue</a
|
||||||
|
>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'HelloWorld',
|
||||||
|
props: {
|
||||||
|
msg: String
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||||
|
<style scoped>
|
||||||
|
h3 {
|
||||||
|
margin: 40px 0 0;
|
||||||
|
}
|
||||||
|
ul {
|
||||||
|
list-style-type: none;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
li {
|
||||||
|
display: inline-block;
|
||||||
|
margin: 0 10px;
|
||||||
|
}
|
||||||
|
a {
|
||||||
|
color: #42b983;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
7
src/components/__VLS_template.1.js
Normal file
7
src/components/__VLS_template.1.js
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
export default (await import('vue')).defineComponent({
|
||||||
|
name: 'HelloWorld',
|
||||||
|
props: {
|
||||||
|
msg: String
|
||||||
|
}
|
||||||
|
})
|
||||||
|
const __VLS_template = () => ({})
|
||||||
7
src/components/__VLS_template.js
Normal file
7
src/components/__VLS_template.js
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
export default (await import('vue')).defineComponent({
|
||||||
|
name: 'HelloWorld',
|
||||||
|
props: {
|
||||||
|
msg: String
|
||||||
|
}
|
||||||
|
})
|
||||||
|
const __VLS_template = () => ({})
|
||||||
45
src/components/layout/HeaderLayout.vue
Normal file
45
src/components/layout/HeaderLayout.vue
Normal file
@ -0,0 +1,45 @@
|
|||||||
|
<template>
|
||||||
|
<nav class="navbar navbar-expand-lg bg-light">
|
||||||
|
<div class="container-fluid">
|
||||||
|
<a class="navbar-brand" href="#">Navbar</a>
|
||||||
|
<button
|
||||||
|
class="navbar-toggler"
|
||||||
|
type="button"
|
||||||
|
data-bs-toggle="collapse"
|
||||||
|
data-bs-target="#navbarSupportedContent"
|
||||||
|
aria-controls="navbarSupportedContent"
|
||||||
|
aria-expanded="false"
|
||||||
|
aria-label="Toggle navigation"
|
||||||
|
>
|
||||||
|
<span class="navbar-toggler-icon"></span>
|
||||||
|
</button>
|
||||||
|
<div class="collapse navbar-collapse" id="navbarSupportedContent">
|
||||||
|
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
|
||||||
|
<li class="nav-item">
|
||||||
|
<a class="nav-link active" aria-current="page" href="#">Home</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item">
|
||||||
|
<a class="nav-link" href="#">Link</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item">
|
||||||
|
<a class="nav-link" href="/api/todo">Todo</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<form class="d-flex" role="search">
|
||||||
|
<input
|
||||||
|
class="form-control me-2"
|
||||||
|
type="search"
|
||||||
|
placeholder="통합검색"
|
||||||
|
aria-label="Search"
|
||||||
|
/>
|
||||||
|
<button class="btn btn-outline-success" type="submit">Search</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'HeaderLayout'
|
||||||
|
}
|
||||||
|
</script>
|
||||||
18
src/main.js
Normal file
18
src/main.js
Normal file
@ -0,0 +1,18 @@
|
|||||||
|
import Vue from 'vue'
|
||||||
|
import App from './App.vue'
|
||||||
|
import router from './router'
|
||||||
|
import store from './store'
|
||||||
|
import { BootstrapVue, BootstrapVueIcons } from 'bootstrap-vue'
|
||||||
|
|
||||||
|
// Import Bootstrap and BootstrapVue CSS files (order is important)
|
||||||
|
import 'bootstrap/dist/css/bootstrap.css'
|
||||||
|
import 'bootstrap-vue/dist/bootstrap-vue.css'
|
||||||
|
|
||||||
|
Vue.config.productionTip = false
|
||||||
|
Vue.use(BootstrapVue)
|
||||||
|
Vue.use(BootstrapVueIcons)
|
||||||
|
new Vue({
|
||||||
|
router,
|
||||||
|
store,
|
||||||
|
render: (h) => h(App)
|
||||||
|
}).$mount('#app')
|
||||||
38
src/router/index.js
Normal file
38
src/router/index.js
Normal file
@ -0,0 +1,38 @@
|
|||||||
|
import Vue from 'vue'
|
||||||
|
import VueRouter from 'vue-router'
|
||||||
|
import HomeView from '../views/HomeView.vue'
|
||||||
|
|
||||||
|
Vue.use(VueRouter)
|
||||||
|
|
||||||
|
const routes = [
|
||||||
|
{
|
||||||
|
path: '/',
|
||||||
|
name: 'home',
|
||||||
|
component: HomeView
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/about',
|
||||||
|
name: 'about',
|
||||||
|
// route level code-splitting
|
||||||
|
// this generates a separate chunk (about.[hash].js) for this route
|
||||||
|
// which is lazy-loaded when the route is visited.
|
||||||
|
component: () =>
|
||||||
|
import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/todo',
|
||||||
|
name: 'TodoListView',
|
||||||
|
component: () =>
|
||||||
|
import(
|
||||||
|
/* webpackChunkName: "api", webpackPrefetch:true */ '../views/todo/listView.vue'
|
||||||
|
)
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
const router = new VueRouter({
|
||||||
|
mode: 'history',
|
||||||
|
base: process.env.BASE_URL,
|
||||||
|
routes
|
||||||
|
})
|
||||||
|
|
||||||
|
export default router
|
||||||
12
src/store/index.js
Normal file
12
src/store/index.js
Normal file
@ -0,0 +1,12 @@
|
|||||||
|
import Vue from 'vue'
|
||||||
|
import Vuex from 'vuex'
|
||||||
|
|
||||||
|
Vue.use(Vuex)
|
||||||
|
|
||||||
|
export default new Vuex.Store({
|
||||||
|
state: {},
|
||||||
|
getters: {},
|
||||||
|
mutations: {},
|
||||||
|
actions: {},
|
||||||
|
modules: {}
|
||||||
|
})
|
||||||
5
src/views/AboutView.vue
Normal file
5
src/views/AboutView.vue
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
<template>
|
||||||
|
<div class="about">
|
||||||
|
<h1>This is an about page</h1>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
18
src/views/HomeView.vue
Normal file
18
src/views/HomeView.vue
Normal file
@ -0,0 +1,18 @@
|
|||||||
|
<template>
|
||||||
|
<div class="home">
|
||||||
|
<img alt="Vue logo" src="../assets/logo.png" />
|
||||||
|
<HelloWorld msg="Welcome to Your Vue.js App" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// @ is an alias to /src
|
||||||
|
import HelloWorld from '@/components/HelloWorld.vue'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'HomeView',
|
||||||
|
components: {
|
||||||
|
HelloWorld
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
248
src/views/todo/listView.vue
Normal file
248
src/views/todo/listView.vue
Normal file
@ -0,0 +1,248 @@
|
|||||||
|
<template>
|
||||||
|
<!-- 참조: https://codesandbox.io/s/3v0m1?file=/src/components/board/BoardList.vue -->
|
||||||
|
<div>
|
||||||
|
<b-container fluid>
|
||||||
|
<b-row>
|
||||||
|
<b-col> </b-col>
|
||||||
|
<b-col>
|
||||||
|
<b-form-group>
|
||||||
|
<b-input-group>
|
||||||
|
<label class="input-group-text">Filter</label>
|
||||||
|
<b-form-input
|
||||||
|
id="filter-input"
|
||||||
|
v-model="filter"
|
||||||
|
type="text"
|
||||||
|
placeholder="Type to Filter"
|
||||||
|
></b-form-input>
|
||||||
|
<b-input-group-append>
|
||||||
|
<b-button :disabled="!filter" @click="filter = ''"
|
||||||
|
>Clear</b-button
|
||||||
|
>
|
||||||
|
</b-input-group-append>
|
||||||
|
</b-input-group>
|
||||||
|
</b-form-group>
|
||||||
|
</b-col>
|
||||||
|
<b-col>
|
||||||
|
<div class="input-group justify-content-end">
|
||||||
|
<label class="input-group-text">줄수</label>
|
||||||
|
<b-form-select
|
||||||
|
v-model="perPage"
|
||||||
|
:options="perPageOptions"
|
||||||
|
></b-form-select>
|
||||||
|
</div>
|
||||||
|
</b-col>
|
||||||
|
</b-row>
|
||||||
|
<b-row class="overflow-auto">
|
||||||
|
<b-table
|
||||||
|
:items="items"
|
||||||
|
:fields="fields"
|
||||||
|
:per-page="perPage"
|
||||||
|
:current-page="currentPage"
|
||||||
|
:filter="filter"
|
||||||
|
:filter-included-fields="filterOn"
|
||||||
|
:sort-by.sync="sortBy"
|
||||||
|
:sort-desc.sync="sortDesc"
|
||||||
|
:sort-direction="sortDirection"
|
||||||
|
:busy="isBusy"
|
||||||
|
:striped="striped"
|
||||||
|
:hover="hover"
|
||||||
|
:bordered="bordered"
|
||||||
|
:dark="dark"
|
||||||
|
:head-variant="headVariant"
|
||||||
|
label-sort-asc=""
|
||||||
|
label-sort-desc=""
|
||||||
|
label-sort-clear=""
|
||||||
|
@filtered="onFiltered"
|
||||||
|
>
|
||||||
|
<template v-slot:cell(selected)="row">
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
:value="row.item.id"
|
||||||
|
@change="checkedIdsToggle(row.item.id)"
|
||||||
|
/>
|
||||||
|
{{ row.item.id }}
|
||||||
|
</template>
|
||||||
|
<template #cell(index)="row">
|
||||||
|
{{ total - (currentPage * perPage + row.index) + perPage }}
|
||||||
|
</template>
|
||||||
|
<template #table-busy>
|
||||||
|
<div class="text-center text-danger my-2">
|
||||||
|
<b-spinner class="align-middle"></b-spinner>
|
||||||
|
<strong>Loading...</strong>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</b-table>
|
||||||
|
</b-row>
|
||||||
|
<b-row>
|
||||||
|
<b-col>
|
||||||
|
<b-pagination
|
||||||
|
v-model="currentPage"
|
||||||
|
:total-rows="total"
|
||||||
|
:per-page="perPage"
|
||||||
|
></b-pagination>
|
||||||
|
</b-col>
|
||||||
|
<b-col>
|
||||||
|
<div class="input-group">
|
||||||
|
<label class="input-group-text">DB</label>
|
||||||
|
<input type="text" class="form-control" v-model="search" />
|
||||||
|
<span class="input-group-text" @click="searchClick">검색</span>
|
||||||
|
</div>
|
||||||
|
</b-col>
|
||||||
|
<b-col>
|
||||||
|
<div class="input-group justify-content-end">
|
||||||
|
<b-button @click="toggleBusy">Toggle Busy State</b-button>
|
||||||
|
</div>
|
||||||
|
</b-col>
|
||||||
|
</b-row>
|
||||||
|
</b-container>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// 참조 : https://vuejsexamples.com/vuejs-tables-and-select-all-checkbox/
|
||||||
|
import axios from 'axios'
|
||||||
|
axios.defaults.baseURL = 'http://localhost:3000'
|
||||||
|
axios.defaults.headers.post['Content-Type'] = 'application/json;charset=utf-8'
|
||||||
|
axios.defaults.headers.post['Access-Control-Allow-Origin'] = '*'
|
||||||
|
export default {
|
||||||
|
components: {},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
items: [],
|
||||||
|
fields: [
|
||||||
|
{
|
||||||
|
key: 'selected',
|
||||||
|
label: ''
|
||||||
|
},
|
||||||
|
{ key: 'index', label: '번호' },
|
||||||
|
{
|
||||||
|
key: 'title',
|
||||||
|
label: '타이틀',
|
||||||
|
sortable: true,
|
||||||
|
sortDirection: 'desc',
|
||||||
|
filterByFormatted: true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'content',
|
||||||
|
label: '내용',
|
||||||
|
sortable: true,
|
||||||
|
sortDirection: 'desc',
|
||||||
|
filterByFormatted: true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'is_done',
|
||||||
|
label: '사용여부',
|
||||||
|
// formatter: (value, key, item) => {
|
||||||
|
formatter: (value) => {
|
||||||
|
return value ? 'Yes' : 'No'
|
||||||
|
},
|
||||||
|
sortable: true,
|
||||||
|
sortByFormatted: true,
|
||||||
|
filterByFormatted: true
|
||||||
|
},
|
||||||
|
// { key: 'updateAt', label: '수정일' },
|
||||||
|
{
|
||||||
|
key: 'createdAt',
|
||||||
|
label: '登録日時',
|
||||||
|
formatter: (value) => {
|
||||||
|
return value.replace(
|
||||||
|
/([0-9]{4})-([0-9]{2})-([0-9]{2}).*/gi,
|
||||||
|
'$1-$2-$3'
|
||||||
|
)
|
||||||
|
},
|
||||||
|
sortable: true
|
||||||
|
// filterByFormatted: true
|
||||||
|
}
|
||||||
|
],
|
||||||
|
total: 0,
|
||||||
|
perPage: 5, // 페이지당 보여줄 갯수
|
||||||
|
perPageOptions: [
|
||||||
|
{ value: 5, text: '5줄' },
|
||||||
|
{ value: 10, text: '10줄' },
|
||||||
|
{ value: 15, text: '15줄' },
|
||||||
|
{ value: 100, text: 'Show a lot' }
|
||||||
|
],
|
||||||
|
currentPage: 1, // 현재 페이지
|
||||||
|
// 속성옵션
|
||||||
|
striped: true,
|
||||||
|
hover: true,
|
||||||
|
bordered: true,
|
||||||
|
dark: false,
|
||||||
|
headVariant: 'null',
|
||||||
|
isBusy: false,
|
||||||
|
sortBy: 'id',
|
||||||
|
sortDesc: false,
|
||||||
|
sortDirection: 'asc',
|
||||||
|
filter: null,
|
||||||
|
filterOn: [],
|
||||||
|
search: null,
|
||||||
|
checkedIds: []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
setup() {},
|
||||||
|
created() {},
|
||||||
|
mounted() {
|
||||||
|
// var vm = this
|
||||||
|
// setTimeout(function () {
|
||||||
|
// vm.records = vm.getDatas()
|
||||||
|
// }, 1000)
|
||||||
|
this.getDatas()
|
||||||
|
this.total = this.items.length
|
||||||
|
},
|
||||||
|
unmounted() {},
|
||||||
|
methods: {
|
||||||
|
async getDatas() {
|
||||||
|
this.isBusy = true
|
||||||
|
const items = await axios
|
||||||
|
.get('/todo/vue2', {
|
||||||
|
params: {
|
||||||
|
search: this.search
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.then((response) => {
|
||||||
|
return response.status === 200 ? response.data : []
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
console.log(err)
|
||||||
|
return []
|
||||||
|
})
|
||||||
|
//console.log(JSON.stringify(items.rows))
|
||||||
|
this.total = items.total
|
||||||
|
this.items = items.rows
|
||||||
|
this.isBusy = false
|
||||||
|
},
|
||||||
|
searchClick() {
|
||||||
|
this.currentPage = 1
|
||||||
|
this.getDatas()
|
||||||
|
},
|
||||||
|
toggleBusy() {
|
||||||
|
this.isBusy = !this.isBusy
|
||||||
|
},
|
||||||
|
onFiltered(filteredItems) {
|
||||||
|
// Trigger pagination to update the number of buttons/pages due to filtering
|
||||||
|
this.total = filteredItems.length
|
||||||
|
this.currentPage = 1
|
||||||
|
},
|
||||||
|
checkedIdsToggle(id) {
|
||||||
|
//console.log(this.checkedIds)
|
||||||
|
if (!this.checkedIds.includes(id)) {
|
||||||
|
this.checkedIds.push(id)
|
||||||
|
} else {
|
||||||
|
this.checkedIds = this.checkedIds.filter((e) => e !== id)
|
||||||
|
}
|
||||||
|
console.log(this.checkedIds)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
sortOptions() {
|
||||||
|
// Create an options list from our fields
|
||||||
|
return this.fields
|
||||||
|
.filter((f) => f.sortable)
|
||||||
|
.map((f) => {
|
||||||
|
return { text: f.label, value: f.key }
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style scoped></style>
|
||||||
4
vue.config.js
Normal file
4
vue.config.js
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
const { defineConfig } = require('@vue/cli-service')
|
||||||
|
module.exports = defineConfig({
|
||||||
|
transpileDependencies: true
|
||||||
|
})
|
||||||
Loading…
Reference in New Issue
Block a user