赶毕业设计遇到的问题|3

3.登录页面是Vue，首页是html，怎么实现与Vue数据互通呢

解决方案：在登录页面，登录成功，就把用户信息存放到LocalStorage里面，就是存放到浏览器存储，html页面这样就可以直接拿到登录用户的数据。

methods: {
   login(){
     this.$refs['loginForm'].validate((valid) => {
       if (valid) {
         request.post('/pre/login', this.admin).then(res => {
           if (res.code === '200'){
             console.log(res.data)
             /*存储登录对象的数据*/
             // 1.定义要存储的对象：用户的登录信息
             const user = {
               id: res.data.id,
               username: res.data.username,
               email: res.data.email,
               phone: res.data.phone
             };
            // 2.将对象转换为字符串，存储到 LocalStorage
             localStorage.setItem("user", JSON.stringify(user));
             // 3.从 LocalStorage 获取数据，并将其转换为对象
             const userStr = localStorage.getItem("user");
             const userInfo = JSON.parse(userStr);
             console.log(userInfo);

             /*跳转到ToHomepage.vue*/
             this.$router.push("/toHomepage")
           } else {
             this.$notify.error(res.msg)
           }
         }).catch(err => {
           // 报错
           console.log(err)
         })
       }
     })
   },

html页面拿取数据

<script>
    /*拿到登录对象的数据*/
    // 从 LocalStorage 获取数据，并将其转换为对象
    const userStr = localStorage.getItem("user");
    const userInfo = JSON.parse(userStr);
    console.log(userInfo);

    if (typeof userInfo === 'object' && userInfo === null) {
        // userInfo 为空为 null
        console.log("用户未登录");
    } else {
        // userInfo 不为空为 null
        console.log("用户已登录");
        const loginAndRegistry = document.getElementById('loginAndRegistry');
        // loginAndRegistry.disabled = true; //设为不可用
        loginAndRegistry.style.display = 'none';//设置li元素在页面上不显示且不再 DOM 中占据位置
        const username = document.getElementById('username');
        const $username = $('#username');
        username.style.display = 'inline';//设为可见
        $username.text(userInfo.username + "，欢迎您！！");
        const weather = document.getElementById('weather');
        weather.style.display = 'none';
    }
</script>