JavaScript Essentials: Part 7에서 저는 API([0] [1]) 개발을 검토할 것이라고 암시했으며 여기서부터 시작합니다. 지출을 추적하기 위한 간단한 API를 개발하는 데 무엇이 필요한지 살펴보겠습니다.
이 비용 추적기에서는 구매한 품목, 금액 및 품목을 구매한 날짜를 추적해야 합니다. 비용은 다음과 같습니다:
{
"name": "Legion Tower 7i Gen 8 (Intel) Gaming Desktop",
"amount": 2099.99,
"date": "2024-31-12"
}
이 시점에서는 아직 실제 데이터베이스가 추가되지 않았으므로 생성할 데이터를 목록(배열)을 사용하여 보관할 수 있습니다. 이 발췌문에서는 API 생성과 관련된 각 주요 개념을 살펴보고 나중에 이 앱을 개선할 수 있는 몇 가지 방법을 추가하겠습니다.
우리는 이 프로젝트를 기반으로 구축할 예정이므로 최대한 깨끗하게 유지하고 탐색하고 실험하고 안절부절 못하는 등의 활동을 하세요.
늘 그렇듯이 프로젝트마다 새로운 작업 환경이 필요하므로 Node JS 프로젝트를 생성하고 초기화하는 것부터 시작하겠습니다. 확실하지 않은 경우 JavaScript 필수 사항: 6부(Javascript의 마스터마인드)를 확인하세요.
이제 다음을 수행하여 API의 상위 폴더를 만들어야 합니다.
# create a folder for the project at the path of your choice mkdir expense-tracker-simple-api # open the project with vscode # code expense-tracker-simple-api code -r expense-tracker-simple-api # open the built-in terminal and init node npm init -y # this should create the package.json file # create the entry file, index.js echo "console.log(\"expense-tracker-simple-api\");" > index.js # run the index.js file node index.js
이 스크립트로 우리가 하는 일은 매우 직접적입니다.
대안은 이 폴더를 생성하려는 위치로 이동하여 생성한 다음 vscode에서 폴더를 열고 노드 프로젝트를 초기화하는 것입니다. JavaScript 필수 사항: 6부(Javascript의 Mastermind)를 확인하세요.
이번에는 express라는 nodejs 패키지를 설치해야 합니다. Express는 API를 생성하는 데 도움이 되는 라이브러리입니다.
npm i express를 실행하여 이 패키지를 설치할 수 있습니다. package.json 파일을 수정하고 package-lock.json 파일과 node_modules 폴더를 생성해야 합니다. npm을 사용하여 패키지를 설치하는 방법에 대한 자세한 이해와 정보는 발췌된 Nodejs란 무엇인지 참조하세요.
index.js 파일에 이 코드를 추가할 수 있습니다.
console.log("expense-tracker-simple-api");
// import the express lib
const express = require("express");
// create an express application
const app = express();
// create a GET request on the base endpoint
app.get("/", (req, res) => res.send("Hello world"));
// create a server that listens to requests on port 3000
app.listen(3000, () =>
console.log(`Api running on ${"http://localhost:3000"}`)
);
우리가 한 일은 빠른 애플리케이션을 만들고, 애플리케이션을 사용하여 GET 요청을 생성하여 메시지를 보내고, 애플리케이션이 포트 3000에서 들어오는 요청을 수신하도록 하는 것뿐이었습니다.
const app = express();
익스프레스 애플리케이션 생성(? 익스프레스 애플리케이션 생성 방법)
app.get("/", (req, res) => res.send("Hello world"));
Express 애플리케이션 인스턴스를 사용하여 GET 요청을 생성했습니다. 앱에는 HTTP 메서드를 포함하는 여러 메서드와 속성이 있습니다. 여기에서 http 메소드에 대한 제외 사항을 확인하세요.
{
"name": "Legion Tower 7i Gen 8 (Intel) Gaming Desktop",
"amount": 2099.99,
"date": "2024-31-12"
}
우리는 Express 애플리케이션을 사용하여 포트에서 수신 대기했으며 화살표 기능을 사용하여 애플리케이션이 실행 중임을 개발자에게 알렸습니다. 포트의 경우 원하는 다른 포트로 변경할 수 있습니다. 그러나 일부 특수 포트는 이미 특정 작업을 위해 사용되거나 의미가 있으며 커뮤니티에서 잘 알려져 있으며 해당 응용 프로그램이나 프로그램이 PC에서 실행될 때 기본 서버로 사용됩니다. 다음을 확인하세요 - 0 1 2
참고: 시스템과 함께 제공되기 때문에 사용하지 않는 것도 있고 일부 서버, 데이터베이스 등 우리가 설치하는 애플리케이션과 함께 제공되는 것도 있습니다. 걱정하지 마세요. 이미 사용 중인 포트를 사용하면 애플리케이션에서 이를 알려줍니다. 우리가 해야 할 일은 하나를 더하거나 빼는 것뿐입니다. 땀 흘리지 마세요.
GET 요청을 생성하려면 app.get(...)을 사용하고 POST의 경우 app.post(...) 등을 사용합니다. 생성하려는 각 경로에 대해 app.SomeMethod(...)는 사용자 클라이언트가 원하는 리소스 또는 실행하려는 작업을 나타내는 경로 또는 경로를 사용합니다. 경로의 일부로 최소한 하나의 요청 핸들러가 필요할 수 있습니다. 이는 app.SomeMethod(path, hanlder1, handler2, ..., handlern);.
을 가질 수 있음을 의미합니다.위 GET 요청의 경우 경로는 /(문자열)이고 단일 요청 핸들러는 (req, res) => res.send("Hello world"), 핸들러 함수(콜백 또는 간단한 화살표 함수). 요청 핸들러는 미들웨어 및 컨트롤러일 수 있습니다.
요청 핸들러는 일반적으로 요청과 응답이라는 두 개의 인수를 사용합니다. 이 인수는 각각 req와 res로 단축됩니다(이를 호출할 필요는 없지만 첫 번째는 항상 요청이고 두 번째는 응답입니다). 요청에는 요청한 사람과 요청한 내용에 대한 데이터(또는 일부 정보)가 포함됩니다. 응답은 요청한 사용자에게 피드백을 제공하는 수단입니다. 이 경우 클라이언트가 / 경로에 GET 요청을 하면 "Hello world"를 보냅니다.
여기서는 사용자 계정에서와 같이 사용자가 아닌 어떤 장치가 API 서버에 HTTP 요청을 하는지에 대한 의미에서 클라이언트와 사용자가 상호 교환 가능하다는 점을 알 수 있습니다.
일반적으로 요청 핸들러는 이전 핸들러가 작업을 완료한 후 다음 핸들러를 가리키는 세 번째 인수를 사용합니다. 우리는 이것을 다음이라고 부릅니다. 대략 다음과 같습니다.
# create a folder for the project at the path of your choice mkdir expense-tracker-simple-api # open the project with vscode # code expense-tracker-simple-api code -r expense-tracker-simple-api # open the built-in terminal and init node npm init -y # this should create the package.json file # create the entry file, index.js echo "console.log(\"expense-tracker-simple-api\");" > index.js # run the index.js file node index.js
다음 인수는 유용합니다. 이는 요청 핸들러를 가리키며 때로는 오류인 인수를 사용합니다. 우리는 우리가 처리하지 못한 오류나 다음 요청 핸들러로 "전달"되는 오류를 일반적으로 처리하기 위해 오류 핸들러를 구현할 것입니다.
이제 컨트롤 c를 사용하여 (터미널에서) 실행 중이던 nodejs 프로세스를 취소해 보겠습니다. 그런 다음 다시 실행하십시오. 이번에는 간단한 서버 만들기 및 GET 경로 만들기 섹션의 업데이트된 콘텐츠를 사용하여 콘솔(터미널)에 다음과 유사한 출력이 표시됩니다.
{
"name": "Legion Tower 7i Gen 8 (Intel) Gaming Desktop",
"amount": 2099.99,
"date": "2024-31-12"
}
브라우저에서 http://localhost:3000을 엽니다. 무엇이 보이나요? Hello world ?
라는 문자로마는 속담처럼 하루아침에 이루어지지 않았습니다. 소프트웨어 개발에도 동일하게 적용됩니다. 아마도 여기서 의미하는 바는 개발을 진행하면서 점차적으로 더 많은 기능을 추가할 것이며 이러한 지속적인 과정에서 항상 서버를 시작하고 중지하는 것이 짜증스럽다는 것입니다.
계속해서 /hello 경로와 하고 싶은 말을 말하는 요청 핸들러를 사용하여 또 다른 GET 요청(경로)을 추가하세요. 행복하세요.
서버(실행 중인 nodejs 프로세스)를 다시 시작하고 브라우저에서 http://localhost:3000/hello를 방문하여 해당 엔드포인트의 응답을 확인해야 합니다.
이 GET http://localhost:3000/hello는 엔드포인트입니다. 이를 API 소비자와 공유합니다. 우리끼리는 전체 URL(프로토콜 - http, 도메인 - localhost, 포트 - 3000 포함)을 알 필요가 없기 때문에 루트라고 말합니다. 및 경로 - /hello). 경로는 METHOD PATH이며 대략 GET /hello.
입니다.
macOS 또는 Windows에서는 node --watch index.js를 수행하거나 항목 파일뿐만 아니라 전체 폴더 경로에서 node --watch-path=./ index를 통해 변경 사항을 찾아볼 수 있습니다. Node.js를 사용하여 파일 경로 및 파일 자체의 변경 사항을 감시합니다.
현재 내 package.json 파일의 내용은 다음과 같습니다.
# create a folder for the project at the path of your choice mkdir expense-tracker-simple-api # open the project with vscode # code expense-tracker-simple-api code -r expense-tracker-simple-api # open the built-in terminal and init node npm init -y # this should create the package.json file # create the entry file, index.js echo "console.log(\"expense-tracker-simple-api\");" > index.js # run the index.js file node index.js
스크립트 섹션 아래에 dev라는 스크립트를 추가할 수 있습니다.
console.log("expense-tracker-simple-api");
// import the express lib
const express = require("express");
// create an express application
const app = express();
// create a GET request on the base endpoint
app.get("/", (req, res) => res.send("Hello world"));
// create a server that listens to requests on port 3000
app.listen(3000, () =>
console.log(`Api running on ${"http://localhost:3000"}`)
);
C 컨트롤을 사용하여 실행 중인 서버를 중지하고 이제 npm run dev를 실행할 수 있습니다. 그러면 파일에 저장된 변경 사항이 모니터링되고 서버가 다시 로드됩니다.
이 방법이 효과가 없다면 대안이 있습니다. nodemone, npm i nodemon -g를 설치하겠습니다. 우리는 그것을 유틸리티 도구로 어디에서나 사용하므로 패키지의 일부로 설치할 필요가 없습니다. nodemon index.js를 실행하여 변경 사항을 확인할 수 있습니다. 이것이 작동하지 않는 경우가 있고 작동하지 않는 경우 dom nodemon --exec node index.js
nodemon을 사용하도록 개발 스크립트를 다음과 같이 수정할 수 있습니다.
const app = express();
이 시점에서 .js 파일을 자유롭게 수정할 수 있으며 저장 시 적용된 로드 변경 사항을 다시 로드하기 위해 서버가 다시 시작됩니다.
이미 GET 요청을 생성했습니다. 요청 및 응답에서 자세히 논의한 이후 이번 섹션에서는 각 방법의 의미를 간략하게 살펴보겠습니다.
이 애플리케이션에서 우리는 고객에게 한 가지 종류의 자원, 즉 지출만을 제공합니다. 여러 리소스를 제공한다고 가정하면 각 리소스 아래에 요청을 그룹화합니다.
사용자와 지출이 있고 사용자와 지출 모두에 대해 GET, POST, PUT, DELETE 등이 있다고 가정해 보겠습니다.
지금은 /expenditures 경로를 사용하여 지출 리소스를 나타냅니다.
GET: 지출에 대한 기록을 나열하고, 모두 가져오고, 모두 가져오는 등의 경로를 생성한다는 의미입니다. 레코드 중 하나를 가져오는 GET 요청이 있을 수 있습니다. 비슷한 GET
POST: 리소스 생성에 종종 post 방식이 사용됩니다
PUT: put 메소드는 자원을 업데이트하는 데 사용됩니다
DELETE: 삭제 메소드는 리소스를 삭제하는 데 사용됩니다
이제 index.js 파일에 app.listen(3000,...) 위에 다음 코드 줄을 추가할 수 있습니다.
{
"name": "Legion Tower 7i Gen 8 (Intel) Gaming Desktop",
"amount": 2099.99,
"date": "2024-31-12"
}
파일을 저장하면 터미널에 로그가 표시되나요? 브라우저에서 지출에 대한 GET 경로를 테스트하세요.
브라우저에서는 GET 요청만 실행할 수 있습니다. 다음에는 API 클라이언트에 대해 논의하겠습니다.
이 맥락에서 API 클라이언트는 API와 상호작용(사용, 통합 또는 테스트)하는 데 사용되는 도구, 프로그램 또는 애플리케이션입니다. 가장 일반적으로 사용되는 것은 Postman, Insomnia, 컬 등입니다...
vscode 및 기타 IDE와 함께 API 클라이언트에 확장 기능을 제공하는 확장 기능이 있습니다. vscode에는 해당 문제에 대한 이러한 확장 중 일부가 있습니다. 그러나 우리는 REST 클라이언트로 알려진 API 클라이언트를 고려할 것입니다. 우리의 사용 사례에서는 Rest Client를 사용하는 것이 더 간단하므로 걱정하지 마세요. 우리는 보호받습니다.
참고: postman 또는 원하는 다른 API 클라이언트를 사용해도 됩니다
{
"name": "Legion Tower 7i Gen 8 (Intel) Gaming Desktop",
"amount": 2099.99,
"date": "2024-31-12"
}
# create a folder for the project at the path of your choice mkdir expense-tracker-simple-api # open the project with vscode # code expense-tracker-simple-api code -r expense-tracker-simple-api # open the built-in terminal and init node npm init -y # this should create the package.json file # create the entry file, index.js echo "console.log(\"expense-tracker-simple-api\");" > index.js # run the index.js file node index.js
console.log("expense-tracker-simple-api");
// import the express lib
const express = require("express");
// create an express application
const app = express();
// create a GET request on the base endpoint
app.get("/", (req, res) => res.send("Hello world"));
// create a server that listens to requests on port 3000
app.listen(3000, () =>
console.log(`Api running on ${"http://localhost:3000"}`)
);
연습으로 지출 엔드포인트에 대한 요청을 생성해 보세요. 어려운 일이 있을 때 참고하세요. 할 일이 더 많아요.
이 시점에서는 API 클라이언트를 사용하여 API와 통신하기 위해 JSON을 사용할 것이라는 점을 강조할 필요가 없습니다.
앞서 언급했듯이 요청의 본문, 헤더 또는 URL을 사용하여 API에 데이터를 전달할 수 있습니다. 우리는 요청 본문과 헤더를 통해 데이터를 전달하는 방법을 살펴보았습니다(특정 데이터 전달에 대해서는 나중에 살펴보겠습니다). 생성된 POST 요청을 확인하세요. 우리가 살펴보지 않은 것은 데이터를 URL의 일부로 전달하는 방법입니다.
ID가 4인 지출을 읽고 싶다고 가정하면 매개변수 추가(URL의 일부로)를 /expenditures/2로 전달할 수 있습니다. 이 요구 사항을 처리할 요청의 경우 /expenditures/:id를 수행합니다. 여기서 :id는 지출 ID를 나타냅니다. ID가 아닌 다른 것이라고 가정하고 이름을 말한 다음 :name을 수행합니다. Express는 이를 처리하여 땀을 흘리지 않고 이 값을 추출할 수 있는 수단을 제공합니다.
이제 쿼리 문자열의 경우 아이디어는 요청 매개변수와 유사하지만 질문 다음에 key1=value1&key2=value2...&keyN=valueN이 옵니다. 여기서 키는 사용자가 원하는 값의 식별자입니다. 통과하고 싶다. 매우 직접적인 예는 REST 클라이언트 URL https://marketplace.visualstudio.com/items?itemName=humao.rest-client입니다. 물음표는 쿼리 문자열의 시작을 표시하며 그 뒤에 나오는 모든 내용은 키를 값에 매핑합니다. 예: ?itemName=humao.rest-client.
모든 API 엔드포인트를 테스트하고 직접 사용해 볼 수 있는 좋은 시간이 될 것입니다.
이제 요청 본문(POST 엔드포인트)을 사용하여 데이터를 전달하는 요청을 처리하겠습니다.
{
"name": "Legion Tower 7i Gen 8 (Intel) Gaming Desktop",
"amount": 2099.99,
"date": "2024-31-12"
}
요청 객체에는 body라는 속성이 있으며, 이 속성에는 요청의 요청 본문인 req.body에 전달한 값이 있습니다.
실행될 요청입니다.
# create a folder for the project at the path of your choice mkdir expense-tracker-simple-api # open the project with vscode # code expense-tracker-simple-api code -r expense-tracker-simple-api # open the built-in terminal and init node npm init -y # this should create the package.json file # create the entry file, index.js echo "console.log(\"expense-tracker-simple-api\");" > index.js # run the index.js file node index.js
이것은 요청 본문을 콘솔에 기록하는 엔드포인트 구현입니다.
console.log("expense-tracker-simple-api");
// import the express lib
const express = require("express");
// create an express application
const app = express();
// create a GET request on the base endpoint
app.get("/", (req, res) => res.send("Hello world"));
// create a server that listens to requests on port 3000
app.listen(3000, () =>
console.log(`Api running on ${"http://localhost:3000"}`)
);
무슨 일이 일어났나요? 우리는 일반적인 응답을 받았지만... undefound가 콘솔에 기록되었습니다. 글쎄, 그것은 모든 것이 괜찮다는 것을 의미하지만 우리 API 서버는 들어오는 것을 json으로 구문 분석해야 한다는 것을 모릅니다. JSON을 기억하시나요?
const app = express(); 아래에 한 줄을 추가해 보겠습니다. 들어오는 데이터를 json으로 구문 분석해야 합니다.
const app = express();
이제 POST 엔드포인트를 다시 테스트해 보겠습니다. 이번에는 무엇을 얻었나요? 이거랑 비슷한거 얻으셨나요?
app.get("/", (req, res) => res.send("Hello world"));
이제 본체에서 데이터를 가져오는 방법을 알았습니다. 이제 운동으로 신체의 구조를 해체하고 응답에 개체를 전달합니다. 따라서 기록하는 대신 응답으로 반환하세요.
ID별로 지출을 읽을 수 있는 새로운 GET 엔드포인트를 생성하겠습니다.
다음은 API 요청입니다.
app.listen(3000, () =>
console.log(`Api running on ${"http://localhost:3000"}`)
);
요청 객체에는 params라는 속성이 있으며 이 속성에는 요청의 요청 매개변수인 req.params에 전달한 값이 있습니다.
이제 구현은 지금까지 수행한 것과 유사하지만 약간 다릅니다.
app.get("/", (req, res, next) => ...);
ID에 직접 접근할 수도 있습니다. 경로의 일부로 전달된 :id 키 또는 이름이 기록된 객체의 키와 일치한다는 점을 알아차렸기를 바랍니다. 경로에서 params 키의 이름을 바꾸고 기록된 출력을 확인해 보세요.
쿼리 문자열의 경우 전달된 쿼리 문자열을 노출하는 쿼리 속성이 요청 개체에 있습니다.
이를 보여주기 위해 반환할 레코드를 필터링하는 쿼리 문자열을 전달합니다. 이 엔드포인트로 충분합니다.
expense-tracker-simple-api Api running on http://localhost:3000
이제 구현은 다음과 유사합니다.
{
"name": "expense-tracker-simple-api",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"description": "",
"dependencies": {
"express": "^4.21.2"
}
}
이제 API를 실행하고 로그를 확인하세요. 이것을 실험해보세요.
이 시점에서는 아직 데이터베이스에 연결되지 않았으므로 메모리에서 데이터를 조작해야 합니다. 우리가 하려는 작업은 배열을 만들고, 배열에 추가하고, 그 안의 요소를 업데이트하고, 요소를 제거하는 것입니다. 우리가 하려는 일이 그럴듯해 보입니다.
이전에 작성된 일부 코드를 일부 수정할 예정이므로 자유롭게 변경하시기 바랍니다. 최종 발췌문은 마지막에 공유하겠습니다.
아래에 지출 배열(더미 데이터)을 만들어 보겠습니다. const express = require("express");
{
"name": "Legion Tower 7i Gen 8 (Intel) Gaming Desktop",
"amount": 2099.99,
"date": "2024-31-12"
}
현재 엔드포인트는 res.send(message)를 사용하여 메시지만 반환하지만 우리가 반환하려는 것은 json입니다. .send는 객체나 json을 가져올 수도 있지만 res.json(obj)을 사용하겠습니다.
말하진 않았지만 반환된 기본 상태 코드는 200입니다. 눈치채셨나요? 다른 문제가 발생하거나 요청에 문제가 있는 경우를 제외하고 상태 코드는 동일하게 유지됩니다. 상태 코드 아래에 섹션이 있으니 살펴보세요.
res.status(desireStatusCode).json(obj)에 원하는 상태 코드를 전달하여 상태 코드를 변경할 수 있습니다. 전체적으로 200 상태 코드를 유지하겠습니다.
서버가 아직 실행 중인지 확인하세요
지출 목록을 직접 전달할 수 있습니다.
# create a folder for the project at the path of your choice mkdir expense-tracker-simple-api # open the project with vscode # code expense-tracker-simple-api code -r expense-tracker-simple-api # open the built-in terminal and init node npm init -y # this should create the package.json file # create the entry file, index.js echo "console.log(\"expense-tracker-simple-api\");" > index.js # run the index.js file node index.js
어떤 답변을 받았나요? 상태 코드와 응답 페이로드를 확인하세요.
경험상 모호함을 피하기 위해 기본적으로 상태 코드 200을 반환하고 성공 속성, 메시지 또는 데이터 속성을 사용하여 메시지나 요청된 리소스를 반환하는 것을 선호합니다. 기본적으로 상태가 false인 경우 메시지가 전달되고, 그렇지 않으면 메시지나 데이터가 전달될 수 있습니다.
console.log("expense-tracker-simple-api");
// import the express lib
const express = require("express");
// create an express application
const app = express();
// create a GET request on the base endpoint
app.get("/", (req, res) => res.send("Hello world"));
// create a server that listens to requests on port 3000
app.listen(3000, () =>
console.log(`Api running on ${"http://localhost:3000"}`)
);
id(각 행의 인덱스)를 표시해야 합니다
const app = express();
app.get("/", (req, res) => res.send("Hello world"));
매핑 후에 필터를 한 이유는 무엇인가요?
app.listen(3000, () =>
console.log(`Api running on ${"http://localhost:3000"}`)
);
이 구현이 매핑 후에 필터가 수행된 이유는 무엇입니까? ?
에 대한 힌트를 제공합니까?app.get("/", (req, res, next) => ...);
expense-tracker-simple-api Api running on http://localhost:3000
{
"name": "expense-tracker-simple-api",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"description": "",
"dependencies": {
"express": "^4.21.2"
}
}
우리는 대부분의 API 개발의 근본을 다뤘습니다. 이 프로젝트는 그만큼 기본적입니다. 긴장을 풀고 다시 살펴보세요.
등 살펴볼 사항이 더 있습니다.crud api = 생성, 나열, 읽기, 업데이트 및 삭제. 이것이 이러한 문제에 접근하는 방법입니다.
할 일 목록
계산기
환율 변환기
한 통화에서 다른 통화로 변환 중입니다. 가능한 한 많은 통화를 사용하세요(3개이면 충분합니다)
과잉 부분이 제거되었음을 알 수 있습니다.
{
"name": "Legion Tower 7i Gen 8 (Intel) Gaming Desktop",
"amount": 2099.99,
"date": "2024-31-12"
}
API 요청
# create a folder for the project at the path of your choice mkdir expense-tracker-simple-api # open the project with vscode # code expense-tracker-simple-api code -r expense-tracker-simple-api # open the built-in terminal and init node npm init -y # this should create the package.json file # create the entry file, index.js echo "console.log(\"expense-tracker-simple-api\");" > index.js # run the index.js file node index.js
위 내용은 Express를 사용한 기본 CRUD API의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
