项目总结JSajax渲染电影网站
nancy Jane1项目简介
基于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 () { 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('头像上传成功'); $('.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参数实现渲染。