登录功能
项目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
。
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);
})
}
});
},