用Vue實現個人部落格的前端介面1
學習如何使用vue-cli,去元件化的開發一個專案;以及如何使用路由vue-router,完成頁面之間的跳轉;還有vuex如何管理頁面之間需要互動的全域性資料;如何使用vue-resource跨域請求,node後臺又如何配置。
一. 使用的技術棧
後臺:nodejs + express + mongodb + mongoose
前端:vue + vue-router + vuex + vue-router
後臺是自己之前就寫過的一個基於nodejs的個人部落格的練習,當時是轉發頁面的形式,即將頁面和資料一同傳給瀏覽器,現在只是改成介面的形式,只發送資料,感興趣的同學可以去github下載:https://github.com/SpiritLiftedHigh/BlogAPI
二. 專案預覽
略
三. 一些問題的解決
1 . 頁面靜態資源的配置:
(1)將圖片資源放在static資料夾中
一開始,覺得靜態資源都應該發在assets資料夾的,可是因為圖片的名字是存在伺服器端的,在渲染頁面時,圖 片的路徑需要使用字串拼接,發現如果將路徑寫成靜態的就會直接對映到static目錄下,可是如果是動態拼接的話,就不能成功對映。
(2)bootstrap的部署
因為bootstrap是完全依賴jQuery的,所以要使用bootstrap,就必須先下載並配置jQuery。如下:
開啟build/webpack.base.conf.js,新增如下配置:
plugins: [
new webpack.optimize.CommonsChunkPlugin('common.js'),
new webpack.ProvidePlugin({
jQuery: "jquery",
$: "jquery"
})
],
將resolve改為入下的配置:
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
'bootstrap':resolve('src/assets/bootstrap'),
}
}
在main.js中直接匯入:
import './assets/bootstrap/css/bootstrap.min.css'
import './assets/bootstrap/js/bootstrap.min.js'
2 . vuex的使用
首先下載,然後進入main.js檔案,並新增如下程式碼:
import Vuex from 'vuex'
Vue.use(Vuex)
const vuex_store = new Vuex.Store({
state:{
totalmess: 0, //未讀訊息總數,在footer公用元件
title: '登入' //每個頁面的名稱,在nav公用元件中
},
mutations:{
}
})
new Vue({
el: '#app',
router,
template: '<App/>',
components: { App },
store: vuex_store //注入vue例項中,這樣所有元件都可以獲取
})
在nav元件中的使用:
<div class="header"><span>{{this.$store.state.title}}</span></div>
在其他元件中的使用,比如訊息顯示頁面:
this.$store.state.title = '訊息';
這樣每個元件中的變化,都可以體現在nav公用元件中。
3 . 路由之間的跳轉和引數的傳遞,以及獲取
(1)路由的跳轉(在程式碼中動態跳轉):
this.$router.push({path: '/list'});
(2)通過連結跳轉時的傳參和獲取引數
路由的配置:
export default new Router({
routes: [
{
path: '/blog/:id',
name: 'blog',
component: blog
}
]
})
跳轉傳參:
<router-link :to="{path: '/blog/' + blog._id}"></router-link>
獲取引數:
let blogid = this.$route.params.id;
4 . vue-resource跨域請求,儲存session
在後臺配置好的情況下,必須要傳送cookie,不然後臺不能儲存session,所以在每次請求時都必須傳送cookie
this.$http.get(url, {
withCredentials: true //開啟cookie
}).then( res => {
//
}).catch( error => {
//
})
後臺介面API:https://github.com/SpiritLiftedHigh/BlogAPI
前端vue實現:https://github.com/SpiritLiftedHigh/xiaojingBlog