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

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

  7. 轮播图

    (一) 对象封装

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

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

  9. this 指向

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

    (二) ajax 相关

    2.1 ajax介绍

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

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

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

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

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

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

    2.3 http 请求返回状态码

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

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

    1. // 普通对象
    2. {
    3.  name: 'zs',
    4.  age: 29
    5. }
    6. // json对象
    7. {
    8.  "name": "zs",
    9.  "age": 29
    10. }

  13. json字符串转对象

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

  14. 对象转json字符串

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

    (三) 同步和异步的概念

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

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

    1. <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js">
    2. </script>
    3. <script>
    4.  var url = 'http://132.232.87.95:3003/product/list';
    5.  $.ajax({
    6.      // 请求类型
    7.      type: "GET",
    8.      // 请求地址
    9.      url: url,
    10.      // 请求参数
    11.      data: {
    12.          pageNum: 1
    13.      },
    14.      dataType: "json",
    15.      // 成功后返回的数据
    16.      success: function(data) {
    17.          console.log(data);
    18.      }
    19.  });
    20. </script>

    (五) 轮播图

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

    (六) html5本地存储

  15. localStorage 存储数据

  16. localStorage 获取数据

    二、项目开发实战步骤

（一）需求分析

（二） 静态页面

（三）请求数据

  1. 在html加入jQuery.js

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

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

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

    （四）渲染页面

    4.1 轮播图

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

  4. 先写一个demo测试轮播图
  5. 再把demo放入我们的js

    4.2 电影列表

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

    （五）详情页面开发步骤

step1: 从首页跳转到详情页, 把电影编号(filmId)传递过去
  1.  <a class="item bd-gray flex jc-sb pt-15" href="./detail.html?filmId=${item.filmId}">略</a>

setp2: 给详情页的html文件添加 jquery.js, detail.js
  1.  <script src="../js/jQuery.js"></script>
  2.  <script src="../js/detai.js"></script>

step3: 在详情页获取首页传过来的filmId
  1. var str = location.search;
  2. var filmId = str.replace(/^\?filmId=(.*)/, '$1');
  3. console.log(filmId);

setp4: 创建detail对象, 并且在它的里面创建一个用来请求数据的方法, 并调用它来获取数据
  1. var detail = {
  2.     // 请求数据
  3.     getDetail: function(filmId) {
  4.         var url = 'http://huruqing.cn:3000/api/film/getDetail';
  5.         $.ajax({
  6.             type: 'get',
  7.             url: url,
  8.             data: {
  9.                 filmId: filmId
  10.             },
  11.             dataType: 'json',
  12.             success: function(res) {
  13.                 console.log(res);
  14.             }
  15.         });
  16.     }
  17. }
  19. detail.getDetail(filmId);

step5: 渲染电影详情
  1. var detail = {
  2.     // step2: 请求数据
  3.     getDetail: function(filmId) {
  4.         var self = this;
  5.         var url = 'http://huruqing.cn:3000/api/film/getDetail';
  6.         $.ajax({
  7.             type: 'get',
  8.             url: url,
  9.             data: {
  10.                 filmId: filmId
  11.             },
  12.             dataType: 'json',
  13.             success: function(res) {
  14.                 console.log(res);
  15.                 // 如果res.code==='666', 就调用渲染详情的方法, 否则就提示出了什么问题
  16.                 if (res.code === '666') {
  17.                     self.renderFilm(res.film);
  18.                 }else {
  19.                     alert(res.msg);
  20.                 }
  22.             }
  23.         });
  24.     },
  26.     // step: 渲染详情
  27.     renderFilm: function(film) {
  28.         document.querySelector('#app').innerHTML = `<header>
  29.         <img id="img" src="${film.poster}" class="w100pc">
  30.         <a class="fixed flex fcc" href="#">
  31.             <span class="icon iconfont">&#xe64b;</span>
  32.         </a>
  33.     </header>
  35.     <!-- 影片详情 -->
  36.     <main>
  37.         <div class="detail bg-fff ">
  38.             <div class="flex jc-sb lh15">
  39.                 <p>
  40.                     <span class="f18 name">老师·好</span>
  41.                     <span class="type">2D</span>
  42.                 </p>
  43.                 <p class="yellow"> <i class="f16">7</i> <span class="f12">分</span></p>
  44.             </div>
  45.             <p class="mt-10 f14 gray">剧情</p>
  46.             <p class="f14 gray mt-10">2019-03-22上映</p>
  47.             <p class="f14 gray mt-5">中国大陆 | 100分钟</p>
  48.             <p class="f14 gray mt-15 lh">
  49.                 1985年的南宿一中，苗宛秋老师推自行车昂首走在校园， 接受着人们艳羡的目光和纷至沓来的恭维。桀傲不驯的洛小乙、
  50.             </p>
  51.         </div>
  54.         <!-- 演职人员 -->
  55.         <div class="performer bg-fff mt-10">
  56.             <p class="font">演职人员</p>
  57.             <ul class="flex ever">
  58.                 <li class="flex2 aic ml-10">
  59.                     <img src="../img/MovieDetails/r1.jpg" class="image">
  60.                     <p class="f12 lh15">于谦 </p>
  61.                     <p class="f12 lh15 gray">苗宛秋</p>
  62.                 </li>
  63.                 <li class="flex2 aic ml-10">
  64.                     <img src="../img/MovieDetails/r2.jpg" class="image">
  65.                     <p class="f12 lh15">汤梦佳 </p>
  66.                     <p class="f12 lh15 gray">演员</p>
  67.                 </li>
  68.                 <li class="flex2 aic ml-10">
  69.                     <img src="../img/MovieDetails/r3.jpg" class="image">
  70.                     <p class="f12 lh15">秦鸣悦</p>
  71.                     <p class="f12 lh15 gray">关婷婷</p>
  72.                 </li>
  73.                 <li class="flex2 aic ml-10">
  74.                     <img src="../img/MovieDetails/r4.jpg" class="image">
  75.                     <p class="f12 lh15">王广源</p>
  76.                     <p class="f12 lh15 gray">洛小乙</p>
  77.                 </li>
  78.                 <li class="flex2 aic ml-10 pr-10">
  79.                     <img src="../img/MovieDetails/r5.jpg" class="image">
  80.                     <p class="f12 lh15">孙艺杨</p>
  81.                     <p class="f12 lh15 gray">演员</p>
  82.                 </li>
  83.             </ul>
  84.         </div>
  86.         <!-- 剧照 -->
  87.         <div class="performer bg-fff mt-10 pb-30">
  88.             <p class="font">剧照</p>
  89.             <ul class="flex ever">
  90.                 <li class="flex2 aic ml-10">
  91.                     <img src="../img/MovieDetails/jz1.jpg" class="image">
  92.                 </li>
  93.                 <li class="flex2 aic ml-10">
  94.                     <img src="../img/MovieDetails/jz2.jpg" class="image">
  95.                 </li>
  96.                 <li class="flex2 aic ml-10">
  97.                     <img src="../img/MovieDetails/jz3.jpg" class="image">
  98.                 </li>
  99.                 <li class="flex2 aic ml-10 pr-10">
  100.                     <img src="../img/MovieDetails/jz4.jpg" class="image">
  101.                 </li>
  102.             </ul>
  103.         </div>
  104.     </main>
  106.     <!-- 选座购票 -->
  107.     <p class="buttom">选座购票</p>`;
  108.     }
  109. }

step6: 渲染演员列表
  1. 必须是在step5执行之后才执行 ```javascript // 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); }

  1.         }
  2.     });
  3. },
  5. // step3: 渲染详情
  6. renderFilm: function(film) {
  7.     document.querySelector('#app').innerHTML = `<header>
  8.     <img id="img" src="${film.poster}" class="w100pc">
  9.     <a class="fixed flex fcc" href="#">
  10.         <span class="icon iconfont">&#xe64b;</span>
  11.     </a>
  12. </header>
  14. <!-- 影片详情 -->
  15. <main>
  16.     <div class="detail bg-fff ">
  17.         <div class="flex jc-sb lh15">
  18.             <p>
  19.                 <span class="f18 name">老师·好</span>
  20.                 <span class="type">2D</span>
  21.             </p>
  22.             <p class="yellow"> <i class="f16">7</i> <span class="f12">分</span></p>
  23.         </div>
  24.         <p class="mt-10 f14 gray">剧情</p>
  25.         <p class="f14 gray mt-10">2019-03-22上映</p>
  26.         <p class="f14 gray mt-5">中国大陆 | 100分钟</p>
  27.         <p class="f14 gray mt-15 lh">
  28.             1985年的南宿一中，苗宛秋老师推自行车昂首走在校园， 接受着人们艳羡的目光和纷至沓来的恭维。桀傲不驯的洛小乙、
  29.         </p>
  30.     </div>
  33.     <!-- 演职人员 -->
  34.     <div class="performer bg-fff mt-10">
  35.         <p class="font">演职人员</p>
  36.         <ul id="actors" class="flex ever">
  38.         </ul>
  39.     </div> 
  40. </main>
  42. <!-- 选座购票 -->
  43. <p class="buttom">选座购票</p>`;
  45.     // 调用渲染演员列表的方法  
  46.     this.renderActors(film.actors);
  47. },
  49. // step4: 渲染演员列表
  50. renderActors(list) {
  51.     var str = '';
  52.     list.forEach(function(item) {
  53.         str += `    <li class="flex2 aic ml-10">
  54.             <img src="${item.avatarAddress}" class="image">
  55.             <p class="f12 lh15">于谦 </p>
  56.             <p class="f12 lh15 gray">苗宛秋</p>
  57.         </li>`;
  58.     })
  59.     document.querySelector('#actors').innerHTML = str;
  60. }

}

detail.getDetail(filmId); ```