vue+node.js手把手教你搭建一个直播平台(五)

hello,好久不见呀!
老铁们,国庆过去了,该开始敲代码啦!赶紧瞧过来,告诉你们一个秘密,小羽悄咪咪的更新了~

不用怕,这节的内容比较简单,刚刚跟祖国母亲过完生日,脑子里还是想着怎么玩呢,哈哈哈!!!所以这节主要讲最常见的登录注册接口接入【狗头保命】

1.api接口相关

在src/api/modules新建user.js文件。在src/api/index.js中引入user.js。

image-20201015013101267
/*
 * @description: 用户接口
 * @author: 小羽
 * @lastEditors: 小羽
 * @Date: 2020-08-31 15:39:08
 * @LastEditTime: 2020-09-03 10:01:01
 * @Copyright: 1.0.0
 */
import baseEnv from "@/assets/js/env.js"
import axios from "@/assets/js/http.js"

class User{
    /**
     * @description: 用户登录接口
     * @Date: 2020-09-03 10:00:32
     * @author: 小羽
     * @param {type} 
     * @return {type} 
     */
    userLogin(params){
        return axios.post(`${baseEnv.webUrl}/users/login`,params).then(res=>{
            return res.data
        })
    }

    /**
     * @description: 获取用户信息
     * @Date: 2020-08-31 16:03:52
     * @author: 小羽
     * @param {type} 
     * @return {type} 
     */
    getUserInfo(id="LNsKeo69KLCuGrbNg0nlg2jwQDQub28C"){
        return axios.get(`${baseEnv.webUrl}/users/getUserInfo`,{params:{id:id}}).then(res=>{
            return res.data
        })
    }

    /**
     * @description: 新增用户
     * @Date: 2020-08-31 16:06:33
     * @author: 小羽
     * @param {type} 
     * @return {type} 
     */
    addUser(params){
        return axios.post(`${baseEnv.webUrl}/users/addUser`,params).then(res=>{
            return res.data
        })
    }
}
const user = new User()
export default user
/*
 * @description: 
 * @author: 小羽
 * @github: https://github.com/lyff1006
 * @lastEditors: 小羽
 * @Date: 2020-09-17 23:45:35
 * @LastEditTime: 2020-09-18 00:06:12
 * @Copyright: 1.0.0
 */
import livingRoomApi from "./modules/livingRoom"
import userApi from "./modules/user"

const apiObj = {
    livingRoomApi,
    userApi
}
export default apiObj

2.新增用户store

像用户相关信息的这种数据,可能会有很多个页面会用到,属于公共数据来着,总不能我们每次都要从数据库里面拉取我们想要数据吧,这样就会浪费很多不必要的资源,那可怎么办呢?聪明的小伙伴们一听到公共数据就想到解决方案了。没错,是它,是它,就是它,我们的英雄vuex~

src/store/modules中新增user.js

image-20201015013230626
/*
 * @description: 
 * @author: 小羽
 * @lastEditors: 小羽
 * @Date: 2020-09-01 13:43:51
 * @LastEditTime: 2020-10-15 01:16:59
 * @Copyright: 1.0.0
 */
const state = {
    currentUser:{},
    token:""
}
const actions = {}
const mutations = {
    updateCurrentUser(state,data){
        state.currentUser = data
    },
    updateToken(state){
        state.token = localStorage.getItem("living_token")
    }
}
const getters = {}

export default {
    state,
    actions,
    mutations,
    getters
}

修改src/store/index.js,引入刚刚新增的user.js

/*
 * @description: vuex统一入口
 * @author: 小羽
 * @lastEditors: 小羽
 * @Date: 2020-09-01 13:41:36
 * @LastEditTime: 2020-10-15 01:17:43
 * @Copyright: 1.0.0
 */
import Vue from 'vue'
import Vuex from 'vuex'
import room from "./modules/room"
import user from "./modules/user"
Vue.use(Vuex)

export default new Vuex.Store({
    modules:{
        room,
        user
    }
})

3.登录注册切图

修改头部导航组件中的登录注册模块,修改的地方如下。主要就是加入了登录注册的弹窗。

image-20201015010707462
{{currentUser.name}}
退出登录
登录/注册

修改头部组件的js脚本如下


然后试一下,登录/退出功能正常。

image-20201015014017695
image-20201015014048138

再试一下注册功能,哦豁,报错了!!!
查看报错文件,401token异常的报错,小case啦,后端加上白名单就ok啦~

image-20201015014338131
image-20201015014425766
app.use(expressJwt({
  secret:"living_xiaoyu",
  algorithms:['HS256'],
  credentialsRequired:true, //是否校验
}).unless({
  path:['/users/login','/livingRoom/roomList','/livingRoom/roomListByType','/livingRoom/roomDetail','/users/addUser']
}))

小结

帅到睡不着的小羽在本期主要带老铁们,接入直播平台的用户相关api接口,内容比较容易,都是聪明的童鞋们,一看就懂~

但是小羽还是得厚着脸皮(这帅气的小脸都不要了,呜呜呜),硬着头皮来骗波点赞和关注~

下期预告,不出意外的话,讲解弹幕模块相关。

ps:纯原创,转载请标明出处

你可能感兴趣的:(vue+node.js手把手教你搭建一个直播平台(五))