mindol1004/real-world-springboot
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix : API service refactoring

Browse Source
This commit is contained in:
kms
2022-12-02 01:02:25 +09:00
parent b8caa0140b
commit 5a40832408
8 changed files with 132 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
src/vite-frontend/src/api/index.ts
View File

@@ -4,17 +4,18 @@ const axiosService = axios.create({
baseURL: import.meta.env.VITE_BASE_URL,
})
const signUp = async (user: object): Promise<AxiosResponse> => {
return axiosService.post('/api/users',{user});
return await axiosService.post('/api/users',{user});
}
const signIn = async (user: object): Promise<AxiosResponse> => {
return axiosService.post('/api/users/login',{user})
return await axiosService.post('/api/users/login',{user})
}
const getCurrentUser = async (): Promise<AxiosResponse> => {
let currentToken = localStorage.getItem("token");
return axiosService.get('/api/user', {
return await axiosService.get('/api/user', {
headers: {
Authorization: "TOKEN " + currentToken
}
@@ -23,7 +24,7 @@ const getCurrentUser = async (): Promise<AxiosResponse> => {
const updateUser = async (user: object): Promise<AxiosResponse> => {
let currentToken = localStorage.getItem("token");
return axiosService.put('/api/user', {user}, {
return await axiosService.put('/api/user', {user}, {
headers: {
Authorization: "TOKEN " + currentToken,
"Content-Type": `application/json`,
@@ -46,7 +47,7 @@ const getProfile = async (username: string | undefined): Promise<AxiosResponse>
const followUser = async (username: string | undefined): Promise<AxiosResponse> => {
let currentToken = localStorage.getItem("token");
return axiosService.post('/api/profiles/' + username + "/follow",{},{
return await axiosService.post('/api/profiles/' + username + "/follow",{},{
headers:{
Authorization : "TOKEN " + currentToken,
"Content-Type": `application/json`,
@@ -56,19 +57,51 @@ const followUser = async (username: string | undefined): Promise<AxiosResponse>
const unfollowUser = async (username: string | undefined): Promise<AxiosResponse> => {
let currentToken = localStorage.getItem("token");
return axiosService.delete('/api/profiles/' + username + "/follow",{
return await axiosService.delete('/api/profiles/' + username + "/follow",{
headers:{
Authorization : "TOKEN " + currentToken,
}
})
}
const createArticle = async (article: object | undefined): Promise<AxiosResponse> => {
let currentToken = localStorage.getItem("token");
return await axiosService.post('/api/articles', { article },{
headers :{
Authorization : "TOKEN " + currentToken,
"Content-Type": `application/json`,
}
})
}
const listArticles = async (): Promise<AxiosResponse> => {
let currentToken = localStorage.getItem("token");
if(currentToken == null){
return await axiosService.get('/api/articles');
}else{
return await axiosService.get('/api/articles',{
headers:{
Authorization: "TOKEN " + currentToken,
}
})
}
}
const feedArticle = async (): Promise<AxiosResponse> => {
let currentToken = localStorage.getItem("token");
return await axiosService.get('/api/articles/feed',{
headers:{
Authorization: "TOKEN " + currentToken,
}
});
}
const getArticle = async (slug: string | undefined): Promise<AxiosResponse> => {
let currentToken = localStorage.getItem("token");
if(currentToken == null){
return axiosService.get('/api/articles/' + slug);
return await axiosService.get('/api/articles/' + slug);
}else{
return axiosService.get('/api/articles/' + slug,{
return await axiosService.get('/api/articles/' + slug,{
headers:{
Authorization: "TOKEN " + currentToken,
}
@@ -79,7 +112,7 @@ const getArticle = async (slug: string | undefined): Promise<AxiosResponse> => {
const addCommentToArticle = async (slug: string | undefined, comment: object): Promise<AxiosResponse> => {
let currentToken = localStorage.getItem("token");
return axiosService.post('/api/articles/' + slug + '/comments',{
return await axiosService.post('/api/articles/' + slug + '/comments',{
comment
},{
headers:{
@@ -92,9 +125,9 @@ const addCommentToArticle = async (slug: string | undefined, comment: object): P
const getCommentsFromArticle = async (slug: string | undefined): Promise<AxiosResponse> => {
let currentToken = localStorage.getItem("token");
if(currentToken == null){
return axiosService.get('/api/articles/' + slug + "/comments");
return await axiosService.get('/api/articles/' + slug + "/comments");
}else {
return axiosService.get('/api/articles/' + slug + "/comments",{
return await axiosService.get('/api/articles/' + slug + "/comments",{
headers:{
Authorization: "TOKEN " + currentToken,
}
@@ -104,7 +137,7 @@ const getCommentsFromArticle = async (slug: string | undefined): Promise<AxiosRe
const favoriteArticle = async (slug: string | undefined): Promise<AxiosResponse> => {
let currentToken = localStorage.getItem("token");
return axiosService.post('/api/articles/' + slug + '/favorite',{},
return await axiosService.post('/api/articles/' + slug + '/favorite',{},
{
headers:{
Authorization : "TOKEN " + currentToken,
@@ -115,7 +148,7 @@ const favoriteArticle = async (slug: string | undefined): Promise<AxiosResponse>
const unFavoriteArticle = async (slug: string | undefined): Promise<AxiosResponse> => {
let currentToken = localStorage.getItem("token");
return axiosService.delete('/api/articles/' + slug + '/favorite',{
return await axiosService.delete('/api/articles/' + slug + '/favorite',{
headers:{
Authorization : "TOKEN " + currentToken,
"Content-Type": `application/json`,
@@ -123,11 +156,18 @@ const unFavoriteArticle = async (slug: string | undefined): Promise<AxiosRespons
});
}
const getTags = async (): Promise<AxiosResponse> => {
return await axiosService.get('/api/tags');
}
export { signUp, signIn,
getCurrentUser, updateUser,
getProfile, followUser,
createArticle, feedArticle,
listArticles,
unfollowUser, getArticle,
addCommentToArticle, getCommentsFromArticle,
favoriteArticle, unFavoriteArticle
favoriteArticle, unFavoriteArticle,
getTags
}

44
src/vite-frontend/src/components/ArticleListFeed.vue
View File

@@ -25,6 +25,7 @@ import {onMounted, reactive, ref, defineComponent} from "vue";
import {useStore} from "vuex";
import axios from "axios";
import convertDate from "@/ts/common";
import {feedArticle} from "@/api";
export default defineComponent({
name: "ArticleListFeed",
@@ -32,13 +33,10 @@ export default defineComponent({
isEmpty: Boolean,
isLoading: Boolean
},
setup(props,{emit}){
const url = import.meta.env.VITE_BASE_URL;
const store = useStore();
const token = store.state.token;
setup(props,{ emit }){
const articles = reactive({
article: {art:{
article:[
{
slug: "",
title: "",
description: "",
@@ -48,25 +46,23 @@ export default defineComponent({
username: "",
image: ""
}
}},
articlesCount: "",
})
}
],
articlesCount: ""}
)
onMounted(() => {
axios.get(url + "/api/articles/feed",{
headers:{
Authorization : "TOKEN " + token
}})
.then(response => {
articles.article = response.data.articles;
articles.articlesCount = response.data.articlesCount;
articles.article = JSON.parse(JSON.stringify(articles.article));
emit("loading",false);
if(parseInt(articles.articlesCount) == 0) {
emit("emptied",true);
}
});
onMounted(async () => {
try {
const { data } = await feedArticle();
articles.article = data.articles.slice();
articles.articlesCount = data.articlesCount;
emit("loading",false);
if(parseInt(articles.articlesCount) == 0) {
emit("emptied",true);
}
}catch (error: any){
alert(error);
}
})
return { articles, convertDate }

57
src/vite-frontend/src/components/ArticleListGlobal.vue
View File

@@ -2,7 +2,7 @@
<div v-for = "art in articles.article">
<div class="article-preview">
<div class="article-meta">
<a href="profile.html"><img :src="art.author.image"/></a>
<a href="javascript:(0)" @click="showProfile(art.author.username)"><img :src="art.author.image"/></a>
<div class="info">
<a class="author"
href="javascript:void(0)"
@@ -10,7 +10,7 @@
<span class="date">{{convertDate(art.createdAt)}}</span>
</div>
<button class="btn btn-outline-primary btn-sm pull-xs-right">
<i class="ion-heart"></i> {{art.favoritesCount}}
<i class="ion-heart" @click="changeFavorite(art.slug, art.favorited)"></i> {{art.favoritesCount}}
</button>
</div>
<a href="javascript:(0)"
@@ -25,10 +25,10 @@
</template>
<script lang="ts">
import {onMounted, reactive, defineComponent, computed } from "vue";
import axios from "axios";
import {onMounted, reactive, defineComponent } from "vue";
import router from "@/router";
import convertDate from '@/ts/common';
import {favoriteArticle, listArticles, unFavoriteArticle} from "@/api";
export default defineComponent({
name: "ArticleListGlobal",
@@ -38,13 +38,13 @@ export default defineComponent({
globalList: Boolean,
},
setup(props,{emit}) {
const url = import.meta.env.VITE_BASE_URL;
const articles = reactive({
article: {
art: {
article:[
{
slug: "",
title: "",
description: "",
favorited: false,
favoritesCount: 0,
createdAt: "",
author: {
@@ -52,22 +52,9 @@ export default defineComponent({
image: ""
}
}
},
articlesCount: "",
})
const getArticles = () => {
axios.get(url + "/api/articles")
.then(response => {
articles.article = response.data.articles;
articles.articlesCount = response.data.articlesCount;
articles.article = JSON.parse(JSON.stringify(articles.article));
emit("loading", false);
if (parseInt(articles.articlesCount) == 0) {
emit("emptied", true);
}
});
}
],
articlesCount: ""}
)
const showProfile = (username: string) => {
router.push({
@@ -83,11 +70,29 @@ export default defineComponent({
})
}
const changeFavorite = async (slug: string, favorite : boolean) => {
if(favorite){
await unFavoriteArticle(slug);
}else{
await favoriteArticle(slug);
}
}
onMounted(() => {
getArticles();
onMounted(async () => {
try {
const { data } = await listArticles();
articles.article = data.articles.slice();
articles.articlesCount = data.articlesCount;
emit("loading",false);
if(parseInt(articles.articlesCount) == 0) {
emit("emptied",true);
}
}catch (error: any){
alert(error);
}
})
return { articles, getArticles, convertDate, showProfile, showArticle }
return { articles, convertDate, changeFavorite, showProfile, showArticle }
}
})
</script>

14
src/vite-frontend/src/components/TagList.vue
View File

@@ -8,20 +8,22 @@
<script lang="ts">
import {onMounted, defineComponent, reactive} from "vue";
import axios from "axios";
import {getTags} from "@/api";
export default defineComponent({
name: "TagList",
setup(){
const url = import.meta.env.VITE_BASE_URL;
const listTags = reactive({
tags: new Array()
})
onMounted(() => {
axios.get(url + "/api/tags")
.then(response => {
listTags.tags = response.data.tags
});
onMounted(async () => {
try{
const { data } = await getTags();
listTags.tags = data.tags;
}catch (error: any){
alert(error);
}
})
return { listTags }

8
src/vite-frontend/src/store/index.ts
View File

@@ -11,13 +11,7 @@ export default createStore({
},
setToken(state, token){
state.token = token;
}
},
getters: {
getToken(state){
console.log(state.token);
return state.token;
}
},
},
actions: {
LOGIN({commit}, user){

32
src/vite-frontend/src/views/TheArticle.vue
View File

@@ -1,9 +1,7 @@
<template>
<div class="editor-page">
<div class="container page">
<div class="row">
<div class="col-md-10 offset-md-1 col-xs-12">
<form>
<fieldset>
@@ -27,7 +25,6 @@
</fieldset>
</form>
</div>
</div>
</div>
</div>
@@ -37,16 +34,12 @@
<script lang="ts">
import {reactive ,ref } from "vue";
import axios from "axios";
import { useStore } from "vuex";
import router from "@/router";
import {createArticle} from "@/api";
export default {
name: "TheArticle",
setup(){
const url = import.meta.env.VITE_BASE_URL;
const store = useStore();
const token = store.state.token
const tag = ref("");
const article = reactive({
title: "",
@@ -64,21 +57,20 @@ export default {
return title.replace(' ','-');
}
const addArticle = () => {
let tags = parsingTag();
let slug = getSlug(article.title);
const addArticle = async () => {
const tags = parsingTag();
const slug = getSlug(article.title);
article.tagList = tags;
axios.post(url+"/api/articles" ,JSON.stringify({article}) ,{headers:{
Authorization : "TOKEN " + token,
"Content-Type": `application/json`,
}})
.then(() => {
router.push({
try{
await createArticle(article);
await router.push({
name:"ArticleDetail",
params: {slug}})
})
params: {slug}
})
}catch (error: any){
alert(error);
}
}
return { article, tag, addArticle, parsingTag, getSlug }
}
}

9
src/vite-frontend/src/views/TheHome.vue
View File

@@ -16,12 +16,12 @@
<div class="feed-toggle">
<ul class="nav nav-pills outline-active">
<li class="nav-item" v-if="isLogin">
<a class="nav-link"
<a href="javascript:(0)" class="nav-link"
@click="feedSelect"
:class="{ active : feedActive}">Your Feed</a>
</li>
<li class="nav-item">
<a class="nav-link"
<a href="javascript:(0)" class="nav-link"
@click="globalSelect"
:class="{ active : globalActive }">Global Feed</a>
</li>
@@ -66,8 +66,8 @@
import articleList from '@/components/ArticleListFeed.vue'
import articleListGlobal from "@/components/ArticleListGlobal.vue";
import tagLists from "@/components/TagList.vue";
import {ref} from "vue";
import {useStore} from "vuex";
import { ref } from "vue";
import { useStore } from "vuex";
export default {
name: "TheHome",
components: {
@@ -90,7 +90,6 @@ export default {
isEmpty.value = val;
}
const feedSelect = () => {
feedActive.value=true;
globalActive.value=false;

4
src/vite-frontend/src/views/TheLogin.vue
View File

@@ -54,8 +54,8 @@ export default {
const Login = async () => {
try{
const { data } = await signIn(user);
store.dispatch("LOGIN",data.user);
router.push({name:"Home"});
await store.dispatch("LOGIN",data.user);
await router.push({name:"Home"});
}catch(error: any){
const code = error.response.data.errors.code;
if(code == "EMAIL_NULL_OR_INVALID"){