vue登录界面（点击登录之后，用户名替代登录、注册按钮）

此处使用了Element-ui组件。
1、在注册页面对用户注册信息进行存储（此处使用本地存储数据，存储在浏览器中）

<script>
  export default{
    methods:{
      submitResgiter(form){
        // ref 加在普通的元素上，用this.$refs.（ref值） 获取到的是dom元素
        // validate 表单验证
        this.$refs.form.validate((valid) => {
          if (valid) {
            //密码是否等于确认密码
            if(this.form.password == this.form.compassword){
              // 获取数据
              // 因为在注册的时候需要先获取一下数组中是否有该用户名
              let info=JSON.parse(localStorage.getItem('Info'))
              console.log(info)
              // 当有info数组的时候，则进行内部if-else。若无则进行else
              if(info){
                // 若info数组中有这个账户名，则提示用户已经存在
                if(info[this.form.name]){
                  alert("用户名已存在")
                }else{
                  // 若没有这个用户名就进行添加
                  // 对象[（键）变量] = 值
                  info[this.form.name]=this.form.password
                  this.$router.push('/Login')
                }
              }else{
                // 当没有info这个数组的时候，则进行新建一个info对象
                // 对象={}
                // info={};info[this.form.name]=this.form.password;
                info={ [this.form.name]:this.form.password }
                this.$router.push('/Login')
              }  
              // 存储数据
              // JSON.stringify() 方法用于将 JavaScript 值转换为 JSON 字符串。
              localStorage.setItem('Info', JSON.stringify(info))
            }else{
              alert('密码不一致')
            }
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      }
    }
  }
</script>

2、在头部菜单处获取用户名，替代登录、注册按钮
-判断

• 使用计算机属性声明userName,以便后续登录页面调用
  
  3、在登录界面对存储的用户信息进行获取
  

<script>
  export default{
    methods:{
      submit(form){
        this.$refs.form.validate((valid) => {
          if (valid) {
            // JSON.parse() 方法将数据转换为 JavaScript 对象。
            //此处获取存在本地的用户列表信息 （在开始写的时候，用户注册的信息是直接存储在本地信息的）
            let info = JSON.parse(localStorage.getItem('Info'))
            // console.log(info)
            // 判断用户名是否存在，若存在则判断密码是否正确，若正确则登录成功，不正确则提示密码不正确，
            // 若用户名不存在，则提示请注册
            // info={a:1,b:2}   取出info[a]不就是1
            // 对象通过键值对 根据键判断了值
            if(info[this.form.name]){
              if(this.form.password == info[this.form.name]){
                let userName = this.form.name;
                localStorage.setItem('userName', userName)  //将用户名存起来
                this.$router.push('/')
                window.location.reload()
                // console.log(info[this.form.name]); 打印出来的是这个键的值，相当于这个用户的密码
              }else{
                alert('密码错误，请填写正确的密码');
              }
            }else{
              alert('用户名不存在，请注册');
            }
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      }
    }
  }
</script>