Update

YuJian-Blog-Web/src/api/article.js

@@ -3,6 +3,6 @@ import request from "@/utils/request";
 export function getArticle() {
   return request({
     url: "/article/list",
-    method: "get",
+    method: "get"
   });
 }

YuJian-Blog-Web/src/api/user.js

@@ -1,7 +0,0 @@
-export function login(data) {
-  return request({
-    url: "/user/login",
-    method: "post",
-    data,
-  });
-}

YuJian-Blog-Web/src/store/index.js

@@ -1,45 +1,24 @@
 import Vue from "vue";
 import Vuex from "vuex";
-import { login } from "@/api/user";
-import { getArticle } from "@/api/user";
+import { getArticle } from "@/api/article.js";
 
 Vue.use(Vuex);
 
 const state = {
-  Token: "",
   Article: [],
 };
 
 const mutations = {
-  SET_TOKEN: (state, Token) => {
-    state.Token = Token;
-  },
   SET_ARTICLE: (state, Article) => {
     state.Article = Article;
   },
 };
 
 const actions = {
-  login({ commit }) {
-    const username = "Ghost";
-    const password = "4b18888d253715d62093683bd206dfda";
-    return new Promise((resolve, reject) => {
-      login({ username: username, password: password })
-        .then((response) => {
-          const { data } = response;
-          commit("SET_TOKEN", data.token);
-          resolve();
-        })
-        .catch((error) => {
-          reject(error);
-        });
-    });
-  },
-
-  feactArticle({ commit }) {
+  fetchArticle({ commit }) {
     return new Promise((resolve, reject) => {
       getArticle()
-        .than((response) => {
+        .then((response) => {
           if (response.error) {
             reject(response.error);
           }

YuJian-Blog-Web/src/utils/auth.js

@@ -1,11 +0,0 @@
-import Cookies from "js-cookie";
-
-const TokenKey = "YuJianBlog";
-
-export function getToken() {
-  return Cookies.get(TokenKey);
-}
-
-export function setToken(token) {
-  return Cookies.set(TokenKey, token)
-}

YuJian-Blog-Web/src/utils/request.js

@@ -1,26 +1,12 @@
 import axios from "axios";
-import { getToken } from "@/utils/auth";
 
 const service = axios.create({
   baseURL: process.env.VUE_APP_BASE_API,
-  timeout: 5000,
+  timeout: 5000
 });
 
-service.interceptors.request.use(
-  (config) => {
-    if (this.$store.state.Token) {
-      config.headers["Authorization"] = `Bearer ${getToken()}`;
-    }
-    return config;
-  },
-  (error) => {
-    console.log(error);
-    return Promise.reject(error);
-  }
-);
-
 service.interceptors.response.use(
-  (response) => {
+  response => {
     const res = response.data;
 
     // 如果返回的状态码不为0
@@ -36,7 +22,7 @@ service.interceptors.response.use(
       return res;
     }
   },
-  (error) => {
+  error => {
     return Promise.reject(error);
   }
 );

YuJian-Blog-Web/src/views/Article/index.vue

@@ -3,13 +3,7 @@
     <blog-header />
     <index-top :TopInfo="TopInfo" />
     <img class="ArticleMainCover" src="@/assets/images/test.png" />
-    <div class="ArticleMain">
-      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
-      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
-      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
-      commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
-      velit esse
-    </div>
+    <div class="ArticleMain">{{ TopInfo.content }}</div>
     <Footer />
   </div>
 </template>
@@ -19,31 +13,36 @@ import BlogHeader from "@/components/BlogHeader";
 import IndexTop from "@/components/Top";
 import Footer from "@/components/Footer";
 
+import { mapState } from "vuex";
+
 export default {
   name: "Article",
   components: {
     BlogHeader,
     IndexTop,
-    Footer
+    Footer,
   },
   data() {
     return {
       TopInfo: {
         title: "ArticleTest",
-        ArticleCover: "@/assets/images/test.png"
-      }
+        content: "ArticleTest",
+        ArticleCover: "@/assets/images/test.png",
+      },
     };
   },
+  computed: {
+    ...mapState(["Article"]),
+  },
   methods: {
-    getArticleData: function() {
-      if (this.$route.query.id === "000") {
-        this.TopTitle = "ArticleTest";
-      }
-    }
+    getArticleData: function () {
+      this.TopInfo.title = this.Article[this.$route.query.id].title;
+      this.TopInfo.content = this.Article[this.$route.query.id].content;
+    },
   },
-  beforeMount() {
+  created() {
     this.getArticleData();
-  }
+  },
 };
 </script>
 

YuJian-Blog-Web/src/views/Home/components/Article.vue

@@ -1,24 +1,49 @@
 <template>
   <div class="Article">
-    <router-link
-      :to="{ path: 'Article', query: { id: '000' } }"
-      class="ArticleItem"
-    >
-      <div class="ArticleCover">
-        <img class="ArticleCoverImg" src="@/assets/images/test.png" />
-      </div>
-      <div class="ArticleInfo">
-        <div class="ArticleTitle">ArticleTest</div>
-        <div class="ArticleCont">Anything for Article</div>
-        <div class="ArticleData">2020.6.11</div>
-      </div>
-    </router-link>
+    <div v-for="(item, index) of ArticleDate" :key="item.id">
+      <router-link
+        :to="{ path: 'Article', query: { id: index } }"
+        class="ArticleItem"
+      >
+        <div class="ArticleCover">
+          <img class="ArticleCoverImg" src="@/assets/images/test.png" />
+        </div>
+        <div class="ArticleInfo">
+          <div class="ArticleTitle">{{ item.title }}</div>
+          <div class="ArticleCont">{{ item.content }}</div>
+          <div class="ArticleData">{{ item.author }}</div>
+        </div>
+      </router-link>
+    </div>
   </div>
 </template>
 
 <script>
+import { mapState } from "vuex";
+
 export default {
-  name: "Article"
+  name: "Article",
+  data() {
+    return {
+      ArticleDate: [],
+    };
+  },
+  computed: {
+    ...mapState(["Article"]),
+  },
+  methods: {
+    fetchArticle() {
+      this.$store.dispatch("fetchArticle").then(() => {
+        this.ArticleDate = this.Article;
+      });
+    },
+  },
+  mounted() {
+    this.fetchArticle();
+  },
+  activated() {
+    this.fetchArticle();
+  },
 };
 </script>
 
@@ -30,7 +55,7 @@ export default {
 .ArticleItem {
   display: grid;
   grid-template-columns: 720px;
-  grid-template-rows: 330px 100px;
+  grid-template-rows: 330px 110px;
   margin-top: 40px;
   border: 1px solid #757575;
   border-radius: 5px;
@@ -55,7 +80,12 @@ export default {
   font-size: 25px;
 }
 .ArticleCont {
-  font-size: 18px;
+  font-size: 15px;
+  display: -webkit-box;
+  text-overflow: ellipsis;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
 }
 .ArticleData {
   color: gray;