Я перестроил ту же веб-API, используя Express, Flask и ASP.NET. Вот что я нашел.

Автор оригинала: M. S. Farzan.

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

Целью было простым: построить простой Redful API Это позволило бы приложению переднего конца для проведения основных Crud Операции, предоставляя мне введение к тому, что будет выглядеть процесс разработки.

Там есть много вариантов рамок задних конечностей, и я больше всего знаком с JavaScript, C # и Python (в этом порядке), что несколько ограничено мои варианты. Естественная отправная точка состояла в том, чтобы построить простой передний конец, который отправлял бы запросы на API, что в свою очередь будет читать и запись в локальную базу данных.

Я начал свой процесс развития с Express, который по причинам я скоро объясню, привел меня также проверить колбу и ASP.NET. Я думал, что мои выводы могут оказаться полезными для других туда, которые наводят исследующую структуру задних конечностей для небольших проектов. В этой статье я также предоставлю примеры кода и ресурсы, которые я использовал для создания всего.

Вы можете получить доступ к полному коду на Github , также.

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

Однако я предоставим TL; DR На дне, если вы просто хотите получить резюме и ключевые науки.

Вот так!

Определение API

Если вы новичок в веб-разработке, вы можете спросить: «Что такое API?»

Я должен был задать вопрос в сто раз, чтобы найти ответ, который имел смысл. И это действительно не было, пока я не построил свой собственный, что я могу сказать, что я понял, что API делает Отказ

Проще говоря, API или «интерфейс прикладного программирования», позволяет двумя разными вычислительными системами разговаривать друг с другом. В этой статье я покажу простое приложение для переднего торца, которое отображает трекер «Quest», который игроки могут просматривать их настольные ролевые игры. Каждый квест имеет «имя» и «описание», оба из которых отображаются в веб-браузере.

Если бы у меня уже были все квесты, перечисленные на сайте и просто хотели, чтобы игроки могли просматривать их, мне бы не было бы необходимости в API или в конце концов. Однако для этого проекта я хочу, чтобы пользователи могли добавлять квесты, поиск их, удалять их и так далее. Для этих операций мне нужно где-нибудь хранить квесты, но приложение моего переднего конца не может передавать информацию непосредственно в базу данных.

Для этого мне нужна API, который может получать HTTP-запросы с веб-сайта, выяснить, что делать с этими запросами, взаимодействовать с моей базой данных и отправлять больше информации о цепочке, чтобы пользователь мог видеть, что произошло.

Все это – передний конец «клиент», задний конец «API» или сервер, а база данных – называется «стеком» или точнее, «полный стек». Для этого проекта я построил простой веб-сайт переднего конца в качестве верхней части стека, и выключил все под ним, поскольку я попробовал разные рамки и базы данных.

Структура проекта

Структура для этого проекта была довольно проста, с передним конечным клиентом отделяется от трех разных серверов, которые я бы раскрутился по мере необходимости для обслуживания API.

Я использовал Сообщество Visual Studio В качестве моим кодовым редактором и IDE, с реквизитной языковыми пакетами, установленными для JavaScript, Python и C #.

Я предоставим обзор своего опыта в каждой рамки, в свою очередь, со ссылками на учебники и пакеты, которые я использовал, чтобы заставить их работать с клиентом. Но сначала давайте посмотрим на передний конец!

Клиент: vue.js

Целью для клиента было простой веб-сайт, который получит информацию из базы данных через API и отображать ее пользователю. Чтобы упростить процесс, мои требования заключались в том, что клиенту нужно было бы только «прочитать» все элементы в базе данных, и предоставлять пользователю возможность «создавать» новый квест.

Эти «чтение» и «создают» операции – «R» и «C» в «Crud» – аналогичны методам HTTP «GET» и «POST», который мы увидим в коде ниже.

В разработке передней части мне наиболее удобно, используя Vue и использовал Vue Cli К услугам гостей базовый клиент, со следующей структурой файла:

Я заменил разметку Boaterplate, предоставленную Vue CLI со следующими:

И соответствующий Vue код:

import axios from 'axios';

    export default {
        name: 'App',
        data: function () {
            return {
                quests: null,
                newQuestName: null,
                newQuestDescription: null
            }
        },
        methods: {
            getQuests: function () {
                axios
                    .get('http://localhost:3000/quests')
                    .then(response => (this.quests = response.data));
            },
            addQuest: function () {
                axios
                    .post('http://localhost:3000/quests', {
                        name: this.newQuestName,
                        description: this.newQuestDescription
                    });
            },
            postQuest: function () {
                axios.all([this.addQuest(), this.getQuests()]);
                this.$forceUpdate();
            }
        },
        mounted: function () {
            this.getQuests();
        }
    }

Если вы не знакомы с Vue, специфики передней части не так важны! Значится вот то, что я использую пакет JavaScript под названием Axios Чтобы сделать мою получение и опубликовать запросы на потенциальный сервер.

Когда клиентские нагрузки он сделает запрос на URL Http://localhost: 3000/квесты для загрузки всех квестов из базы данных. Он также предоставляет пару входных полей и кнопку, которая будет опубликовать новый квест.

Используя Vue CLI, чтобы служить клиенту на http://localhost: 8080, передний конец приложения выглядит так, как это выглядит в действии:

После того, как квесты добавляются в базу данных, они начнут появляться между заголовком «rpg Quests» и полями ввода.

Клиентские ресурсы

Чтобы построить клиента, я использовал:

Nodejs / NPM для управления пакетом
Vue Cli для лесов, служебных и строительных проектов
Axios Для создания HTTP-запросов на API
Vue Axios Документация Для того, чтобы иметь чувство использования Axios в концерте с API
Почтальон Для тестирования запросов API через браузер перед реализацией их в клиенте.

JavaScript API: Express

Экспресс Легкая веб-каркас для Nodejs Это позволяет писать серверные приложения с JavaScript.

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

Быть наиболее комфортно в JavaScript, я был взволнован перспективой наличия всего стека на одном языке вместо нескольких. Я слышал о «стеке MEVN», который обозначает полное приложение стека, которое состоит из Монгодб , Экспресс, Vue и Nodejs и решил попробовать это для этой итерации проекта.

Я следовал за Учебное пособие на веб-API Сначала построить приложение шаблона, затем использовал другой Учебник Mevn Чтобы заполнить детали того, как получить API для общения с помощью Vue Client, который я построил. Express API, который я создал для этого проекта, следует аналогичной структуре для первого, используя MongoDB в качестве базы данных:

Если вы идете с фона JavaScript, Express довольно легко читать, даже если вы не знакомы с некоторыми из задней конечной терминологии. Ниже приведен фрагмент из/routes/Quests.js, например, который обрабатывает HTTP конечная точка Запросы:

router.get('/', async (req, res) => {
    try {
        const quests = await Quest.find();
        res.json(quests);
    } catch (err) {
        res.status(500).json({ message: err.message });
    }
});

router.post('/', async (req, res) => {
    const quest = new Quest({
        name: req.body.name,
        description: req.body.description
    });
    try {
        const newQuest = await quest.save();
        res.status(201).json(newQuest);
    } catch (err) {
        res.status(400).json({ message: err.message });
    }
});

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

Я нашел Mongodb, чтобы быть безболезненным работать с как NoSQL база данных. Если вы работаете с Express, вы, скорее всего, будете использовать Мангуст как ODM – в основном, как «средний человек», который переводит модель того, как выглядит ваши данные для базы данных.

Модель в этом приложении (называемая «схемой» в монпозных условиях) действительно проста, расположена в/models/quests.js:

const questSchema = new mongoose.Schema({
    name: {
        type: String,
        required: true
    },
    description: {
        type: String,
        required: true
    }
});

Вышеуказанное указывает, что база данных должна хранить наши два поля: имя квеста и описание квеста. Оба этих поля являются строками и требуются. Все запросы GET и POST должны будут соответствовать этой модели, чтобы взаимодействовать с базой данных.

После проводки все это UP и размещение нескольких новых квестов, сайт переднего конца начался заполнение данных:

Однако процесс настройки Express API не был без его тяги волос. Будучи в первую очередь передний и 2D-разработчик игры, я стал тесно знакомым, как диспергировал экосистему JavaScript. Это разочарование увеличилось в попытке создать заднее приложение. Есть Лот пакетов, необходимых для того, чтобы получить все и бегать, каждый из которых имеет собственную необходимую конфигурацию и реализацию.

Если вы ищете рамки, которые просто делают все из коробки, Express, безусловно, не выбор для вас. Это легкий, гибкий, и легко читать, в очень «выборе – ваше собственное-приключение» моды. Мне очень нравится, насколько убирается код и способность структурировать мои проекты, как я вижу посадку, но устранение неисправностей и обработка ошибок, оставляйте многое другое.

JavaScript/Express Resources

Чтобы построить JavaScript API, я использовал:

Nodejs / NPM для управления пакетом
Экспресс Как основной веб-каркас
Доценв создать определенные среды переменные
Номемон смотреть файлы для изменений и перезапустить сервер, чтобы я не должен был
CORS Разрешить Перекрестные запросы (В основном боль, если вы пытаетесь сделать запросы от клиента на сервер, который оба работают на месте на вашем компьютере)
Монгодб для NoSQL база данных
Мангуст Для написания моделей, которые отображают на MongoDB
Это урок API Чтобы обеспечить базовое понимание того, как создать стек экспресс-монгодб
Это обучение Mevn Чтобы заполнить пробелы запуска на полную стопку MongoDB-Express-Vuue

Python API: колба

В процессе построения Express API у меня был разговор с другом науки о данных, который работает в Python. Это дало мне представление о том, чтобы попробовать не-JavaScript Frameworks, чтобы увидеть, лучше ли они подходят для моего приложения.

Я взял курсор на Джанго , поскольку я слышал об этом как на задней панели Powerhouse, которая предоставляет все из коробки. Я был немного запуган тем, как мне показалось самоуверенность, и решил попробовать Колбу Вместо этого, какую ощущаю себя как питон, эквивалентный экспресс.

Я следовал за первые несколько битов отличного Флэк Мега-Учебник Чтобы создать мою структуру приложения, используя компаньон Учебное пособие по восстановлению API Чтобы заполнить кусочки HTTP-запросов. Структура файла оказалась только оттенками более сложным, чем у Express API:

Учебник, который я следовал, использует SQLite Для своей базы данных, с Flask-Sqlalchemy как ORM Отказ Код HTTP-запроса, который наиболее аналогичен Express API, находится в/App/routes.py:

@app.route('/quests', methods=['GET'])
def get_quests():
    questQuery = Quest.query.all()
    quests = {}
    for quest in questQuery:
        quests[quest.name] = quest.description
    return jsonify(quests)

@app.route('/quests', methods=['POST'])
def post_quest():
    newQuest = Quest(name=request.json['name'], description=request.json['description'])
    db.session.add(newQuest)
    db.session.commit()
    return "Quest Added!"

Аналогично, модель базы данных (скидка с схемой базы данных) находится в/App/models.py:

class Quest(db.Model):
    name = db.Column(db.String(256), primary_key=True, index=True, unique=True)
    description = db.Column(db.String(256), index=True, unique=True)

Как я уже упоминал, я более знаком с JavaScript и C #, чем с Python, и работать с последним, чтобы построить API колба, как обманывая. Определенные вещи, такие как путь, обработка пакетов, и писать работоспособный код, были просто Легко , хотя я повесил на получение API, чтобы правильно разобрать JSON для клиента. Я подозреваю, что это был скорее вопрос моей незначительности с языком, чем на что-то еще, но это потребовало время для устранения неполадок.

Чтобы быть довольно честным, приезжающим с неблачанного фона, я сделал вид ожидать, что выполните пару учебников и раскрутите API, не делая все, что на нем много работает.

Я не могу сказать, что это оказалось таким образом, так как Python имеет свои особенности, которые требуют некоторого времени, чтобы привыкнуть. Тем не менее, экосистема Python, кажется, чрезвычайно хорошо организована, и мне понравилось, чтобы мое время наращивало фляску API.

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

Флэбка была достаточно проста для меня, как разработчик, не являющийся Python, чтобы забрать и построить что-то в течение выходных. Я подозреваю, что обучение Django займет немного дольше, но с потенциально большими дивиденцами в течение длительного прогона.

Ресурсы Python/Flask

Чтобы построить API колбу, я использовал:

Python 3 / Пип для управления пакетом
Колбу Как основной веб-каркас
Python-Dotenv Чтобы настроить переменные среды
SQLite в качестве базы данных
Flask-Sqlalchemy как ORM для работы с SQLite
Флэк-мигрировать В качестве дополнительного инструмента для миграции данных на SQLite
Flask-Cors обращаться с теми же проблемами CORS, как с экспресс-API
Флэк Мега-Учебник изучать основы
Учебное пособие по API с флэбкой Чтобы понять, как получить HTTP-запросы

C # API: ASP.NET

Я не могу сказать вам, сколько раз я гугул “. net ” Понять, что это так, как это отличается от Asp.net И почему я хотел бы использовать любой из этого. Мои знания C # приходят главным образом от работы с Единство , что существует несколько примыкающих к .NET и не предусматривает много воздействия большей экосистемы Microsoft.

Я провел некоторое время исследования Бритвенные страницы и MVC И, наконец, пришел, чтобы понять широту ASP.NET от функций, как веб-каркас с открытым исходным кодом Microsoft. Я решил бросить ASP.NET в шляпу для потенциального конца для моего приложения и установить о работе через Официальный учебный пособие на веб-API С помощью ядра ASP.NET и MongoDB.

Структура файла для этой версии API была более сложной, чем остальные, учитывая, что проекты .NET имеет тенденцию иметь гораздо больший след:

Я также должен упомянуть, что у меня уже была Visual Studio и все необходимые рабочие нагрузки, которые облегчают процесс настройки. Кроме того, проведев время с MongoDB для Express API, я обнаружил, что часть базы данных проекта будет похожа, хотя по умолчанию ASP.net, кажется, предпочитает использовать Microsoft SQL Server и Организатор ORM Отказ

Код ASP.NET для HTTP-запросов – это немного сложнее, чем то, что мы видели с двумя другими API, но это не совпадает для всего кода, который сидит вокруг Это.

Сначала рассмотрите этот фрагмент в/controllers/QuestController.cs, которые обрабатывают запросы:

namespace QuestAPI.Controllers
{
    [Route("quests/")]
    [ApiController]
    public class QuestsController : ControllerBase
    {
        private readonly QuestService _questService;

        public QuestsController(QuestService questService)
        {
            _questService = questService;
        }

        [HttpGet]
        public ActionResult> Get() =>
            _questService.Get();

        [HttpPost]
        public ActionResult Create(Quest quest)
        {
            _questService.Create(quest);
            return CreatedAtRoute("GetQuest", new { id = quest.Id.ToString() }, quest);
        }
    }
}

Не слишком ужасна, почти читаемое, в виде C # способ. Модель данных в/models/quest.cs еще проще:

namespace QuestAPI.Models{
    public class Quest
    {
        [BsonId]
        [BsonRepresentation(BsonType.ObjectId)]
        public string Id { get; set; }

        [BsonElement("Name")]
        public string Name { get; set; }

        public string Description { get; set; }
    }
}

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

Тем не менее, насколько вы можете сказать из сложной структуры файлов, есть так много кода, который окружает эти фрагменты, наряду с Интерфейсы , Инъекция зависимости И другие абстракции, которые могут быть сложными, чтобы понять, как все это работает вместе.

Рассмотрим следующий код конфигурации в/startup.cs:

        public void ConfigureServices(IServiceCollection services)
        {
            services.Configure(Configuration.GetSection(nameof(QuestDatabaseSettings)));

            services.AddSingleton(sp => sp.GetRequiredService>().Value);

            services.AddSingleton();

            services.AddCors(options =>
            {
                options.AddPolicy(MyAllowSpecificOrigins, builder =>
                {
                    builder.WithOrigins("http://localhost:3000/quests", "http://localhost:8080").AllowAnyHeader().AllowAnyMethod();
                });
            });

            services.AddControllers();
        }

Или это особенно вложенный бит от отдельного SQL Server Web API Учебное пособие :

    [HttpGet]
    public async Task>> GetTodoItems()
    {
        return await _context.TodoItems
            .Select(x => ItemToDTO(x))
            .ToListAsync();
    }

Ржу не могу. Какие?? Как новый пользователь, даже знакомый, как я с C #, я могу пойти на строку, чтобы понять каждую абстрацию, или я могу просто доверять, что рамки обрабатывают все для меня и забывают об этом.

Я склонен точно знать, как мой код работает так, чтобы я мог исправить или изменить его при необходимости. Но я, безусловно, чувствую, что мое время, потраченное на изучение Ins-ards of asc.net, может быть лучше использовано для освоения других рамках.

Чтобы быть справедливым, ASP.NET, похоже, похожа на Django, чтобы быть более самоуверенным и предоставлять вам тонну из коробки, включая решение для аутентификации, управление базами данных и то, что он. Если эти вещи важны для вас, это, безусловно, стоит рассмотреть.

Он также имеет полную поддержку Microsoft и сообщество с открытым исходным кодом. Поэтому, если вы смотрите на разработку приложений на уровне предприятия, которые надо масштабироваться, вы, возможно, захотите предпринять более длинный взгляд на ASP.NET в качестве потенциального решения.

C #/asp.net Ресурсы

Чтобы построить ASP.NET API, я использовал следующие ресурсы:

Сообщество Visual Studio В качестве моим редактором кода и IDE, с установленной рабочей нагрузкой ASP.NET и веб-разработки (у меня уже была Mongodb, работающая из Express API)
Microsoft’s Официальное учебное пособие Для строительства веб-API с ASP.NET и MongoDB

TL; доктор

Всего, с небольшими вариациями и икотами среди них, я получил каждый из веб-API для работы с Vue Client с возможностью просмотра квестов и добавить квесты в базу данных. Надеюсь, мое объяснение процесса было полезно в вашем собственном поисках задней конечной структуры, но вот несколько дополнительных рекомендаций на всякий случай:

Если вы разработчик JavaScript и/или хотите управлять всем, что делает ваше приложение, включая его архитектуру, рассмотрим использование Express.
Если вы являетесь разработчиком Python и/или хотите приятного опыта в разработке небольших проектов, попробуйте колбу, но рассмотрите возможность использования Django, если вам нужна дополнительная поддержка, и не возражающая в нем.
Если вы являетесь разработчиком C #, и готовы провести время, чтобы узнать самые тайные детали из лучших практик C #, рассмотрите возможность использования ASP.NET. В качестве альтернативы, если вам нужна поддержка на уровне предприятия прямо из коробки, вам будет трудно найти лучше.
Если вы не знаете, что пользоваться и просто хочу изучать разработку задней части, посмотрите на колбу. У вас легко работать и научит вам основы, которые вам нужно знать для создания веб-приложений на любом языке кодирования.
Если вы не знаете, что использовать и хотите приключение, выберите Express. Там есть кроличная дыра в управлении пакетами и вкладывает вопросы переполнения стека, которые могут заставить вас разорвать свои волосы, но вы многое узнаете о экосистеме JavaScript и веб-разработки в целом.

Кроме того, две вещи, упомянутые медведя, которые бросили меня для спина в этом процессе: CORS и VIRCESTION. Первый, который я уже упоминал в этой статье пару раз, но стоит снова обсуждать, чтобы понять объем создания приложения для полного стека на вашей машине.

Если у вас нет интегрированной среды разработки, которая обрабатывает весь стек для вас, вы, скорее всего, будете иметь клиент, сервер и базу данных, которые все работают независимо друг от друга.

В разделе Express API выше, например, я бежал

Server Server Vue CLI, который отображает мое приложение для переднего конца в порту 8080;
Сценарий NPM для раскрутки сервера Express API на порт 3000; а также
Отдельный экземпляр базы данных Mongo, чтобы все работать вместе. Это три команда подсказки открываются и общий беспорядок!

Если вы копаете в Vue Code выше (или на Github), вы увидите, что запросы, сделанные от имени клиента, работают на http://localhost: 8080, находятся на сервере на http://localhost: 3000 Представляется там, где экспресс API слушает. Это называется «обмен ресурсами по перекрестным происхождениям» или CORS И он заблокирован браузером для проблем безопасности. Большинство каркасов требуют, чтобы вы установили дополнительный пакет, чтобы получить все, что работает в вашей местной среде.

Во-вторых, вы захотите стать комфортно с Переменные среды , что действительно может помочь сгладить некоторые грубые крожки пути во время выполнения. Я использовал Доценв и Flask-env Для проектов Express и Flask соответственно.

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

Одно окончательное примечание, которое может быть полезно, если вы просто работаете над проектом в конце концов и не хотите проходить беду постройки клиента переднего конца: рассмотрите возможность использования третьей стороны, как Почтальон Отказ Я использовал его, чтобы сделать HTTP-запросы каждому из API, чтобы убедиться, что они работали должным образом перед наложением на Vue Client, и пытаясь вообще получить весь стек.

Я надеюсь, что эта статья была полезна для вас в вашем собственном процессе поиска задней конечной структуры. Дайте мне знать, что вы найдете!

Если вам понравилось эту статью, пожалуйста, рассмотрите возможность Проверка моих игр и книги , Подписавшись на мой канал YouTube или Присоединение к Энтроманность Раздор Отказ

М. С. Фарзан, к.т.н. Написал и работал на громкие видеоигрные компании и редакционные сайты, такие как электронные искусства, идеальные мировые развлечения, Modus Games и MMORPG.com, и служил менеджером сообщества для таких игр, как Dungeons & Dragons Neverwinter и Массовый эффект: Андромеда Отказ Он творческий режиссер и руководящий игровой дизайнер Энтроманность: CyberPunk Fantasy RPG и автор Трилогия ночной патки Отказ Найти М. С. Фарзан в Твиттере @sominator Отказ