Articles v 0.01

front/client/components/Article.vue

@@ -0,0 +1,23 @@
+<template>
+  <v-container>
+
+  </v-container>
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+import Component from 'vue-class-component';
+import { IArticle } from 'client/service/Article'
+
+@Component
+export default class Article extends Vue {
+
+  async asyncData({ store }) {
+    return store.dispatch('category/loadArticleList')
+  }
+
+  get articles() {
+    return this.$store.state.article.articlesList
+  }
+}
+</script>

front/client/components/Toolbar.vue

@@ -3,9 +3,9 @@
     <v-toolbar-side-icon></v-toolbar-side-icon>
     <v-toolbar-title>Aelve Guide</v-toolbar-title>
     <v-spacer></v-spacer>
-    <search></search>
+    <!-- <search></search> -->
     <v-toolbar-items class="hidden-sm-and-down">
-      <v-btn flat>Login</v-btn>
+      <v-btn v-on:click="getApi" flat>Login</v-btn>
     </v-toolbar-items>
   </v-toolbar>
 </template>
@@ -14,11 +14,17 @@
 import Vue from 'vue';
 import Search from './Search.vue';
 import Component from 'vue-class-component';
+import axios from "axios";
 
 @Component({
   components: {
     Search
   }
 })
-export default class Toolbar extends Vue {}
+export default class Toolbar extends Vue {
+  async getApi() {
+    const { data } = await axios.get('api');
+    console.log(data);
+  }
+}
 </script>

front/client/service/Article.ts

@@ -0,0 +1,23 @@
+import axios from 'axios';
+
+class ArticleService {
+  async getArticle(): Promise<IArticle[]> {
+    const { data } = await axios.get('api/category/sth6l9jl', {})
+    console.log(data);
+
+    return data;
+  }
+}
+
+export interface IArticle {
+  status: string,
+  group: string,
+  uid: string,
+  items: [],
+  title: string,
+  desription: string
+}
+
+const articleServiceInstance = new ArticleService();
+
+export { articleServiceInstance as ArticleService }