ajax渲染电影网站

1项目简介

基于css+js+ajax实现一个电影网站,包括电影主页,电影榜单页,电影详情,预告片,登录注册,个人中心。

2实现过程

主页和榜单页的实现大同小异,都是循环渲染,下面主要介绍一下完善的小功能。

登录注册页

进入页面主页时,因为是用户尚未登录,导航右部显示登陆二字,登录之后显示默认头像,用户在个人中心修改头像后显示最新头像。

点击登录时会根据token值到localstorage中查找是否存在该用户名,没有则进行注册然后将用户名和密码加密存入本地;已注册则直接登录。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
if (localStorage.getItem(user)) {
$.ajax({
type: 'post',
url: host + '/user/login',
data: {
username: user,
password: pwd
},
success: function (res) {
console.log(res);
if (res.success) {
// 将令牌的值存入本地存储
localStorage.setItem('cctoken', res.data.token);
alert('登陆成功')
location.href = './index.html'
}
}
})
} else {
alert('您尚未注册,请先注册账号!!');
}

个人信息页

个人信息页的头像在登录后显示的是默认头像,用户上传后显示默认头像。同时其他页面的导航页也自动切换为新头像。个人信息页的其他信息都是渲染出来的。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
$('#file-avatar').on('change', function () {
// localStorage.removeItem('imgSrc')
// 获取到选中的文件
console.log(this.files);
var file = this.files[0];
// 发送给服务器,进行图像上传
var fd = new FormData()
fd.append('file', file)
$.ajax({
type: 'post',
url: host + '/user/uploadAvatar',
headers: {
Authorization: 'Bearer ' + localStorage.getItem('cctoken')
},
contentType: false, // 根据类型自由设定
processData: false, // 关闭格式化参数
data: fd,
success: function (res) {
console.log(1);
if (res.success) {
console.log('头像上传成功');
// 回显头像 res.data.avatar 头像在服务器的地址
$('.bg .img-rounded').attr('src', host + res.data.avatar)
$('.avatar').html(`<img src="${host + res.data.avatar}" alt="">`);
localStorage.setItem('imgSrc', host + res.data.avatar)

}
}
})
})

主页

主要是调用ajax请求,电影列表的每一个li使用for循环嵌套字符串实现。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
success: function (res) {
var list = res.data.list;
var str = ``;
for (var i = 0; i < list.length; i++) {
str1 = `
<li class="item">

<div class="cover">
<img src="${list[i].medium}"
alt="" onerror="reload()">
<div class="cname">${list[i].title}</div>
</div>
<div class="buy">
购票
</div>

</li>
`;
str += str1;
}

榜单页

榜单页涉及了导航头部点击切换不同电影数据,调用了三个接口,点击切换状态即可;接着是电影数据的渲染,结合导航头部对应的act状态对不同的接口发送请求;底部分页及点击分页切换电影列表的实现也是获取页码对应的act状态及电影的pagenumber,在ajax中设置start和limit参数实现渲染。