登录页,注册页实现

学习吖

已于 2022-09-14 12:47:26 修改

阅读量1k

点赞数 2

文章标签： vue.js 前端 javascript

于 2022-06-11 21:49:12 首次发布

本文链接：https://blog.csdn.net/weixin_68531033/article/details/125196845

版权

创建项目 vue create xiangm

自选

下载element ui npm i element-ui -S

官网导入main.js

注册页

通过element组件渲染出用户名,密码和确认密码给input进行双向绑定

在el-form组件和el-form-item组件分别添加:rules属性:model属性 :ref属性和prop属性

在data里面添加存储数据和存储校验数据

export default {
  name: 'Reg',
  data(){
    return {
      // 存储表单数据的对象
      regForm:{
        username:'',
        password:'',
        repassword:''
      },
      // 存储表单验证规则对象
      regFormRules:{
        username:[],
        password:[],
        repassword:[]
      }
    }
  }
}

必填项校验规则required:true 意识是必填项 message是提示信息 trigger:'blur'失去焦点触发

定义正则校验规则 pattern/^$/ 为输入正则校验 message:'提示信息' ,trigger:'blur'

确认密码校验模块

data(){
 var samePwd=(rule,value,callback)=>{
if(value===""){
callback(new Error('请您再次确认密码')) 
}else if(value!==this.regForm.password){
callback(new Error("两次密码不一致"))
}else{
 callback()
 }
 }
 }

提交注册模块

给注册绑定事件

开启兜底校验

this.$refs.regFormRef.validate(async valid=>{
 if(!valid) return
//开启 兜底校验
const {data:res}=await this.$http.post('/api/reg',this.regForm)
 if(res.code!==0) return this.$message.error(res.message)
  this.$message.success(res.message)
})

发送ajax请求

跳转到登录页 this.$router.push('/login)

登录页同注册页

1.给登录绑定事件

2.开启兜底校验

3.发送ajax请求

4.保存token到本地

 // 4.请求成功拿到token值res.token->保存到本地
  //4.1. 调用mutations中函数,传递token保存
this.$store.commit('mutations里面的函数',res.token)
//保存到本地
localStore.setItem('token',res.token)

5.跳转到首页

在 main.js中取出token

import Vue from 'vue'
import Vuex from 'vuex'

// 导入包
// import createPersistedState from 'vuex-persistedstate'
Vue.use(Vuex)

export default new Vuex.Store({
  // plugins:[createPersistedState ()],
  // 唯一存储数据的地方
  state: {
    // 4.3.定义token保存数据
    // 先从本地存储获取token
    // token:''
 token:localStorage.getItem('token') ||''

  },
 
  mutations: {
    // 唯一更新数据的地方
    // 获取state
    //4.2.定义更新函数 接收数据 使用state,实现数据更新
updateToken(state,payload){
  state.token=payload
}

  },
  actions: {
    // 实现异步更新的地方
  },
 
})

退出模块

在 src/store/index.js 中，定义 token 数据，以及更新 token 的 updateToken mutation 函数

import Vue from 'vue'
import Vuex from 'vuex'

// 导入包
// import createPersistedState from 'vuex-persistedstate'
Vue.use(Vuex)

export default new Vuex.Store({
  // plugins:[createPersistedState ()],
  // 唯一存储数据的地方
  state: {
    // 4.3.定义token保存数据
    // 先从本地存储获取token
    // token:''
 token:localStorage.getItem('token') ||''
  },
 
  mutations: {
    // 唯一更新数据的地方
    // 获取state
    //4.2.定义更新函数 接收数据 使用state,实现数据更新
    updateToken(state,payload){
     state.token=payload
    }
  },
  actions: {
    // 实现异步更新的地方
  },
 
})

在main.vue中实现退出功能

//绑定事件
   <el-menu-item index="2"><i class="el-icon-switch-button" @click="loginOut"></i>退出</el-menu-item>
      </el-menu>

methods:{
//弹出询问框
 loginOut(){
        this.$confirm('此操作将退出登录, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          // 清空token  调用mutations的方法 this.$store.commit('mutations里面的函数')
         this.$store.commit('updateToken',"")
          // 跳转到登录页
          this.$router.push('/login')
        }).catch(() => {
          
        });
  }
}

拓转

在 Login.vue 组件中，登录成功之后，调用 vuex 中的 updateToken 函数：

// 把 token 记录到 vuex 中
this.$store.commit('updateToken', res.token)

将数据持久化到vuex中

1 使用本地存储来实现

在src/views/Login模块中，存储数据

  // 实现登陆
    login() {
      // 1. 对表单进行预验证
      this.$refs.loginRef.validate(async (valid) => {
                // ... 
        // 将数据存储到本地存储中
        localStorage.setItem('token',res.token)
        // 跳转到首页
      });

在src/store/index.js

export default new Vuex.Store({ // 存储共享数据的对象 state: { // 存储token值 token: localStorage.getItem('token') || '' }, // ..... })

2 使用插件vuex-persistedstate实现持久化存储

运行如下的命令，安装持久化存储 vuex 中数据的第三方包：
```
npm install --save vuex-persistedstate@3.2.1
```

在 src/store/index.js 模块中，导入并配置 vuex-persistedstate 包：

import Vue from 'vue' import Vuex from 'vuex' 
// 1. 导入包
 import createPersistedState from 'vuex-persistedstate'

Vue.use(Vuex)

export default new Vuex.Store({ 
// 2. 配置为 vuex 的插件 
plugins: [createPersistedState()],
 state: { token: '' },
 mutations: { 
updateToken(state, newToken) { 
state.token = newToken
 } 
} 
})

左侧侧边栏个人信息

获取个人信息数据

需求页面一加载发送Ajax请求渲染数据

页面一加载 created里面调用 actions里面发送ajax请求的函数通过 mutations 定义函数来接收请求获取的数据在state里面定义函数来保存数据. 获取数据后在对应组件中通过辅助函数来使用state数据.

渲染个人信息数据

在组建中通过辅助函数获取到state里面的userInfo的值

渲染用户信息

<!-- 顶部的用户头像 -->
<template slot="title">
  <!-- 头像 -->
  <img :src="userInfo.user_pic" alt="" class="avatar" v-if="userInfo.user_pic" />
  <img src="../../assets/logo.png" alt="" class="avatar" v-else />
  <span>个人中心</span>
</template>

<!-- 左侧边栏的用户信息 -->
<el-aside width="200px">
  <div class="user-box">
    <img :src="userInfo.user_pic" alt="" v-if="userInfo.user_pic" />
    <img src="../../assets/logo.png" alt="" v-else />
    <span>欢迎 {{ userInfo.nickname || userInfo.username }}</span>
  </div>
</el-aside>

当用户上传了头像时显示用户的头像,用户没有上传头像时显示默认头像