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参数实现渲染。