Server routes and API in Vue - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define a GET route in a Vue server API.

Vue

export default defineEventHandler(async (event) => {
  if (getMethod(event) === '[1]') {
    return { message: 'Hello from API' }
  }
})

Drag options to blanks, or click blank then click option'

APOST

BDELETE

CPUT

DGET

Attempts:

3 left

💡 Hint

Common Mistakes

Using POST instead of GET for fetching data

Forgetting to check the request method

The GET method is used to fetch data from the server. Here, we check if the request method is GET to respond accordingly.

2fill in blank

medium

Complete the code to extract a query parameter named 'id' from the request URL.

Vue

export default defineEventHandler((event) => {
  const id = getQuery(event).[1]
  return { id }
})

Drag options to blanks, or click blank then click option'

Aid

Bquery

Cparams

Dbody

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'params' instead of 'id' for query parameters

Trying to access body instead of query

The getQuery(event) returns an object of query parameters. Accessing id gets the value of the 'id' parameter.

3fill in blank

hard

Fix the error in the code to correctly read JSON data from a POST request body.

Vue

export default defineEventHandler(async (event) => {
  if (getMethod(event) === 'POST') {
    const data = await [1](event)
    return { received: data }
  }
})

Drag options to blanks, or click blank then click option'

AgetQuery

BreadBody

CparseJSON

DreadJson

Attempts:

3 left

💡 Hint

Common Mistakes

Using getQuery to read body

Using non-existent parseJSON function

The readBody(event) function reads and parses the JSON body of the request in Vue server API.

4fill in blank

hard

Fill both blanks to create a route handler that responds only to DELETE requests and returns a success message.

Vue

export default defineEventHandler((event) => {
  if (getMethod(event) === '[1]') {
    return { message: '[2]' }
  }
})

Drag options to blanks, or click blank then click option'

ADELETE

BData deleted successfully

CPOST

DOperation completed

Attempts:

3 left

💡 Hint

Common Mistakes

Using POST instead of DELETE

Returning a generic message instead of a deletion confirmation

The route checks if the request method is DELETE and returns a success message confirming deletion.

5fill in blank

hard

Fill all three blanks to create a route that reads a 'name' from the POST body and returns a greeting.

Vue

export default defineEventHandler(async (event) => {
  if (getMethod(event) === '[1]') {
    const body = await [2](event)
    return { greeting: `Hello, ${body.[3]!` }
  }
})

Drag options to blanks, or click blank then click option'

APOST

BreadBody

Cname

DGET

Attempts:

3 left

💡 Hint

Common Mistakes

Using GET instead of POST

Trying to access a wrong property name

Not awaiting the body reading function

This code handles POST requests, reads the JSON body using readBody, and accesses the 'name' property to create a greeting.