خواندن ۸ دقیقه·۶ سال پیش

استفاده از json-server برای API تست

سلام ✋

اول از همه بگم این اولین تجربه من در نوشتن مطلب توی ویرگول هست و ممکنه بعد از خوندن این مطلب خوشتون نیاد یا اصلا دلتون نخواد کامل بخونیدش ? ، یکی از اهدافم این بود که نوشتن رو شروع کنم و سعی کنم هر روز بهترش کنم. ازتون خواهش میکنم اگر انتقادی دارید بهم بگید تا بتونم مطالب بهتری رو ارائه بدم ??.

میخوام راجع به یکی از تجربه های خودم در استفاده از یک کتابخونه فوق العاده که میتونه سرعت توسعتون رو قبل آماده شدن api اصلی برنامه بالا ببره صحبت کنم.

تجربه من این بود که روی فرانت ریکت استفادش کردم شما میتونید هر مدلی که دلتون خواست ازش استفاده کنید.

کتابخونه ای که میخوام بهتون معرفی کنم اسمش json server هست که یک api کامل به صورت فیک بهتون ارائه میده و میتونید تمام تست های برنامتون رو از طریق این کتابخونه انجام بدید و بعد از آماده شدن api اصلی تنها کاری که میکنید عوض کردن آدرس api هست.

خوبی این کتابخونه اینه که تمامی متد هارو داره و میتونید داخلش موجودیت هارو تعریف کنید و با استفاده از متد های مختلف دیتا ها رو بخونید یا ایجاد، ویرایش و حذف کنید.

پیش نیاز ها

نصب NodeJs

1️⃣ نصب json server

با استفاده از دستور زیر json server رو بصورت global روی سیستمون راه اندازی کنید.

npm install -g json-server

2️⃣ ساخت فایل db.json و اضافه کردن دیتا

هر جایی که دلتون خواست یک فایل با پسوند json ایجاد کنید، برای نمونه من فایل db.json رو ایجاد کردم و داخل اون مقادیر زیر رو وارد کردم

{
  &quotposts&quot: [
    { &quotid&quot: 1, &quottitle&quot: &quotjson-server&quot, &quotauthor&quot: &quottypicode&quot,&quotviews&quot:3 }
  ],
  &quotcomments&quot: [
    { &quotid&quot: 1, &quotbody&quot: &quotsome comment&quot, &quotpostId&quot: 1 }
  ],
  &quotprofile&quot: { &quotname&quot: &quottypicode&quot }
}

3️⃣ استارت سرویس json server

بعد از سیو کردن فایل ما 3 موجودیت ساختیم به نام های posts , comments , profile حالا وارد پوشه ای که فایل رو داخلش ساختیم میشیم و از طریق cli دستور زیر رو اجرا می کنیم

json-server --watch db.json

خب json server روی پورت 3000 لوکالتون اجرا میشه و می تونید از طریق آدرس http://localhost:3000/posts/1 مقادیر posts با id=1 رو به صورت زیر ببینید

{ &quotid&quot: 1, &quottitle&quot: &quotjson-server&quot, &quotauthor&quot: &quottypicode&quot }

میبینید که خیلی راحت با متد GET تونستید اطلاعات مطالب (posts) رو دریافت کنید حالا میتونید این رو روی comments و profile هم به صورت زیر امتحان کنید

http://localhost:3000/comments
http://localhost:3000/comments/1
http://localhost:3000/profile

مسیرها (Routes)

Plural
GET /posts 
GET /posts/1 
POST /posts 
PUT /posts/1 
PATCH /posts/1 
DELETE /posts/1

Singular
GET /profile 
POST /profile 
PUT /profile 
PATCH /profile

فیلتر

برای فیلتر کردن میتونید از . استفاده کنید

GET /posts?title=json-server&author=typicode 
GET /posts?id=1&id=2 
GET /comments?author.name=typicode

صفحه بندی (Paginate)

با استفاده از _page و _limit میتونید دیتا های خروجی رو صفحه بندی کنید

مقدار پیشفرض limit برای صفحه بندی 10 است.

GET /posts?_page=7
GET /posts?_page=7&_limit=20

میتونید تعداد صفحات ، صفحه بعدی و صفحه قبلی رو از طریق مقدار Link که توی Header وجود داره دریافت کنید

مرتب سازی (Sort)

برای مرتب سازی میتونید از _sort و _order استفاده کنید

GET /posts?_sort=views&_order=asc
GET /posts/1/comments?_sort=votes&_order=asc

برای استفاده همزمان روی چند فیلد میتونید به صورت زیر استفاده کنید

GET /posts?_sort=user,views&_order=desc,asc

برش (Slice)

با استفاده از _start و _end یا _limit میتوانید دیتا های خود را به صورت شخصی سازی شده دریافت کنید، از طریق مقدار X-Total-Count در Header تعداد دیتا ها در Response را دریافت کنید.

GET /posts?_start=20&_end=30
GET /posts/1/comments?_start=20&_end=30
GET /posts/1/comments?_start=20&_limit=10

عملگر ها (Operators)

با استفاده از _gte و _lte میتوانید فیلد ها را به صورت Range فیلتر کنید

GET /posts?views_gte=10&views_lte=20

در مثال بالا مطالبی که تعداد بازدید آن ها بین 10 تا 20 باشد نمایش داده می شود

با استفاده از _ne تمامی دیتا ها که شرط مقدار _ne را ندارند نمایش داده می شود برای مثال در Request زیر تمامی مطالب به جز مطلبی که id اون برابر 1 هست نمایش داده میشن

GET /posts?id_ne=1

با استفاده از _like می توانید رکورد فیلدی که مقدارش شبیه به مقدار _like هست رو دریافت کنید

GET /posts?title_like=server

در مثال بالا فقط مطالبی نمایش داده می شوند که از کلمه server داخل عنوانشون استفاده شده باشه

جستجو در همه فیلد ها

با استفاده از پارامتر q مقدار ورودی در تمامی رکورد ها جستجو می شود و رکوردی که مقدار یکی از فیلدهاش برابر با مقدار q باشه نمایش داده میشه

GET /posts?q=internet

ارتباطات (Relationships)

با استفاده از _embed میتوانید رکوردهای موجودیتی که به والد متصل شده اند (Many to one) را دریافت کنید

GET /posts?_embed=comments
GET /posts/1?_embed=comments

با استفاده از _expand میتوانید رکوردهای موجودیتی که به فرزند متصل شده اند (One to many) را دریافت کنید

برای دریافت یا ایجاد موجودیت هایی که با هم ارتباط دارند می توانید به صورت زیر عمل کنید که در بخش اول توضیح داده شد.

GET  /posts/1/comments
POST /posts/1/comments

دیتابیس

با وارد کردن /db میتوانید تمامی موجودیت ها و رکوردهاشون رو دریافت کنید

GET /db

صفحه اصلی

نمایش فایل پیشفرض index که میتوانید با ایجاد یک دایرکتوری به نام public در کنار فایل json و ایجاد فایل index آن را مشاهده کنید.

GET /

موارد اضافی

فایل های استاتیک

شما میتونید داخل json server از فایل های html ، css ، javascript یا تصاویر و ویدیو ها استفاده کنید کافیه یک دایرکتوری کنار فایل json به نام public ایجاد کنید، همچنین میتونید از طریق پارامتر --static در زمان اجرای json server مقدار پیشفرض دایرکتوری فایل هاتون رو تغییر بدید.

mkdir public
echo 'hello world' > public/index.html
json-server db.json

json-server db.json --static ./some-other-dir

تغییر پورت

به صورت پیشفرض پس از اجرای json server سرویس بر روی پورت 3000 اجرا می شود که شما می توانید با دستور زیر پورت پیشفرض را تغییر دهید

json-server --watch db.json --port 3004

شما می توانید فایل json را به صورت ریموت فراخوانی کنید

json-server http://example.com/file.json
json-server http://jsonplaceholder.typicode.com/db

ایجاد دیتا Random

شما میتوانید به جای فایل json از فایل js استفاده کنید و دیتا رو به صورت تصادفی ایجاد کنید

// index.js
module.exports = () => {
  const data = { users: [] }
  // Create 1000 users
  for (let i = 0; i < 1000; i++) {
    data.users.push({ id: i, name: `user${i}` })
  }
  return data
}

و به صورت زیر اجرا کنید

json-server index.js

اضافه کردن route های custom

با ایجاد فایل routes.json در روت دایرکتوری json server میتوانید route ها را شخصی سازی کنید

 {
 &quot/api/*&quot: &quot/$1&quot,
  &quot/:resource/:id/show&quot: &quot/:resource/:id&quot,
  &quot/posts/:category&quot: &quot/posts?category=:category&quot,
  &quot/articles\\?id=:id&quot: &quot/posts/:id&quot
}

و به صورت زیر سرویس json server رو استارت کنید

json-server db.json --routes routes.json

حالا میتونید به صورت زیر به دیتا هاتون دسترسی داشته باشید

/api/posts # → /posts
/api/posts/1  # → /posts/1
/posts/1/show # → /posts/1
/posts/javascript # → /posts?category=javascript
/articles?id=1 # → /posts/1

دستور های دیگر

json-server [options] <source>
Options:
  --config, -c       Path to config file           [default: &quotjson-server.json&quot]
  --port, -p         Set port                                    [default: 3000]
  --host, -H         Set host                             [default: &quotlocalhost&quot]
  --watch, -w        Watch file(s)                                     [boolean]
  --routes, -r       Path to routes file
  --middlewares, -m  Paths to middleware files                           [array]
  --static, -s       Set static files directory
  --read-only, --ro  Allow only GET requests                           [boolean]
  --no-cors, --nc    Disable Cross-Origin Resource Sharing             [boolean]
  --no-gzip, --ng    Disable GZIP Content-Encoding                     [boolean]
  --snapshots, -S    Set snapshots directory                      [default: &quot.&quot]
  --delay, -d        Add delay to responses (ms)
  --id, -i           Set database id property (e.g. _id)         [default: &quotid&quot]
  --foreignKeySuffix, --fks  Set foreign key suffix, (e.g. _id as in post_id)
                                                                 [default: &quotId&quot]
  --quiet, -q        Suppress log messages from output                 [boolean]
  --help, -h         Show help                                         [boolean]
  --version, -v      Show version number                               [boolean]
Examples:
  json-server db.json
  json-server file.js
  json-server http://example.com/db.json

امیدوارم که از این مطلب لذت برده باشید

منبع : https://github.com/typicode/json-server

وب سرویسjsonrest apijavascriptnodejs

ایمان

Senior Front-End Developer at PHINIX

شاید از این پست‌ها خوشتان بیاید

ایمان

خواندن ۸ دقیقه·۶ سال پیش

استفاده از json-server برای API تست

سلام ✋

تجربه من این بود که روی فرانت ریکت استفادش کردم شما میتونید هر مدلی که دلتون خواست ازش استفاده کنید.

پیش نیاز ها

نصب NodeJs

1️⃣ نصب json server

با استفاده از دستور زیر json server رو بصورت global روی سیستمون راه اندازی کنید.

npm install -g json-server

2️⃣ ساخت فایل db.json و اضافه کردن دیتا

{
  &quotposts&quot: [
    { &quotid&quot: 1, &quottitle&quot: &quotjson-server&quot, &quotauthor&quot: &quottypicode&quot,&quotviews&quot:3 }
  ],
  &quotcomments&quot: [
    { &quotid&quot: 1, &quotbody&quot: &quotsome comment&quot, &quotpostId&quot: 1 }
  ],
  &quotprofile&quot: { &quotname&quot: &quottypicode&quot }
}

3️⃣ استارت سرویس json server

json-server --watch db.json

{ &quotid&quot: 1, &quottitle&quot: &quotjson-server&quot, &quotauthor&quot: &quottypicode&quot }

http://localhost:3000/comments
http://localhost:3000/comments/1
http://localhost:3000/profile

مسیرها (Routes)

Plural
GET /posts 
GET /posts/1 
POST /posts 
PUT /posts/1 
PATCH /posts/1 
DELETE /posts/1

Singular
GET /profile 
POST /profile 
PUT /profile 
PATCH /profile

فیلتر

برای فیلتر کردن میتونید از . استفاده کنید

GET /posts?title=json-server&author=typicode 
GET /posts?id=1&id=2 
GET /comments?author.name=typicode

صفحه بندی (Paginate)

با استفاده از _page و _limit میتونید دیتا های خروجی رو صفحه بندی کنید

مقدار پیشفرض limit برای صفحه بندی 10 است.

GET /posts?_page=7
GET /posts?_page=7&_limit=20

میتونید تعداد صفحات ، صفحه بعدی و صفحه قبلی رو از طریق مقدار Link که توی Header وجود داره دریافت کنید

مرتب سازی (Sort)

برای مرتب سازی میتونید از _sort و _order استفاده کنید

GET /posts?_sort=views&_order=asc
GET /posts/1/comments?_sort=votes&_order=asc

برای استفاده همزمان روی چند فیلد میتونید به صورت زیر استفاده کنید

GET /posts?_sort=user,views&_order=desc,asc

برش (Slice)

GET /posts?_start=20&_end=30
GET /posts/1/comments?_start=20&_end=30
GET /posts/1/comments?_start=20&_limit=10

عملگر ها (Operators)

با استفاده از _gte و _lte میتوانید فیلد ها را به صورت Range فیلتر کنید

GET /posts?views_gte=10&views_lte=20

در مثال بالا مطالبی که تعداد بازدید آن ها بین 10 تا 20 باشد نمایش داده می شود

GET /posts?id_ne=1

با استفاده از _like می توانید رکورد فیلدی که مقدارش شبیه به مقدار _like هست رو دریافت کنید

GET /posts?title_like=server

در مثال بالا فقط مطالبی نمایش داده می شوند که از کلمه server داخل عنوانشون استفاده شده باشه

جستجو در همه فیلد ها

GET /posts?q=internet

ارتباطات (Relationships)

با استفاده از _embed میتوانید رکوردهای موجودیتی که به والد متصل شده اند (Many to one) را دریافت کنید

GET /posts?_embed=comments
GET /posts/1?_embed=comments

با استفاده از _expand میتوانید رکوردهای موجودیتی که به فرزند متصل شده اند (One to many) را دریافت کنید

GET  /posts/1/comments
POST /posts/1/comments

دیتابیس

با وارد کردن /db میتوانید تمامی موجودیت ها و رکوردهاشون رو دریافت کنید

GET /db

صفحه اصلی

GET /

موارد اضافی

فایل های استاتیک

mkdir public
echo 'hello world' > public/index.html
json-server db.json

json-server db.json --static ./some-other-dir

تغییر پورت

json-server --watch db.json --port 3004

شما می توانید فایل json را به صورت ریموت فراخوانی کنید

json-server http://example.com/file.json
json-server http://jsonplaceholder.typicode.com/db

ایجاد دیتا Random

شما میتوانید به جای فایل json از فایل js استفاده کنید و دیتا رو به صورت تصادفی ایجاد کنید

// index.js
module.exports = () => {
  const data = { users: [] }
  // Create 1000 users
  for (let i = 0; i < 1000; i++) {
    data.users.push({ id: i, name: `user${i}` })
  }
  return data
}

و به صورت زیر اجرا کنید

json-server index.js

اضافه کردن route های custom

با ایجاد فایل routes.json در روت دایرکتوری json server میتوانید route ها را شخصی سازی کنید

 {
 &quot/api/*&quot: &quot/$1&quot,
  &quot/:resource/:id/show&quot: &quot/:resource/:id&quot,
  &quot/posts/:category&quot: &quot/posts?category=:category&quot,
  &quot/articles\\?id=:id&quot: &quot/posts/:id&quot
}

و به صورت زیر سرویس json server رو استارت کنید

json-server db.json --routes routes.json

حالا میتونید به صورت زیر به دیتا هاتون دسترسی داشته باشید

/api/posts # → /posts
/api/posts/1  # → /posts/1
/posts/1/show # → /posts/1
/posts/javascript # → /posts?category=javascript
/articles?id=1 # → /posts/1

دستور های دیگر

json-server [options] <source>
Options:
  --config, -c       Path to config file           [default: &quotjson-server.json&quot]
  --port, -p         Set port                                    [default: 3000]
  --host, -H         Set host                             [default: &quotlocalhost&quot]
  --watch, -w        Watch file(s)                                     [boolean]
  --routes, -r       Path to routes file
  --middlewares, -m  Paths to middleware files                           [array]
  --static, -s       Set static files directory
  --read-only, --ro  Allow only GET requests                           [boolean]
  --no-cors, --nc    Disable Cross-Origin Resource Sharing             [boolean]
  --no-gzip, --ng    Disable GZIP Content-Encoding                     [boolean]
  --snapshots, -S    Set snapshots directory                      [default: &quot.&quot]
  --delay, -d        Add delay to responses (ms)
  --id, -i           Set database id property (e.g. _id)         [default: &quotid&quot]
  --foreignKeySuffix, --fks  Set foreign key suffix, (e.g. _id as in post_id)
                                                                 [default: &quotId&quot]
  --quiet, -q        Suppress log messages from output                 [boolean]
  --help, -h         Show help                                         [boolean]
  --version, -v      Show version number                               [boolean]
Examples:
  json-server db.json
  json-server file.js
  json-server http://example.com/db.json

امیدوارم که از این مطلب لذت برده باشید

منبع : https://github.com/typicode/json-server

وب سرویسjsonrest apijavascriptnodejs

ایمان

Senior Front-End Developer at PHINIX

شاید از این پست‌ها خوشتان بیاید