接着上一次的後臺要點記錄，這次再總結一下前臺的要點，同時對於整體搭建過程中的一些感想也一併記錄。
相對於後臺來說，前臺是弱項，也不是目前的本職，所以前臺的記錄可能就更基礎。
前端要點記錄
vant組件使用
除開vue本身的使用之外，這一次前臺的重點應該就是vant了，屬於ui層面的這一塊技術一直是弱項中的弱項。
使用vant之前，需要先安裝vant依賴，網絡好的情況下可以使用npm，如果網絡不好，最好就還是使用cnpm，操作如下：
cnpm i vant -S
依賴安裝之後，正常來說就可以在代碼中使用相應的組件了，使用之前需要引入。引入的方式有很多種，但是爲了性能更好以及避免大量無用組件的引入，我根據官網說明選擇自動按需引入的方式，這個方式就需要再安裝一個插件，操作如下：
cnpm i babel-plugin-import -D
依賴安裝好之後，就可以敲代碼了，拿導航欄來說，我這裏選擇的是標籤頁樣式作爲導航，就可以在js中按如下方式引入：
import { Tab, Tabs } from 'vant';
Vue.use(Tab);
Vue.use(Tabs);
有了上邊的引用，那麼在需要設計導航欄的地方就可以使用vant組件了，我的這個功能寫在TopNav,vue中，可以前往具體代碼中參考使用，代碼連接見文章末尾，標籤頁使用如下：
<van-tabs v-model="active">
<van-tab title="首頁" name="a">內容 1</van-tab>
<van-tab title="下載" name="b">內容 2</van-tab>
<van-tab title="登錄" name="c">內容 3</van-tab>
</van-tabs>
上邊的內容就引出了一個vue對象綁定的知識點，即v-model，這裏綁定了一個變量active，所以就需要在js中進行聲明：
export default{
data(){
return{
active:1
}
}
}
以上便是vant組件的基本使用記錄，對着官網的說明，使用起來應該說比較簡單，這裏爲vant官網點個贊。vant官網
那麼這次的博客截止到目前，已經使用了十幾個組件，雖然整體手擼的頁面依舊不是那麼好看，但是比起之前寫的一些來說，還是要好看多了，以下是博客展示頁的截圖（首頁截圖可以繼續往下翻）：
前臺模塊間傳值
除了藉助vant來設計界面之外，數據交互就還是要回到vue本身了。
像基本的數據綁定、屬性綁定、點擊事件等應該算是較常規的知識點，這裏就不做記錄，要特別記錄的就是模塊間數據傳值。
不論是在首頁點擊分類改變首頁博客列表，還是點擊首頁博客列表進入博客瀏覽，都需要用到這種模塊間的傳值。
這種傳值，首先需要定義一個js文件，例如Msg.js，名稱不一定要這樣，js裏的內容很簡單：
import Vue from "vue"
export default new Vue
有了這個文件之後，在需要傳值的地方就可以引入之後進行使用。
例如我需要在首頁分類列表點擊某個分類時，傳遞分類id以改變博客列表，那麼在js裏首先要引入上邊的定義：
import Msg from './msg.js';
之後在需要傳值的地方就可以使用如下代碼傳值：
Msg.$emit("cateId",cateId,1);
像我這裏，就是在分類列表有一個點擊事件，點擊事件會調用定義的方法，那麼就可以在該方法裏使用上邊的代碼傳值。
就目前我的理解是，上邊第一個參數是傳值標示，起一個綁定作用，用以接收時候的識別，後邊就是具體要傳的數據，有幾個就寫幾個，以逗號分隔。
有了上邊的傳值，之後就是接收，接收數據的js同樣要先引入msg.js文件，引入之後接收數據的代碼如下：
mounted(){
var _this=this;
Msg.$on("cateId",function(cateId,cuPage){
_this.cateId=cateId;
});
}
v-if和v-for的使用
v-if和v-for的使用，相對比較簡單，尤其是之前使用過augularjs，有着基本一樣的用法，v-if後邊的表達式或者變量需要是一個boolean類型的結果，v-for使用in關鍵字進行集合數組的遍歷，例如：
<div v-if="type==1 || type==0">
<div v-if="homeCotentType ==1 || homeCotentType ==0">111</div>
</div>
<div v-else-if="type==2">222</div>
<van-sidebar class="cateList" v-model="activeKey" @change="onChange">
<van-sidebar-item v-for="cate in list" :title="cate.name" @click="choose(cate.id)">
<van-icon name="wap-home" /></van-sidebar-item>
</van-sidebar>
以上兩部分在BlogHome.vue和HomeLeft.vue兩個文件中有所體現，後續可能也會在很多地方用到。
前端要記錄的知識點其實是很多的，不是本職，不常用，就很容易遺忘，哪怕很簡單的地方。
但是單從架構和項目搭建以及前後臺打通來說，似乎也沒有那麼多需要記錄的，本項目中前後臺交互的關鍵在於axios，這個在最初的前端項目搭建時已經說了，也就沒必要贅述。
部署調用
前臺和後臺打通之後，直觀的表現形式就是瀏覽器可訪問，並且數據是從後臺讀取，這就涉及到vue和springboot前後臺的部署。
使用eclipse開發，springboot後臺項目直接在eclipse中運行即可，根據本項目的配置，後臺就會運行在8089端口上。
對於vue前臺，就需要使用npm啓動，在本項目中，就是在tzxblog目錄下的tzxblog目錄下執行npm run serve，那麼前天就會運行在8088端口。
前後臺都啓動之後，瀏覽器訪問localhost:8088,結果會如圖所示：
設計問題
在先設計後開發的流程中，非常的考驗經驗和大局觀。如果沒有相關經驗，或者考慮的不是那麼周全，就會發現實際寫代碼時總會有各種地方需要在原本設計的基礎上改動。
我不知道是否有那種真的一次設計，後邊就完全按設計開發而不再改動的項目。
但是不論是過往的工作項目，還是現在的業餘項目，幾乎都是會在後續的開發中改動一定的設計，尤其是接口定義。
要改善這個問題，除了堆時間累經驗，恐怕就只能是自己想辦法做一些完整的項目了，如果永遠都是隻負責模塊，那麼必然無法形成整體的大局觀。
前臺和後臺
對於前臺和後臺的概念，可能剛入行的時候總想弄個明白，隨着經驗多了，慢慢就不再那麼執着。
但是在這一次整體項目實施的過程中，卻又突然開始想這個問題，雖然可能並沒有太大的意義。
何謂前臺，何謂後臺，可能有時候還要看站在什麼角度。
曾經，我覺得java web項目中java是後臺，js和html就是前臺，但是隨着技術的發展會發現，js和html有時候也會在本身分出一個前後臺。
例如vue中，使用node.js可以啓動一個服務，甚至可以不需要java這種後臺語言而直接操作數據庫，因此很多純前端的同學可能就會說頁面是前臺，js也是後臺。
雖然很多時候這種區分並沒有什麼影響，但是有的時候認知上的不同卻也可能帶來溝通上的偏差，最終後果就是影響處理問題的效率。
項目地址
項目代碼和文檔均以github託管，地址如下：
https://github.com/tuzongxun/tzxblog