一、项目需要用到的知识点

1. 对象封装
2. ajax介绍
3. 使用ajax请求后台数据
4. http请求返回状态码
5. 同步和异步的概念
6. jQuery的ajax方法
7. 轮播图

(一) 对象封装

1. 为什么要把函数封装到对象里

   (1)避免全局变量污染
   (2)编程体验更好,维护更方便

2. this 指向

   (1)一般规律: 谁调用指向谁
   (2)全局函数的this指向window,setTimeout和setInerval里的匿名函数的this指向window

(二) ajax 相关

2.1 ajax介绍

(1)AJAX = 异步 JavaScript 和 XML。
(2)AJAX 是一种用于创建快速动态网页的技术。
(3)通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。以前更新网页需要重新加载整个网页(很久很久以前)

2.2 创建 ajax 对象请求后台数据

1. 什么是接口: 一个url地址,当你访问它时候,它就会给你提供数据(接口数据)

2. 如何使用ajax请求后台提供的接口,以获得我们需要的数据

   // ajax.readyState的取值含义
   0：请求未初始化（还没有调用 open()）。
   1：请求已经建立，但是还没有发送（还没有调用 send()）。
   2：请求已发送，正在处理中（通常现在可以从响应中获取内容头）。
   3：请求在处理中；通常响应中已有部分数据可用了，但是服务器还没有完成响应的生成。
   4：响应已完成；您可以获取并使用服务器的响应了。

3. 请求参数: 你向后台要数据的时候,你告诉它你要什么

2.3 http 请求返回状态码

(1)使用浏览器的network可以查看请求结果
(2)200 表示服务器成功返回数据
(3)404 表示找不到
(4)500 表示服务器错误

(三) json字符串转对象或者对象转json字符串

// 普通对象
{
    name: 'zs',
    age: 29
}
// json对象
{
    "name": "zs",
    "age": 29
}

1. json字符串转对象

   var str = '{ "name": "zs", "age": 29 }'
   var obj= JSON.parse(str);

2. 对象转json字符串

   var obj = {a:2,b:3};
   var str= JSON.stringify(obj );

(三) 同步和异步的概念

同步: 一次只做一件事情,做第二件事时需要等待第一件事情做完才开始做,调理很清晰.比如排队做核酸
异步: 同时做几件事,效率更高,比如我在做饭的时候,先把米下锅,开始煮,饭没煮熟的时候我就可以开始炒菜

(四) 封装ajax, 使用jquery提供的方法请求数据

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js">
</script>
<script>
    var url = 'http://132.232.87.95:3003/product/list';
    $.ajax({
        // 请求类型
        type: "GET",
        // 请求地址
        url: url,
        // 请求参数
        data: {
            pageNum: 1
        },
        dataType: "json",
        // 成功后返回的数据
        success: function(data) {
            console.log(data);
        }
    });
</script>

(五) 轮播图

https://www.swiper.com.cn/usage/index.html

(六) html5本地存储

1. localStorage 存储数据
2. localStorage 获取数据

二、项目开发实战步骤

（一）需求分析

（二） 静态页面

（三）请求数据

1. 在html加入jQuery.js

   // 本地
   <script src="../js/jQuery.js"></script>
   // cdn
   <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>

2. 声明一个对象, 在它里面创建一个获取数据的方法

   接口地址:  http://huruqing.cn:3000

（四）渲染页面

4.1 轮播图

1. https://www.swiper.com.cn/usage/index.html
2. 先写一个demo测试轮播图
3. 再把demo放入我们的js

4.2 电影列表

(1) 单一职责原则: 一个函数(方法)负责一件事情

（五）详情页面开发步骤

step1: 从首页跳转到详情页, 把电影编号(filmId)传递过去

 <a class="item bd-gray flex jc-sb pt-15" href="./detail.html?filmId=${item.filmId}">略</a>

setp2: 给详情页的html文件添加 jquery.js, detail.js

 <script src="../js/jQuery.js"></script>
 <script src="../js/detai.js"></script>

step3: 在详情页获取首页传过来的filmId

var str = location.search;
var filmId = str.replace(/^\?filmId=(.*)/, '$1');
console.log(filmId);

setp4: 创建detail对象, 并且在它的里面创建一个用来请求数据的方法, 并调用它来获取数据

var detail = {
    // 请求数据
    getDetail: function(filmId) {
        var url = 'http://huruqing.cn:3000/api/film/getDetail';
        $.ajax({
            type: 'get',
            url: url,
            data: {
                filmId: filmId
            },
            dataType: 'json',
            success: function(res) {
                console.log(res);
            }
        });
    }
}
detail.getDetail(filmId);

step5: 渲染电影详情

var detail = {
    // step2: 请求数据
    getDetail: function(filmId) {
        var self = this;
        var url = 'http://huruqing.cn:3000/api/film/getDetail';
        $.ajax({
            type: 'get',
            url: url,
            data: {
                filmId: filmId
            },
            dataType: 'json',
            success: function(res) {
                console.log(res);
                // 如果res.code==='666', 就调用渲染详情的方法, 否则就提示出了什么问题
                if (res.code === '666') {
                    self.renderFilm(res.film);
                }else {
                    alert(res.msg);
                }
            }
        });
    },
    // step: 渲染详情
    renderFilm: function(film) {
        document.querySelector('#app').innerHTML = `<header>
        <img id="img" src="${film.poster}" class="w100pc">
        <a class="fixed flex fcc" href="#">
            <span class="icon iconfont">&#xe64b;</span>
        </a>
    </header>
    <!-- 影片详情 -->
    <main>
        <div class="detail bg-fff ">
            <div class="flex jc-sb lh15">
                <p>
                    <span class="f18 name">老师·好</span>
                    <span class="type">2D</span>
                </p>
                <p class="yellow"> <i class="f16">7</i> <span class="f12">分</span></p>
            </div>
            <p class="mt-10 f14 gray">剧情</p>
            <p class="f14 gray mt-10">2019-03-22上映</p>
            <p class="f14 gray mt-5">中国大陆 | 100分钟</p>
            <p class="f14 gray mt-15 lh">
                1985年的南宿一中，苗宛秋老师推自行车昂首走在校园， 接受着人们艳羡的目光和纷至沓来的恭维。桀傲不驯的洛小乙、
            </p>
        </div>
        <!-- 演职人员 -->
        <div class="performer bg-fff mt-10">
            <p class="font">演职人员</p>
            <ul class="flex ever">
                <li class="flex2 aic ml-10">
                    <img src="../img/MovieDetails/r1.jpg" class="image">
                    <p class="f12 lh15">于谦 </p>
                    <p class="f12 lh15 gray">苗宛秋</p>
                </li>
                <li class="flex2 aic ml-10">
                    <img src="../img/MovieDetails/r2.jpg" class="image">
                    <p class="f12 lh15">汤梦佳 </p>
                    <p class="f12 lh15 gray">演员</p>
                </li>
                <li class="flex2 aic ml-10">
                    <img src="../img/MovieDetails/r3.jpg" class="image">
                    <p class="f12 lh15">秦鸣悦</p>
                    <p class="f12 lh15 gray">关婷婷</p>
                </li>
                <li class="flex2 aic ml-10">
                    <img src="../img/MovieDetails/r4.jpg" class="image">
                    <p class="f12 lh15">王广源</p>
                    <p class="f12 lh15 gray">洛小乙</p>
                </li>
                <li class="flex2 aic ml-10 pr-10">
                    <img src="../img/MovieDetails/r5.jpg" class="image">
                    <p class="f12 lh15">孙艺杨</p>
                    <p class="f12 lh15 gray">演员</p>
                </li>
            </ul>
        </div>
        <!-- 剧照 -->
        <div class="performer bg-fff mt-10 pb-30">
            <p class="font">剧照</p>
            <ul class="flex ever">
                <li class="flex2 aic ml-10">
                    <img src="../img/MovieDetails/jz1.jpg" class="image">
                </li>
                <li class="flex2 aic ml-10">
                    <img src="../img/MovieDetails/jz2.jpg" class="image">
                </li>
                <li class="flex2 aic ml-10">
                    <img src="../img/MovieDetails/jz3.jpg" class="image">
                </li>
                <li class="flex2 aic ml-10 pr-10">
                    <img src="../img/MovieDetails/jz4.jpg" class="image">
                </li>
            </ul>
        </div>
    </main>
    <!-- 选座购票 -->
    <p class="buttom">选座购票</p>`;
    }
}

step6: 渲染演员列表

1. 必须是在step5执行之后才执行

// step1: 获取首页传过来的filmId
var str = location.search;
var filmId = str.replace(/^\?filmId=(.*)/, '$1');
// console.log(filmId);
var detail = {
    // step2: 请求数据
    getDetail: function(filmId) {
        var self = this;
        var url = 'http://huruqing.cn:3000/api/film/getDetail';
        $.ajax({
            type: 'get',
            url: url,
            data: {
                filmId: filmId
            },
            dataType: 'json',
            success: function(res) {
                // 如果res.code==='666', 就调用渲染详情的方法, 否则就提示出了什么问题
                if (res.code === '666') {
                    self.renderFilm(res.film);
                } else {
                    alert(res.msg);
                }
            }
        });
    },
    // step3: 渲染详情
    renderFilm: function(film) {
        document.querySelector('#app').innerHTML = `<header>
        <img id="img" src="${film.poster}" class="w100pc">
        <a class="fixed flex fcc" href="#">
            <span class="icon iconfont">&#xe64b;</span>
        </a>
    </header>
    <!-- 影片详情 -->
    <main>
        <div class="detail bg-fff ">
            <div class="flex jc-sb lh15">
                <p>
                    <span class="f18 name">老师·好</span>
                    <span class="type">2D</span>
                </p>
                <p class="yellow"> <i class="f16">7</i> <span class="f12">分</span></p>
            </div>
            <p class="mt-10 f14 gray">剧情</p>
            <p class="f14 gray mt-10">2019-03-22上映</p>
            <p class="f14 gray mt-5">中国大陆 | 100分钟</p>
            <p class="f14 gray mt-15 lh">
                1985年的南宿一中，苗宛秋老师推自行车昂首走在校园， 接受着人们艳羡的目光和纷至沓来的恭维。桀傲不驯的洛小乙、
            </p>
        </div>
        <!-- 演职人员 -->
        <div class="performer bg-fff mt-10">
            <p class="font">演职人员</p>
            <ul id="actors" class="flex ever">
            </ul>
        </div> 
    </main>
    <!-- 选座购票 -->
    <p class="buttom">选座购票</p>`;
        // 调用渲染演员列表的方法  
        this.renderActors(film.actors);
    },
    // step4: 渲染演员列表
    renderActors(list) {
        var str = '';
        list.forEach(function(item) {
            str += `    <li class="flex2 aic ml-10">
                <img src="${item.avatarAddress}" class="image">
                <p class="f12 lh15">于谦 </p>
                <p class="f12 lh15 gray">苗宛秋</p>
            </li>`;
        })
        document.querySelector('#actors').innerHTML = str;
    }
}
detail.getDetail(filmId);