js提示用户名不能为空_vue+node.js手把手教你搭建一个直播平台（五）-CSDN博客

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

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

1.api接口相关

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

/*

2.新增用户store

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

src/store/modules中新增user.js

/*

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

/*

3.登录注册切图

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

<div class="live-header-right">
            <Dropdown v-if="token&&currentUser.id">
                <section class="live-header-right-user">
                    <div class="live-header-right-user-avatar">
                        <img :src="currentUser.avatar"/>
                    </div>
                    <div class="live-header-right-user-name">
                        <div>{{currentUser.name}}</div>
                    </div>
                </section>
                <DropdownMenu slot="list">
                    <DropdownItem>
                        <div @click="userLogout">退出登录</div>
                    </DropdownItem>
                </DropdownMenu>
            </Dropdown>
            <section class="live-header-right-user" v-else>
                <div class="live-header-right-user-loginbtn" @click="loginPopupShow=true">登录/注册</div>
            </section>
        </div>
        <section>
            <Modal v-model="loginPopupShow" width="350px" :mask-closable="false" :footer-hide="true" :transfer="false">
                <Tabs>
                    <TabPane label="登录">
                        <Input name="account" style="margin:10px 0" prefix="ios-contact" placeholder="请输入账号" type="text" v-model="loginData.account" />
                        <Input name="password" style="margin:10px 0" prefix="ios-contact" placeholder="请输入密码" type="password" v-model="loginData.password"/>
                        <div align="right" style="margin-top:30px">
                            <Button type="primary" @click="userLogin">登录</Button>
                        </div>
                    </TabPane>
                    <TabPane label="注册">
                        <Form ref="registerData" :model="registerData" :rules="ruleRegistValidate" :label-width="60">
                            <FormItem label="昵称" prop="name">
                                <Input v-model="registerData.name" placeholder="请输入昵称" />
                            </FormItem>
                            <FormItem label="邮箱" prop="email">
                                <Input v-model="registerData.email" placeholder="请输入邮箱" />
                            </FormItem>
                            <FormItem label="密码" prop="password">
                                <Input v-model="registerData.password" placeholder="请输入密码" />
                            </FormItem>
                        </Form>
                        <div align="right">
                            <Button type="primary" @click="userRegister('registerData')">注册</Button>
                        </div>
                    </TabPane>
                </Tabs>
            </Modal>
        </section>

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

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