项目地址: 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}} </>