Vue實戰狗尾草博客管理平臺第四章
本章主要內容以下：
-
填補上期的坑。css
-
html
-
開發登陸頁面前端
填坑
-
上期中咱們功能都已正常使用。但不知道有沒有小夥伴測試過error頁面，當訪問地址不存在時，路由是否能正常挑戰error頁面。vue
實際上是不能的，由於上期的路由配置中，對404，頁面及通配符頁面的auth沒有關掉，致使，在沒有登陸的狀況下，404頁面是進不去的。必須先進行登陸。因此這是不合適的。這裏你們須要先關掉auth。web
-
router>permission.js文件中，咱們在校驗到沒有登陸的時候會跳轉到登陸頁面，並將當前路由做爲參數傳過去，這裏上一節，這裏參數的傳遞是使用不正確的。這裏作出修改：npm
import VueCookies from 'vue-cookies'; import router from './index'; // 全局鉤子函數 // to: Route: 即將要進入的目標 路由對象 // from: Route: 當前導航正要離開的路由 // next: Function: 必定要調用該方法來 resolve 這個鉤子。執行效果依賴 next 方法的調用參數。 // next(): 進行管道中的下一個鉤子。若是所有鉤子執行完了，則導航的狀態就是 confirmed （確認的）。 // next(false): 中斷當前的導航。若是瀏覽器的 URL 改變了（多是用戶手動或者瀏覽器後退按鈕），那麼 URL 地址會重置到 from 路由對應的地址。 // next('/') 或者 next({ path: '/' }): 跳轉到一個不一樣的地址。當前的導航被中斷，而後進行一個新的導航。 // 確保要調用 next 方法，不然鉤子就不會被 resolved。 router.beforeEach((to, from, next) => { if (to.meta.title) { document.title = to.meta.title ? to.meta.title : '狗尾草博客管理系統'; } // 判斷是否須要登陸權限 if (to.matched.some(res => res.meta.auth)) { // 判斷是否登陸 if (VueCookies.isKey('isLogin')) { console.log('已登陸'); next() } else { next({ name: "Login", query: {url:to.fullPath} }) // 沒登陸則跳轉到登陸界面 } } else { next() } }); router.afterEach((to, from) => { //跳轉後你要作的事情 }) export default router
Iconfont倉庫關聯
iconfont字體相似於圖標，但實質上倒是字體，使用方便，和使用字體同樣。不一樣於圖片的是，體積很是小。並且顏色大小等更改很方便，這也是不少人青睞的緣由。瀏覽器
具體的配置有不少種，度娘能夠告訴你。服務器
這裏狗尾草只提兩種基本的使用方式cookie
下載依賴文件到本地。less
直接使用遠程
打開iconfont官網。選擇上方nav圖標管理，個人項目
而後右側點擊新建項目
一次輸入項目名稱，描述成員等主要信息。隨後保存
這裏我輸入的項目名稱是gwc_manage開發成員就是我本身啦。隨後就能夠看到項目已經建立好了，可是該項目下並無任何一個圖標。好，到這裏就先放下。基本的已經完成。
隨後咱們在上方搜索圖標，這裏咱們要開發登陸頁面，因此咱們就先搜索一個顯示和隱藏吧
找到合適的圖標後，鼠標滑到上方添加到購物車，放心這裏的購物車不會放你進行付款。別懼怕孩子。將全部想要的圖標找到後都添加進購物車。
咱們就能夠看到右上角購物車有咱們添加的圖標啦。
下來點擊它，而後加入項目，添加進咱們的gwc_manage項目
確認保存。圖標管理，個人項目 回到個人項目中，能夠看到添加的兩個圖標到了項目中。咱們1. 點擊下載至本地。
解壓後如圖所示，將這些文件引入到項目中的assets下的iconfont的文件中。隨後更改文件路徑，具體不作說明，度娘上很齊全。路徑更改後，咱們打開demo_index.html文件就能夠看到咱們的iconfont碼，在項目中，咱們只須要建立i標籤，class="iconfont "後添加對應的類名或者標籤中使用iconfont碼便可。不過須要記得在使用結束後能夠將iconfont.woff2和這個html文件刪除掉，由於他是不須要用到的，放着還佔用內存。
-
第二種引入方式
咱們回到iconfont的項目中，點擊生成代碼，查看在線連接。就能夠看到在線的iconfont代碼。咱們直接複製這個代碼
在assets的styles下建立iconfont.css文件。然後吧這串代碼輔助到這裏，而後在index.css文件中引入該iconfont文件。由於前面咱們配置過了，因此這裏index.css文件中引入事後全局也就可使用了，不過須要注意的是：
咱們除了複製上線的代碼，咱們還須要在下面添加：
.iconfont { font-family: "iconfont" !important; font-size: 16px; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
這樣就可使用了。直接複製iconfont項目中的iconfont碼，到咱們的標籤中，咱們也就可使用了。
登陸頁面開發
這裏話很少，直接上代碼。沒啥東西。裏頭有些東西好比：靜態資源服務器的使用後面會給你們講到
<template> <div class="login-wrap"> <vue-particles class="particles" color="#dedede" :particleOpacity="0.7" :particlesNumber="80" shapeType="circle" :particleSize="4" linesColor="#dedede" :linesWidth="1" :lineLinked="true" :lineOpacity="0.4" :linesDistance="150" :moveSpeed="3" :hoverEffect="true" hoverMode="grab" :clickEffect="true" clickMode="push"> </vue-particles> <div class="login-panel tc"> <el-row class="df-c"> <el-image class="head df-c" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1532412479772&di=054181aa27a78980933091e0fd338d3f&imgtype=0&src=http%3A%2F%2Fimg5.duitang.com%2Fuploads%2Fitem%2F201409%2F21%2F20140921125932_2mAvm.thumb.700_0.jpeg"> <div slot="placeholder" class="image-slot"> Loading... </div> <div slot="error"> <i class="el-icon-picture-outline"></i> </div> </el-image> </el-row> <el-row class="title">狗尾草博客管理平臺</el-row> <el-row type="flex" align="middle"> <el-input type="text" placeholder="請輸入帳號" v-model="loginInfo.account"></el-input> <el-input :type="isShow?'text':'password'" placeholder="請輸入密碼" v-model="loginInfo.password"> <i slot="suffix" v-show="isShow" title="隱藏密碼" @click="isShow = !isShow" style="cursor:pointer;" class="iconfont icon-login"></i> <i slot="suffix" v-show="!isShow" title="顯示密碼" @click="isShow = !isShow" style="cursor:pointer;" class="iconfont icon-login"></i> </el-input> <el-button plain @click.native="Login">Login</el-button> </el-row> </div> </div> </template> <script> export default { data() { return { isShow: false, loginInfo: { account: "", password: "", } } }, methods: { // 數據校驗 valiData() { let loginInfo = this.loginInfo; if(!loginInfo.account) { this.$message({ type: 'info', message: "登陸帳號不能爲空" }) return false; } if(!loginInfo.password) { this.$message({ type: 'info', message: '登陸密碼不能爲空' }) return false; } return true; }, Login() { console.log(this.$router.query); let isOk = this.valiData(); if(!isOk) { return false; } this.$cookies.set('isLogin',true); console.log('登陸',this.loginInfo); this.$router.push({ path: '/' }) } } } </script> <style lang="less" scoped> .login-wrap { width: 100%; height: 100%; display: flex; justify-content: center; background: url('http://static.bgwhite.cn/gwc_manage_them.jpeg') no-repeat center; background-size: cover; background-color: #333333; overflow: hidden; .particles { width: 100%; height: 100%; overflow: hidden; position: absolute; left: 0; top: 0; z-index: 1; } .login-panel { color: #ffffff; width: 40%; height: 200px; z-index: 2; position: relative; margin: 10% auto 0; padding: 20px; background-color: rgba(0,0,0,.4); &:after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(255,255,255,0.8); z-index: -1; background: url('http://static.bgwhite.cn/gwc_manage_them.jpeg') no-repeat center top; background-size: cover; background-attachment: fixed; -webkit-filter: blur(20px); -moz-filter: blur(20px); -ms-filter: blur(20px); -o-filter: blur(20px); filter: blur(20px); margin: -15px; }//登陸面板毛玻璃效果 .head { width: 90px; height: 90px; border-radius: 50%; overflow: hidden; } .title { margin: 20px 0; } /deep/.el-input__inner { background-color: transparent; border: 1px solid #ffffff; color: #ffffff; height: 30px; line-height: 30px; font-size: 12px; border-radius: 0; &:first-child { border-right: 0; } } /deep/.el-button { border: 1px solid #ffffff; border-radius: 0; font-size: 12px; background-color: transparent; height: 30px; line-height: 30px; padding: 0 10px; } .icon-login { line-height: 30px; } } } </style>