闲云旅游网03（基于vue+element ui）登录注册功能开发

登录功能

项目GitHub地址：https://github.com/q2419068625/xianyun

新建登录注册页的布局
新建了登录的表单
绑定了数据到data
rules表单的验证
提交数据到接口

把数据保存到store

在store新建了user.js用于保存用户的信息数据
在登录成功之后调用user.js的设置用户信息的方法
把用户数据渲染到header.vue

// 用户管理
export const state = () => ({// 采用接口返回的数据结构userInfo: {token: "",user: {},},
}) export const mutations = {};export const actions = {};

保存`store`到本地

现在用户已经保存到store了，但是还有一个问题，数据是保存在缓存中的，如果页面一刷新，那么数据就会不见了，这样是不合理的。

所以我们需要使用localStorage把数据保存到本地，但是由于nuxtjs是运行在服务器的，不能直接在store中使用浏览器的方法，所以我们需要依赖一些判断和插件。

思路

保存用户信息到本地

实现步骤

保存用户信息到本地

nuxtjs中store不能直接在浏览器的lcoalStorage方法，所以我们需要依赖一个插件vuex-persistedstate，该插件会把本地存储的数据读取到store。

插件地址：https://github.com/robinvdvleuten/vuex-persistedstate

1.安装插件

npm install --save vuex-persistedstate

在根目录plugins中新建文件localStorage.js，加入以下代码

import createPersistedState from 'vuex-persistedstate'export default ({store}) => {window.onNuxtReady(() => {createPersistedState({key: "store", // 读取本地存储的数据到store})(store)})
}

导入插件

修改nuxt.config.js配置文件，在plugins配置项中新增一条数据

// 其他代码...plugins: [// 其他代码...{ src: '@/plugins/localStorage', ssr: false }
],// 其他代码...

修改完后重新启动项目即可。

退出

在user.js的mutations下新建删除本地数据的方法
点击退出按钮时候调用

export const mutations = {//设置用户数据setUserInfo(state,data){state.userInfo = data},//清空用户数据clearUserInfo(state){state.userInfo = {token:'',user:{}}}
}

注册功能

在components/user中新建register.vue表单组件
使用Element-ui的表单组件
表单数据绑定
表单验证
发送手机验证码
注册接口

注册接口

// 注册
handleRegSubmit(){this.$refs['form'].validate((valid) => {if (valid) {// 注册提交const {checkPassword, ...props} = this.regForm;this.$axios({url: `/accounts/register`,method: "POST",data: props}).then(res => {console.log(res.data);})} });
},

闲云旅游网03（基于vue+element ui）登录注册功能开发相关推荐

基于vue(element ui) + ssm + shiro 的权限框架
zhcc 基于vue(element ui) + ssm + shiro 的权限框架引言心声现在的Java世界,各种资源很丰富,不得不说,从分布式,服务化,orm,再到前端控制,权限等等玲琅满目 ...
前端基于vue企业微信JS-SDK语音识别功能开发（同公众号）
前端基于vue企业微信JS-SDK语音识别功能开发(同公众号) 微信JS-SDK 1.前期准备前端代码撰写微信JS-SDK 前端需要实现一个功能,如录音,拍照,分享,地理位置等,前端想要实现这些功 ...
php注册登录描述,基于PHP实现用户登录注册功能的详细教程
教程前先给大家看看小编的实现成果吧! 图1: 图2: 图3: 教程: 实现这个功能我们需要五个php文件: login.php (登录界面,如图2) 登录登录页面用户名: required=&qu ...
基于Vue+Element UI+Node+MongoDB的医院门诊预约挂号系统
目录概述 3 系统目标 3 需求分析 3 功能需求 3 非功能需求 4 设计 4 数据库设计 4 数据库说明 4 数据结构 4 接口设计 5 登录 5 注册.添加信息 6 查询信息 6 查询全部病人 ...
Vue项目二登录注册功能的实现
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录前言一.系统注册功能的实现 1.配置注册页面路由 2.注册页面的搭建 3.api下发送ajax请求的文件创建二.后台数据 ...
闲云旅游网02（基于vue+element ui）
首页开发项目GitHub地址:https://github.com/q2419068625/xianyun 新建公共组件在components中新建应用统一的头部组件和页脚组件. 在默认布局中la ...
闲云旅游网04（基于vue+element ui）完成机票数据列表渲染
机票列表页渲染列表数据项目GitHub地址:https://github.com/q2419068625/xianyun 1.请求接口数据 <template><section ...
闲云旅游网01（基于vue+element ui）
1.初始化项目使用官网提供的脚手架工具 create-nuxt-app,创建一个nuxtjs项目. npx create-nuxt-app xianyun 需要等待片刻安装依赖的下载,下载完成后可以 ...
vue+element ui+腾讯云开发打造会员管理系统之实战教程（三）系统登录
目录登录逻辑邮箱登录配置登录逻辑用户注册功能注册页面效果激活邮件代码配置程序预览源码登录逻辑 elment脚手架本身已经实现了登录逻辑,但是结合项目本身还需要进行改造,因为腾讯云开 ...

闲云旅游网03（基于vue+element ui）登录注册功能开发

登录功能

把数据保存到store

保存`store`到本地

思路

实现步骤

保存用户信息到本地

退出

注册功能

注册接口

闲云旅游网03（基于vue+element ui）登录注册功能开发相关推荐

最新文章

热门文章

闲云旅游网03（基于vue+element ui）登录注册功能开发

登录功能

把数据保存到store

保存store到本地

思路

实现步骤

保存用户信息到本地

退出

注册功能

注册接口

闲云旅游网03（基于vue+element ui）登录注册功能开发相关推荐

最新文章

热门文章

保存`store`到本地