在線商城項目16-頭部前端邏輯修改

簡介

頭部右側之前有三個按鍵如下:



這是不合理的,我們應該根據(jù)登錄態(tài)來做一個區(qū)別顯示。未登錄情況下顯示login和購物車圖標。已登錄情況下顯示用戶名走搁,logout,購物車圖標迈窟。

本節(jié)有如下主要任務:

  1. 將用戶信息作為全局狀態(tài)進行管理
  2. 處理登入時的頭部前端邏輯
  3. 處理登出頭時的部前端邏輯

1. 將用戶信息作為全局狀態(tài)進行管理

頭部是公共組件私植,我們要求在所有引入頭部組件頁面中,都能根據(jù)用戶態(tài)區(qū)別顯示车酣。那么我們需要將用戶信息作為全局狀態(tài)進行管理.
step1 引入vue的全局狀態(tài)管理器vuex曲稼。

npm install vuex --save

step2 新建store目錄如下:



user.js

const user = {
  state: {
    isLogin: false,
    userName: ''
  },
  mutations: {
    LOG_IN: (state, payload) => {
      state.isLogin = true
      state.userName = payload.userName
    },
    LOG_OUT: (state, payload) => {
      state.isLogin = false
      state.userName = ''
    }
  }
}

export default user

index.js

import Vue from 'vue'
import Vuex from 'vuex'
import user from './modules/user'

Vue.use(Vuex)

const store = new Vuex.Store({
  modules: {
    user
  }
})

export default store

step3 在main.js中引入store

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'
import VueLazyLoad from 'vue-lazyload'

import './assets/css/base.css'
import './assets/css/login.css'
import './assets/css/product.css'

Vue.config.productionTip = false

Vue.use(VueLazyLoad, {
  loading: '../static/loading/loading-bars.svg',
  error: '../static/ok-2.png'
})

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})

2. 處理登入時的頭部前端邏輯

step1 修改PageHeader.vue邏輯如下

<template>
  <header class="header">
    <div class="navbar">
      <div class="navbar-left-container">
        <a href="/">
          <img class="navbar-brand-logo" src="../assets/logo.png"></a>
      </div>
      <div class="navbar-right-container" style="display: flex;">
        <div class="navbar-menu-container">
          <!--<a href="/" class="navbar-link">我的賬戶</a>-->
          <span class="navbar-link">{{user.userName}}</span>
          <a href="javascript:void(0)" class="navbar-link" v-if="!user.isLogin" @click="toPageLogin">Login</a>
          <a href="javascript:void(0)" class="navbar-link" v-else>Logout</a>
          <div class="navbar-cart-container">
            <span class="navbar-cart-count"></span>
            <a class="navbar-link navbar-cart-link" href="/#/cart">
              <svg class="navbar-cart-logo">
                <symbol id="icon-cart" viewBox="0 0 38 32">
                  <title>cart</title>
                  <path class="path1"
                        d="M37.759 0h-4.133c-0.733 0.004-1.337 0.549-1.434 1.255l-0.546 4.342c-0.081 0.484-0.496 0.849-0.997 0.849-0.005 0-0.009-0-0.014-0h-27.604c-0.003 0-0.007-0-0.011-0-1.674 0-3.031 1.357-3.031 3.031 0 0.34 0.056 0.666 0.159 0.971l2.52 8.062c0.385 1.194 1.486 2.043 2.785 2.043 0.126 0 0.25-0.008 0.372-0.023l22.983 0.002c0.515 0.131 0.626 0.768 0.626 1.283 0.005 0.044 0.009 0.095 0.009 0.146 0 0.501-0.294 0.933-0.718 1.134l-22.439 0.003c-0.354 0-0.642 0.287-0.642 0.642s0.287 0.642 0.642 0.642h22.745l0.131-0.071c0.919-0.392 1.551-1.287 1.551-2.33 0-0.058-0.002-0.116-0.006-0.173 0.021-0.108 0.033-0.24 0.033-0.376 0-1.072-0.732-1.973-1.724-2.23l-23.357-0.004c-0.063 0.008-0.135 0.013-0.209 0.013-0.719 0-1.332-0.455-1.566-1.093l-2.53-8.095c-0.048-0.154-0.076-0.332-0.076-0.515 0-0.973 0.782-1.764 1.752-1.778h27.657c1.159-0.004 2.112-0.883 2.232-2.011l0.547-4.345c0.010-0.083 0.078-0.147 0.161-0.152l4.133-0c0.354 0 0.642-0.287 0.642-0.642s-0.287-0.642-0.642-0.642z"></path>
                  <path class="path2"
                        d="M31.323 9.69c-0.022-0.003-0.048-0.004-0.074-0.004-0.328 0-0.598 0.248-0.633 0.567l-0.809 7.268c-0.003 0.022-0.004 0.048-0.004 0.074 0 0.328 0.248 0.598 0.567 0.633l0.074 0c0.001 0 0.003 0 0.004 0 0.327 0 0.596-0.246 0.632-0.563l0.809-7.268c0.003-0.022 0.004-0.048 0.004-0.074 0-0.328-0.248-0.598-0.567-0.633z"></path>
                  <path class="path3"
                        d="M27.514 25.594c-1.769 0-3.203 1.434-3.203 3.203s1.434 3.203 3.203 3.203c1.769 0 3.203-1.434 3.203-3.203s-1.434-3.203-3.203-3.203zM27.514 30.717c-1.060 0-1.92-0.86-1.92-1.92s0.86-1.92 1.92-1.92c1.060 0 1.92 0.86 1.92 1.92s-0.86 1.92-1.92 1.92z"></path>
                  <path class="path4"
                        d="M9.599 25.594c-1.769 0-3.203 1.434-3.203 3.203s1.434 3.203 3.203 3.203c1.769 0 3.203-1.434 3.203-3.203s-1.434-3.203-3.203-3.203zM9.599 30.717c-1.060 0-1.92-0.86-1.92-1.92s0.86-1.92 1.92-1.92c1.060 0 1.92 0.86 1.92 1.92s-0.86 1.92-1.92 1.92z"></path>
                </symbol>
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-cart"></use>
              </svg>
            </a>
          </div>
        </div>
      </div>
    </div>
  </header>
</template>

<script>
import { mapState } from 'vuex'

export default {
  computed: {
    ...mapState([
      'user'
    ])
  },
  methods: {
    // 跳轉登錄頁
    toPageLogin () {
      this.$router.push({ path: '/login', query: { redirect: this.$route.fullPath } })
    }
  }
}
</script>

step3 修改Login.vue
改動如下邏輯:

axios.post('/api/users/login', queryObj).then(res => {
        let data = (res && res.data) || {}
        if (data.code === '000') {
          let result = data.result || {}
          this.$store.commit('LOG_IN', {userName: result.userName})
          if (this.$route.query.redirect) {
            this.$router.push(this.$route.query.redirect)
          } else {
            this.$router.push('/')
          }
        } else {
          alert(`err:${data.msg || '系統(tǒng)錯誤'}`)
        }
      })

此時嘗試運行索绪,能正常跳轉到登錄頁,但是輸入第一遍用戶名和密碼時贫悄,并沒有跳轉瑞驱,第二遍才跳轉。因為這里button在form內窄坦,默認會執(zhí)行submit唤反。可以簡單地在該button中添加'type= button'鸭津,也可以將button挪到form外彤侍,不過此時userName和userPwd為空不再有提示,需要我們補充提示邏輯曙博。重新修改Login.vue如下:

<template>
  <div class="login">
    <div class="logo">
      <h1>weleome to six-tao</h1>
    </div>
    <form action="">
      <div class="item">
        <label for="userName">賬號:</label>
        <input type="text" placeholder="Username" v-model="userName" id="userName"/>
      </div>
      <div class="item">
        <label for="userPwd">密碼:</label>
        <input type="userPwd" placeholder="userPwd" v-model="userPwd" id="userPwd"/>
      </div>
      <div class="item err-tip" v-show="errTip">
        <label>提示:</label>
        <span>{{errTip}}</span>
      </div>
    </form>
    <div class="btn-wraper">
      <button id="loginButton" @click="login">登錄</button>
    </div>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data () {
    return {
      userName: '',
      userPwd: '',
      errTip: ''
    }
  },
  methods: {
    login () {
      if (!this.userName || !this.userPwd) {
        this.errTip = '用戶名和密碼不能為空'
        return
      }
      this.errTip = ''
      let queryObj = {
        userName: this.userName,
        userPwd: this.userPwd
      }
      axios.post('/api/users/login', queryObj).then(res => {
        let data = (res && res.data) || {}
        if (data.code === '000') {
          let result = data.result || {}
          this.$store.commit('LOG_IN', {userName: result.userName})
          if (this.$route.query.redirect) {
            this.$router.push(this.$route.query.redirect)
          } else {
            this.$router.push('/')
          }
        } else {
          alert(`err:${data.msg || '系統(tǒng)錯誤'}`)
        }
      })
    }
  }
}
</script>

<style scoped>
  .login {
    font-size: 12px;
    position: fixed;
    width: 300px;
    height: 240px;
    background-color: lightcyan;
    border-radius: 10px;
    padding: 10px 20px 10px 10px;
    margin-top: -120px;
    margin-left: -150px;
    top: 50%;
    left: 50%;
  }
  .item {
    display: flex;
    align-items: center;
    margin-top: 20px
  }
  .item label {
    width: 60px;
    font-size: 1.2em;
  }
  .item input {
    flex: 1;
    height: 40px;
    line-height: 40px;
  }
  .btn-wraper {
    display: flex;
    justify-content: center;
  }
  .err-tip {
    margin-top: 5px;
    color: red;
  }
  #loginButton {
    width: 100px;
    color: #85592e;
    margin-left: auto;
    margin-right: auto;
    margin-top: 30px;
    background: yellow;
    border-radius: 5px;
    border: 1px solid gray;
    font-size: 1.2em;
  }
  .logo {
    text-align: center;
  }
</style>

此時拥刻,我們再來運行一遍:


3. 處理登出時的頭部前端邏輯

修改PageHeader.vue以下兩處:

<a href="javascript:void(0)" class="navbar-link" v-else @click="logout">Logout</a>

logout () {
      this.$store.commit('LOG_OUT')
}

總結

這一節(jié)我們從前端角度完成了登入登出的頭部前端邏輯。但是仍然還有一些問題父泳,下一節(jié)我們繼續(xù)來完善。
提交一下代碼:
six-tao

git status
git diff
git add .
git status
git commit -am 'head logic changes to fit login'
git push
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末吴汪,一起剝皮案震驚了整個濱河市惠窄,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌漾橙,老刑警劉巖杆融,帶你破解...
    沈念sama閱讀 211,639評論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異霜运,居然都是意外死亡脾歇,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,277評論 3 385
  • 文/潘曉璐 我一進店門淘捡,熙熙樓的掌柜王于貴愁眉苦臉地迎上來藕各,“玉大人,你說我怎么就攤上這事焦除〖た觯” “怎么了?”我有些...
    開封第一講書人閱讀 157,221評論 0 348
  • 文/不壞的土叔 我叫張陵膘魄,是天一觀的道長乌逐。 經(jīng)常有香客問我,道長创葡,這世上最難降的妖魔是什么浙踢? 我笑而不...
    開封第一講書人閱讀 56,474評論 1 283
  • 正文 為了忘掉前任,我火速辦了婚禮灿渴,結果婚禮上洛波,老公的妹妹穿的比我還像新娘呐芥。我一直安慰自己,他們只是感情好奋岁,可當我...
    茶點故事閱讀 65,570評論 6 386
  • 文/花漫 我一把揭開白布思瘟。 她就那樣靜靜地躺著,像睡著了一般闻伶。 火紅的嫁衣襯著肌膚如雪滨攻。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,816評論 1 290
  • 那天蓝翰,我揣著相機與錄音光绕,去河邊找鬼。 笑死畜份,一個胖子當著我的面吹牛诞帐,可吹牛的內容都是我干的。 我是一名探鬼主播爆雹,決...
    沈念sama閱讀 38,957評論 3 408
  • 文/蒼蘭香墨 我猛地睜開眼停蕉,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了钙态?” 一聲冷哼從身側響起慧起,我...
    開封第一講書人閱讀 37,718評論 0 266
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎册倒,沒想到半個月后蚓挤,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,176評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡驻子,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 36,511評論 2 327
  • 正文 我和宋清朗相戀三年灿意,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片崇呵。...
    茶點故事閱讀 38,646評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡缤剧,死狀恐怖,靈堂內的尸體忽然破棺而出演熟,到底是詐尸還是另有隱情鞭执,我是刑警寧澤,帶...
    沈念sama閱讀 34,322評論 4 330
  • 正文 年R本政府宣布芒粹,位于F島的核電站兄纺,受9級特大地震影響,放射性物質發(fā)生泄漏化漆。R本人自食惡果不足惜估脆,卻給世界環(huán)境...
    茶點故事閱讀 39,934評論 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望座云。 院中可真熱鬧疙赠,春花似錦付材、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,755評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至捍岳,卻和暖如春富寿,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背锣夹。 一陣腳步聲響...
    開封第一講書人閱讀 31,987評論 1 266
  • 我被黑心中介騙來泰國打工页徐, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人银萍。 一個月前我還...
    沈念sama閱讀 46,358評論 2 360
  • 正文 我出身青樓变勇,卻偏偏與公主長得像贴唇,于是被迫代替她去往敵國和親搀绣。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 43,514評論 2 348

推薦閱讀更多精彩內容

  • 22年12月更新:個人網(wǎng)站關停滤蝠,如果仍舊對舊教程有興趣參考 Github 的markdown內容[https://...
    tangyefei閱讀 35,165評論 22 257
  • 哪些是淺嘗輒止豌熄? 哪些是長久投資? 哪些是興趣物咳? 哪些是事業(yè)? 職業(yè)這么多蹄皱,大家都想成為slash览闰,究竟先做什么再...
    小俠不是仙閱讀 144評論 0 0
  • 今年有一個商業(yè)巨變時代的建議,里面提到一句話:“如果有人給你在火箭上提供了一個位置巷折,那么压鉴,別管位置好壞,先上去再說...
    門前另一顆梨樹閱讀 223評論 0 1
  • 很久沒有玩英雄聯(lián)盟這個游戲了锻拘,從前在游戲里覺得很有成就的事比如五殺比如排位賽十幾連勝我也沒什么印象了油吭。讓我時不時記...
    花心大魔王閱讀 258評論 0 2