脚本宝典收集整理的这篇文章主要介绍了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,在npm安装好之后,我们要在main.js中引入vueX
main.js
import store from './store/index'
new Vue({
el: '#app',
router,
store,
components: { App },
template: '<App/>'
})
在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.js
Mock.mock('/login', (options) => {
console.log(options.body)
return options.body
})
Mock.mock('/register', (options) => {
console.log(options.body)
return options.body
})
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}} </>
以上是脚本宝典为你收集整理的Vue实战(四)登录/注册页的实现全部内容,希望文章能够帮你解决Vue实战(四)登录/注册页的实现所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。