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

登录功能

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

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

把数据保存到store

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

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

export const mutations = {};

export const actions = {};

保存store到本地

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

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

思路

1. 保存用户信息到本地

实现步骤

保存用户信息到本地

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

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

1.安装插件

npm install --save vuex-persistedstate

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

import createPersistedState from 'vuex-persistedstate'

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

3. 导入插件

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

// 其他代码...

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

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

退出

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

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

注册功能

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

注册接口

// 注册
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);
            })
        } 
    });
},