实现网易云项目登录页面效果

1.新建总页面views / Me.vue , Login.vue

2.在 router/ index.js中联系其 与 App.vue

3.在 topNav.vue 中给"我的"加点击连接,跳转到 Me 页面

topNav.vue中

<span class="navBtn" @click="$router.push('/me')">我的</span>

4.登陆后跳/me 我的 , 未登陆点击跳 /login 登陆页面

router/index.js配置

引入

import store from '@/store/index.js'

{
    path: '/me',
    name: 'me',
 //进入个人中心之前,执行的路由生命周期函数,判断用户是否登陆
        /(判断条件是store中的user中的isLogin用户的登陆状态)
        
    beforeEnter:(to, from,next)=>{
      if(store.state.user.isLogin==true){//已登陆
        next()//代码向下执行进入me组件
      }else{//未登陆
        next("/login")//跳转到login路由
      }
    },
        
    component: () => import('../views/Me.vue')
  },
      
  {
    path: '/login',
    name: 'login',
    component: () => import('../views/listView.vue')
  }
​

store/index.js

user:{//保存的是用户登陆信息
    isLogin:false,//用户登陆状态
    account:{},//登陆id
    userDeatil:{}//用户详情
}

二.账号登陆

1.封装登陆接口

api /index.js

//用户登陆
// 调用例子 : /login/cellphone?phone=xxx&password=yyy  phone:用户账户  password:密码
export function phoneLogin(phone,password) {
    return axios.get(`${baseUrl}/login/cellphone?phone=${phone}&password=${password}`)
}

2.等用户登陆验证成功之后, 修改当前用户登陆状态

store/index.js

mutations中:

//定义setUser函数,修改当前用户登陆状态,等用户登陆验证成功之后
setUser(state, value) {
    state.user = value;
}

3.验证用户是否登陆成功

actions中:

 //验证用户是否登陆成功的函数
async phoneCheckLogin(content, payload) {
    let result = await api.phoneLogin(payload.phone, payload.password)
​
     //用户登陆成功,修改用户登陆状态为true
    if (result.data.code == 200) {
        content.state.user.isLogin=true
        content.state.user.account=result.data.account
 }
    
    return result
    // console.log(result)
}

4.绑定输入数据

Login.vue中

<input type="text" v-model="phone" id="username" placeholder="请输入手机号">

<input type="text" v-model="password" id="password" placeholder="请输入密码">

export default 中:

data() {
    return {
        phone: "", //账户
        password: ""  //密码
    }
},
methods: {
    //获取输入账号密码,触发store中登陆验证 phoneCheckLogin的函数
    loginEvent() {
        let res = this.$store.dispatch('phoneCheckLogin', 
        {phone: this.phone, password: this.password})
        console.log(res)
    }
}

三.我的页面

Me.vue

1.配置静态页面

2加返回到主页.

<a href="javascript:;" class="aui-navBar-item" @click="$router.push('/')">

获取用户详情

1.封装获取用户详情的api接口

api/ index . js

// 获取用户详情
// 说明 : 登录后调用此接口 , 传入用户 id, 可以获取用户详情
// 必选参数 : uid : 用户 id
// 接口地址 : /user/detail
// 调用例子 : /user/detail?uid=32953014
export function userDetail(uid) {
    return axios.get(`${baseUrl}/user/detail?uid=${uid}`)
}

2、调用获取用户详情接口，接收到用户详情，将用户详情保存到store.state.user.userDetail中

store / index.js

//获取当前用户登陆的详情
let res = await api.userDetail(result.data.account.id)//result . data . account . id当前登录用户的id
console.log(res)
content.state.user.userDeatil = res.data//将用户详情保存到state的user数据中

3、在个人中心页面访问用户详情的用户名

Me.vue:

<div class="aui-user-img">
    <img style="width:100%;height:100%;" :src="$store.state.user.userDeatil.profile.avatarUrl" alt="">
</div>
<div class="aui-user-text">
    <h1>{{$store.state.user.userDeatil.profile.nickname}}</h1>
    <span v-if="$store.state.user.userDeatil.profile.vipType==0"><i
            class="icon icon-vip"></i>您还未开通VIP</span>

四.退出登陆

1.给退出登陆添加点击事件 , 调用logout 函数

<div class="aui-flex-box">
    <p @click="logout">退出账号</p>
</div>

2. 配置 logout 函数

   methods:{
       logout(){//用户退出登陆
           this.$store.commit('deleteUser');
           localStorage.clear();//清空本地存储数据
           this.$router.push('/');
       }
   }

3.用户退出时,剔除user中用户登陆数据

store / index.js 中

deleteUser(state) {//用户退出时,剔除user中用户登陆数据
    state.user.isLogin = false;
    state.user.account = {};
    state.user.userDetail = {};
}