数据结构
网络
RDBMS
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究使用 ReactJS 的电影 Web 应用程序
如今，OTT 平台越来越受欢迎，人们正在订阅各种 OTT 平台以观看电影、电视剧或服务。也许，你也可以启动任何 OTT 应用程序。
在本教程中，我们将学习如何使用 React JS 创建电影 Web 应用程序。但是，我们将学习编写电影应用程序的基本代码。如果用户需要，他们可以从以下代码开始并进行改进以创建电影 Web 应用程序的高级版本。
用户应按照以下步骤开始使用电影 Web 应用程序。
步骤 1 - 在第一步中，我们需要创建 React 应用程序。用户应在终端中执行以下命令以开始使用 React 电影应用程序。
npx create-react-app movie-app
步骤 2 - 通过执行以下命令在终端中移动到项目目录。
cd movie-app
步骤 3 - 接下来，我们需要安装所需的依赖项，方法是执行以下命令。
npm install react-router-dom axios
这里，axios 用于获取数据，react-router-dom 用于配置应用程序的路由。
步骤 4 - 接下来，我们需要在 App.js 文件中设置应用程序的路由。
步骤 4.1 - 导入所需的函数和组件。
步骤 4.2 - 为“/”主页路由显示 Home 组件。
步骤 4.3 - 为“movie/:id”路由显示 movieDetails 组件。这里，id 是一个变量。
步骤 4.4 - 在 App.js 文件中添加以下代码。
文件名 – App.js
import { BrowserRouter, Routes, Route } from "react-router-dom";
import Home from "./components/home";
import MovieDetails from "./components/MovieDetails";
function App() {
// creating routers using react-router-dom
return (
<BrowserRouter>
<Routes>
{/* home route */}
<Route path = "/" element = {<Home />} />
{/* movie route */}
<Route path = "/movie/:id" element = {<MovieDetails />} />
</Routes>
</BrowserRouter>
);
}
export default App;
步骤 5 - 接下来，在“src”目录中创建一个 components 文件夹，并添加“Home.js”文件。
步骤 5.1 - 导入所需的组件和“axios”。
步骤 5.2 - 创建一个状态来存储我们从 API 获取的所有电影。
步骤 5.3 - 定义 handleSearchInput() 函数，该函数处理搜索输入值。
步骤 5.3 - 定义 executeSearch() 函数。在函数中，检查用户是否按下了“Enter”键。如果是，则使用“axios”获取数据并将其存储在 results 变量中。同时，使用结果值更新状态。
步骤 5.4 - 在网页上呈现搜索输入。此外，通过将从 API 获取的电影数据传递到 Web 应用程序，呈现 AllMovies 组件。
在 Home.js 文件中添加以下代码。
文件名 – Home.js
import React, { useState } from "react";
import AllMovies from "./AllMovies";
import axios from "axios";
import "../App.css";
function Home() {
// create a state to store fetched data
const [initial, setStateValues] = useState({
searchValue: "sherlock",
allMovies: [],
});
// movie api url with api key
const movieApiURL = "https://www.omdbapi.com/?apikey=a2526df0";
// function to handle search input
function handleSearchInput(event) {
// get search value
let searchValue = event.target.value;
// set search value to the state
setStateValues((rest) => {
return { ...rest, searchValue: searchValue };
});
}
// function to execute a search
async function executeSearch(event) {
// check if enter key is pressed
if (event.key === "Enter") {
// fetch movies
let movies = await axios(movieApiURL + "&s=" + initial.searchValue);
// get results
let results = movies.data.Search;
// set results to state
setStateValues((prevState) => {
return { ...prevState, allMovies: results };
});
}
}
return (
<div className = "App">
<header className = "App-header">
<h2> Web application for Movies </h2>
</header>
<main>
{/* show search bar */}
<div className = "search-div">
<input
type = "text"
placeholder = "Search movie name..."
className = "search-input"
onChange = {handleSearchInput}
onKeyPress = {executeSearch}
/>
</div>
{/* show resultant movies */}
<AllMovies movies = {initial.allMovies} />
</main>
</div>
);
}
export default Home;
步骤 6 - 在“components”目录中创建一个 AllMovies.js 文件以卡片形式显示电影。
步骤 6.1 - 在这里，我们获取电影数据作为道具。首先，我们需要检查“movies”是否包含数据或未定义。如果未定义，则表示数据库中未找到任何相关电影。因此，在网页上相应地显示消息。
步骤 6.2 - 如果 movies 包含数据，则使用“map”方法遍历数组，并为每部电影创建一个卡片。在卡片上，我们显示电影海报和标题。
步骤 6.3 - 在 AllMovies.js 文件中添加以下代码。
文件名 – AllMovies.js
import React from "react";
import { Link } from "react-router-dom";
function AllMovies({ movies: movies }) {
return (
<div className = "allMovies">
{/* show all movies using map method */}
{typeof movies != "undefined" ? (
movies.map((result) => (
// render single movie
<div className = "movie">
{/* set link for movie card */}
<Link to = {`/movie/${result.imdbID}`}>
{/* show movie poster and title */}
<img src = {result.Poster} alt = "movie poster" />
<h3> {result.Title} </h3>
</Link>
</div>
))
) : (
<div className = "no-movie">
<h2>
Oops! We haven't listed the movie yet, or it might not exist in the
database. {" "}
</h2>
<h2> Kindly check the movie name once. </h2>
</div>
)}
</div>
);
}
export default AllMovies;
步骤 7 - 现在，在“components”目录中创建一个“MovieDetails.js”文件以显示单个电影详细信息。
步骤 7.1 - 使用“useParams”构造函数从 URL 获取参数。
步骤 7.2 - 使用 axios 使用从 URL 参数获取的电影 ID 获取电影数据。
步骤 7.3 - 在网页上呈现电影信息，这些信息是从 API 获取的。
步骤 7.4 - 此外，添加关闭按钮以返回。
在“MovieDetails.js”文件中添加以下代码。
文件名 – MovieDetails.js
import React from "react";
import { useParams } from "react-router-dom";
import axios from "axios";
import { useState } from "react";
import { Link } from "react-router-dom";
function MovieDetails() {
// Get ID from URL
const params = useParams();
const movieApiURL = "https://www.omdbapi.com/?apikey=a2526df0";
let [movieDetails, setMovieDetails] = useState({});
// function to fetch data
function fetchData() {
// fetch movie details according to id
axios(movieApiURL + "&i=" + params.id).then(({ data }) => {
let result = data;
setMovieDetails(result);
});
}
fetchData();
return (
// show movie details with image, title, year, rating, type and plot
<div className = "movieDetail">
<div className = "description">
{/* show poster */}
<img src = {movieDetails.Poster} alt = "Movie poster" />
<div className = "details">
<h2> {movieDetails.Title} </h2>
<p> Year : {movieDetails.Year} </p>
<p className = "rating"> Rating: {movieDetails.imdbRating} </p>
<p> Type: {movieDetails.Type} </p>
<p> {movieDetails.Plot} </p>
<button className = "back">
{/* link to home page */}
<Link to = {`/`}> Go back </Link>
</button>
</div>
</div>
</div>
);
}
export default MovieDetails;
步骤 8 - 现在，将 CSS 添加到 App.css 文件。在这里，我们对搜索栏、电影卡片和 MovieDetails 组件进行了样式设置，以便正确显示详细信息。
文件名 – App.css
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background: linear-gradient(to left, green, blue, red);
}
header {
width: 90%;
padding-top: 25px;
padding-bottom: 15px;
margin: 0 auto;
}
header h2 {
color: white;
font-size: 50px;
font-weight: 600;
text-align: center;
}
main {
width: 100%;
max-width: 90%;
margin: 0 auto;
}
.allMovies {
display: flex;
flex-wrap: wrap;
width: 95%;
justify-content: center;
align-items: center;
text-decoration: none;
}
.allMovies .movie {
width: clamp(300px, 20%, 500px);
background: rgb(167, 0, 245);
max-height: 500px;
border-radius: 12px;
padding: 10px;
margin: 20px 25px;
display: flex;
flex-direction: column;
cursor: pointer;
}
.allMovies .no-movie {
display: flex;
flex-direction: column;
justify-content: center;
margin: 2rem 0.5rem;
align-items: center;
text-align: center;
color: white;
}
.allMovies .movie img {
width: 100%;
border-radius: 12px;
padding: 10px 2px;
margin: 0 auto;
height: 350px;
}
.allMovies .movie h3 {
text-decoration: none;
color: white;
font-size: 20px;
font-weight: 600;
border-radius: 12px;
width: 100%;
text-align: center;
padding: 1rem;
background: green;
transition: 0.4s ease-out;
}
.movie:hover {
box-shadow: 0 0 10px 4px yellow;
}
.allMovies .movie h3:hover {
background: aqua;
color: blue;
box-shadow: 0 0 8px 3px #4484c4;
}
.movieDetail {
margin: 3rem 5rem;
overflow-y: auto;
width: 90%;
}
.movieDetail .description .rating {
margin: 10px 40px;
font-size: 1.5rem;
padding-bottom: 0;
}
.movieDetail .description {
position: fixed;
display: flex;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 25px;
background: blue;
color: white;
overflow-y: auto;
}
.movieDetail .description .details h2 {
padding: 2rem;
margin-top: 1rem;
font-size: 45px;
padding-bottom: 0.5rem;
font-weight: 600;
}
.movieDetail .description .details p {
font-size: 1.4rem;
color: white;
margin-left: 40px;
}
.movieDetail .description img {
max-width: 45%;
padding: 0 15px;
margin-left: 2rem;
margin-right: 2rem;
margin-top: 1rem;
}
.movieDetail .description .details .back {
padding: 15px 30px;
font-size: 28px;
font-weight: 700;
background: red;
display: flex;
margin: auto;
margin-top: 5rem;
color: white;
border: none;
outline: none;
appearance: none;
justify-content: center;
align-items: center;
border-radius: 5px;
cursor: pointer;
transition: 0.4s ease-out;
width: 90%;
}
.movieDetail .description .details button:hover {
background: #4484c4;
}
@media screen and (max-width: 1020px) {
.allMovies {
justify-content: center;
align-items: center;
}
.movieDetail .description .back {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
border-radius: 5px;
margin: auto;
}
}
@media screen and (max-width: 720px) {
.allMovies {
justify-content: center;
align-items: center;
}
.allMovies .movie {
margin: 10px;
justify-content: center;
align-items: center;
}
}
@media screen and (max-width: 480px) {
header h1 {
font-size: 2.9rem;
}
.allMovies {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.movieDetail {
flex-direction: column;
overflow-y: scroll;
}
}
/* CSS for search */
.search-div {
display: flex;
justify-content: center;
align-items: center;
margin: 1rem 0;
}
.search-input {
width: 70%;
display: block;
padding: 15px;
border: none;
font-size: 20px;
font-weight: 300;
outline: none;
background: none;
background-color: aqua;
border-radius: 12px;
color: blue;
transition: 0.4s ease-out;
}
.search-input:focus {
box-shadow: 0 0 8px 3px #4484c4;
}
@media screen and (max-width: 720px) {
.search-input {
width: 80%;
}
}
@media screen and (max-width: 480px) {
.search-input {
width: 95%;
}
}
步骤 9 - 我们已成功创建了电影 Web 应用程序。现在，是时候测试项目了。在终端中使用以下命令运行项目。
npm run start
步骤 10 - 打开 localhost:3000 以查看以下界面。在搜索栏中，至少搜索电影名称的前三个字符，您将在下方看到结果。
步骤 11 - 如果您点击任何电影卡片，它将向您显示所有与电影相关的详细信息，如下所示。
我们已成功使用 ReactJS 创建了电影 Web 应用程序。开发人员可以添加诸如“添加到收藏夹”之类的额外功能来增强应用程序。开发人员应尝试使用本地存储来实现“添加到收藏夹”功能。因此，当用户点击“添加到收藏夹”按钮时，我们可以将该电影数据存储在本地存储中。
更新于：2023 年 5 月 5 日
702 次查看
广告