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

  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,setTimeoutsetInerval里的匿名函数的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. }
  18. 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. }
  21. }
  22. });
  23. },
  24. // step: 渲染详情
  25. renderFilm: function(film) {
  26. document.querySelector('#app').innerHTML = `<header>
  27. <img id="img" src="${film.poster}" class="w100pc">
  28. <a class="fixed flex fcc" href="#">
  29. <span class="icon iconfont">&#xe64b;</span>
  30. </a>
  31. </header>
  32. <!-- 影片详情 -->
  33. <main>
  34. <div class="detail bg-fff ">
  35. <div class="flex jc-sb lh15">
  36. <p>
  37. <span class="f18 name">老师·好</span>
  38. <span class="type">2D</span>
  39. </p>
  40. <p class="yellow"> <i class="f16">7</i> <span class="f12">分</span></p>
  41. </div>
  42. <p class="mt-10 f14 gray">剧情</p>
  43. <p class="f14 gray mt-10">2019-03-22上映</p>
  44. <p class="f14 gray mt-5">中国大陆 | 100分钟</p>
  45. <p class="f14 gray mt-15 lh">
  46. 1985年的南宿一中,苗宛秋老师推自行车昂首走在校园, 接受着人们艳羡的目光和纷至沓来的恭维。桀傲不驯的洛小乙、
  47. </p>
  48. </div>
  49. <!-- 演职人员 -->
  50. <div class="performer bg-fff mt-10">
  51. <p class="font">演职人员</p>
  52. <ul class="flex ever">
  53. <li class="flex2 aic ml-10">
  54. <img src="../img/MovieDetails/r1.jpg" class="image">
  55. <p class="f12 lh15">于谦 </p>
  56. <p class="f12 lh15 gray">苗宛秋</p>
  57. </li>
  58. <li class="flex2 aic ml-10">
  59. <img src="../img/MovieDetails/r2.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/r3.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/r4.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 pr-10">
  74. <img src="../img/MovieDetails/r5.jpg" class="image">
  75. <p class="f12 lh15">孙艺杨</p>
  76. <p class="f12 lh15 gray">演员</p>
  77. </li>
  78. </ul>
  79. </div>
  80. <!-- 剧照 -->
  81. <div class="performer bg-fff mt-10 pb-30">
  82. <p class="font">剧照</p>
  83. <ul class="flex ever">
  84. <li class="flex2 aic ml-10">
  85. <img src="../img/MovieDetails/jz1.jpg" class="image">
  86. </li>
  87. <li class="flex2 aic ml-10">
  88. <img src="../img/MovieDetails/jz2.jpg" class="image">
  89. </li>
  90. <li class="flex2 aic ml-10">
  91. <img src="../img/MovieDetails/jz3.jpg" class="image">
  92. </li>
  93. <li class="flex2 aic ml-10 pr-10">
  94. <img src="../img/MovieDetails/jz4.jpg" class="image">
  95. </li>
  96. </ul>
  97. </div>
  98. </main>
  99. <!-- 选座购票 -->
  100. <p class="buttom">选座购票</p>`;
  101. }
  102. }

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

}

detail.getDetail(filmId); ```