Vue實戰：個人部落格第一版
零、要完成的右下角褐色的部分
image
一、Vue 專案是如何運轉的？
1、SPA的掛載頁面 —— Index.html
首先你得明白，單頁面應用程式是如何讀取資訊的，作為開發著，我們都經過各種URL配置，也都明白 URl 的組成部分，隨便舉個例子：
https://www.cnblogs.com/laozhang-is-phi/p/9629026.html?test=2#index
這個 URL 包含了多個部分：
https: //1、頁面請求的協議。www.cnblogs.com //2、為頁面所屬的域名。p/9629026.html //3、是匹配到某一篇文章的id。?test=2 //4、頁面透過 url 傳遞 get 請求的引數#index //5、為頁面的錨點區域
由此可見，之所以 SPA 單頁面應用程式的前四個都是一樣的，因為只有一個單頁面提供入口，所以我們只能透過第五個屬性，也就是錨點來實現路由的切換，根據url 的不同路由配置，從而達到頁面不重新整理的效果，
image
這個時候你應該能明白了 SPA 是如何執行的，那這個時候你就會問了，是誰承擔著工作呢，沒錯就是——index.html 頁面，整個專案都是在這個檔案的基礎上進行變化，可以說是一個模板，因為就只有這一個頁面。
<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <link rel="icon" href="<%= BASE_URL %>favicon.ico"> <title>blogvue3</title> </head> <body> <noscript> <strong>We're sorry but blogvue3 doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> </noscript> <div id="app"></div><!-- 透過app 提供掛載元素，動態的路由載入--> <!-- built files will be auto injected --> </body></html>
不過這個時候你會問，好吧，我知道了單頁面的原理，開始如何做出來動態效果呢？請往下看
2、App.vue —— 頁面所有路由對應元件的容器
聽起來感覺很拗口哈，說人話呢就是，我們如果想要實現內容的切換，以前都是每一頁面進行頁面渲染髮到瀏覽器，但是 SPA 不是這樣，因為只有一個頁面，所以就必須有一個空的容器，用來接納不同的元件內容，就好像上邊的那個動圖，都是在一個容器內，根據當前路由，將不同的子元件內容填充到 App.vue 容器裡，這樣就可以了，還記得我們們之前說到的 banner 切換麼，用的就是這個道理。
<div id="app"> <div id="nav"> </div> <router-view/>//這裡就是 路由子元件容器 </div>
這個時候，你應該腦子裡有點兒感覺了，哦！我在一個入口頁面裡畫一個坑，然後根據不同的 URL 路徑，去配置路由，然後顯示這些東西，那如何控制呢？沒錯，你很聰明，請往下看
3、main.js —— 入口檔案，初始化vue例項並使用需要的外掛
import Vue from "vue"; //匯入vueimport App from "./App.vue";//匯入 app.vue 主元件import router from "./router";//匯入路由 也可以寫 router.jsimport store from "./store";
Vue.config.productionTip = false; //將上邊的全域性變數賦給 vue 例項化，並掛載到 #app上new Vue({
router,
store, render: h => h(App)
}).$mount("#app");
說白了，main.js 就好像一個管理者，透過例項化 vue，並把元件和入口頁面聯絡起來。
4、router.js —— 路由檔案，配置著 url 路徑 和 頁面的關係
import Vue from "vue";import Router from "vue-router";// 引用路由import Home from "./views/Home.vue";//匯入方法1 Home頁面
Vue.use(Router);export default new Router({ mode: "history", base: process.env.BASE_URL, routes: [
{ path: "/", name: "home", component: Home
},
{ path: "/about",//路徑
name: "about",//名字
component: () => import(/* webpackChunkName: "about" */ "./views/About.vue")//匯入方法2，匯入About頁面
}
]
});
在上邊的配置中可以看到，整個 router.js 檔案都在管控著我們的路由原則，已經 vue 頁面的使用，有兩種方式：
1、透過 import 匯入檔案的形式，定義變數使用，就是 Home 頁面的使用方法；
2、直接在 routes 中配置要匯入的檔案，就是 About 頁面的使用方法；
兩者沒有太大的差別，個人更傾向於第一種。
以上四個檔案的配合，就是整個專案的運轉得到了保證，懂得了其中的原理，下邊我們們就開始動手寫程式碼！
二、深入說明 vue-router 工作原理
首先我們一定要安裝 vue-router 這個大家現在不用安裝，昨天已經安裝了，還記得麼，就是我們透過鍵盤的 空格鍵 選擇了很多外掛，如果不記得可以去上一篇文章看一看。
路由，其實就是指向的意思，當我點選頁面上的 home 按鈕時，頁面中就要顯示 home 的內容，如果點選頁面上的 about 按鈕，頁面中就要顯示 about 的內容。所以在頁面上有兩個部分，一個是點選部分，一個是點選之後，顯示內容的部分，這兩部分透過配置形成對映。 那麼點選之後，vue 是如何做到正確的對應，比如，我點選home 按鈕，頁面中怎麼就正好能顯示home的內容。這就要在js 檔案中配置路由。
因為我們頁面中所有內容都是元件化的，我們只要把路徑和元件對應起來就可以了，然後在頁面中把元件渲染出來。
1， 頁面實現（html模版中）
在vue-router中, 我們看到它定義了兩個標籤<router-link> 和<router-view>來對應點選和顯示部分。<router-link> 就是定義頁面中點選的部分，<router-view> 定義顯示部分，就是點選後，區配的內容顯示在什麼地方。所以 <router-link> 還有一個非常重要的屬性 to，定義點選之後，要到哪裡去， 如：<router-link to="/home">Home</router-link>
2， js 中配置路由
首先要定義route, 一條路由的實現。它是一個物件，由兩個部分組成： path和component. path 指路徑，component 指的是元件。如：{path:’/home’, component: home}
我們這裡有兩條路由，組成一個routes:
const routes = [
{ path: '/home', component: Home },
{ path: '/about', component: About }
]
最後建立router 對路由進行管理，它是由建構函式 new vueRouter() 建立，接受routes 引數。
const router = new VueRouter({
routes // routes: routes 的簡寫})
配置完成後，把router 例項注入到 vue 根例項中,就可以使用路由了
const app = new Vue({
router
}).$mount('#app')
執行過程：當使用者點選 router-link 標籤時，會去尋找它的 to 屬性， 它的 to 屬性和 js 中配置的路徑{ path: '/home', component: Home} path 一一對應，從而找到了匹配的元件， 最後把元件渲染到 <router-view> 標籤所在的地方。所有的這些實現才是基於hash 實現的。
文章參考自：@https://www.cnblogs.com/SamWeb/p/6610733.html
三、實現個人部落格首頁—— axios 獲取資料
1、什麼是 axios
官網地址：
axios 是一個基於Promise 用於瀏覽器和 nodejs 的 HTTP 客戶端，它本身具有以下特徵：
從瀏覽器中建立 XMLHttpRequest
從 node.js 發出 http 請求
支援 Promise API
攔截請求和響應
轉換請求和響應資料
取消請求
自動轉換JSON資料
客戶端支援防止
可以透過 <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original=""></script> 來引用，也可以用 npm install axios直接來安裝。
在上邊的官網中，有特別詳細的講解，特別像我們平時用的 ajax ，只要使用一遍就可以掌握。
2、首先我們需要安裝 axios。
進入當前資料夾 執行 npm install --save axios
image
3、安裝成功後，我們就可以封裝我們的 axios 請求方法了。
這裡我使用網上的一個封裝方法，原作者 @https://www.cnblogs.com/zhaowy/p/8513070.html
在 src 目錄下新建 api 資料夾，然後在 新增一個 http.js 檔案，並填寫下邊的方法
// 配置API介面地址var root = ''// 引用axiosvar axios = require('axios') // 自定義判斷元素型別JSfunction toType (obj) { return ({}).toString.call(obj).match(/s([a-zA-Z]+)/)[1].toLowerCase()
} // 引數過濾函式function filterNull (o) { for (var key in o) { if (o[key] === null) { delete o[key]
} if (toType(o[key]) === 'string') {
o[key] = o[key].trim()
} else if (toType(o[key]) === 'object') {
o[key] = filterNull(o[key])
} else if (toType(o[key]) === 'array') {
o[key] = filterNull(o[key])
}
} return o
} /* 介面處理函式
這個函式每個專案都是不一樣的，我現在調整的是適用於 的介面，如果是其他介面
需要根據介面的引數進行調整。參考說明文件地址： 主要是，不同的介面的成功標識和失敗提示是不一致的。
另外，不同的專案的處理方法也是不一致的，這裡出錯就是簡單的alert */ function apiAxios (method, url, params, success, failure) { if (params) { params = filterNull(params)
}
axios({ method: method, url: url, data: method === 'POST' || method === 'PUT' ? params : null, params: method === 'GET' || method === 'DELETE' ? params : null, baseURL: root, withCredentials: false })
.then(function (res) { if (res.data.success === true) { if (success) {
success(res.data)
}
} else { if (failure) {
failure(res.data)
} else { window.alert('error: ' + JSON.stringify(res.data))
}
}
})
.catch(function (err) { let res = err.response if (err) { window.alert('api error, HTTP CODE: ' + res.status)
}
})
} // 返回在vue模板中的呼叫介面export default { get: function (url, params, success, failure) { return apiAxios('GET', url, params, success, failure)
}, post: function (url, params, success, failure) { return apiAxios('POST', url, params, success, failure)
}, put: function (url, params, success, failure) { return apiAxios('PUT', url, params, success, failure)
}, delete: function (url, params, success, failure) { return apiAxios('DELETE', url, params, success, failure)
}
}
4、新增好後，在 主方法 main.js 中 引用該 js 檔案，並定義全域性變數，這樣，就可以在所有的頁面內，使用 $api 方法了。
import Vue from "vue";import App from "./App.vue";import router from "./router1.js";import store from "./store"; // 引用API檔案import api from './api/http.js'// 將API方法繫結到全域性Vue.prototype.$api = api
Vue.config.productionTip = false; new Vue({
router,
store, render: h => h(App)
}).$mount("#app");
5、修改 Home 頁面的程式碼，直接貼上進去
<template>
<div class="home">
<div class="l_body">
<div class='container clearfix'>
<div class='l_main'>
<section class="post-list">
<div v-for="i in list" :key="i.bID" class='post-wrapper'>
<article class="post ">
<section class="meta">
<h2 class="title">
<router-link :to="'/content/' + i.bID"> {{ i.btitle }} </router-link>
</h2>
<time> {{i.bCreateTime}} </time>
<div class='cats'>
<a href="javascript:void(0)">{{i.bsubmitter}}</a>
</div>
</section>
<section class="article typo">
<article v-html="i.bcontent"></article>
<div class="readmore">
<a href="/dotnet/asp.net core???????????/">檢視更多</a>
</div>
<div class="full-width auto-padding tags">
<a href="javascript:void(0);">{{i.bcategory}}</a>
</div>
</section>
</article>
</div>
</section>
<nav id="page-nav">
<router-link :to="'/?page=' + (page>1?page-1:1)" class="prev" rel="prev"> {{(page<=1? "": "Previous")}} </router-link>
<router-link :to="'/?page=' + (page>=TotalCount? TotalCount: page+1)" class="next" rel="next"> {{(page>=TotalCount? "": "Next")}} </router-link>
</nav>
</div>
<aside class='l_side'>
<section class='m_widget categories'>
<div class='header'>標籤</div>
<div class='content'>
<ul class="entry">
<li><a class="flat-box" href="javascript:void(0);">
<div class='name'>部落格</div>
<div class='badget'>11</div>
</a></li>
<li><a class="flat-box" href="javascript:void(0);">
<div class='name'>隨筆</div>
<div class='badget'>10</div>
</a></li>
</ul>
</div>
</section>
</aside>
</div>
</div>
</div>
</template>
<script>
// @ is an alias to /src export default {
name: "home",
components: {}, data() { return {
page: 1,
TotalCount: 1,
isShow: true,
list: []
}
}, created() { this.getData()
},
methods: { getData() { var that = this
var urlPage = that.$route.query.page if (urlPage) {
that.page = urlPage
} this.$api.get('Blog/Get?page=' + that.page, null, r => {this.list = r.data this.page = r.page this.TotalCount = r.pageCount this.isShow=false })
}
},
watch: { '$route'(to, from) { this.list=[] this.isShow=true
this.page = to.query.page this.getData()
}
}
}; </script>
這個時候，你滿懷幸福的眼神去登陸檢視，發現沒有結果？彆著急，機智如我，F12 檢視，果然是跨域了
image
這個你一定特別熟悉，對不對，還記得我們們講到 .net core api 的跨域的時候，折磨了很多小夥伴的問題，終於遇到了，有沒有一種修的圓滿的趕腳，特別是從.net core 就看我這個系列的小夥伴，終於繞了一圈牽手成功了，這個時候怎麼辦呢，當然是修改埠咯，相信大家都會了，我這裡只是開放了8080，和8081埠，如果大家想用我的這個後端介面，需要這兩個埠。
作者：SAYLINING
連結：
來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/2524/viewspace-2820206/，如需轉載，請註明出處，否則將追究法律責任。
相關文章
- Vue+Laravel 個人部落格VueLaravel
- react全家桶+express實戰個人部落格系列教程ReactExpress
- Koa+Vue 實現仿GitHub風格的個人部落格系統VueGithub
- FastAPI專案實戰: 個人部落格專案的APIASTAPI
- hexo 實戰：（二）個人獨立部落格豪華裝修合集Hexo
- vue + koa2 + mongodb 搭建的個人部落格VueMongoDB
- 個人部落格程式
- 個人部落格分享
- 個人部落格地址
- 個人技術部落格
- 個人技術部落格（α）
- 搭建個人部落格
- 個人部落格配置
- 部落格園皮膚設定 - 第一版
- 個人部落格分享（Laravel + Vue 元件，支援全文檢索）LaravelVue元件
- 個人部落格搭建( wordpress )
- !!! 個人部落格地址更改
- hexo+GitHub部落格搭建實戰HexoGithub
- 新個人部落格地址，本部落格不再更新，謝謝！
- Vue.js+Egg.js+Mongodb 打造自己的個人部落格Vue.jsMongoDB
- vue + element +tp5 個人部落格後臺管理小記Vue
- hexo搭建個人部落格心得Hexo
- RUIBlog個人部落格UI
- Gob blog個人部落格Go
- React構建個人部落格React
- 使用 hexo 搭建個人部落格Hexo
- Django搭建個人部落格（二）Django
- Django搭建個人部落格：前言Django
- 個人部落格入門4
- 分享我的個人部落格
- React個人部落格開發React
- 搭建個人部落格總結
- 使用React搭建個人部落格React
- beego搭建個人部落格（一）Go
- beego搭建個人部落格（二）Go
- Github Pages 搭建個人部落格Github
- Vue部落格專案Vue
- Django 實戰練習-簡單部落格Django