Vue實戰(四)登陸/註冊頁的實現

項目地址: Github
往期文章:
Vue實戰(一)項目分析
Vue實戰--(二)路由設計及導航欄開發
Vue實戰(三)項目配置

登陸界面

我寫好的界面是這樣的

• 背景圖片的加載

  - 這裏要注意的一件事情,就是由於Vue-cil自動安裝了Img-loader模塊，在咱們npm run dev模擬服務器環境的時候，圖片會被打包成base64格式，因此咱們這裏的圖片引入與之前的方法不同。

<div class="login-warp" :style="{backgroundImage: 'url(' + BgImg + ')'}">
    </div>
    //BgImg爲背景圖片的路徑，存放在data中

參考文章：vue圖片引入的三種方式
vue 動態加載圖片src的解決辦法

Vuex 的配置

登陸狀態每一個組件都用的上，因此如今咱們要用上Vuex，在npm安裝好以後，咱們要在main.js中引入vueX

• 引入VueX

main.js

import store from './store/index'

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

• 配置Vuex

在src目錄下新建一個store文件夾用來存放Vuex的配置文件
store/index.ja

// store index.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)
// 初始化時用sessionStore.getItem('user'),這樣子刷新頁面就無需從新登陸
const state = {
  user: window.sessionStorage.getItem('user')
}
const mutations = {
  GET_USER: (state, data) => {
    // 把用戶名存起來
    state.user = data
    window.sessionStorage.setItem('user', data)
  },
  LOGOUT: (state) => {
    // 登出的時候要清除用戶名
    state.user = null
    window.sessionStorage.removeItem('user')
  }
}

const actions = {
}
export default new Vuex.Store({
  state,
  mutations,
  actions
})

登陸/註冊 功能的實現

參考文章：vue+axios新手實踐實現登錄

• Mock數據

首先Mock兩個假接口，
mock.js

Mock.mock('/login', (options) => {
  console.log(options.body)
  return options.body
})
Mock.mock('/register', (options) => {
  console.log(options.body)
  return options.body
})

• 發送axios請求

this.axios.post('/login', {
            user: this.validateForm.username,
            pass: this.validateForm.password
          })
            .then((response) => {
              if (response.status === 200) {
                var data = JSON.parse(response.data)
                this.$store.commit('GET_USER', data.user)
              }
            })

這樣子就實現了登陸功能

修改導航欄

導航欄中的 登陸/註冊 選項，若是用戶登陸了，就把它換爲用戶名，因此咱們要修改一下導航欄，這一功能能夠藉助v-if實現

//用戶未登陸
< v-if="!this.$store.state.user" >
    <>登陸/註冊</>
// 用戶已登陸,用戶名爲導航名
< v-else >
    <> {{this.$store.state.user}} </>