feat(首页):处理首页和分页

api/article.js

+import request from '@/utils/request'
+
+//  获取公共文章列表
+export const getArticles =  params => {
+  return request({
+    method: 'GET',
+    url: '/api/articles',
+    params
+  })
+}
\ No newline at end of file

middleware/auth.js

+/**
+ * 校验登录
+ * 
+ */
+export default function({store, redirect}){
+  if(!store.state.user){
+    return redirect('/login')
+  }
+}
\ No newline at end of file

middleware/notAuth.js

+/**
+ * 校验登录
+ * 
+ */
+ export default function({store, redirect}){
+  if(store.state.user){
+    return redirect('/')
+  }
+}
\ No newline at end of file

pages/editor/index.vue

@@ -31,6 +31,7 @@
 </template>
 <script>
 export default {
+  middleware: 'auth',
   name:'Editor'
 }
 </script>
\ No newline at end of file

pages/home/index.vue

@@ -23,41 +23,80 @@
             </ul>
           </div>
 
-          <div class="article-preview">
+          <div 
+            class="article-preview" 
+            v-for="article in articles" 
+            :key="article.slug"
+          >
             <div class="article-meta">
-              <a href="profile.html"><img src="http://i.imgur.com/Qr71crq.jpg" /></a>
+              <nuxt-link :to="{
+                name:'profile',
+                params:{
+                  username: article.author.username
+                }
+              }">
+                <img :src="article.author.image" />
+              </nuxt-link>
               <div class="info">
-                <a href="" class="author">Eric Simons</a>
-                <span class="date">January 20th</span>
-              </div>
-              <button class="btn btn-outline-primary btn-sm pull-xs-right">
-                <i class="ion-heart"></i> 29
+                <nuxt-link 
+                  class="author"
+                  :to="{
+                    name:'profile',
+                    params:{
+                      username: article.author.username
+                    }
+                  }">
+                  {{ article.author.name }}
+                </nuxt-link>
+                <span class="date">{{ article.createdAt }}</span>
+              </div>
+              <button 
+                class="btn btn-outline-primary btn-sm pull-xs-right" 
+                :class="{
+                  active:article.favorited
+                }"
+              >
+                <i class="ion-heart"></i> {{ article.favoritesCount }}
               </button>
             </div>
-            <a href="" class="preview-link">
-              <h1>How to build webapps that scale</h1>
-              <p>This is the description for the post.</p>
+            <nuxt-link
+              :to="{
+                name:'article',
+                params:{
+                  slug: article.slug
+                }
+              }" 
+            class="preview-link">
+              <h1>{{ article.title }}</h1>
+              <p>{{ article.description }}</p>
               <span>Read more...</span>
-            </a>
-          </div>
-
-          <div class="article-preview">
-            <div class="article-meta">
-              <a href="profile.html"><img src="http://i.imgur.com/N4VcUeJ.jpg" /></a>
-              <div class="info">
-                <a href="" class="author">Albert Pai</a>
-                <span class="date">January 20th</span>
-              </div>
-              <button class="btn btn-outline-primary btn-sm pull-xs-right">
-                <i class="ion-heart"></i> 32
-              </button>
-            </div>
-            <a href="" class="preview-link">
-              <h1>The song you won't ever stop singing. No matter how hard you try.</h1>
-              <p>This is the description for the post.</p>
-              <span>Read more...</span>
-            </a>
-          </div>
+            </nuxt-link>
+          </div>
+          <!-- 分页 -->
+          <nav>
+            <ul class="pagination">
+              <li
+                class="page-item" 
+                :class="{
+                  active: item===page
+                }"
+                v-for="item in totalPage" 
+                :key="item"
+              >
+                <nuxt-link
+                  class="page-link" 
+                  :to="{
+                    name:'home',
+                    query: {
+                      page: item
+                    }
+                  }"
+                >
+                  {{ item }}
+                </nuxt-link>
+              </li>
+            </ul>
+          </nav>
 
         </div>
 
@@ -84,8 +123,31 @@
   </div>
 </template>
 <script>
+import { getArticles } from '@/api/article'
+
 export default {
-  name:'Home'
+  name:'Home',
+  watchQuery:['page'],
+  async asyncData({isDev, route, store, env, params, query, req, res, redirect, error}) {
+    const page = Number.parseInt(query.page || 1)
+    const limit = 10
+    const {data} = await getArticles({
+      limit,
+      offset:(page-1) * limit
+    })
+    // console.log(data.articles)
+    return {
+      articles: data.articles,
+      articlesCount: data.articlesCount,
+      limit,
+      page
+    }    
+  },
+  computed:{
+    totalPage(){
+      return Math.ceil(this.articlesCount / this.limit)
+    }
+  }
 }
 </script>
 <style scoped>

pages/layout/index.vue

@@ -9,6 +9,7 @@
             <!-- Add "active" class when you're on that page" -->
             <nuxt-link class="nav-link" to="/" exact>Home</nuxt-link>
           </li>
+          <template v-if="user">
             <li class="nav-item">
               <nuxt-link class="nav-link" to="/editor">
                 <i class="ion-compose"></i>&nbsp;New Post
@@ -20,16 +21,19 @@
               </nuxt-link>
             </li>
             <li class="nav-item">
-            <nuxt-link class="nav-link" to="/login">Sign in</nuxt-link>
+              <nuxt-link class="nav-link" to="/profile/langrenaq">
+                <img class="user-pic" :src="user.image" />{{ user.username}}
+              </nuxt-link>
             </li>
+          </template>
+          <template v-else>
             <li class="nav-item">
-            <nuxt-link class="nav-link" to="/register">Sign up</nuxt-link>
+              <nuxt-link class="nav-link" to="/login">Sign in</nuxt-link>
             </li>
             <li class="nav-item">
-            <nuxt-link class="nav-link" to="/profile/langrenaq">
-              <img class="user-pic" />langrenaq
-            </nuxt-link>
+              <nuxt-link class="nav-link" to="/register">Sign up</nuxt-link>
             </li>
+          </template>
         </ul>
       </div>
     </nav>
@@ -52,8 +56,13 @@
   </div>
 </template>
 <script>
+import { mapState } from 'vuex'
+
 export default {
-  name:"LayoutIndex"
+  name:"LayoutIndex",
+  computed:{
+    ...mapState(['user'])
+  }
 }
 </script>
 <style>

pages/login/index.vue

@@ -49,6 +49,7 @@ import { login, register } from '@/api/user'
 const Cookie  = process.client ? require('js-cookie'): undefined
 
 export default {
+  middleware: 'notAuth',
   name:'Login',
   computed:{
     isLogin(){

pages/profile/index.vue

@@ -87,6 +87,7 @@
 </template>
 <script>
 export default {
+  middleware: 'auth',
   name:'Profile'
 }
 </script>
\ No newline at end of file

pages/settings/index.vue

@@ -36,6 +36,7 @@
 </template>
 <script>
 export default {
+  middleware: 'auth',
   name:'Settings'
 }
 </script>
\ No newline at end of file