Kilikilinode2
自做网页2（优化,补充）
前言
之前做的网页还有许多需要优化的地方，比如用户登录退出，认证方式.....等等。下面一个一个来优化一下,下面只做主要代码
目录
效果图
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判断有点冗余。
