В этой статье я хотел бы показать вам, как легко настроить макет сервера в вашем приложении Vue. Это один из способов настройки фиктивных данных для веб-приложения.

Зачем нужен фиктивный сервер? Может быть множество причин, по которым вам нужен фиктивный сервер. Самая распространенная причина для меня заключается в том, что когда вы начинаете разрабатывать новую функцию, ваша серверная часть, вероятно, еще не будет готова. Другая причина может заключаться в том, что вы просто хотите протестировать поведение своего приложения с разными ответами и разными кодами состояния http, что может быть удобно, когда в это время с вашим приложением все работает нормально.

Если у вас нет приложения Vue, вам необходимо его установить. Есть много руководств, лучше описывающих этот шаг, и я могу сделать это прямо сейчас.

Если у вас нет почтальона, вы можете скачать его с https://www.postman.com/downloads/.

Сначала нам нужно настроить наш макет-сервер в Postman, нажав «Создать», а затем выбрав «Мок-сервер» из опций. На первом этапе нам нужно добавить хотя бы одну конечную точку, которую можно будет изменить позже.

На втором этапе мы просто называем наш фиктивный сервер.

На третьем шаге мы можем увидеть информацию о нашем фиктивном сервере. Самым важным является имя URL-адреса, на котором работает фиктивный сервер.

Наша конечная точка / api / items еще не получила ответа, поэтому мы можем добавить ответ, нажав "Пример", а затем "По умолчанию".

В разделе «Пример ответа» мы можем добавить ответ, который мы хотим получить, когда приложение Vue вызывает конечную точку / api / items. Это по-прежнему пример по умолчанию, мы можем добавить больше и переключаться между ними, когда хотим увидеть разные результаты в нашем приложении. Мы также можем добавить разные коды состояния, когда хотим проверить, как приложение будет работать, когда некоторые ответы вернутся, например, код состояния 500.

Затем нам нужно изменить vue.config.js, добавив новую цель прокси под ключом api / items. Target - это ваш почтовый сервер Mock Server - адрес, который вы создали ранее. Вы можете настроить таргетинг только на одну конечную точку или все конечные точки, если у вас есть примеры ответов для всех на вашем макетном сервере. В моем примере я нацелен только на конечную точку api / items.

module.exports = {
  devServer: {
    https: true,
    port: 3000,
    host: 'localhost',
    proxy: {
      'api/items': {
        target: 'https://ddeec074-9101-4f91-a194-4f2a9d7f457.mock.pstmn.io',
        ws: true,
        changeOrigin: true
      },
      'api': {
        target: 'http://localhost:3000',
        ws: true,
        changeOrigin: true
      },
    }
  }
};

Это простое решение может предоставить нам индивидуальный ответ для каждой добавляемой конечной точки.