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}} </>