前端博站項目階段總結

馬上就要大四了，眼看就要面臨畢業，即便我們再不想走出校園的溫室，也必須面對即将進入社會的事實，回首大一到大三，貌似一切平平，沒有獎學金，不是幹部，獎也得的特别少，是以為了不讓自己畢業就失業，大三的時候自學了web前端，最近準備找實習工作，努力想要寫一份不錯的履歷吧，是真的不知道怎麼寫，是以就準備用一些時間寫一個拿的出手的項目，也就是《前端博站》，還沒有做完，隻是進行一個階段性的總結

項目中用到的技術：

HTML，CSS，JS，Vue(相關：vue-cli,vue-router,vuex)，axios ,借助json-server搭建的本地資料接口

實作的大緻功能

1、登入、注冊

注冊實作：姓名，密碼，确認密碼，郵箱

登入實作：姓名，密碼，驗證碼，記住

注冊描述：

1. 都不能為空，為空的話會有重新輸入提示
2. 密碼必須是6-12位，如果不在這個範圍内也會有錯誤提示
3. 确認密碼必須和密碼一樣，如果不一樣，會有錯誤提示
4. 郵箱格式要為正确的郵箱格式，如果不正确也會有錯誤提示 
5. 如果上面的條件有一個不正确，點選注冊都會有錯誤提示，隻有滿足設定的條件，才能夠成功注冊

登入描述：

1. 姓名、密碼、驗證碼不能為空，如果為空，會有錯誤提示
2. 姓名和密碼必須是已經注冊過的，才能登入成功，如果有一個錯誤，就會有錯誤提示，登入不成功

2、首頁功能描述

首頁有三個可以互動的地方：登入、部落格總覽、寫部落格

登入：如果點選登入按鈕，可以跳轉到登入界面，進行登入（沒有注冊過的要先注冊） ，登入之後直接跳轉到背景管理界面

部落格總覽：這個無需登入即可進入

寫部落格：必須登入之後，才能夠進入到寫部落格的界面，如果沒有登入，點選這個按鈕，會自動跳轉到登入界面，登入之後直接跳轉到寫部落格界面

3、背景管理界面功能描述

面包屑導航 

背景管理頁面有：部落格總覽、寫部落格、管理部落格、社群留言、個人介紹

部落格總覽和個人介紹頁面無需登入也可浏覽，但寫部落格，部落格管理和社群留言必須是登入後才可進入相應的頁面，如果沒有登入，點選對應的導航會自動那個切換到登入界面，登入成功後直接跳轉到我們想要到達的頁面

社群留言和個人介紹會為實作，其他三個除了樣式沒有那麼美觀，功能大部分實作

部落格總覽功能：搜尋、點選進入單個部落格頁面

搜尋：輸入想要搜尋的資訊，符合條件的會展示在頁面中，不符合的不展示在頁面中

點選進入單個頁面：如果沒有登入，進入單頁面後不能進行編輯和删除，隻能檢視，如果已經登入的話，可以執行編輯和删除操作 

寫部落格功能：這個很簡單了，有标題、内容、類别、作者

部落格管理功能： 按類别展示不同類别的部落格，并計算部落格條數，可以檢視或删除部落格

 （其他的還沒實作，後續實作之後會再總結的）

到目前為止實作的大緻功能就是這些，有些小的細節就不再贅述了

技術實作總結

簡單技術總結

擷取和發送資料：利用axios實作的

面包屑導航功能實作：使用了vue中的深度監控（watch）,檢測導航變化

判斷是否登入：使用vuex統一管理登入狀态

搜尋功能實作： 使用的是vue中的過濾器（filters）

彩虹标題的實作：借助vue中的自定義指令

注冊驗證：點選注冊按鈕的時候，怎麼判斷是否都符合标準？

• 在data中定義一個變量為對象，定義幾個屬性（根據需要而定），為false，在驗證每一項的時候，驗證成功的，讓對應的屬性變為true，在最後點選注冊的時候，隻有當幾個屬性值都為true時，才發送資料，否則就提示注冊錯誤

登入驗證：點選登入按鈕的時候，驗證是否有注冊，怎麼實作？

• 周遊所有的注冊資料，如果有名字和登入的名字一樣的，将其取出，然後再用登入輸入的密碼和取出的密碼是否相同，隻有都相同的時候，才算登入成功，否則登入失敗

偏難點技術總結

 前端怎麼說呐，說難不難，說簡單也不簡單，隻要知識掌握的好，邏輯想清楚了，其實都還挺好實作的，那我就主要把我有點卡克的地方總結一下，避免下次範同樣的錯誤（即便範了，看一下這篇部落格也可以很容易想出來^o^）

1、有的頁面不需要登入就可進入，而有的頁面必須登入後才能進入，怎麼實作？

• 為需要登入的頁面的路由添加meta，标記一下
• 借助全局導航守衛
• 路由對象中有一個match，存儲着我們将要到的頁面的父路由和子路由資訊，周遊它，找到我們添加的标記

核心代碼如下：

router.beforeEach((to,from,next)=>{
  if(to.matched.some((item)=>item.meta.login)){
    let isLogin = store.state.isLogin
    if(isLogin){
      next()
    }else{
      router.push({
        path:"/login",
        query:{
          redirect:to.path.slice(1)
        }
      })
    }
  }else{
    next()
  }
})
           

2、登入成功後怎麼知道要跳轉到哪個頁面？

這個其實可以和上面的問題合并到一起解決，就是在我們即将要進入一個頁面的時候，如果需要登入而我們沒有登入，就需要進入到登入頁面，在進入登入頁面之前，記錄我們想要進入頁面的路徑，使用的方法就是在登入頁面的路徑後面添加一個查詢字元串即可，看上面的代碼

ok，就先總結到這裡吧