Разработка веб-интерфейса vuejs без бэкэнда: как писать приборы?

Question

Мы создаем приложение, в котором бэкэнд полностью отделен от внешнего интерфейса.Связь будет происходить через rest-api, определенные конечные точки, json и т. Д.

Интерфейс разработан с vue-cli как приложение SPA vue.js (с vuex и vue-router), бэкэнд - Rails5 Приложение только для API.

Разработка внешнего интерфейса и внутреннего интерфейса будут выполняться параллельно разными командами, которые будут придерживаться одного и того же API.

Мои вопросы: Как может команда внешнего интерфейса разработать внешний интерфейсбез данных из бэкэнда?Например, для отображения профиля пользователя им потребуется соответствующий JSON для этого пользователя из бэкэнда.Но поскольку бэкэнд еще не закончен, конечная точка для запроса данных еще не работает.

Должны ли они создавать приборы в приложении внешнего интерфейса (например, "sample-user.json") и использовать это при разработке?Какова наилучшая практика для такого сценария, чтобы разработка внешнего интерфейса не зависела от того, будет ли сервер доступен и доставлять данные?

Answer 1

В одном из наших проектов мы просто использовали статические файлы json для разработки внешнего интерфейса независимо от внутреннего.

Мы использовали vue-cli-service, поэтому было возможно сделать так, чтобы он служил статическому jsonпросто укажите файл contentBase в vue.config.js.

. Вот пример ( упрощенный ):

vue.config.js:

module.exports = {
  devServer: {
    contentBase: path.join(__dirname, 'src', 'api')
  }
}

Добавьте статический путь json в переменную env, например, в файл .env:

VUE_APP_API_USERS = 'users.json'

Затем при доступе к API:

import axios from 'axios';
axios.get(process.env.VUE_APP_API_USERS)
  .then(response => this.users = response.data)
  .catch(error => console.log(error));

users.json в структуре каталогов:

├── package.json
├── src
│   ├── api
│   │   └── users.json
│   ├── App.vue
│   ├── assets
│   │   └── logo.png
│   └── main.js
├── vue.config.js
└── yarn.lock

Выполнить vue-cli-service serve.Теперь он будет обслуживать users.json для вызова API.

Используемая версия vue-cli-service: 3.6.0

Answer 2

Исходя из моего прошлого опыта, для небольших циклов разработки действительно удобно просто использовать статические файлы json для проверки результата запроса.Я в основном импортировал необходимые файлы в свои модули vuex и использовал их как ложный результат в моих действиях, передавая ту же самую мутацию, что и с обычной конечной точкой, но используя mock вместо http-результата в качестве параметра для мутации.Это удобно, и вам нужно будет изменить только одну строку, как только конечная точка будет готова к работе.Это прекрасно работает в схватке, например, когда у вас есть небольшие циклы разработки, и вы знаете, что к концу спринта ваша конечная точка будет готова к работе в любом случае.

Это может быть немного сложно, когда вы надеваетене получить необходимую конечную точку в течение длительного периода времени, по любой причине.Однажды мы испытали это, когда целый микросервис не был доступен в течение месяца, но нам все еще нужно было разработать богатую функцию в нашем интерфейсе.В этом сценарии мы использовали wiremock для макетирования целого ряда конечных точек из этого микросервиса для этой функции.Тем не менее, это много накладных расходов, и на самом деле это возможно только тогда, когда вы знаете, что находитесь в длительном цикле разработки.В противном случае я предлагаю использовать статические файлы.