注册登录前端

目录

• 一、前端注册页面分析
  • 1.1 Header.vue分析
  • 1.2 Login.vue分析
• 二、前端登录注册页面复制
  • 2.1 Login.vue
  • 2.2 Register.vue
  • 2.3 Header.vue
• 三、前端登录功能，js代码
• 四、前端注册功能，js代码
• 五、Header.vue功能
• 六、把elementui中的消息封装成插件
  • plugins/index.js
  • main.js
  • 组件中使用：eg:Login.vue

一、前端注册页面分析

# 登录，注册，都写成组件----> 在任意页面中，都能点击显示登录模态框
# 写好的组件，应该放在那个组件中----> 不是页面组件(小组件)
# 点击登录按钮，把Login.vue 通过定位，占满全屏，透明度设为 0.5 ，纯黑色背景，覆盖在组件上
# 在Login.vue点关闭，要把Login.vue隐藏起来，父子通信之子传父，自定义事件

1.1 Header.vue分析

## 页面中
<span @click="go_login">登录</span>


<Login v-if="login_show" @close_login="close_login"></Login>
## data
login_show: false
### methods
   go_login() {
      this.login_show = true
    },
    close_login() {
      this.login_show = false
    }

1.2 Login.vue分析

<template>
  <div class="login">
    <span @click="close">X</span>

  </div>
</template>

<script>
export default {
  name: "Login",
  methods: {
    close() {
      this.$emit('close_login')
    }
  }

}
</script>

<style scoped>
.login {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
  background-color: rgba(0, 0, 0, 0.5);
}
</style>

二、前端登录注册页面复制

2.1 Login.vue

<template>
  <div class="login">
    <div class="box">
      <i class="el-icon-close" @click="close_login"></i>
      <div class="content">
        <div class="nav">
         <span :class="{active: login_method === 'is_pwd'}" @click="change_login_method('is_pwd')">密码登录</span>
          <span :class="{active: login_method === 'is_sms'}" @click="change_login_method('is_sms')">短信登录</span>
        </div>
        <el-form v-if="login_method === 'is_pwd'">
          <el-input
              placeholder="用户名/手机号/邮箱"
              prefix-icon="el-icon-user"
              v-model="username"
              clearable>
          </el-input>
          <el-input
              placeholder="密码"
              prefix-icon="el-icon-key"
              v-model="password"
              clearable
              show-password>
          </el-input>
          <el-button type="primary">登录</el-button>
        </el-form>
        <el-form v-if="login_method === 'is_sms'">
          <el-input
              placeholder="手机号"
              prefix-icon="el-icon-phone-outline"
              v-model="mobile"
              clearable
              @blur="check_mobile">
          </el-input>
          <el-input
              placeholder="验证码"
              prefix-icon="el-icon-chat-line-round"
              v-model="sms"
              clearable>
            <template slot="append">
              <span class="sms" @click="send_sms">{{ sms_interval }}</span>
            </template>
          </el-input>
          <el-button type="primary">登录</el-button>
        </el-form>
        <div class="foot">
          <span @click="go_register">立即注册</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Login",
  data() {
    return {
      username: '',
      password: '',
      mobile: '',
      sms: '',
      login_method: 'is_pwd',
      sms_interval: '获取验证码',
      is_send: false,
    }
  },
  methods: {
    close_login() {
      this.$emit('close')
    },
    go_register() {
      this.$emit('go')
    },
    change_login_method(method) {
      this.login_method = method;
    },
    check_mobile() {
      if (!this.mobile) return;
      if (!this.mobile.match(/^1[3-9][0-9]{9}$/)) {
        this.$message({
          message: '手机号有误',
          type: 'warning',
          duration: 1000,
          onClose: () => {
            this.mobile = '';
          }
        });
        return false;
      }
      this.is_send = true;
    },
    send_sms() {

      if (!this.is_send) return;
      this.is_send = false;
      let sms_interval_time = 60;
      this.sms_interval = "发送中...";
      let timer = setInterval(() => {
        if (sms_interval_time <= 1) {
          clearInterval(timer);
          this.sms_interval = "获取验证码";
          this.is_send = true; // 重新回复点击发送功能的条件
        } else {
          sms_interval_time -= 1;
          this.sms_interval = `${sms_interval_time}秒后再发`;
        }
      }, 1000);
    }
  }
}
</script>

<style scoped>
.login {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
  background-color: rgba(0, 0, 0, 0.5);
}

.box {
  width: 400px;
  height: 420px;
  background-color: white;
  border-radius: 10px;
  position: relative;
  top: calc(50vh - 210px);
  left: calc(50vw - 200px);
}

.el-icon-close {
  position: absolute;
  font-weight: bold;
  font-size: 20px;
  top: 10px;
  right: 10px;
  cursor: pointer;
}

.el-icon-close:hover {
  color: darkred;
}

.content {
  position: absolute;
  top: 40px;
  width: 280px;
  left: 60px;
}

.nav {
  font-size: 20px;
  height: 38px;
  border-bottom: 2px solid darkgrey;
}

.nav > span {
  margin: 0 20px 0 35px;
  color: darkgrey;
  user-select: none;
  cursor: pointer;
  padding-bottom: 10px;
  border-bottom: 2px solid darkgrey;
}

.nav > span.active {
  color: black;
  border-bottom: 3px solid black;
  padding-bottom: 9px;
}

.el-input, .el-button {
  margin-top: 40px;
}

.el-button {
  width: 100%;
  font-size: 18px;
}

.foot > span {
  float: right;
  margin-top: 20px;
  color: orange;
  cursor: pointer;
}

.sms {
  color: orange;
  cursor: pointer;
  display: inline-block;
  width: 70px;
  text-align: center;
  user-select: none;
}
</style>

2.2 Register.vue

<template>
    <div class="register">
        <div class="box">
            <i class="el-icon-close" @click="close_register"></i>
            <div class="content">
                <div class="nav">
                    <span class="active">新用户注册</span>
                </div>
                <el-form>
                    <el-input
                            placeholder="手机号"
                            prefix-icon="el-icon-phone-outline"
                            v-model="mobile"
                            clearable
                            @blur="check_mobile">
                    </el-input>
                    <el-input
                            placeholder="密码"
                            prefix-icon="el-icon-key"
                            v-model="password"
                            clearable
                            show-password>
                    </el-input>
                    <el-input
                            placeholder="验证码"
                            prefix-icon="el-icon-chat-line-round"
                            v-model="sms"
                            clearable>
                        <template slot="append">
                            <span class="sms" @click="send_sms">{{ sms_interval }}</span>
                        </template>
                    </el-input>
                    <el-button type="primary">注册</el-button>
                </el-form>
                <div class="foot">
                    <span @click="go_login">立即登录</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Register",
        data() {
            return {
                mobile: '',
                password: '',
                sms: '',
                sms_interval: '获取验证码',
                is_send: false,
            }
        },
        methods: {
            close_register() {
                this.$emit('close', false)
            },
            go_login() {
                this.$emit('go')
            },
            check_mobile() {
                if (!this.mobile) return;
                if (!this.mobile.match(/^1[3-9][0-9]{9}$/)) {
                    this.$message({
                        message: '手机号有误',
                        type: 'warning',
                        duration: 1000,
                        onClose: () => {
                            this.mobile = '';
                        }
                    });
                    return false;
                }
                this.is_send = true;
            },
            send_sms() {
                if (!this.is_send) return;
                this.is_send = false;
                let sms_interval_time = 60;
                this.sms_interval = "发送中...";
                let timer = setInterval(() => {
                    if (sms_interval_time <= 1) {
                        clearInterval(timer);
                        this.sms_interval = "获取验证码";
                        this.is_send = true; // 重新回复点击发送功能的条件
                    } else {
                        sms_interval_time -= 1;
                        this.sms_interval = `${sms_interval_time}秒后再发`;
                    }
                }, 1000);
            }
        }
    }
</script>

<style scoped>
    .register {
        width: 100vw;
        height: 100vh;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 10;
        background-color: rgba(0, 0, 0, 0.3);
    }

    .box {
        width: 400px;
        height: 480px;
        background-color: white;
        border-radius: 10px;
        position: relative;
        top: calc(50vh - 240px);
        left: calc(50vw - 200px);
    }

    .el-icon-close {
        position: absolute;
        font-weight: bold;
        font-size: 20px;
        top: 10px;
        right: 10px;
        cursor: pointer;
    }

    .el-icon-close:hover {
        color: darkred;
    }

    .content {
        position: absolute;
        top: 40px;
        width: 280px;
        left: 60px;
    }

    .nav {
        font-size: 20px;
        height: 38px;
        border-bottom: 2px solid darkgrey;
    }

    .nav > span {
        margin-left: 90px;
        color: darkgrey;
        user-select: none;
        cursor: pointer;
        padding-bottom: 10px;
        border-bottom: 2px solid darkgrey;
    }

    .nav > span.active {
        color: black;
        border-bottom: 3px solid black;
        padding-bottom: 9px;
    }

    .el-input, .el-button {
        margin-top: 40px;
    }

    .el-button {
        width: 100%;
        font-size: 18px;
    }

    .foot > span {
        float: right;
        margin-top: 20px;
        color: orange;
        cursor: pointer;
    }

    .sms {
        color: orange;
        cursor: pointer;
        display: inline-block;
        width: 70px;
        text-align: center;
        user-select: none;
    }
</style>

2.3 Header.vue

 <div class="right-part">
        <div>
          <span @click="put_login">登录</span>
           <span class="line">|</span>
          <span @click="put_register">注册</span>

        </div>
        <Login v-if="is_login" @close="close_login" @go="put_register"/>
        <Register v-if="is_register" @close="close_register" @go="put_login"/>
      </div>
    
    

    
    ## data
      is_login: false,
      is_register: false,
    
    
    # methods
    put_login() {
      this.is_login = true;
      this.is_register = false;
    },
    put_register() {
      this.is_login = false;
      this.is_register = true;
    },
    close_login() {
      this.is_login = false;
    },
    close_register() {
      this.is_register = false;
    }
    

三、前端登录功能，js代码

# 1 多方式登录的axios请求，保存cookie---> Header.vue中要写created 生命周期，取出当前登录用户--> close_login取出当前登录用户
# 2 手机号验证码登录，axios请求，保存cookie
# 3 发送短信验证码

<template>
    <div class="login">
        <div class="box">
            <!--关闭的X-->
            <i class="el-icon-close" @click="close_login"></i>
            <div class="content">
                <div class="nav">
                    <span :class="{active: login_method === 'is_pwd'}"
                          @click="change_login_method('is_pwd')">密码登录</span>
                    <span :class="{active: login_method === 'is_sms'}"
                          @click="change_login_method('is_sms')">短信登录</span>
                </div>
                <el-form v-if="login_method === 'is_pwd'">
                    <el-input
                        placeholder="用户名/手机号/邮箱"
                        prefix-icon="el-icon-user"
                        v-model="username"
                        clearable>
                    </el-input>
                    <el-input
                        placeholder="密码"
                        prefix-icon="el-icon-key"
                        v-model="password"
                        clearable
                        show-password>
                    </el-input>
                    <el-button type="primary" @click="handleLogin">登录</el-button>
                </el-form>
                <el-form v-if="login_method === 'is_sms'">
                    <el-input
                        placeholder="手机号"
                        prefix-icon="el-icon-phone-outline"
                        v-model="mobile"
                        clearable
                        @blur="check_mobile">
                    </el-input>
                    <el-input
                        placeholder="验证码"
                        prefix-icon="el-icon-chat-line-round"
                        v-model="sms"
                        clearable>
                        <template slot="append">
                            <span class="sms" @click="send_sms">{{ sms_interval }}</span>
                        </template>
                    </el-input>
                    <el-button type="primary" @click="handleSmSLogin">登录</el-button>
                </el-form>
                <div class="foot">
                    <span @click="go_register">立即注册</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "Login",
    data() {
        return {
            username: '',
            password: '',
            mobile: '',
            sms: '',
            login_method: 'is_pwd',
            sms_interval: '获取验证码',
            is_send: false,   // 如果是true，就是能发送验证码，是false就不能发送验证码
        }
    },
    methods: {
        close_login() {
            // 子传父，自定义事件close
            this.$emit('close')
        },
        go_register() {
            this.$emit('go')
        },
        change_login_method(method) {
            this.login_method = method;
        },
        check_mobile() {
            if (!this.mobile) return;
            if (!this.mobile.match(/^1[3-9][0-9]{9}$/)) {
                this.$message({
                    message: '手机号有误',
                    type: 'warning',
                    duration: 1000,
                    onClose: () => {
                        this.mobile = '';
                    }
                });
                return false;
            }
            // 跟后端交互，查询该手机号是否注册过，如果注册过，才能发送
            this.$axios.get(`${this.$settings.BASE_URL}user/userinfo/check_mobile/?mobile=${this.mobile}`).then(res => {
                if (res.data.code !== 100) {
                    // 提示该手机号未注册
                    this.$message({
                        message: '该手机号未注册，请先注册',
                        type: 'warning'
                    });
                    // 把手机号清空
                    this.mobile = '';
                } else {
                    this.is_send = true;   // 可以发送验证码
                }
            })
        },
        // 发送手机验证码
        send_sms() {
            if (!this.is_send) return;  // 如果是false，不能点击发送
            this.is_send = false;  // 点了一次，不能再点了，1 m，定时器执行完 后才能再点
            let sms_interval_time = 60;
            this.sms_interval = "发送中...";
            let timer = setInterval(() => {
                if (sms_interval_time <= 1) {
                    clearInterval(timer);
                    this.sms_interval = "获取验证码";
                    this.is_send = true; // 重新回复点击发送功能的条件
                } else {
                    sms_interval_time -= 1;
                    this.sms_interval = `${sms_interval_time}秒后再发`;
                }
            }, 1000);
            // 调用接口发送验证码
            this.$axios.get(`${this.$settings.BASE_URL}user/userinfo/send_sms/?mobile=${this.mobile}`).then(res => {
                this.$message({
                    message: res.data.msg,
                    type: 'success'
                });
            })
        },
        // 多方式登录的点击事件
        handleLogin() {
            if (this.username && this.password) {
                // axios跟后端交互
                this.$axios.post(`${this.$settings.BASE_URL}user/userinfo/mul_login/`, {
                    username: this.username,
                    password: this.password
                }).then(res => {
                    if (res.data.code === 100) {
                        // 登录成功 返回了token，用户名，头像--->把他们存到cookie中
                        this.$cookies.set('username', res.data.username, '7d')
                        this.$cookies.set('icon', res.data.icon, '7d')
                        this.$cookies.set('token', res.data.token, '7d')
                        // 页面关闭，子传父，调用 自定义事件close，就会触发父组件中的close_login方法
                        this.$emit('close')
                    } else {
                        this.$message({
                            message: res.data.msg,
                            type: 'warning'
                        });
                    }
                })
            } else {
                this.$message({
                    message: '用户名或密码不能为空',
                    type: 'warning'
                });
            }
        },
        // 验证码登录
        handleSmSLogin() {
            if (this.mobile && this.sms) {
                this.$axios.post(`${this.$settings.BASE_URL}ser/userinfo/sms_login/`, {
                    mobile: this.mobile,
                    code: this.sms
                }).then(res => {
                    if (res.data.code === 100) {
                        this.$cookies.set('username', res.data.username, '7d')
                        this.$cookies.set('icon', res.data.icon, '7d')
                        this.$cookies.set('token', res.data.token, '7d')
                        this.$emit('close')
                    } else {
                        this.$message({
                            message: res.data.msg,
                            type: 'warning'
                        });
                    }
                })
            } else {
                this.$message({
                    message: '手机号或验证码不能为空',
                    type: 'warning'
                });
            }
        },
    }
}
</script>

<style scoped>
.login {
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
    background-color: rgba(0, 0, 0, 0.5);
}

.box {
    width: 400px;
    height: 420px;
    background-color: white;
    border-radius: 10px;
    position: relative;
    top: calc(50vh - 210px);
    left: calc(50vw - 200px);
}

.el-icon-close {
    position: absolute;
    font-weight: bold;
    font-size: 20px;
    top: 10px;
    right: 10px;
    cursor: pointer;
}

.el-icon-close:hover {
    color: darkred;
}

.content {
    position: absolute;
    top: 40px;
    width: 280px;
    left: 60px;
}

.nav {
    font-size: 20px;
    height: 38px;
    border-bottom: 2px solid darkgrey;
}

.nav > span {
    margin: 0 20px 0 35px;
    color: darkgrey;
    user-select: none;
    cursor: pointer;
    padding-bottom: 10px;
    border-bottom: 2px solid darkgrey;
}

.nav > span.active {
    color: black;
    border-bottom: 3px solid black;
    padding-bottom: 9px;
}

.el-input, .el-button {
    margin-top: 40px;
}

.el-button {
    width: 100%;
    font-size: 18px;
}

.foot > span {
    float: right;
    margin-top: 20px;
    color: orange;
    cursor: pointer;
}

.sms {
    color: orange;
    cursor: pointer;
    display: inline-block;
    width: 70px;
    text-align: center;
    user-select: none;
}
</style>

四、前端注册功能，js代码

# 1 校验手机号是否存在的axios
	-如果存在，直接跳转到登录--->小bug
# 2 发送验证码axios
# 3 注册的axios
	-注册成功，跳转到登录页面

<template>
    <div class="register">
        <div class="box">
            <i class="el-icon-close" @click="close_register"></i>
            <div class="content">
                <div class="nav">
                    <span class="active">新用户注册</span>
                </div>
                <el-form>
                    <el-input
                        placeholder="手机号"
                        prefix-icon="el-icon-phone-outline"
                        v-model="mobile"
                        clearable
                        @blur="check_mobile">
                    </el-input>
                    <el-input
                        placeholder="密码"
                        prefix-icon="el-icon-key"
                        v-model="password"
                        clearable
                        show-password>
                    </el-input>
                    <el-input
                        placeholder="验证码"
                        prefix-icon="el-icon-chat-line-round"
                        v-model="sms"
                        clearable>
                        <template slot="append">
                            <span class="sms" @click="send_sms">{{ sms_interval }}</span>
                        </template>
                    </el-input>
                    <el-button type="primary" @click="handleRegister">注册</el-button>
                </el-form>
                <div class="foot">
                    <span @click="go_login">立即登录</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "Register",
    data() {
        return {
            mobile: '',
            password: '',
            sms: '',
            sms_interval: '获取验证码',
            is_send: false,
        }
    },
    methods: {
        close_register() {
            this.$emit('close', false)
        },
        go_login() {
            this.$emit('go')
        },
        check_mobile() {
            if (!this.mobile) return;
            if (!this.mobile.match(/^1[3-9][0-9]{9}$/)) {
                this.$message({
                    message: '手机号有误',
                    type: 'warning',
                    duration: 1000,
                    onClose: () => {
                        this.mobile = '';
                    }
                });
                return false;
            }
            // 校验手机号是否能发验证码--->只有没注册过的，才能发，校验手机号接口
            this.$axios.get(`${this.$settings.BASE_URL}user/userinfo/check_mobile/?mobile=${this.mobile}`).then(res => {
                if (res.data.code !== 100) {
                    // 提示该手机号未注册
                    this.$message({
                        message: '该手机号未注册，可以发送短信',
                        type: 'error'
                    });
                    this.is_send = true;   // 可以发送验证码
                } else {
                    // 手机号注册过了，不用注册了，直接登录即可
                    this.$message({
                        message: '该手机号已经注册过，可以直接登录',
                        type: 'warning'
                    });
                    // 跳转到登录页面
                    this.$emit('go')
                }
            })
        },
        send_sms() {
            if (!this.is_send) return;
            this.is_send = false;
            let sms_interval_time = 60;
            this.sms_interval = "发送中...";
            let timer = setInterval(() => {
                if (sms_interval_time <= 1) {
                    clearInterval(timer);
                    this.sms_interval = "获取验证码";
                    this.is_send = true; // 重新回复点击发送功能的条件
                } else {
                    sms_interval_time -= 1;
                    this.sms_interval = `${sms_interval_time}秒后再发`;
                }
            }, 1000);
            // 调用发送验证码接口
            this.$axios.get(`${this.$settings.BASE_URL}user/userinfo/send_sms/?mobile=${this.mobile}`).then(res => {
                this.$message({
                    message: res.data.msg,
                    type: 'success'
                });
            })

        },
        // 注册接口
        handleRegister() {
            if (this.mobile && this.password && this.sms) {
                this.$axios.post(`${this.$settings.BASE_URL}user/userinfo/register/`, {
                    mobile: this.mobile,
                    code: this.sms,
                    password: this.password
                }).then(res => {
                    if (res.data.code === 100) {
                        // 注册成功
                        this.$message({
                            message: res.data.msg,
                            type: 'success'
                        });
                        // 跳转到登录--->写自定义事件的名字
                        this.$emit('go')
                    } else {
                        this.$message({
                            message: res.data.msg,
                            type: 'error'
                        });
                    }
                })
            } else {
                this.$message({
                    message: '手机号，验证码，密码不能为空',
                    type: 'error'
                });
            }
        },
    }
}
</script>

<style scoped>
.register {
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
    background-color: rgba(0, 0, 0, 0.3);
}

.box {
    width: 400px;
    height: 480px;
    background-color: white;
    border-radius: 10px;
    position: relative;
    top: calc(50vh - 240px);
    left: calc(50vw - 200px);
}

.el-icon-close {
    position: absolute;
    font-weight: bold;
    font-size: 20px;
    top: 10px;
    right: 10px;
    cursor: pointer;
}

.el-icon-close:hover {
    color: darkred;
}

.content {
    position: absolute;
    top: 40px;
    width: 280px;
    left: 60px;
}

.nav {
    font-size: 20px;
    height: 38px;
    border-bottom: 2px solid darkgrey;
}

.nav > span {
    margin-left: 90px;
    color: darkgrey;
    user-select: none;
    cursor: pointer;
    padding-bottom: 10px;
    border-bottom: 2px solid darkgrey;
}

.nav > span.active {
    color: black;
    border-bottom: 3px solid black;
    padding-bottom: 9px;
}

.el-input, .el-button {
    margin-top: 40px;
}

.el-button {
    width: 100%;
    font-size: 18px;
}

.foot > span {
    float: right;
    margin-top: 20px;
    color: orange;
    cursor: pointer;
}

.sms {
    color: orange;
    cursor: pointer;
    display: inline-block;
    width: 70px;
    text-align: center;
    user-select: none;
}
</style>

五、Header.vue功能

<template>
    <div class="header">
        <div class="slogan">
            <p>老男孩IT教育 | 帮助有志向的年轻人通过努力学习获得体面的工作和生活</p>
        </div>
        <div class="nav">
            <ul class="left-part">
                <li class="logo">
                    <router-link to="/">
                        <img src="../assets/img/head-logo.svg" alt="">
                    </router-link>
                </li>
                <li class="ele">
                    <span @click="goPage('/free-course')" :class="{active: url_path === '/free-course'}">免费课</span>
                </li>
                <li class="ele">
                    <span @click="goPage('/actual-course')"
                          :class="{active: url_path === '/actual-course'}">实战课</span>
                </li>
                <li class="ele">
                    <span @click="goPage('/light-course')" :class="{active: url_path === '/light-course'}">轻课</span>
                </li>
            </ul>

            <div class="right-part">
                <div v-if="username">
<!--                    <span><el-avatar :src="user_icon" size="small"></el-avatar></span>-->
                    <span><img :src="user_icon" class="img" alt=""></span>
                    &nbsp;
                    <span>{{ username }}</span>
                    <span class="line">|</span>
                    <span @click="handleLogout">注销</span>
                </div>

                <div v-else>
                    <span @click="put_login">登录</span>
                    <span class="line">|</span>
                    <span @click="put_register">注册</span>
                </div>
                <div>
                    <Login v-if="is_login" @close="close_login" @go="put_register"></Login>
                    <Register v-if="is_register" @close="close_register" @go="put_login"></Register>
                </div>
            </div>
        </div>
    </div>

</template>

<script>
import Login from "@/components/Login.vue";
import Register from "@/components/Register.vue";

export default {
    name: "Header",
    data() {
        return {
            url_path: sessionStorage.url_path || '/',
            is_login: false,
            is_register: false,
            username: '',
            user_icon: '',
        }
    },
    methods: {
        goPage(url_path) {
            // 已经是当前路由就没有必要重新跳转
            if (this.url_path !== url_path) {
                this.$router.push(url_path);
            }
            sessionStorage.url_path = url_path;
        },
        put_login() {
            // 点击登录显示登录组件，is_login为true，注册组件不显示
            this.is_login = true
            this.is_register = false;
        },
        put_register() {
            this.is_login = false;
            this.is_register = true;
        },
        close_login() {  // 关闭登录组件
            this.is_login = false
            // 子组件触发了它，需要取出username显示出来
            this.username = this.$cookies.get('username')
            this.user_icon = this.$cookies.get('icon')
        },
        close_register() {  // 关闭注册组件
            this.is_register = false;
        },
        // 点击注销
        handleLogout() {
            // 前后端分离后，退出只需要清除浏览器中的登录记录即可，不需要再向后端发送请，除非后端想记录用户的退出操作，可以配合个接口
            this.$cookies.remove('username')
            this.$cookies.remove('token')
            this.$cookies.remove('icon')
            // 清空username的值
            this.username = ''
            this.user_icon = ''
        }
    },
    created() {
        sessionStorage.url_path = this.$route.path;
        this.url_path = this.$route.path;
        // 只要登录过，cookies中的用户名没有过期，就可以直接显示用户名
        this.username = this.$cookies.get('username')
        this.user_icon = this.$cookies.get('icon')
    },
    components: {
        Login, Register
    }
}
</script>

<style scoped>
.header {
    background-color: white;
    box-shadow: 0 0 5px 0 #aaa;
}

.header:after {
    content: "";
    display: block;
    clear: both;
}

.slogan {
    background-color: #eee;
    height: 40px;
}

.slogan p {
    width: 1200px;
    margin: 0 auto;
    color: #aaa;
    font-size: 13px;
    line-height: 40px;
}

.nav {
    background-color: white;
    user-select: none;
    width: 1200px;
    margin: 0 auto;

}

.nav ul {
    padding: 15px 0;
    float: left;
}

.nav ul:after {
    clear: both;
    content: '';
    display: block;
}

.nav ul li {
    float: left;
}

.logo {
    margin-right: 20px;
}

.ele {
    margin: 0 20px;
}

.ele span {
    display: block;
    font: 15px/36px '微软雅黑';
    border-bottom: 2px solid transparent;
    cursor: pointer;
}

.ele span:hover {
    border-bottom-color: orange;
}

.ele span.active {
    color: orange;
    border-bottom-color: orange;
}

.right-part {
    float: right;
}

.right-part .line {
    margin: 0 10px;
}

.right-part span {
    line-height: 68px;
    cursor: pointer;
}

.img {
    width: 35px;
    height: 35px;
}
</style>

六、把elementui中的消息封装成插件

plugins/index.js

import Vue from "vue";
import {Message} from 'element-ui'


export default {
    install() {
        Vue.prototype.$info = (msg, type) => Message({
            message: msg,
            type: type
        });
    }
}

main.js

// 使用插件
import plugins from '@/plugins'
Vue.use(plugins)

组件中使用：eg:Login.vue

this.$info('用户名或密码不能为空','warning');