devbox
小小林熬夜学编程
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

React项目案例-影视资源网站_react-responsive-carousel

作者：小小林熬夜学编程 | 2024-04-18 14:28:02

赞

踩

react-responsive-carousel

案例项目基本需求分析

  • 前端页面布局使用Chakra-UI

  • 后端服务使用Next.js

  • 样式定义采用CSS-in-JS的方案，使用emotion库（需要在Next.js扩展babel配置）

  • Next.js 与Chakra-UI结合使用实现项目页面的功能

  • 首页（列表页）的轮播图，以及影视资源列表展示

项目代码初始化

运行安装依赖包命令：

npm init next-app aimovie
cd aimovie
#npm i @chakra-ui/react
#npm i @chakra-ui/react@^1 @emotion/react@^11 @emotion/styled@^11 framer-motion@^6
npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion
npm i react-icons
npm i @babel/core @emotion/babel-preset-css-prop -D 
  1. {
  2.   "name": "aimovie",
  3.   "version": "0.1.0",
  4.   "private": true,
  5.   "scripts": {
  6.     "dev": "next dev",
  7.     "build": "next build",
  8.     "start": "next start",
  9.     "lint": "next lint"
  10.   },
  11.   "dependencies": {
  12.     "@babel/core": "^7.21.0",
  13.     "@chakra-ui/react": "^2.5.1",
  14.     "@emotion/react": "^11.10.6",
  15.     "@emotion/styled": "^11.10.6",
  16.     "framer-motion": "^10.2.5",
  17.     "next": "13.2.4",
  18.     "react": "18.2.0",
  19.     "react-dom": "18.2.0",
  20.     "react-icons": "^4.8.0"
  21.   }
  22. }

创建pages目录下的 _app.js 文件：

  1. // import '@/styles/globals.css'
  2. // pages/_app.js
  3. import { ChakraProvider, CSSReset } from '@chakra-ui/react'
  4. import theme from '../chakra'
  5.  
  6. function App ({ Component, pageProps }) {
  7.   return (
  8.     <ChakraProvider theme={theme}>
  9.       <CSSReset />
  10.       <Component {...pageProps} />
  11.     </ChakraProvider>
  12.   )
  13. }
  14.  
  15. export default App

创建 .babelrc 文件作为babel的配置文件：(在新版的next.js中不需要配置，默认开启了cssProp，否则会产生next/font冲突)

  1. {
  2.   "presets": [
  3.     "next/babel",
  4.     "@emotion/babel-preset-css-prop"
  5.   ]
  6. }

页面组件规划与布局实现

实现页面头部组件

头部组件包含三部分：左侧的登录注册按钮组件 中间的网站logo 右边的搜索按钮。

布局规划：左浮动 有浮动 中间logo始终居中。

创建components文件夹，用于存放非页面层级的组件。

头部组件基本布局：

  1. import React from 'react'
  2. import { Box, Button, Container, Image } from '@chakra-ui/react'
  3. import { FaSearch, FaSignInAlt, FaUserAlt } from 'react-icons/fa'
  4. import styled from '@emotion/styled'
  5. import { css } from '@emotion/react'
  6. const SignInAndJoin = styled.div`
  7.   height: 52px;
  8.   line-height: 52px;
  9.   color: #fff;
  10.   border-left: 1px solid #393939;
  11.   border-right: 1px solid #393939;
  12.   padding: 0 6px;
  13.   float: left;
  14. `
  15. const logo = css`
  16.   position: absolute;
  17.   left: 50%;
  18.   top: 50%;
  19.   transform: translate(-50%, -50%);
  20.   width: 140px;
  21.   height: auto;
  22. `
  23.  
  24. const Search = styled.a`
  25.   float: right;
  26.   height: 52px;
  27.   border-left: 1px solid #393939;
  28.   border-right: 1px solid #393939;
  29.   color: #fff;
  30.   padding: 0 10px;
  31.   display: flex;
  32.   align-items: center;
  33. `
  34. export default function Header () {
  35.   return (
  36.     <Box h='52px' bgColor='#202020' borderBottom='1px solid #393939'>
  37.       <Container pos='relative' h='52px' maxW='1200px'>
  38.         <SignInAndJoin>
  39.           <Button
  40.             mr='5px'
  41.             leftIcon={<FaSignInAlt />}
  42.             colorScheme='teal'
  43.             variant='solid'
  44.           >
  45.             登录
  46.           </Button>
  47.           <Button
  48.             leftIcon={<FaUserAlt />}
  49.             colorScheme='orange'
  50.             variant='outline'
  51.           >
  52.             注册
  53.           </Button>
  54.         </SignInAndJoin>
  55.         <Image css={logo} src='/images/logo.png' />
  56.         <Search>
  57.           <FaSearch size='16px' title='搜索' />
  58.         </Search>
  59.       </Container>
  60.     </Box>
  61.   )
  62. }

实现导航组件布局

  1. import React from 'react'
  2. import { Box, HStack, Link } from '@chakra-ui/react'
  3. import NextLink from 'next/link'
  4. import styles from '@/styles/Navigation.module.css'
  5. import { useRouter } from 'next/router'
  6.  
  7. export default function Navigation () {
  8.   const router = useRouter()
  9.   const isActiveLink = href => router.asPath === href
  10.   return (
  11.     <Box height='52px' bgColor='#202020' color='#fff'>
  12.       <HStack h='100%' spacing={3} justifyContent='center' alignItems='center'>
  13.         <Link
  14.           className={`${styles.navlink} ${
  15.             isActiveLink('/') ? styles.active : ''
  16.           }`}
  17.           href='/'
  18.           as={NextLink}
  19.         >
  20.           影片
  21.         </Link>
  22.         <Link
  23.           className={`${styles.navlink} ${
  24.             isActiveLink('/1') ? styles.active : ''
  25.           }`}
  26.           href='/1'
  27.           as={NextLink}
  28.         >
  29.           漫画
  30.         </Link>
  31.         <Link
  32.           className={`${styles.navlink} ${
  33.             isActiveLink('/2') ? styles.active : ''
  34.           }`}
  35.           href='/2'
  36.           as={NextLink}
  37.         >
  38.           电影
  39.         </Link>
  40.         <Link
  41.           className={`${styles.navlink} ${
  42.             isActiveLink('/3') ? styles.active : ''
  43.           }`}
  44.           href='/3'
  45.           as={NextLink}
  46.         >
  47.           电视
  48.         </Link>
  49.         <Link
  50.           className={`${styles.navlink} ${
  51.             isActiveLink('/4') ? styles.active : ''
  52.           }`}
  53.           href='/4'
  54.           as={NextLink}
  55.         >
  56.           新闻资讯
  57.         </Link>
  58.       </HStack>
  59.     </Box>
  60.   )
  61. }

实现轮播图组件布局

这里使用到一个第三方组件react-responsive-carousel

npm i react-responsive-carousel 
  1. import React from 'react'
  2. import { Carousel } from 'react-responsive-carousel'
  3. import 'react-responsive-carousel/lib/styles/carousel.min.css'
  4. import { css } from '@emotion/react'
  5. import { Box, Stack, Heading, Text, Button } from '@chakra-ui/react'
  6. import styled from '@emotion/styled'
  7. const CarouselItem = styled.div`
  8.   position: relative;
  9.   & > div {
  10.     position: absolute;
  11.     left: 50%;
  12.     top: 0;
  13.     transform: translateX(-50%);
  14.     color: #fff;
  15.     width: 80%;
  16.     height: 100%;
  17.     max-width: 1200px;
  18.     text-align: left;
  19.     & > h2 {
  20.       width: 450px;
  21.     }
  22.     & > p {
  23.       margin: 15px 0;
  24.       width: 450px;
  25.     }
  26.   }
  27.   & > img {
  28.     filter: brightness(50%);
  29.   }
  30. `
  31. const swiperContainer = css`
  32.   & > .carousel-root {
  33.     position: relative;
  34.     & > .carousel:last-child {
  35.       position: absolute;
  36.       left: 0;
  37.       bottom: 0;
  38.       & > .thumbs-wrapper > .thumbs {
  39.         display: flex;
  40.         justify-content: center;
  41.       }
  42.     }
  43.   }
  44. `
  45.  
  46. export default function Swiper () {
  47.   return (
  48.     <Box css={swiperContainer}>
  49.       <Carousel
  50.         // autoPlay
  51.         infiniteLoop
  52.         emulateTouch
  53.         showArrows={false}
  54.         showIndicators={false}
  55.         showStatus={false}
  56.       >
  57.         <CarouselItem>
  58.           <img src='/images/1.jpg' />
  59.           <Stack justifyContent='center'>
  60.             <Heading as='h1' size={'lg'}>
  61.               King In Black
  62.             </Heading>
  63.             <Text>
  64.               The next shock chapter in Donny Cates and Ryan Stegman hello look
  65.               at me! shock chapter in Donny Cates and Ryan Stegman hello look at
  66.               me!
  67.             </Text>
  68.             <Button colorScheme='red' w='150px'>
  69.               Go To This
  70.             </Button>
  71.           </Stack>
  72.         </CarouselItem>
  73.         <CarouselItem>
  74.           <img src='/images/2.jpg' />
  75.           <Stack justifyContent='center'>
  76.             <Heading as='h1' size={'lg'}>
  77.               King In Black
  78.             </Heading>
  79.             <Text>
  80.               The next shock chapter in Donny Cates and Ryan Stegman hello look
  81.               at me! shock chapter in Donny Cates and Ryan Stegman hello look at
  82.               me!
  83.             </Text>
  84.             <Button colorScheme='red' w='150px'>
  85.               Go To This
  86.             </Button>
  87.           </Stack>
  88.         </CarouselItem>
  89.         <CarouselItem>
  90.           <img src='/images/3.jpg' />
  91.           <Stack justifyContent='center'>
  92.             <Heading as='h1' size={'lg'}>
  93.               King In Black
  94.             </Heading>
  95.             <Text>
  96.               The next shock chapter in Donny Cates and Ryan Stegman hello look
  97.               at me! shock chapter in Donny Cates and Ryan Stegman hello look at
  98.               me!
  99.             </Text>
  100.             <Button colorScheme='red' w='150px'>
  101.               Go To This
  102.             </Button>
  103.           </Stack>
  104.         </CarouselItem>
  105.       </Carousel>
  106.     </Box>
  107.   )
  108. }

实现电影列表布局

  1. import React from 'react'
  2. import { Box, Heading, HStack, Text } from '@chakra-ui/react'
  3. import { FaFilm } from 'react-icons/fa'
  4. import { MdMovie } from 'react-icons/md'
  5.  
  6. export default function Movie () {
  7.   return (
  8.     <Box maxW='1200px' mx='auto' mt='20px'>
  9.       <HStack fontSize='24px' my='10px'>
  10.         <MdMovie size='24px' />
  11.         <Heading as='h3'>电影</Heading>
  12.       </HStack>
  13.       <HStack mt='20px' spacing={3}>
  14.         <Box w={'290px'}>
  15.           <img src='/images/item_1.jpg' />
  16.           <Text mt='10px' as='section'>
  17.             Expected corresponding JSX closing tag for Black Hero
  18.           </Text>
  19.         </Box>
  20.         <Box w={'290px'}>
  21.           <img src='/images/item_1.jpg' />
  22.           <Text mt='10px' as='section'>
  23.             Expected corresponding JSX closing tag for Black Hero
  24.           </Text>
  25.         </Box>
  26.         <Box w={'290px'}>
  27.           <img src='/images/item_1.jpg' />
  28.           <Text mt='10px' as='section'>
  29.             Expected corresponding JSX closing tag for Black Hero
  30.           </Text>
  31.         </Box>
  32.         <Box w={'290px'}>
  33.           <img src='/images/item_1.jpg' />
  34.           <Text mt='10px' as='section'>
  35.             Expected corresponding JSX closing tag for Black Hero
  36.           </Text>
  37.         </Box>
  38.         <Box w={'290px'}>
  39.           <img src='/images/item_1.jpg' />
  40.           <Text mt='10px' as='section'>
  41.             Expected corresponding JSX closing tag for Black Hero
  42.           </Text>
  43.         </Box>
  44.         <Box w={'290px'}>
  45.           <img src='/images/item_1.jpg' />
  46.           <Text mt='10px' as='section'>
  47.             Expected corresponding JSX closing tag for Black Hero
  48.           </Text>
  49.         </Box>
  50.       </HStack>
  51.     </Box>
  52.   )
  53. }

实现电影详情页面布局

  1. import Layout from '@/components/Layout'
  2. import React from 'react'
  3. import { Box, HStack, Text, Heading, Divider } from '@chakra-ui/react'
  4. import { css } from '@emotion/react'
  5.  
  6. const DetailContainer = css`
  7.   padding: 10px;
  8.   & > p {
  9.     font-size: 14px;
  10.     margin-bottom: 10px;
  11.   }
  12.   & > img {
  13.     display: block;
  14.     margin-bottom: 10px;
  15.   }
  16. `
  17. export default function Detail () {
  18.   return (
  19.     <Layout>
  20.       <Box maxW='1200px' mx='auto' width='80%' mt='70px'>
  21.         <Heading as='h2' size='xl'>
  22.           Marvel Mission recap: Captain Marvel's Star of Hala
  23.         </Heading>
  24.         <Heading
  25.           as='h4'
  26.           size='lg'
  27.           mt='10px'
  28.           color='gray.500'
  29.           fontWeight='light'
  30.         >
  31.           The result are out this world!
  32.         </Heading>
  33.         <Divider mt='10px' />
  34.         <HStack
  35.           overflow='hidden'
  36.           justifyContent='space-between'
  37.           spacing={3}
  38.           my='10px'
  39.         >
  40.           <Text>作者: MarkTony</Text>
  41.           <Text>发布时间: 2040-05-10</Text>
  42.         </HStack>
  43.         <Divider mt='10px' />
  44.         <Box css={DetailContainer}>
  45.           <p>
  46.             event - compiled client and server successfully in 377 ms (1213
  47.             modules) wait - compiling... event - compiled client and server
  48.             successfully in 520 ms (1213 modules) wait - compiling... event -
  49.             compiled client and server successfully in 646 ms (1213 modules)
  50.             wait - compiling...
  51.           </p>
  52.           <p>
  53.             event - compiled client and server successfully in 377 ms (1213
  54.             modules) wait - compiling... event - compiled client and server
  55.             successfully in 520 ms (1213 modules) wait - compiling... event -
  56.             compiled client and server successfully in 646 ms (1213 modules)
  57.             wait - compiling...
  58.           </p>
  59.           <p>
  60.             event - compiled client and server successfully in 377 ms (1213
  61.             modules) wait - compiling... event - compiled client and server
  62.             successfully in 520 ms (1213 modules) wait - compiling... event -
  63.             compiled client and server successfully in 646 ms (1213 modules)
  64.             wait - compiling...
  65.           </p>
  66.           <p>
  67.             event - compiled client and server successfully in 377 ms (1213
  68.             modules) wait - compiling... event - compiled client and server
  69.             successfully in 520 ms (1213 modules) wait - compiling... event -
  70.             compiled client and server successfully in 646 ms (1213 modules)
  71.             wait - compiling...
  72.           </p>
  73.         </Box>
  74.       </Box>
  75.     </Layout>
  76.   )
  77. }

实现首页组件的静态生成

轮播图数据获取与展示

这里我们需要使用到axios库来发送请求以获取我们所需的数据：

npm i axios

在根目录下创建一个axiosConfig.js文件：

  1. export const baseURL = 'http://localhost:3000'
  2. export default {
  3.   // thrid-party API base URL
  4.   baseURL
  5. }

在pages/api目录下创建swiper.js的文件，模拟获取swiper的API供组件调用：

  1. import { baseURL as url } from '@/axiosConfig'
  2.  
  3. export default function swiper (req, res) {
  4.   res.status(200).json([
  5.     {
  6.       id: 1,
  7.       title: 'Event-Sized Episode!',
  8.       description:
  9.         "Paul Scheer and Steve Wacker are joined by Anthony Carboni of 'The Star Wars Show' for an event sized episode!",
  10.       url: `${url}/apiresources/images/api_swiper_1.jpg`,
  11.       vid: 1
  12.     },
  13.     {
  14.       id: 2,
  15.       title: 'Time Travel Tips',
  16.       description:
  17.         'Traveling back in time is never easy? Let us help by consulting the pros!',
  18.       url: `${url}/apiresources/images/api_swiper_2.jpg`,
  19.       vid: 2
  20.     },
  21.     {
  22.       id: 3,
  23.       title: 'KING IN BLACK',
  24.       description:
  25.         "The next shocking chapter in Donny Cates and Ryan Stegman's Venom Saga is revealed!",
  26.       url: `${url}/apiresources/images/api_swiper_3.jpg`,
  27.       vid: 3
  28.     },
  29.     {
  30.       id: 4,
  31.       title: "LET'S PLAY FORTNITE",
  32.       description:
  33.         'Watch as we stream the brand new Captain America outfit in Fortnite!',
  34.       url: `${url}/apiresources/images/api_swiper_4.jpg`,
  35.       vid: 4
  36.     },
  37.     {
  38.       id: 5,
  39.       title: 'HAPPY ULTRAMAN DAY!',
  40.       description:
  41.         "Celebrate by getting a sneak peek at 'Rise of Ultraman #1'!",
  42.       url: `${url}/apiresources/images/api_swiper_5.jpg`,
  43.       vid: 5
  44.     }
  45.   ])
  46. }

components/Swiper.js组件文件中,创建并导出loadSwiper函数：

  1. // components/Swiper.js
  2. export function loadSwiper () {
  3.   // 这离获取数据不建议从本地通过API接口获取，而应该通过封装后端的方法函数直接操作数据库获取
  4.   // 如果是第三方API可以通过API接口获取数据
  5.   return axios.get('/api/swiper', { baseURL: 'http://localhost:3000/' })
  6. }

然后在首页的Home组件（pages/index.js）中，创建并导出getStaticProps函数，并且在Home组件中解构组件的props获取swiper数据对象，把swiper作为data属性传递给Swiper组件：

  1. import Image from 'next/image'
  2. // import { Inter } from 'next/font/google'
  3. import styles from '@/styles/Home.module.css'
  4. import Swiper, { loadSwiper } from '@/components/Swiper'
  5. import Movie from '@/components/Movie'
  6. import Layout from '@/components/Layout'
  7.  
  8. // const inter = Inter({ subsets: ['latin'] })
  9.  
  10. export default function Home ({ swiper }) {
  11.   return (
  12.     <>
  13.       <Layout>
  14.         <Swiper data={swiper} />
  15.         <Movie />
  16.       </Layout>
  17.     </>
  18.   )
  19. }
  20.  
  21. export async function getStaticProps () {
  22.   let { data: swiper } = await loadSwiper()
  23.   return {
  24.     props: {
  25.       swiper
  26.     }
  27.   }
  28. }

使用传递给components/Swiper.js组件的数据修改组件内容展示：

  1. import React from 'react'
  2. import { Carousel } from 'react-responsive-carousel'
  3. import 'react-responsive-carousel/lib/styles/carousel.min.css'
  4. import { css } from '@emotion/react'
  5. import { Box, Stack, Heading, Text, Button } from '@chakra-ui/react'
  6. import styled from '@emotion/styled'
  7. import axios from 'axios'
  8. import { useRouter } from 'next/router'
  9.  
  10. const CarouselItem = styled.div`
  11.   position: relative;
  12.   & > div {
  13.     position: absolute;
  14.     left: 50%;
  15.     top: 0;
  16.     transform: translateX(-50%);
  17.     color: #fff;
  18.     width: 80%;
  19.     height: 100%;
  20.     max-width: 1200px;
  21.     text-align: left;
  22.     & > h2 {
  23.       width: 450px;
  24.     }
  25.     & > p {
  26.       margin: 15px 0 15px;
  27.       width: 450px;
  28.       font-size: 14px;
  29.     }
  30.   }
  31.   & > img {
  32.     filter: brightness(50%);
  33.   }
  34. `
  35. const swiperContainer = css`
  36.   & > .carousel-root {
  37.     position: relative;
  38.     & > .carousel:last-child {
  39.       position: absolute;
  40.       left: 0;
  41.       bottom: 0;
  42.       & > .thumbs-wrapper > .thumbs {
  43.         display: flex;
  44.         justify-content: center;
  45.       }
  46.     }
  47.   }
  48. `
  49.  
  50. export default function Swiper ({ data }) {
  51.   const router = useRouter()
  52.   return (
  53.     <Box css={swiperContainer}>
  54.       <Carousel
  55.         // autoPlay
  56.         infiniteLoop
  57.         emulateTouch
  58.         showArrows={false}
  59.         showIndicators={false}
  60.         showStatus={false}
  61.       >
  62.         {data.map(swiper => (
  63.           <CarouselItem key={swiper.id}>
  64.             <img src={swiper.url} />
  65.             <Stack justifyContent='center'>
  66.               <Heading as='h2' fontSize='4xl'>
  67.                 {swiper.title}
  68.               </Heading>
  69.               <Text>{swiper.description}</Text>
  70.               <Button
  71.                 colorScheme='red'
  72.                 w='120px'
  73.                 size='lg'
  74.                 onClick={() =>
  75.                   router.push({
  76.                     pathname: '/detail/[id]',
  77.                     query: { id: swiper.vid }
  78.                   })
  79.                 }
  80.               >
  81.                 CHECK DETAIL
  82.               </Button>
  83.             </Stack>
  84.           </CarouselItem>
  85.         ))}
  86.       </Carousel>
  87.     </Box>
  88.   )
  89. }
  90.  
  91. export function loadSwiper () {
  92.   // 这离获取数据不建议从本地通过API接口获取，而应该通过封装后端的方法函数直接操作数据库获取
  93.   // 如果是第三方API可以通过API接口获取数据
  94.   return axios.get('/api/swiper', { baseURL: 'http://localhost:3000/' })
  95. }

电影列表数据的获取与展示

在pages/api目录下创建movie.js的文件，模拟获取movie的API供组件调用：

  1. import { baseURL as url } from '@/axiosConfig'
  2.  
  3. export default function movie (req, res) {
  4.   res.status(200).json([
  5.     {
  6.       id: 1,
  7.       vid: 6,
  8.       url: `${url}/apiresources/images/api_movie_1.jpg`,
  9.       title: 'Marvel Mission Recap: Captain Marvel’s Star of Hala'
  10.     },
  11.     {
  12.       id: 2,
  13.       vid: 7,
  14.       url: `${url}/apiresources/images/api_movie_2.jpg`,
  15.       title: 'Make Your Video Calls Worthy With These Backgrounds'
  16.     },
  17.     {
  18.       id: 3,
  19.       vid: 8,
  20.       url: `${url}/apiresources/images/api_movie_3.jpg`,
  21.       title: 'Make Your Video Calls Worthy With These Backgrounds'
  22.     },
  23.     {
  24.       id: 4,
  25.       vid: 9,
  26.       url: `${url}/apiresources/images/api_movie_4.jpg`,
  27.       title:
  28.         'Marvel At Home: Here’s How to Stay Connected With Your Favorite Super Heroes'
  29.     }
  30.   ])
  31. }

components/Movie.js组件文件中,创建并导出loadMovie函数：

  1. export function loadMovie () {
  2.   return axios.get('/api/movie', { baseURL })
  3. }

然后在首页的Home组件（pages/index.js）中，创建并导出getStaticProps函数，并且在Home组件中解构组件的props获取movie数据对象，把movie作为data属性传递给Movie组件：

  1. import Image from 'next/image'
  2. // import { Inter } from 'next/font/google'
  3. import styles from '@/styles/Home.module.css'
  4. import Swiper, { loadSwiper } from '@/components/Swiper'
  5. import Movie, { loadMovie } from '@/components/Movie'
  6. import Layout from '@/components/Layout'
  7.  
  8. // const inter = Inter({ subsets: ['latin'] })
  9.  
  10. export default function Home ({ swiper, movie }) {
  11.   return (
  12.     <>
  13.       <Layout>
  14.         <Swiper data={swiper} />
  15.         <Movie data={movie} />
  16.       </Layout>
  17.     </>
  18.   )
  19. }
  20.  
  21. export async function getStaticProps () {
  22.   const { data: swiper } = await loadSwiper()
  23.   const { data: movie } = await loadMovie()
  24.   return {
  25.     props: {
  26.       swiper,
  27.       movie
  28.     }
  29.   }
  30. }

使用传递给components/Movie.js组件的数据修改组件内容展示：

  1. import React from 'react'
  2. import { Box, Heading, HStack, Text, Image } from '@chakra-ui/react'
  3. import { FaFilm } from 'react-icons/fa'
  4. import { MdMovie } from 'react-icons/md'
  5. import { baseURL } from '@/axiosConfig'
  6. import axios from 'axios'
  7. import { useRouter } from 'next/router'
  8.  
  9. export default function Movie ({ data }) {
  10.   const router = useRouter()
  11.   return (
  12.     <Box maxW='1200px' mx='auto' px='10px' mt='20px'>
  13.       <HStack>
  14.         <MdMovie size='18px' />
  15.         <Heading as='h3' fontSize='18px'>
  16.           电影
  17.         </Heading>
  18.       </HStack>
  19.       <HStack
  20.         mt='20px'
  21.         spacing='0'
  22.         flexFlow='wrap'
  23.         justifyContent='space-between'
  24.       >
  25.         {data.map(movie => (
  26.           <Box
  27.             onClick={() => router.push(`/detail/${movie.vid}`)}
  28.             key={movie.id}
  29.             w='290px'
  30.             cursor='pointer'
  31.           >
  32.             <Image w='290px' src={movie.url} />
  33.             <Text h='52px' overflow='hidden' mt='10px' as='section'>
  34.               {movie.title}
  35.             </Text>
  36.           </Box>
  37.         ))}
  38.       </HStack>
  39.     </Box>
  40.   )
  41. }
  42.  
  43. export function loadMovie () {
  44.   return axios.get('/api/movie', { baseURL })
  45. }

实现详情页基于动态路由的数据获取与展示

详情页属于基于动态路由的静态生成，首先我们要做的就是在首页点击链接或按钮跳转到对应的详情页。

这需要使用到Link或者next/router。

上面的页面已经实现了此功能，这里就不再重复。

首先，创建pages/api/videos.js 来模拟获取所有video id列表的API：

  1. import { baseURL as url } from '@/axiosConfig'
  2.  
  3. export const videos = [
  4.   {
  5.     id: '1',
  6.     title:
  7.       "It's an Event-Sized Episode of 'Marvel Presents: The World's Greatest Book Club with Paul Scheer' in Celebration of 'Empyre'",
  8.     sub:
  9.       "Paul Scheer and Steve Wacker are joined by Anthony Carboni of 'The Star Wars Show'!",
  10.     author: 'JAMIE FREVELE',
  11.     publish: '2050-05-26',
  12.     content:
  13.       "<p>Time for a new episode of Marvel Presents: The World's Greatest Book Club with Paul Scheer -- and this one, Marvelites, is super-sized! Why? Because there's a new Marvel comic event in our midst, and EMPYRE deserves no less than a big celebration with hosts Paul Scheer and Steve Wacker! Paul and Steve are joined by guest Anthony Carboni (The Star Wars Show) for a calamitous conversation about other notable Marvel events.</p><video controls src='" +
  14.       url +
  15.       "/apiresources/videos/1.mp4'></video><p>But first -- EMPYRE! Steve provided an inside look at the creation of the intergalactic conflict and what Marvel fans can expect:</p><p>“What [writers Al Ewing and Dan Slott] definitely wanted to get away from was making it a [Fantastic Four] versus the Avengers, yet another story where friends fight each other and try to kill each other. Much like this show.”</p><p>He went on to predict the lasting effects of EMPYRE on the Marvel Universe:</p><p>“There are some big changes coming, and I think when we’re in our sweet spot is when we at Marvel are a little nervous about how the fans are going to react. It’s our job to put them through the ringer, to put them through hell. I think EMPYRE is not the story at the beginning that you think it is.”</p>"
  16.   },
  17.   {
  18.     id: '2',
  19.     title: "Time Travel Tips from 'Marvel's Agents of S.H.I.E.L.D.'",
  20.     sub:
  21.       'Traveling back in time is never easy? Let us help by consulting the pros!',
  22.     author: 'CHRISTINE DINH',
  23.     publish: '2050-03-13',
  24.     content:
  25.       "<img src='" +
  26.       url +
  27.       "/apiresources/images/detail_2.jpg'/><p>Look, we all know hopping through the decades ain't easy. In fact, who can keep up with all the different rules of time travel.</p><video controls src='" +
  28.       url +
  29.       "/apiresources/videos/2.mp4'></video><p>Luckily, we know a bunch of experts. During the production of Marvel's Agents of S.H.I.E.L.D. Season 7, Marvel.com had the opportunity to consult the cast and showrunners how to remain composure while navigating time travel. Watch what they have to say, learn the Do's and Don't's, and word of advice, it's probably best to avoid the shenanigans of Deke Shaw. We haven't forgotten the events of Season 6, Deke 
    声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小小林熬夜学编程/article/detail/446473
    推荐阅读
    相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。