自做网页2（优化,补充）

前言

之前做的网页还有许多需要优化的地方，比如用户登录退出，认证方式.....等等。下面一个一个来优化一下,下面只做主要代码

• 自做网页2（优化,补充）
  • 1.注册用户优化
  • 2.登录页面优化
  • 3.首页头像的优化随机显示头像和退出功能
  • 4.试下使用B站的嵌入代码，再加个背景音乐
• 以上是功能的，样式的修改就不过多写了，每次都会修改一些，
  • 总结

效果图

1.注册用户优化

之间做的注册用户是直接存储在本地里，这样不符合业务逻辑应该直接提交到后台做个判断,刚好有黑马的API，黑马AJAX接口文档网址为https://apifox.com/apidoc/project-1937884/doc-1695440

register页面
调用接口注册用户，格式用正则表达式来判断。
// 请求接口
    axios({
        method:'post',
        url: 'https://hmajax.itheima.net/api/register',
        data: {
            username: registerObj.uname,
            password: registerObj.pwd
        }
    }).then(result => {
        console.log(result.data.message)
        // 判断用户输入的格式对不对
    // 1. 准备正则
    const unamereg = /^[a-zA-Z0-9]{8,}$/
    const pwdreg = /^[a-zA-Z0-9]{6,}$/
    // 2.获取元素提示信息的
    const span  = document.querySelectorAll('.form span')
    const span1 = span[0]
    const span2 = span[1]
    // 3.两个都不符合正则的情况下显示错误提示
    if (!unamereg.test(registerObj.uname) && !pwdreg.test(registerObj.pwd) ) {
        span1.style.opacity = 1
        span2.style.opacity = 1
    } else if(!unamereg.test(registerObj.uname)){
        span1.style.opacity = 1
    } else if(!pwdreg.test(registerObj.pwd)){
        span2.style.opacity = 1
    } else {
        myAlert(true, result.data.message)
        span1.style.opacity = 0
        span2.style.opacity = 0
        setTimeout(function() {
            location.href = 'login.html'
            },2000)
    }
    }).catch(error => {
        console.log(error)
        myAlert(false, error.data.message)
        // console.log(error.data.message)
    })
ifelse判断正确错误然后出现的信息，这一步感觉自己做的比较繁琐，应该有更简便的方法。
还有获取span标签也就是提示信息的时候，选中所有标签，，然后一个一个用变量赋值，这样数量少还行，如果数量多了，不好处理，应该也有更好的方法

2.登录页面优化

// 点击登录后跳转到首页
document.querySelector('.form .login').addEventListener('click', e => {
    // console.log(123)
    const formDataObj = serialize(form, {hash:true,empty:true})
    // console.log(formDataObj.uname)
    // console.log(localStorage.getItem('uname'))
    // const uname = localStorage.getItem('uname')
    // const pwd = localStorage.getItem('pwd')
    const unameValue = formDataObj.uname
    const pwdValue = formDataObj.pwd
    axios({
        method:'POST',
        url: 'https://hmajax.itheima.net/api/login',
        data: {
            username: unameValue,
            password: pwdValue
        }
    }).then(result => {
        console.log(result)
        const unamereg = /^[a-zA-Z0-9]{8,}$/
        const pwdreg = /^[a-zA-Z0-9]{6,}$/
        if(!unamereg.test(unameValue) || !pwdreg.test(pwdValue)) {
            myAlert(false, '请重新检查用户名和密码格式：8位以上任意大小字母数字组合的用户名，密码至少6位')
        } else {
            // 注册的用户名跟登录界面输入的用户名进行比较，正确就获取头像
            // localStorage.setItem('username', unameValue)
            // localStorage.setItem('pwd', pwdValue)
            myAlert(true,  result.data.message+'!欢迎来到Kilikili!')
            setTimeout(function(){
                // 这里再用本地存储，存到本地后在主页面get拿到来用就行
                // const url = location.search.split('?')
                // const userNameImg = url[1]
                localStorage.setItem('loginUserName', unameValue )
                    location.href = 'main.html' 
                    }, 2000)
        }
    }).catch(error => {
        console.log(error)
        myAlert(false, '该用户还未注册，请先注册用户')
    })

3.首页头像的优化随机显示头像和退出功能

头像随机显示

// 头像设计
// 注册的用户名跟登录界面输入的用户名进行比较，正确就获取头像,并且判断如果不是相等的情况下就显示登录，并且给登录绑定点击事件一点击就跳转到登录界面
// const url = location.search.split('?')
// console.log(url[1])
// const userNameImg = url[1]
if(localStorage.getItem('registerUserName') === localStorage.getItem('loginUserName') && localStorage.getItem('registerUserName') !== null && localStorage.getItem('loginUserName') !== null) {
    axios({
        method:'GET',
        url: 'https://hmajax.itheima.net/api/settings',
        params: {
            creator: localStorage.getItem('registerUserName')
        }
    }).then(result => {
        console.log(result)
        const userImg = result.data.data.avatar
        document.querySelector('.header-login-entry').innerHTML = `<img src="${userImg}">`
    })
    
}else {
     document.querySelector('.header-login-entry').innerHTML = `<span>登录</span>`
        document.querySelector('.header-login-entry').addEventListener('click', e => {
            // console.log(123)
            location.href = './login.html'
        })
}

点击后退出登录删除头像，清除本地登录的用户名，并再次刷新页面，当用户再次登录的时候再显示

// 退出登录功能
document.querySelector('.head .headbgi button').addEventListener('click', e => {
    // console.log(123)
    localStorage.removeItem('loginUserName')
    location.reload()
})

css和html样式
.head .headbgi button {
    position: absolute;
    left: 900px;
    top: 80px;
}
<button>退出登录</button> //父元素是背景图片

4.试下使用B站的嵌入代码，再加个背景音乐

推荐页面
<body style="background-image: url(./images/tuijianbgi.webp); background-repeat: no-repeat; background-size: cover;">
    <iframe style="width: 906px; height: 510px; margin-left: 280px; margin-top: 150px; border-radius: 10%;" src="//player.bilibili.com/player.html?aid=843822693&bvid=BV1A54y1x7Dj&cid=294940961&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
</body>
主页面
<div style="border-top: 2px solid rgb(239, 86, 86);" class="tuijian"><span style="font-size: 50px; color: rgb(239, 86, 86);"><a href="#">推荐视频</a></span></div>
 
   <audio controls src="./musics/折戸伸治 - 東風-piano-.mp3" ></audio>

跳转到推荐页面
document.querySelector('.tuijian a').addEventListener('click', e => {
    location.href = './tuijianpage.html'
})

以上是功能的，样式的修改就不过多写了，每次都会修改一些，

总结

最近学了vue，后面可以试下用vue写一个。这次主要优化了用户体验，ifelse判断有点冗余。