Vue实战(四)登录/注册页的实现

项目地址: Github
往期文章:
Vue实战(一)项目分析
Vue实战--(二)路由设计及导航栏开发
Vue实战(三)项目配置

登录界面

我写好的界面是这样的

• 背景图片的加载

  - 这里要注意的一件事情,就是因为Vue-cil自动安装了Img-loader模块，在我们npm run dev模拟服务器环境的时候，图片会被打包成base64格式，所以我们这里的图片引入与以前的方法不一样。

    

    
    //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: ''
})

• 配置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}}