add fetching post list
This commit is contained in:
parent
eff8dbc671
commit
00b31279cd
56
package-lock.json
generated
56
package-lock.json
generated
@ -8,6 +8,7 @@
|
||||
"name": "ulbi-vue",
|
||||
"version": "0.1.0",
|
||||
"dependencies": {
|
||||
"axios": "^1.7.9",
|
||||
"core-js": "^3.8.3",
|
||||
"vue": "^3.2.13",
|
||||
"vue-router": "^4.0.3",
|
||||
@ -3241,6 +3242,11 @@
|
||||
"lodash": "^4.17.14"
|
||||
}
|
||||
},
|
||||
"node_modules/asynckit": {
|
||||
"version": "0.4.0",
|
||||
"resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
|
||||
"integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
|
||||
},
|
||||
"node_modules/at-least-node": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/at-least-node/-/at-least-node-1.0.0.tgz",
|
||||
@ -3289,6 +3295,16 @@
|
||||
"postcss": "^8.1.0"
|
||||
}
|
||||
},
|
||||
"node_modules/axios": {
|
||||
"version": "1.7.9",
|
||||
"resolved": "https://registry.npmjs.org/axios/-/axios-1.7.9.tgz",
|
||||
"integrity": "sha512-LhLcE7Hbiryz8oMDdDptSrWowmB4Bl6RCt6sIJKpRB4XtVf0iEgewX3au/pJqm+Py1kCASkb/FFKjxQaLtxJvw==",
|
||||
"dependencies": {
|
||||
"follow-redirects": "^1.15.6",
|
||||
"form-data": "^4.0.0",
|
||||
"proxy-from-env": "^1.1.0"
|
||||
}
|
||||
},
|
||||
"node_modules/babel-loader": {
|
||||
"version": "8.4.1",
|
||||
"resolved": "https://registry.npmjs.org/babel-loader/-/babel-loader-8.4.1.tgz",
|
||||
@ -3963,6 +3979,17 @@
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/combined-stream": {
|
||||
"version": "1.0.8",
|
||||
"resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
|
||||
"integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
|
||||
"dependencies": {
|
||||
"delayed-stream": "~1.0.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.8"
|
||||
}
|
||||
},
|
||||
"node_modules/commander": {
|
||||
"version": "8.3.0",
|
||||
"resolved": "https://registry.npmjs.org/commander/-/commander-8.3.0.tgz",
|
||||
@ -4774,6 +4801,14 @@
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/delayed-stream": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
|
||||
"integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
|
||||
"engines": {
|
||||
"node": ">=0.4.0"
|
||||
}
|
||||
},
|
||||
"node_modules/depd": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
|
||||
@ -5506,7 +5541,6 @@
|
||||
"version": "1.15.9",
|
||||
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.9.tgz",
|
||||
"integrity": "sha512-gew4GsXizNgdoRyqmyfMHyAmXsZDk6mHkSxZFCzW9gwlbtOW44CDtYavM+y+72qD/Vq2l550kMF52DT8fOLJqQ==",
|
||||
"dev": true,
|
||||
"funding": [
|
||||
{
|
||||
"type": "individual",
|
||||
@ -5523,6 +5557,19 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/form-data": {
|
||||
"version": "4.0.1",
|
||||
"resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.1.tgz",
|
||||
"integrity": "sha512-tzN8e4TX8+kkxGPK8D5u0FNmjPUjw3lwC9lSLxxoB/+GtsJG91CO8bSWy73APlgAZzZbXEYZJuxjkHH2w+Ezhw==",
|
||||
"dependencies": {
|
||||
"asynckit": "^0.4.0",
|
||||
"combined-stream": "^1.0.8",
|
||||
"mime-types": "^2.1.12"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 6"
|
||||
}
|
||||
},
|
||||
"node_modules/forwarded": {
|
||||
"version": "0.2.0",
|
||||
"resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
|
||||
@ -7046,7 +7093,6 @@
|
||||
"version": "1.52.0",
|
||||
"resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
|
||||
"integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">= 0.6"
|
||||
@ -7056,7 +7102,6 @@
|
||||
"version": "2.1.35",
|
||||
"resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
|
||||
"integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"mime-db": "1.52.0"
|
||||
@ -8633,6 +8678,11 @@
|
||||
"node": ">= 0.10"
|
||||
}
|
||||
},
|
||||
"node_modules/proxy-from-env": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
|
||||
"integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
|
||||
},
|
||||
"node_modules/pseudomap": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/pseudomap/-/pseudomap-1.0.2.tgz",
|
||||
|
||||
@ -7,6 +7,7 @@
|
||||
"build": "vue-cli-service build"
|
||||
},
|
||||
"dependencies": {
|
||||
"axios": "^1.7.9",
|
||||
"core-js": "^3.8.3",
|
||||
"vue": "^3.2.13",
|
||||
"vue-router": "^4.0.3",
|
||||
|
||||
61
src/App.vue
61
src/App.vue
@ -1,15 +1,21 @@
|
||||
<template>
|
||||
<div class="app">
|
||||
<h1>Страница постов</h1>
|
||||
|
||||
<div class="app__btns">
|
||||
<my-button @click="showCreateDialog" class="createBtn">
|
||||
Создать пост
|
||||
</my-button>
|
||||
|
||||
<my-select v-model="selectedSort" :options="sortOptions"/>
|
||||
</div>
|
||||
|
||||
<my-dialog v-model:show="dialogVisible">
|
||||
<post-form @createPost="createPost" />
|
||||
</my-dialog>
|
||||
|
||||
<post-list :posts="posts" @removePost="removePost" class="postList"/>
|
||||
<div v-if="isPostLoading" style="margin-top: 15px">Loading...</div>
|
||||
<post-list v-else :posts="sortedPost" @removePost="removePost" class="postList"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -18,6 +24,7 @@ import PostForm from '@/components/PostForm.vue';
|
||||
import PostList from '@/components/PostList.vue';
|
||||
import MyDialog from '@/components/ui/Dialog.vue';
|
||||
import MyButton from '@/components/ui/Button.vue';
|
||||
import axios from 'axios';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
@ -28,12 +35,14 @@ export default {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
posts: [
|
||||
{id: 1, title: 'Javascript', body: 'Описание поста' },
|
||||
{id: 2, title: 'Typescript', body: 'Описание поста' },
|
||||
{id: 3, title: 'GO lang', body: 'Описание поста' },
|
||||
],
|
||||
posts: [],
|
||||
dialogVisible: false,
|
||||
isPostLoading: false,
|
||||
selectedSort: '',
|
||||
sortOptions: [
|
||||
{value: 'title', name: 'По названию'},
|
||||
{value: 'body', name: 'По описанию'}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
@ -47,6 +56,40 @@ export default {
|
||||
showCreateDialog() {
|
||||
this.dialogVisible = true;
|
||||
},
|
||||
async fetchPosts() {
|
||||
try {
|
||||
const {data} = await axios.get('https://jsonplaceholder.typicode.com/posts?_limit=10');
|
||||
this.posts = data
|
||||
} catch (e) {
|
||||
alert(e.message);
|
||||
}
|
||||
}
|
||||
},
|
||||
async mounted() {
|
||||
this.isPostLoading = true;
|
||||
await this.fetchPosts()
|
||||
this.isPostLoading = false
|
||||
},
|
||||
computed: {
|
||||
sortedPost() {
|
||||
return [...this.posts].sort((post1, post2) => {
|
||||
return post1?.[this.selectedSort]?.localeCompare(post2?.[this.selectedSort])
|
||||
})
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
// selectedSort(newValue) {
|
||||
// this.posts.sort((post1, post2) => {
|
||||
// return post1[newValue].localeCompare(post2[newValue])
|
||||
// })
|
||||
// },
|
||||
dialogVisible(newValue) {
|
||||
if (newValue) {
|
||||
document.body.style.overflow = 'hidden';
|
||||
} else {
|
||||
document.body.style.overflow = 'auto';
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -69,4 +112,10 @@ export default {
|
||||
.postList {
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.app__btns {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
|
||||
34
src/components/ui/Select.vue
Normal file
34
src/components/ui/Select.vue
Normal file
@ -0,0 +1,34 @@
|
||||
<template>
|
||||
<select @change="changeOption">
|
||||
<option disabled value="">Выберите из списка</option>
|
||||
|
||||
<option
|
||||
v-for="option in options"
|
||||
:key="option.value"
|
||||
:value="option.value"
|
||||
>
|
||||
{{option.name}}
|
||||
</option>
|
||||
</select>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'my-select',
|
||||
props: {
|
||||
options: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
changeOption(event) {
|
||||
this.$emit('update:modelValue', event.target.value)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
@ -1,9 +1,11 @@
|
||||
import Button from '@/components/ui/Button.vue';
|
||||
import Input from '@/components/ui/Input.vue';
|
||||
import Dialog from '@/components/ui/Dialog.vue';
|
||||
import Select from '@/components/ui/Select.vue';
|
||||
|
||||
export default [
|
||||
Button,
|
||||
Input,
|
||||
Dialog
|
||||
Dialog,
|
||||
Select
|
||||
]
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user