first commit

components/layouts/pc/aside/main.vue

@@ -1,11 +1,100 @@
 <template>
-
+  <el-row class="wrapper">
+    <el-col :xs="24" :sm="24" :xl="24" style="margin: 0 auto;">
+      <el-col v-for="article in articles" :key="article.idArticle" style="padding-bottom: 1rem;">
+        <el-card>
+          <div class="card-body d-flex flex-column">
+            <el-link @click="onRouter('article',article.articleLink)" :underline="false" style="margin-bottom: .5rem;">
+              <h4 v-html="article.articleTitle"></h4>
+            </el-link>
+            <el-tag
+              style="margin-left: 0.5rem;"
+              v-for="tag in article.tags"
+              :key="tag.idTag"
+              size="mini"
+              effect="plain">
+              {{ tag.tagTitle }}
+            </el-tag>
+            <div class="text-muted article-summary-md">{{ article.articlePreviewContent }}</div>
+            <el-row class="pt-5">
+              <el-col :xs="3" :sm="1" :xl="1" class="mr-3">
+                <el-avatar v-if="article.articleAuthorAvatarUrl" size="medium" :src="article.articleAuthorAvatarUrl"></el-avatar>
+                <el-avatar v-else size="medium" src="https://rymcu.com/vertical/article/1578475481946.png"></el-avatar>
+              </el-col>
+              <el-col :xs="20" :sm="20" :xl="20">
+                <div>
+                  <el-link @click="onRouter('user', article.articleAuthorName)" :underline="false" class="text-default">{{ article.articleAuthorName }}</el-link>
+                  <small class="d-block text-muted">{{ article.timeAgo }}</small>
+                </div>
+              </el-col>
+              <el-col class="text-right">
+                <el-link :underline="false" title="总浏览数"><i class="el-icon-s-data"></i><span style="color: red;">{{ article.articleViewCount }}</span></el-link>
+              </el-col>
+            </el-row>
+          </div>
+        </el-card>
+      </el-col>
+      <el-col>
+        <div class="vertical-container text-center">
+          <el-pagination v-show="pagination.total > 10" v-model="pagination"
+                         layout="prev, pager, next"
+                         :current-page="pagination.currentPage"
+                         :total="pagination.total"
+                         @current-change="currentChange">
+          </el-pagination>
+        </div>
+      </el-col>
+    </el-col>
+  </el-row>
 </template>
 
 <script>
-    export default {
+  export default {
-        name: "AsideMain"
+    name: "AsideMain",
+    data() {
+      return {
+        articles: [],
+        pagination: {
+          currentPage: 1,
+          pageSize: 10,
+          total: 0
+        }
+      }
+    },
+    methods: {
+      currentChange(val){
+        this.getData(val);
+      },
+      async getData(p){
+        let _ts = this;
+        const responseTopData = await this.axios.get('/console/articles?page='+p);
+        if (responseTopData) {
+          responseTopData.pagination.currentPage = p;
+          _ts.$set(_ts, 'articles', responseTopData.articles);
+          _ts.$set(_ts, 'pagination', responseTopData.pagination);
+          window.scrollTo(0, 0);
+        }
+      },
+      onRouter (name, data) {
+        if (name === 'article') {
+          this.$router.push({
+            path: data
+          })
+        } else {
+          this.$router.push(
+            {
+              path: '/user/' + data
+            }
+          )
+        }
+      }
+    },
+    mounted () {
+      this.$store.commit('setActiveMenu', 'home');
+      const p = this.pagination.currentPage;
+      this.getData(p);
     }
+  }
 </script>
 
 <style scoped>

components/layouts/pc/main.vue

@@ -4,7 +4,7 @@
       <header-view/>
     </el-header>
     <el-main>
-      <aside-view/>
+      <aside-view key="aside"/>
     </el-main>
     <el-footer>
       <footer-view/>

nuxt.config.js

@@ -50,5 +50,8 @@ export default {
   */
   build: {
     transpile: [/^element-ui/],
+  },
+  proxy: {
+    '/api': 'http://localhost:8099/vertical/'
   }
 }