vue粒子效果的登錄頁實現

關鍵詞：vue、個人博客、flask、粒子效果、登錄頁面

hello, 親愛的兄弟姐妹們，時隔幾天在工作之餘，終於把登錄頁面寫出來了（暫不考慮數據交互）

說起這幾天的學習經歷，那真是一把鼻涕一把淚。今天我就把開發過程中用到的知識點，和踩得坑

跟小夥伴們分享一下，也給想自己動手實現一個炫酷效果的小夥伴一個指引。

先給大家看下效果圖：

登錄頁

下面講下我是如何實現的。

開始之前最好先理清一個概念，什麼是單頁面應用（SPA），什麼是多頁面應用？

這是我們做的第二個頁面，這時候就要考慮是做成單頁面還是多頁面。本來我也不知道這個概念

畢竟不是做前端的，那為什麼我又突然知道了。那是因為我踩到坑了，而且至今沒有解決。

是關於單頁面應用中的canvas的問題，下面有詳細踩坑經歷。

• 頁面內容佈局

1.新建 Login.vue

<template>
 

 

 \t

 \t\t
博客管理系統

 \t

 \t 

 

 <vue-particles> color="#fff"
 :particleOpacity="0.7"
 :particlesNumber="60"
 shapeType="circle"
 :particleSize="4"
 linesColor="#fff"
 :linesWidth="1"
 :lineLinked="true"
 :lineOpacity="0.4"
 :linesDistance="150"
 :moveSpeed="2"
 :hoverEffect="true"
 hoverMode="grab"
 :clickEffect="true"
 clickMode="push"
 class="lizi">
 /<vue-particles>
 

/<template>

<style><br> @import '../assets/css/login.css';<br>/<style>

佈局是一堆div, 大概如圖所示這樣構思的：

當然每個人有每個人的佈局方法，畢竟能達到效果就好。

針對每個div的樣式，我直接貼代碼吧。

.login-layout {
 width: 400px;
 height: 300px;
 position: absolute;
 top: 50%;
 left: 50%;
 margin-top: -150px;
 margin-left: -200px;
 color: #FFF;
}
.top {
 text-align: center;
 margin: 20px 0px;
 font-size: 22px;
 font-weight: bold;
}
label {
 display: inline-block;
/* background-color: yellow;*/
 width: 100px;
 font-size: 20px;
 text-align: right;
}
input {
 width: 200px;
 height: 40px;
 margin: 10px 0px;
 border-radius: 2px;
 outline-style: none;
 border: 1px solid #ccc;
}
#form-btn {
 text-align: center;
}
#form-btn > button {
 width: 150px;
 height: 40px;
 background-color: #009688;
 color:#fff;
 border: 0px; 

 border-radius: 3px;
 margin: 20px 0px;
 font-size: 20px;
 letter-spacing: 1em;
 text-indent: 1em;
}
.lizi {
 background-color: #333;
}

• 遇到的問題

1. SPA應用中，我想給登錄也單獨一個背景如何處理？

因為是單頁面應用，所有頁面共用一個body，如果我在公共樣式中，給body一個背景，那麼所有頁面

都擁有這個背景。這個問題如何處理呢？ 在我沒用粒子效果插件之前，我是通過給最外層的div一個絕對定位 position: absolute; 同時with:100%; height: 100%;

2, 粒子效果

簡單的搜了下，實現方式有兩種，第一種vue自帶粒子效果插件，第二種，通過html5 的canvas標籤，

自己畫出來。高傲如我怎麼可能用插件，這樣顯得自己多low, 於是乎，我進了一個巨坑，至今沒有出來

（┭┮﹏┭┮）

不用插件是怎麼坑的呢?

自己在網上找的別人寫好的粒子效果js，在把它嵌入到代碼中發現，登錄頁完美實現，唯一的問題也是最致命的問題就是，當從登陸也返回，這個粒子效果

會影響到首頁。剛開始以為是定位問題（因為我在想是不是絕對定位導致元素脫離了文檔流，導致登錄頁返回首頁時，登錄頁組件沒能清理），什麼fixed、relative、absolute等全試了一把，發現沒什麼效果，該問題依然存在。至此定位導致的排除。

後來又想是不是z-index導致的，但是轉瞬間就拋棄了這個想法，因為z-index只控制z軸順序，和頁面切來切去的沒關係。

最後發現vue有一個生命週期的概念，可以在生命週期結束之後做一些動作，於是覺得找到答案了。就在beforeDestroy() {} 中寫下對於canvas的清理動作，結果一運行，F12發現報錯，後來仔細理解了下生命週期的概念，發現在調用beforeDestroy之前，元素已經被清除，通過document.getELementById() 是拿不到元素的。

至此，這個問題仍沒有解決，盼望有位大神能給小弟講解下。

插件實現就簡單了:

cnpm install vue-particles --save-dev # 安裝vue-particles

在main.js中加入以下代碼

import VueParticles from 'vue-particles'

Vue.use(VueParticles)

在login.vue添加插件元素

<vue-particles> color="#fff" 粒子顏色
 :particleOpacity="0.7" 粒子透明度
 :particlesNumber="60" 粒子數量
 shapeType="circle" 粒子形狀
 :particleSize="4" 粒子大小
 linesColor="#fff" 粒子間連線顏色
 :linesWidth="1" 粒子間連線寬度
 :lineLinked="true" 連線是否可用
 :lineOpacity="0.4" 連線透明度
 :linesDistance="150" 線條距離
 :moveSpeed="2" 移動速度
 :hoverEffect="true" 是否有hover效果
 hoverMode="grab" hover模式
 :clickEffect="true" 是否有click特效
 clickMode="push" 可用的click模式
 class="lizi">
 /<vue-particles>

最後給lizi 添加一個背景色

.lizi {
 background-color: #333;
}

至此大功告成。延伸思考，單頁面如何做seo優化，以及首頁加載速度提升？

目前已知方案，SSR, prerender-spa-plugin結合vue-meta-info, Prerender.io, 總之目前瞭解的很淺，等項目寫好以後再考慮吧，先在心裡有個數。