add: 给前台博客vue版本新增了head的meta信息

Author: programmermark

blogvue/package-lock.json

@@ -19,6 +19,7 @@
     "mini-css-extract-plugin": "^0.9.0",
     "postcss-loader": "^3.0.0",
     "vue": "^2.6.11",
+    "vue-meta": "^2.3.3",
     "vue-router": "^3.1.6",
     "vuex": "^3.1.3"
   },

blogvue/package.json

@@ -26,6 +26,7 @@ import Author from './components/Author'
 import Advert from './components/Advert'
 import { servicePath } from './config/apiBaseUrl'
 import { bloger } from './config/blog'
+import { mapMutations } from 'vuex'
 
 const userId = bloger.id
 
@@ -60,6 +61,7 @@ export default {
       })
         .then(res=>{
           this.userInfo = res
+          this.setUserIfo(res)
         })
     },
     getAdvertList() {
@@ -78,7 +80,8 @@ export default {
       this.$nextTick(() => {
         this.isShow = true
       })
-    }
+    },
+    ...mapMutations(['setUserIfo'])
   },
 }
 </script>

blogvue/src/App.vue

@@ -1,5 +1,6 @@
 const serverUrl = 'https://immortalboy.cn'
-const baseUrl = 'https://immortalboy.cn/api/blog'
+// const baseUrl = 'https://immortalboy.cn/api/blog'
+const baseUrl = '/api/blog'
 
 const servicePath = {
   visitorLogin: baseUrl + '/comment/visitorLogin', // 评论接口：获取文章列表

blogvue/src/config/apiBaseUrl.js

@@ -2,11 +2,15 @@ import Vue from 'vue'
 import App from './App.vue'
 import router from './router'
 import store from './store'
+import VueMeta from 'vue-meta'
 
 import './plugins/antdesignvue'
 import api from './api/api'
 
 Vue.prototype.$api = api
+Vue.use(VueMeta, {
+  refreshOnceOnNavigation: true
+})
 
 Vue.config.productionTip = false
 

blogvue/src/main.js

@@ -5,8 +5,12 @@ Vue.use(Vuex)
 
 export default new Vuex.Store({
   state: {
+    userInfo: {}
   },
   mutations: {
+    setUserIfo(state, info) {
+      state.userInfo = info
+    }
   },
   actions: {
   },

blogvue/src/store/index.js

@@ -51,6 +51,13 @@ marked.setOptions({
 })
 
 export default {
+  metaInfo: {
+    title: '关于我',
+    htmlAttrs: {
+      lang: 'zh',
+      amp: true
+    }
+  },
   components: {
     "c-comment" :Comment,
   },

blogvue/src/views/About.vue

@@ -27,6 +27,13 @@ import { servicePath } from '../config/apiBaseUrl'
 import ArticleItemDetail from '../components/ArticleItemDetail'
 
 export default {
+    metaInfo: {
+    title: '文章详情',
+    htmlAttrs: {
+      lang: 'zh',
+      amp: true
+    }
+  },
   components: {
     "c-article-item-detail" :ArticleItemDetail,
   },

blogvue/src/views/ArticleDetail.vue

@@ -43,6 +43,13 @@ import { servicePath } from '../config/apiBaseUrl'
 const pageSize = 10
 
 export default {
+  metaInfo: {
+    title: '文章列表',
+    htmlAttrs: {
+      lang: 'zh',
+      amp: true
+    }
+  },
   components: {
     'c-article-type': ArticleType,
     'c-article-item': ArticleItem

blogvue/src/views/ArticleList.vue

@@ -15,54 +15,31 @@
       <div class="type-line" :style="{'transform': `translateX(${selectedIndex * 6}rem)`}"></div>
     </div>
     <div>
-    <a-spin :spinning="isLoading" tip="加载中...">
-      <template v-for="(item, index) in list">
-        <div :key="index + item.publishTime">
-          <talk-item
-            v-if="item.listType === 'talk'"
-            :talkItem="item"
-            :addLikeNum="addLikeNum" />
-          <article-item
-            v-if="item.listType === 'article'"
-            :article="item" />
-        </div>
-      </template>
-        <!-- {
-          list.map((item, index) => {
-            return (
-              <div key={index + item.publishTime}>
-              {
-                item.listType === 'talk' &&
-                <TalkItem
-                  talkItem={item}
-                  addLikeNum={addLikeNum}
-                  />
-              }
-              {
-                item.listType === 'article' &&
-                <ArticleItem article={item} />
-              }
-              {
-                item.listType === 'novel' &&
-                <NovelItem novel={item} />
-              }
-              </div>
-            )
-          })
-        } -->
-          <a-pagination
-            class="page"
-            :current="current"
-            :total="total"
-            :showTotal="total => `共 ${total} 条记录`"
-            :pageSize="pageSize"
-            :defaultCurrent="current"
-            showQuickJumper
-            @change="changePage"
-          />
-        </a-spin>
-      </div>
+      <a-spin :spinning="isLoading" tip="加载中...">
+        <template v-for="(item, index) in list">
+          <div :key="index + item.publishTime">
+            <talk-item
+              v-if="item.listType === 'talk'"
+              :talkItem="item"
+              :addLikeNum="addLikeNum" />
+            <article-item
+              v-if="item.listType === 'article'"
+              :article="item" />
+          </div>
+        </template>
+        <a-pagination
+          class="page"
+          :current="current"
+          :total="total"
+          :showTotal="total => `共 ${total} 条记录`"
+          :pageSize="pageSize"
+          :defaultCurrent="current"
+          showQuickJumper
+          @change="changePage"
+        />
+      </a-spin>
     </div>
+  </div>
 </template>
 
 <script>
@@ -79,6 +56,13 @@ const tabs = [
   ]
 
 export default {
+  metaInfo: {
+    title: '首页',
+    htmlAttrs: {
+      lang: 'zh',
+      amp: true
+    }
+  },
   components: {
     'talk-item': TalkItem,
     'article-item': ArticleItem
@@ -95,6 +79,7 @@ export default {
     }
   },
   created() {
+    console.log(this.userInfo)
     this.getList('article')
   },
   methods: {