add: settings

api/article.js

@@ -42,4 +42,27 @@ export const getComments = slug => {
     method: 'GET',
     url: `/api/articles/${slug}/comments`
   })
+}
+
+export const createArticle = data => {
+  return request({
+    method: 'POST',
+    url: `/api/articles`,
+    data
+  })
+}
+
+export const editArticle = slug => {
+  return request({
+    method: 'GET',
+    url: `/api/articles/${slug}`,
+  })
+}
+
+export const updateArticle = data => {
+  return request({
+    method: 'PUT',
+    url: `/api/articles/${data.slug}`,
+    data
+  })
 }

api/user.js

@@ -14,4 +14,40 @@ export const register = data => {
     url: '/api/users',
     data
   })
+}
+
+export const getUser = () => {
+  return request({
+    method: 'GET',
+    url: '/api/user'
+  })
+}
+
+export const updateUser = data => {
+  return request({
+    method: 'PUT',
+    url: '/api/user',
+    data
+  })
+}
+
+export const getProfile = username => {
+  return request({
+    method: 'GET',
+    url: `/api/profiles/${username}`
+  })
+}
+
+export const followUser = username => {
+  return request({
+    method: 'POST',
+    url: `/api/profiles/${username}/follow`
+  })
+}
+
+export const unFollowUser = username => {
+  return request({
+    method: 'DELETE',
+    url: `/api/profiles/${username}/follow`
+  })
 }

components/articleList.vue

@@ -0,0 +1,78 @@
+<template>
+  <div>
+    <div 
+      class="article-preview"
+      v-for="article in articles"
+      :key="article.slug"
+    >
+      <div class="article-meta">
+        <nuxt-link 
+          :to="{
+            name: 'profile',
+            params: {
+              username: article.author.username
+            }
+          }"
+          >
+          <img :src="article.author.image" />
+        </nuxt-link >
+        <div class="info">
+          <nuxt-link 
+            :to="{
+              name: 'profile',
+              params: {
+                username: article.author.username
+              }
+            }"
+            >
+            {{ article.author.username }}
+          </nuxt-link >
+          <span class="date">{{ article.createdAt | date('MMM DD, YYYY') }}</span>
+        </div>
+        <button 
+          class="btn btn-outline-primary btn-sm pull-xs-right"
+          :class="{
+            active: article.favorited
+          }"
+          @click="onFavorite(article)"
+          :disabled="article.favoriteDisabled"
+          >
+          <i class="ion-heart"></i> {{ article.favoritesCount }}
+        </button>
+      </div>
+      <nuxt-link 
+        class="preview-link"
+        :to="{
+          name: 'article',
+          params: {
+            slug: article.slug
+          }
+        }"
+        >
+        <h1>{{ article.title }}</h1>
+        <p>{{ article.description }}</p>
+        <span>Read more...</span>
+      </nuxt-link>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ArticleList',
+  props: {
+    articles: {
+      type: Array,
+      required: true
+    },
+    onFavorite: {
+      type: Function,
+      required: true
+    }
+  }
+}
+</script>
+
+<style>
+
+</style>

nuxt.config.js

@@ -35,7 +35,7 @@ module.exports = {
               component: resolve(__dirname, 'pages/settings/'),
             },
             {
-              path: '/editor',
+              path: '/editor/:slug?',
               name: 'editor',
               component: resolve(__dirname, 'pages/editor/'),
             },

pages/article/components/article-comments.vue

@@ -72,8 +72,8 @@ export default {
     }
   },
   async mounted () {
-    const { data } = await getComments(this.article.slug)
-    this.comments = data.comments
+    const { comments } = await getComments(this.article.slug)
+    this.comments = comments
   }
 }
 </script>

pages/article/index.vue

@@ -50,8 +50,7 @@ export default {
     ArticleComments
   },
   async asyncData ({ params }) {
-    const { data } = await getArticle(params.slug)
-    const { article } = data
+    const { article } = await getArticle(params.slug)
     const md = new MarkdownIt()
     article.body = md.render(article.body)
     return {

pages/editor/index.vue

@@ -4,22 +4,32 @@
       <div class="row">
 
         <div class="col-md-10 offset-md-1 col-xs-12">
-          <form>
+          <form @submit.prevent="onSubmit">
             <fieldset>
               <fieldset class="form-group">
-                  <input type="text" class="form-control form-control-lg" placeholder="Article Title">
+                <input v-model="article.title" type="text" class="form-control form-control-lg" placeholder="Article Title">
               </fieldset>
               <fieldset class="form-group">
-                  <input type="text" class="form-control" placeholder="What's this article about?">
+                <input v-model="article.description" type="text" class="form-control" placeholder="What's this article about?">
               </fieldset>
               <fieldset class="form-group">
-                  <textarea class="form-control" rows="8" placeholder="Write your article (in markdown)"></textarea>
+                <textarea v-model="article.body" class="form-control" rows="8" placeholder="Write your article (in markdown)"></textarea>
               </fieldset>
               <fieldset class="form-group">
-                  <input type="text" class="form-control" placeholder="Enter tags"><div class="tag-list"></div>
+                <input @keyup.enter="addTag" v-model="articleTag" type="text" class="form-control" placeholder="Enter tags"><div class="tag-list"></div>
+                <div class="tag-list">
+                  <span class="tag-default tag-pill" v-for="tag in article.tagList" :key="tag">
+                    <i class="ion-close-round" @click="removeTag(tag)"></i>
+                    {{tag}}
+                  </span>
+                </div>
               </fieldset>
-              <button class="btn btn-lg pull-xs-right btn-primary" type="button">
-                  Publish Article
+              <button 
+                class="btn btn-lg pull-xs-right btn-primary" 
+                type="button"
+                @click="onSubmit"
+              >
+                Publish Article
               </button>
             </fieldset>
           </form>
@@ -31,9 +41,57 @@
 </template>
 
 <script>
+import { createArticle, editArticle, updateArticle } from '@/api/article'
+
 export default {
   middleware: 'authenticated',
-  name: 'EditorIndex'
+  name: 'EditorIndex',
+  async asyncData ({ store, env, params, query }) {
+    if (params.slug) {
+      const { article } = await editArticle(params.slug)
+      return {
+        article
+      }
+    } else {
+      return {}
+    }
+  },
+  data () {
+    return {
+      article: {
+        slug: '',
+        title: '',
+        description: '',
+        body: '',
+        tagList: []
+      },
+      articleTag: '',
+      errors: {},
+    }
+  },
+  methods: {
+    async onSubmit () {
+      const request = this.article.slug ? updateArticle : createArticle;
+      const { article } = await request(this.article);
+      if (article) {
+        this.$router.push({
+          name: "article",
+          params: { slug: article.slug },
+        });
+      }
+    },
+    addTag () {
+      if (!this.article.tagList.includes(this.articleTag)) {
+        this.article.tagList.push(this.articleTag);
+        this.articleTag = "";
+      }
+    },
+    removeTag(tag) {
+      this.article.tagList = this.article.tagList.filter(
+        (vals) => vals !== tag
+      );
+    },
+  }
 }
 </script>
 

pages/home/index.vue

@@ -66,60 +66,7 @@
             </ul>
           </div>
 
-          <div 
-            class="article-preview"
-            v-for="article in articles"
-            :key="article.slug"
-          >
-            <div class="article-meta">
-              <nuxt-link 
-                :to="{
-                  name: 'profile',
-                  params: {
-                    username: article.author.username
-                  }
-                }"
-                >
-                <img :src="article.author.image" />
-              </nuxt-link >
-              <div class="info">
-                <nuxt-link 
-                  :to="{
-                    name: 'profile',
-                    params: {
-                      username: article.author.username
-                    }
-                  }"
-                  >
-                  {{ article.author.username }}
-                </nuxt-link >
-                <span class="date">{{ article.createdAt | date('MMM DD, YYYY') }}</span>
-              </div>
-              <button 
-                class="btn btn-outline-primary btn-sm pull-xs-right"
-                :class="{
-                  active: article.favorited
-                }"
-                @click="onFavorite(article)"
-                :disabled="article.favoriteDisabled"
-                >
-                <i class="ion-heart"></i> {{ article.favoritesCount }}
-              </button>
-            </div>
-            <nuxt-link 
-              class="preview-link"
-              :to="{
-                name: 'article',
-                params: {
-                  slug: article.slug
-                }
-              }"
-              >
-              <h1>{{ article.title }}</h1>
-              <p>{{ article.description }}</p>
-              <span>Read more...</span>
-            </nuxt-link>
-          </div>
+          <article-list :articles="articles" :onFavorite="onFavorite"  />
 
           <!-- 分页列表 -->
           <nav>
@@ -180,26 +127,30 @@
 import { getArticles, getYourFeedArticles, addFavorite, deleteFavorite } from '@/api/article'
 import { getTags } from '@/api/tag'
 import { mapState } from 'vuex'
+import ArticleList from '@/components/articleList'
 
 export default {
   name: 'HomeIndex',
+  components: {
+    ArticleList
+  },
   async asyncData ({ query }) {
     const page = Number.parseInt(query.page || 1)
     const limit = 20
     const tab = query.tab || 'global_feed'
     const tag = query.tag
     const loadArticles = tab === 'your_feed' ? getYourFeedArticles : getArticles
-    const [ articleRes, tagRes ] = await Promise.all([
+    const [ data, tagData ] = await Promise.all([
       loadArticles({
         limit,
         offset: (page - 1) * 2,
         tag
       }),
       getTags()
     ])
-    
-    const { articles, articlesCount } = articleRes.data
-    const { tags } = tagRes.data
+
+    const { articles, articlesCount } = data
+    const { tags } = tagData
 
     articles.forEach(article => article.favoriteDisabled = false)
 

pages/layout/index.vue

@@ -20,7 +20,12 @@
               </nuxt-link>
             </li>
             <li class="nav-item">
-              <nuxt-link to="/profile/123" class="nav-link" >
+              <nuxt-link :to="{
+                name: 'profile',
+                params: {
+                  username: user.username
+                }
+              }" class="nav-link" >
                 <img class="user-pic" :src="user.image">
                 {{ user.username }}
               </nuxt-link>