本文共 25158 字,大约阅读时间需要 83 分钟。
Building web apps with dynamic APIs and server side rendering are a way to give people a great experience both with content and speed. How can we use Next.js to easily build those apps?
使用动态API和服务器端渲染来构建Web应用程序是一种使人们在内容和速度上都获得出色体验的方法。 我们如何使用Next.js轻松构建那些应用程序?
We’re going to have some fun and build out a web app that serves as a basic wiki for Rick and Morty characters.
我们将获得一些乐趣,并构建一个Web应用程序,作为Rick和Morty角色的基本Wiki。
Our app is going to consist of a few things:
我们的应用将包含以下几项内容:
We’ll learn some concepts like:
我们将学习一些概念,例如:
How to spin up a web app with
如何使用启动Web应用程序
How to fetch and use data
如何获取和使用数据
How to
如何
How to set up
如何设置
is a React framework from . It let’s you easily build lightweight dynamic web apps with a ton of modern features you’d expect out-of-the-box.
是的React框架。 它使您可以轻松地构建具有大量现成可用的现代功能的轻量级动态Web应用程序。
Vercel, the company that supports Next.js, is a service that allows you to automate continuous development pipelines to easily deploy web apps to the world. We’ll also use Vercel’s command line tool to optionally deploy our new wiki demo.
支持Next.js的公司Vercel是一项服务,可让您自动执行持续的开发流程,以轻松地将Web应用程序部署到全世界。 我们还将使用Vercel的命令行工具来选择性地部署我们的新Wiki演示。
To get started, let’s spin up our Next.js project. We’ll use npm or yarn to get started:
首先,让我们启动Next.js项目。 我们将使用npm或yarn开始:
yarn create next-app# ornpx create-next-app
Once you run that command, it will ask you a few questions. I’m going to call my project my-rick-and-morty-wiki
, but you can name it whatever you’d like.
一旦运行该命令,它将询问您几个问题。 我将我的项目称为my my-rick-and-morty-wiki
,但是您可以根据需要命名。
It will then ask you which template to choose — go ahead and select the default template.
然后它将询问您要选择哪个模板-继续并选择默认模板。
Finally, it will install all of the dependencies.
最后,它将安装所有依赖项。
When it’s finished, you can navigate to that new directory and run:
完成后,您可以导航到该新目录并运行:
yarn dev# ornpm run dev
You should now have a local server running at !
您现在应该在运行本地服务器!
Now that we have our app set up, the first thing we need to actually build out our wiki is a list of characters.
既然我们已经设置了应用程序,那么实际构建Wiki所需的第一件事就是字符列表。
To do this, we’re going to start off in our home page in pages/index.js
.
为此,我们将在我们的首页pages/index.js
。
Next.js scaffolds this page for us automatically. It’s the first page someone will hit on our website and has some basic features in the default template like a title, a simple grid, and some styles.
Next.js会自动为我们搭建此页面。 这是某人会在我们网站上访问的第一页,并且默认模板具有一些基本功能,例如标题,简单的网格和某些样式。
Currently, this page isn’t requesting any data. To get our characters, we’re going to jump right into requesting this server side.
当前,此页面未请求任何数据。 为了获得角色,我们将直接进入请求此服务器端的操作。
To do this, Next.js allows us to export an async getServerSideProps
function right next to our page, which it will use to inject our page with any data that we fetch.
为此,Next.js允许我们在页面旁边导出一个异步getServerSideProps
函数,它将使用该函数将获取的所有数据注入页面。
Let’s start off by adding the following snippet above our Home
function component:
首先,在Home
函数组件上方添加以下代码段:
const defaultEndpoint = `https://rickandmortyapi.com/api/character/`;export async function getServerSideProps() { const res = await fetch(defaultEndpoint) const data = await res.json(); return { props: { data } }}
Here’s what we’re doing:
这是我们正在做的:
We’re setting a variable called defaultEndpoint
that simply defines our default API endpoint
我们正在设置一个名为defaultEndpoint
的变量,该变量仅定义了我们的默认API端点
We’re defining our getServerSideProps
function that we’ll use to fetch our data
我们正在定义用于获取数据的getServerSideProps
函数
In that function, we first use the fetch
API to make a request to our endpoint
在该函数中,我们首先使用fetch
API向端点发出请求
With it’s response, we run the json
method so that we can grab the output in JSON format
有了它的响应,我们运行json
方法,以便我们可以获取JSON格式的输出
Finally, we return an object where we make our data
available as a prop in the props
property
最后,我们返回一个对象,在该对象中,我们可以在props
属性中将data
作为prop
Now that we’re making that request, we need to make it available to use.
现在,我们正在发出该请求,我们需要使其可用。
Our data
is made available as a prop, so let’s create an argument in our Home
component function to grab that:
我们的data
可以作为道具使用,因此让我们在Home
组件函数中创建一个参数来抓取该参数:
export default function Home({ data }) {
To test this, we can use console.log
to see the results:
为了测试这一点,我们可以使用console.log
查看结果:
export default function Home({ data }) { console.log('data', data);
And once we save and reload the page, we can now see our results!
保存并重新加载页面后,我们现在可以看到结果!
Now that we have our character data, let’s actually display it on our page.
现在我们有了字符数据,让我们实际在页面上显示它。
To start, I’m going to make a few tweaks. I’m going to update:
首先,我将进行一些调整。 我要更新:
The <h1>
title to “Wubba Lubba Dub Dub!”
<h1>
标题为“ Wubba Lubba Dub Dub!”
The <p>
description to “Rick and Morty Character Wiki”
“ Rick and Morty Character Wiki”的<p>
描述
I’m also going to update the contents of <div clasName=“grid”
to:
我还将将<div clasName=“grid”
的内容更新为:
What I’m doing here:
我在这里做什么:
I’m making the <div>
a list as that will be better for accessibility
我将<div>
列为列表,因为这样会更好地实现可访问性
I’m making the <li>
of the <ul>
the card
我正在制作<ul>
card
的<li>
And just changing the <h3>
to “My Character” temporarily
并将<h3>
临时更改为“我的角色”
To make sure our new <ul>
doesn’t mess up the layout with it’s default styles, let’s also add the following to the bottom of the .grid
CSS rules:
为了确保我们的新<ul>
不会使用默认样式弄乱布局,我们还要在.grid
CSS规则的底部添加以下内容:
list-style: none;margin-left: 0;padding-left: 0;
And now if we look at the page, we should see our basic changes.
现在,如果我们看一下页面,我们应该看到我们的基本更改。
Next, let’s make our grid load our characters.
接下来,让我们的网格加载角色。
At the top of our Home
component function, let’s add:
在我们的Home
组件函数的顶部,让我们添加:
const { results = [] } = data;
That will destructure our results array from our data object.
这将从我们的数据对象中破坏结果数组。
Next, let’s update our grid code:
接下来,让我们更新网格代码:
Here’s what we’re doing:
这是我们正在做的:
We’re using the map
method to create a new list element for each of our results (or characters)
我们正在使用map
方法为每个结果(或字符)创建一个新的list元素
Inside of that, we’re grabbing the id
and name
from each character result
在其中,我们从每个字符结果中获取id
和name
We’re using the ID as a key
for our list element to make React happy
我们将ID用作列表元素的key
,以使React开心
We’re updating our header with the name
我们将标题更新name
And once you save and reload the page, we should now see a new list of our characters from the API!
保存并重新加载页面后,我们现在应该从API中看到一个新的字符列表!
We can also add an image for each character.
我们还可以为每个字符添加一个图像。
First, inside of our grid, let’s update our destructure statement to grab the image URL:
首先,在网格内部,让我们更新分解结构语句以获取图像URL:
const { id, name, image } = result;
Next, let’s add the image above our header:
接下来,让我们在标题上方添加图片:
And now each of our characters also shows their picture!
现在我们的每个角色也都展示了自己的照片!
Now if you notice, when we load the page, we only get a certain number of results. By default, the API won’t return the entire list of characters, which makes sense, because it’s really long!
现在,如果您注意到,在加载页面时,我们只会得到一定数量的结果。 默认情况下,API不会返回整个字符列表,这很有意义,因为它真的很长!
Instead, it uses pagination and provides us with the “next” endpoint, or the next page of results, that will allow us to load in more results.
相反,它使用分页并为我们提供“下一个”端点或结果的下一页,这将使我们能够加载更多结果。
To start, we’re going to use React’s useState
hook to store our results in state. We’ll then have the ability to update that state with more results.
首先,我们将使用React的useState
挂钩将结果存储在状态中。 然后,我们将能够用更多结果更新该状态。
First, let’s import useState
from React:
首先,让我们从React导入useState
:
import { useState } from 'react';
Next, let’s create our state by first renaming our original results
variable and setting up our useState
instance:
接下来,让我们通过首先重命名原始results
变量并设置我们的useState
实例来创建状态:
const { results: defaultResults = [] } = data;const [results, updateResults] = useState(defaultResults);
If you save that and reload the page, you shouldn’t notice anything different yet.
如果保存并重新加载页面,则不会有任何不同。
Next, we want to be able to understand in our application what our current endpoint we’ve made a request is, what the next endpoint is, what the previous endpoint is, and how we can update all of that.
接下来,我们希望能够在应用程序中了解我们已请求的当前端点是什么,下一个端点是什么,上一个端点是什么以及如何更新所有端点。
To do this, we’re going to create more state. First, we want to update our destructuring statement with our data
to get the info
value:
为此,我们将创建更多状态。 首先,我们要使用data
更新解构语句以获取info
值:
const { info, results: defaultResults = [] } = data;
Next, let’s set up some state using that:
接下来,让我们使用它来设置一些状态:
const [page, updatePage] = useState({ ...info, current: defaultEndpoint});
Here, we’re:
在这里,我们是:
Creating a new page
state that we can use to get our prev
and next
values
创建新page
的状态,我们可以用它来获得我们的prev
和next
值
We’re also creating a new value called current
we’ll we start off by using our defaultEndpoint
, which was the request made on the server
我们还将创建一个名为current
的新值,我们将使用defaultEndpoint
,这是在服务器上发出的请求
The idea here, is when we want to load more results, we’re going set up code to watch the value of current
and update that value with the next
, so when it changes, we’ll make a new request.
这里的想法是,当我们想加载更多结果时,我们将设置代码以监视current
的值,并使用next
更新该值,因此当它更改时,我们将发出一个新请求。
To do that, let’s add a useEffect
hook to make that request:
为此,我们添加一个useEffect
挂钩来发出该请求:
const { current } = page;useEffect(() => { if ( current === defaultEndpoint ) return; async function request() { const res = await fetch(current) const nextData = await res.json(); updatePage({ current, ...nextData.info }); if ( !nextData.info?.prev ) { updateResults(nextData.results); return; } updateResults(prev => { return [ ...prev, ...nextData.results ] }); } request();}, [current]);
Here’s what’s going on:
这是怎么回事:
First, we’re destructuring the current
value from `page
首先,我们要从`page中解构current
值
We’re creating a useEffect
hook that uses current
as a dependency. If they value changes, the hook will run
我们正在创建一个useEffect
挂钩,该挂钩使用current
作为依赖项。 如果它们的值更改,则挂钩将运行
If our current
value is the same as defaultEndpoint
, we don’t run the code, as we already have our request data. Prevents and extra on load request
如果我们的current
值与defaultEndpoint
相同,则因为已有请求数据,所以我们不运行代码。 防止和额外的负载请求
We create an async function that we’re able to run. This allows us to use async/await
inside of our useEffect
hook
我们创建一个能够运行的异步函数。 这使我们可以在useEffect
挂钩中使用async/await
We make the request to the current
endpoint. With that successful request, we update the page
state with the new info
like the new prev
and next
value
我们向current
端点发出请求。 与成功的请求,我们更新了page
用新状态info
,如新prev
和next
值
Again, if you save and reload the page, this still shouldn’t do anything and your page should be where it was before.
同样,如果您保存并重新加载页面,则此操作仍然不应执行,并且您的页面应位于之前的位置。
Finally, we’re going to create a Load More button and use it to update the current
value to fire off a new request when we want a new page.
最后,我们将创建一个“加载更多”按钮,并使用它来更新current
值,以在需要新页面时触发新请求。
To do that, let’s first add a new button below our grid:
为此,我们首先在网格下方添加一个新按钮:
Now we want something to happen when we click that button, so first add an event handler:
现在,我们希望在单击该按钮时发生某些事情,因此首先添加一个事件处理程序:
Then above the component return statement, let’s add that function:
然后在组件return语句上方,添加该函数:
function handleLoadMore() { updatePage(prev => { return { ...prev, current: page?.next } });}
When triggered with our button click, this function will update our page
state with a new current
value, specifically with the next
value which is the endpoint to fetch our next page of results.
当单击按钮触发时,此函数将使用新的current
值(特别是next
值)来更新page
状态, next
值是获取下一页结果的端点。
And when we save and reload the page, it does just that!
当我们保存并重新加载页面时,它就完成了!
One of the features out Rick and Morty API provides is the ability to filter results — so basically the ability to search. So let’s add that as a feature.
Rick and Morty API提供的功能之一是能够过滤结果-基本上就是搜索功能。 因此,我们将其添加为功能。
First, we need a search form. Let’s add the following snippet under the description paragraph:
首先,我们需要一个搜索表单。 让我们在description段落下添加以下代码段:
Next, let’s add these styles to the bottom of the first <style jsx>
block:
接下来,让我们将这些样式添加到第一个<style jsx>
块的底部:
.search input { margin-right: .5em;}@media (max-width: 600px) { .search input { margin-right: 0; margin-bottom: .5em; } .search input, .search button { width: 100%; }}
That’s going to give some spacing to our search input and button as well as make it mobile friendly. Feel free to add more styles if you’d like.
这将为我们的搜索输入和按钮留出一些空间,并使它易于移动。 如果需要,可以随意添加更多样式。
And if we save and refresh our page, we have a simple form.
而且,如果我们保存并刷新页面,我们将获得一个简单的表单。
It doesn’t do anything yet, so let’s make it search when submit the form.
它什么都没有做,所以让我们在提交表单时进行搜索。
To start, let’s add an onSubmit
attribute to our form:
首先,让我们在表单中添加onSubmit
属性:
And to go with that, let’s define our submit function above our return statement:
然后,让我们在return语句上方定义Submit函数:
function handleOnSubmitSearch(e) { e.preventDefault(); const { currentTarget = {} } = e; const fields = Array.from(currentTarget?.elements); const fieldQuery = fields.find(field => field.name === 'query'); const value = fieldQuery.value || ''; const endpoint = `https://rickandmortyapi.com/api/character/?name=${value}`; updatePage({ current: endpoint });}
Here’s what we’re doing:
这是我们正在做的:
Finally, we update our current
property in our page state to trigger a new request to that endpoint
最后,我们在页面状态下更新current
属性以触发对该端点的新请求
And once you save that and reload the page, you can now give search a try. You should be able to type in a name like “rick”, hit enter or click the search button, and you should now see filtered results with the various ricks across the universe!
保存并重新加载页面后,现在可以尝试搜索。 您应该能够输入“ rick”之类的名称,按Enter或单击“搜索”按钮,现在您应该可以看到过滤后的结果以及整个Universe中的各种rick!
Now that we have all of our characters, we want to be able to click into those characters and display some additional details. To do that, we’re going to make use of Next.js’s dynamic routes.
现在我们已经拥有所有字符,我们希望能够单击这些字符并显示一些其他详细信息。 为此,我们将利用Next.js的动态路由。
The first thing we need to do is properly configure our directory structure so Next.js recognizes the dynamic path. In order to set up a dynamic route, we need to create our folder exactly like:
我们需要做的第一件事是正确配置目录结构,以便Next.js识别动态路径。 为了设置动态路由,我们需要创建文件夹,如下所示:
- pages-- character--- [id]-- index.js
Yes, that means you’re literally creating a folder with the name of [id]
, that’s not meant to be replaced. Next.js recognizes that pattern and will let us use that to create a dynamic route.
是的,这意味着您实际上是在创建一个名称为[id]
的文件夹,而不是要替换该文件夹。 Next.js可以识别该模式,并让我们使用它来创建动态路由。
To make creating the page easier, we’re going to simply duplicate our homepage by copying our pages/index.js
file into our next directly.
为了使创建页面更容易,我们将直接复制页面,方法是将pages/index.js
文件直接复制到下一个pages/index.js
。
So we should now have a new page at pages/character/[id]/index.js
.
因此,我们现在应该在pages/character/[id]/index.js
有一个新页面。
Next, let’s remove a bunch of stuff so we can get to a good starting point:
接下来,让我们删除一堆东西,以便我们有一个好的起点:
Remove everything above the return
statement in our page’s function component
删除页面功能组件中return
语句上方的所有内容
Remove the useState
and useEffect
imports
删除useState
和useEffect
导入
Once you’re done, the top of our page’s function component should look like:
完成后,页面功能组件的顶部应如下所示:
export default function Character({ data }) { return (Create Next App Wubba Lubba Dub Dub!
While there is some CSS we don’t need, we’re going to leave it all there for this demo. Feel free to clean some of that out later.
尽管有一些我们不需要CSS,但在本演示中将保留所有这些内容。 以后随时清理其中的一些。
If you navigate manually to /character/1, you should now see a simple page with just a title:
如果您手动导航到/ char / 1,现在您应该会看到一个只有标题的简单页面:
Next, let’s update the data we’re fetching. We can reuse most of the code in our getServerSideProps
function.
接下来,让我们更新正在获取的数据。 我们可以在getServerSideProps
函数中重用大多数代码。
We’re going to add a new argument to that getServerSideProps
function:
我们将向该getServerSideProps
函数添加一个新参数:
export async function getServerSideProps({ query }) {
When our page is rendered, Next.js injects data into our page and the getServerSideProps
function about the environment. Here, we’re destructuring that data to grab the query
object which will include any dynamic routing attributes, such as the [id]
we’re setting in the route.
呈现我们的页面时,Next.js将数据注入到我们的页面以及有关环境的getServerSideProps
函数中。 在这里,我们正在解构该数据以获取query
对象,该query
对象将包含任何动态路由属性,例如我们在路由中设置的[id]
。
Next, at the top of the getServerSideProps
function, let’s destructure the ID:
接下来,在getServerSideProps
函数的顶部,让我们getServerSideProps
ID:
const { id } = query;
And finally let’s use that ID to dynamically create an endpoint we’ll use to fetch our character data:
最后,让我们使用该ID动态创建一个端点,以用于获取字符数据:
const res = await fetch(`${defaultEndpoint}${id}`);
Here, we’re using our character endpoint and appending the dynamic ID of our URL to the end of the URL.
在这里,我们使用字符端点,并将URL的动态ID附加到URL的末尾。
To test this out, let’s add a console.log
to the top of the Character
function:
为了测试这一点,让我们在Character
函数的顶部添加console.log
:
export default function Character({ data }) { console.log('data', data);
And if we hit save and reload our page, we should now see the user details about character number 1 logged out, which is Rick Sanchez!
而且,如果单击保存并重新加载页面,现在我们应该已经注销了有关字符编号1的用户详细信息,这就是Rick Sanchez!
So we have the data, let’s add it to our page.
这样我们就有了数据,让我们将其添加到页面中。
At the top of the character function, let’s add this destructure statement:
在字符函数的顶部,让我们添加以下分解语句:
const { name, image, gender, location, origin, species, status } = data;
This gives us a bunch of attributes we’re getting right from that data object we saw logged out.
这为我们提供了一些属性,我们可以从看到的已注销数据对象中获取正确的属性。
To use that, we can start by updating the title to that name:
要使用它,我们可以先将标题更新为该名称:
{ name }
Also the <h1>
:
也是<h1>
:
{ name }
At this point, we should now dynamically see Rick’s name.
在这一点上,我们现在应该动态地看到里克的名字。
Next, let’s add this block below our <h1>
to include more of our character details:
接下来,让我们在<h1>
下面添加此块,以包含更多字符详细信息:
Character Details
- Name: { name }
- Status: { status }
- Gender: { gender }
- Species: { species }
- Location: { location?.name }
- Originally From: { origin?.name }
Here we’re using our characters image
to display a picture of our character and other various metadata to add Character Details.
在这里,我们使用角色image
来显示角色的图片以及其他各种元数据以添加角色详细信息。
We can follow that up by adding this snippet of CSS to our styles:
我们可以通过将以下CSS代码片段添加到样式中来进行后续操作:
.profile { display: flex; margin-top: 2em;}@media (max-width: 600px) { .profile { flex-direction: column; }}.profile-image { margin-right: 2em;}@media (max-width: 600px) { .profile-image { max-width: 100%; margin: 0 auto; }}
And now we have our character bio!
现在我们有了自己的角色简介!
So a quick recap, we have our new dynamic page. We can go to /character/1
or any ID to see a specific character. Let’s now update our homepage to link to these pages.
快速回顾一下,我们有了新的动态页面。 我们可以转到/character/1
或任何ID来查看特定字符。 现在,让我们更新主页以链接到这些页面。
Back on pages/index.js
, our homepage, let’s first import the Link
component from Next.js:
回到我们的主页pages/index.js
/index.js,让我们首先从Next.js导入Link
组件:
import Link from 'next/link'
Next, inside of our grid where we map through our list of results, let’s use our <Link>
component and update our code:
接下来,在我们通过结果列表进行映射的网格内部,让我们使用<Link>
组件并更新代码:
Here’s what we’re doing:
这是我们正在做的:
First we’re wrapping our <a>
element with a <Link>
component
首先,我们用<Link>
组件包装<a>
元素
We add a href
and the as
properties to describe to Next.js what page we want to link to. We need to use the as
property as it’s a dynamic link
我们添加href
和as
属性,以向Next.js描述我们要链接到的页面。 我们需要使用as
属性,因为它是动态链接
We remove the href
from our <a>
element as it’s now being applied to the <Link>
element
我们将href
从<a>
元素中删除,因为它已被应用于<Link>
元素
If we save and reload our homepage, we’ll notice that nothing changed, but when we click any of our characters, we now go to their bio page!
如果我们保存并重新加载我们的主页,我们会注意到没有任何变化,但是当我们单击任何字符时,我们现在转到其履历页面!
Finally, let’s also add a button to our character bio page that links back to our homepage to make it easier to navigate.
最后,让我们在角色简介页面上添加一个按钮,该按钮可以链接回到我们的主页,从而更易于浏览。
First, let’s import the Link
component:
首先,让我们导入Link
组件:
import Link from 'next/link';
At the bottom of our <main>
tag below our .profile
div, let’s add this code:
在.profile
div下面的<main>
标记的底部,让我们添加以下代码:
Back to All Characters
And we can add the following basic styles to simply make it look like a link:
我们可以添加以下基本样式以使其看起来像一个链接:
.back a { color: blue; text-decoration: underline;}
And if we reload the page, we now have link that we can click to go back to the main page with all of our characters!
而且,如果我们重新加载页面,则现在具有链接,可以单击该链接以返回所有字符的主页!
Because we’re using Next.js, Vercel makes it super simple to deploy our app.
由于我们使用的是Next.js,因此Vercel使部署我们的应用程序变得非常简单。
To do this, we need to . We can do that by installing it as an npm module globally:
为此,我们需要 。 我们可以通过将其作为npm模块全局安装来实现:
yarn global add vercel# or npm i -g vercel
Now, you can run the vercel
command in your terminal.
现在,您可以在终端中运行vercel
命令。
The first time you run this, you’ll be prompted to log in. You’ll want to use your Vercel account to do this. If you don’t have one, you’ll want to .
首次运行此程序时,系统将提示您登录。您将要使用Vercel帐户执行此操作。 如果您还没有,则需要 。
With the Vercel CLI installed, we can simply run vercel
in our project directory, fill out a few questions, and it will automatically deploy!
安装了Vercel CLI后,我们只需在项目目录中运行vercel
,填写一些问题,它将自动部署!
You can use pretty much all of the defaults, though you will probably need to use a different project name than I’m using.
您几乎可以使用所有默认值,尽管您可能需要使用与我使用的项目名称不同的名称。
But once finished, we now have successfully deployed our new app to Vercel!
但是,一旦完成,我们现在就可以成功地将新应用程序部署到Vercel!
Every time you make a request to a character, the API returns other endpoints that you can use such as locations and episodes. We can utilize those endpoints and create new dynamic pages, just like our dynamic character profile pages, to allow people to see more information about a specific location or episode.
每次您请求角色时,API都会返回您可以使用的其他端点,例如位置和情节。 就像我们的动态角色资料页面一样,我们可以利用这些端点并创建新的动态页面,以允许人们查看有关特定位置或情节的更多信息。
We stuck with some of the basic styles that Next.js included and added some basic ones just for demonstration purposes. But now that you’re finished, you can have some fun and make it your own!
我们坚持使用Next.js包含的一些基本样式,并添加了一些仅用于演示目的的基本样式。 但是,既然您已经完成工作,就可以享受一些乐趣,然后自己创造一个!
In addition to filtering by name, the . By adding a status
parameter to the endpoint URL, just like our name
parameter, you can add a new filter to make it easier to find characters that are still alive or not.
除了按名称过滤外, 。 像我们的name
参数一样,通过将status
参数添加到端点URL,您可以添加一个新的过滤器,以使其更容易找到仍然存在的字符。
翻译自:
转载地址:http://vyuzd.baihongyu.com/