Преобразование Markdown в HTML: создание интерфейса с помощью Node.js и Express

• Оригинальный адрес:Building A Node.js Express API To Convert Markdown To HTML
• Оригинальный автор:Sameer Borate
• Перевод с:Программа перевода самородков
• Постоянная ссылка на эту статью:GitHub.com/rare earth/gold-no…
• Переводчик:Baddyo
• Корректор:fireairforce, JackEggie

Краткое резюме: создайте приложение, которое преобразует синтаксис Markdown в HTML, и узнайте, как создавать конечные точки интерфейса с помощью Node.js и платформы Express.

Markdown — это легкий язык разметки текста, который преобразует размеченный текст в различные форматы. Markdown был изобретен, чтобы позволить людям «писать в формате простого текста, который легко читать и писать», и может быть преобразован в действительный XHTML (или HTML) по запросу. В настоящее время благодаря поддержке WordPress синтаксис Markdown становится все более популярным.

Цель этой статьи — показать читателям, как создавать конечные точки интерфейса с помощью Node.js и платформы Express. Мы создадим приложение, которое преобразует Markdown в HTML, изучая Node.js и Express по мере создания. Мы также добавим в интерфейс механизмы проверки, чтобы предотвратить злоупотребления в нашем приложении.

Приложение Markdown на основе Node.js

Мы называем это маленькое приложение «Markdown Converter», загружаем в него текст в синтаксисе Markdown и получаем HTML-версию. Приложение реализовано с использованием платформы Express для Node.js и поддерживает проверку запросов на преобразование.

Мы будем реализовывать это приложение по частям — сначала создадим базовую структуру с помощью Express, а затем добавим такие функции, как механизмы аутентификации. Итак, давайте начнем строить базовую структуру!

Этап 1: Инициализировать экспресс

Предполагая, что в вашей операционной системе уже установлен Node.js, теперь давайте создадим папку (назовем ее "markdown-api»), чтобы сохранить код, и войдите в эту папку:

$ mkdir markdown-api
$ cd markdown-api

Создайте его с помощью команды npm init.package.jsonдокумент. Команда предлагает вам ввести такую ​​информацию, как имя приложения, версия и т. д.

Для этой практики вы просто нажимаете Enter, чтобы использовать эти сообщения по умолчанию. я кладуindex.jsВ качестве файла записи по умолчанию, но вы также можете установить его по своему усмотрению.app.jsили другие документы.

теперь мыmarkdown-apiУстановите Express в каталог и включите его в список зависимостей:

$ npm install express --save

в текущем каталоге (markdown-api)Создаватьindex.jsдобавьте следующий код, чтобы проверить, успешно ли установлена ​​среда Express:

const express = require('express');
var app = express();
 
app.get('/', function(req, res){
    res.send('Hello World!');
});
 
app.listen(3000);

доступhttp://localhost:3000, чтобы убедиться, что тестовый файл работает успешно. Если все идет хорошо и мы видим в браузере слова «Hello World!», то мы можем создать базовый интерфейс для преобразования Markdown в HTML.

Этап 2: Создание базового интерфейса

Основная функция этого интерфейса — конвертировать Markdown в HTML, и он будет иметь две конечные точки:

• /login
• /convert

loginКонечная точка используется для проверки правильности запроса;convertКонечная точка используется для преобразования Markdown в HTML.

Ниже приведен базовый код интерфейса для вызова обеих конечных точек. передачаloginвернет строку «Аутентифицировано», и вызовconvertвернет загруженный вами текст Markdown. Основной метод просто возвращает строку «Hello World!».

const express = require("express");
const bodyParser = require('body-parser');
    
var app = express();
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());
 
app.get('/', function(req, res){
    res.send('Hello World!');
});
 
app.post('/login', function(req, res) {
    res.send("Authenticated");
  },
);
 
app.post("/convert", function(req, res, next) {
    console.log(req.body);
    if(typeof req.body.content == 'undefined' || req.body.content == null) {
        res.json(["error", "No data found"]);
    } else {
        res.json(["markdown", req.body.content]);
    }
});
 
app.listen(3000, function() {
 console.log("Server running on port 3000");
});

мы используем промежуточное ПОbody-parserдля помощи в анализе полученного запроса. Промежуточное ПО помещает результаты синтаксического анализа вreq.bodyсвойства для вашего использования. Хотя запрос можно разобрать без помощи промежуточного программного обеспечения, это слишком громоздко.

Вы можете установить его с помощью npmbody-parser:

$ npm install body-parser

Теперь, когда все на месте, мы должны протестировать его с помощью Postman. Начнем с краткого введения в Postman.

Знакомство с почтальоном

Postman — инструмент разработки интерфейсов, с помощью веб-версии или десктоп-клиента (веб-версия снята с производства) чрезвычайно удобно создавать, модифицировать и тестировать конечные точки интерфейса. Он может генерировать различные типы HTTP-запросов, такие как GET, POST, PUT и PATCH. Почтальон поддерживает Windows, macOS и Linux.

Приходите взглянуть на Почтальона:

(HD большая картинка)

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

1. Введите целевой URL в адресную строку вверху;
2. Выберите метод HTTP в левой части адресной строки;
3. Нажмите кнопку «Отправить».

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

Использование почтальона

После примерного знакомства с Postman мы собираемся его использовать.

Начать с командной строкиmarkdown-apiзаявление:

$ node index.js

Чтобы протестировать базовый код интерфейса, мы будем использовать Postman для вызова интерфейса. Обратите внимание, что мы используем метод POST для передачи текста для преобразования в приложение.

Метод POST нашего приложенияcontentПараметр получает текст для преобразования. Мы передаем его как формат с кодировкой URL. Строки возвращаются в формате JSON — первое поле всегда возвращает строку.markdown, а второе поле возвращает преобразованный текст. Затем, когда мы добавляем код обработки Markdown, он возвращает преобразованный текст.

Этап 3. Добавьте код преобразования Markdown

Базовая структура приложения построена, давайте посмотримshowdownЭта библиотека JavaScript, мы будем использовать эту библиотеку для преобразования Markdown в HTML.showdownОн реализован на языке JavaScript и поддерживает двунаправленное преобразование между Markdown и HTML.

(HD большая картинка)

Установить с помощью нпмshowdown:

$ npm install showdown

После добавления необходимого кода вскрытия наш код должен выглядеть так:

const express        = require("express");
const bodyParser = require('body-parser');
const showdown   = require('showdown');
    
var app = express();
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());
 
converter = new showdown.Converter();

app.get('/', function(req, res){
    res.send('Hello World!');
});
 
app.post('/login', function(req, res) {
    res.send("Authenticated");
  },
);
 
app.post("/convert", function(req, res, next) {
    if(typeof req.body.content == 'undefined' || req.body.content == null) {
        res.json(["error", "No data found"]);
    } else {
        text = req.body.content;
        html = converter.makeHtml(text);
        res.json(["markdown", html]);
    }
});
 
app.listen(3000, function() {
 console.log("Server running on port 3000");
});

Основной код для преобразования формата находится в/convertконечная точка, как показано ниже. Этот код преобразует загруженный текст Markdown в HTML-версию и возвращает результат в формате JSON.

...
} else {
        text = req.body.content;
        html = converter.makeHtml(text);
        res.json(["markdown", html]);
    }

converter.makeHtml(text)это метод, отвечающий за преобразование. использоватьsetOptionМетоды допускают различные конфигурации процесса преобразования:

converter.setOption('optionKey', 'value');

Например, его можно настроить на автоматическую вставку определенного URL-адреса без какой-либо разметки.

converter.setOption('simplifiedAutoLink', 'true');

В примере с почтальоном, если мы поместимsimplifiedAutoLinkЗначение настроено какtrue, передать простую строку (например,Google home http://www.google.com/) вернет следующий результат:

<p>Google home <a href="http://www.google.com/">http://www.google.com/</a></p>

В противном случае для достижения того же эффекта мы должны добавить информацию тега:

Google home <http://www.google.com/>

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

Теперь мы реализовали конечную точку «конвертер», которая преобразует Markdown в HTML. Пойдем дальше и добавим функцию проверки.

Четвертый этап: используйте Passport для реализации функции проверки интерфейса

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

Мы будем использовать пакет Passport для реализации механизма аутентификации. как раньшеbody-parserКак и промежуточное ПО, Passport — это промежуточное ПО аутентификации на основе Node.js. Причина его использования заключается в том, что он поддерживает различные механизмы аутентификации (аутентификация имени пользователя и пароля, аутентификация учетной записи Facebook, аутентификация учетной записи Twitter и т. д.), так что мы можем гибко выбирать метод аутентификации. Добавление промежуточного программного обеспечения Passport очень просто и не требует больших изменений кода.

Установите паспорт с помощью npm:

$ npm install passport

мы также будем использоватьlocalстратегию проверки, которую я подробно опишу позже. Поэтомуpassport-localтакже установлен.

$ npm install passport-local

Вам также понадобится модуль кодирования/декодирования JWT (JSON Web Token):

$ npm install jwt-simple

Политики в паспорте

ПО промежуточного слоя Passport использует концепцию политик для аутентификации запросов. Так называемая политика здесь представляет собой набор методов, помогающих аутентифицировать различные запросы, от простой аутентификации по имени пользователя и паролю, до аутентификации с открытой авторизацией (аутентификация по учетной записи Facebook или Twitter), до аутентификации по OpenID. Стратегия проверки подлинности, используемая приложением, должна быть предварительно настроена для проверки подлинности запросов.

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

Хотя дизайн Passport сложен, на практике он прост в использовании. Следующий пример показывает/convertКак конечные точки добавляют механизмы аутентификации. Как видите, это пустяк.

app.post("/convert", 
         passport.authenticate('local',{ session: false, failWithError: true }), 
         function(req, res, next) {
        // 若此函数被调用，说明验证成功。
        // 请求内容为空与否。
        if(typeof req.body.content == 'undefined' || req.body.content == null) {
            res.json(["error", "No data found"]);
        } else {
            text = req.body.content;
            html = converter.makeHtml(text);
            res.json(["markdown", html]);
        }}, 
        // 验证失败，返回 “Unauthorized” 字样
        function(err, req, res, next) {
            return res.status(401).send({ success: false, message: err })
        });

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

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

Полный пример функции проверки выглядит следующим образом:

const express = require("express");
const showdown  = require('showdown');
const bodyParser = require('body-parser');
const passport = require('passport');
const jwt = require('jwt-simple');
const LocalStrategy = require('passport-local').Strategy;
 
    
var app = express();
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());
 
converter = new showdown.Converter();
 
const ADMIN = 'admin';
const ADMIN_PASSWORD = 'smagazine';
const SECRET = 'secret#4456';
 
passport.use(new LocalStrategy(function(username, password, done) {
  if (username === ADMIN && password === ADMIN_PASSWORD) {
    done(null, jwt.encode({ username }, SECRET));
    return;
  }
  done(null, false);
}));
 
app.get('/', function(req, res){
    res.send('Hello World!');
});
 
 
app.post('/login', passport.authenticate('local',{ session: false }),
                function(req, res) {
                // 若此函数被调用，说明验证成功。
                // 返回 “Authenticated” 字样。
                res.send("Authenticated");
  });
  
 
app.post("/convert", 
         passport.authenticate('local',{ session: false, failWithError: true }), 
         function(req, res, next) {
        // 若此函数被调用，说明验证成功。
        // 请求内容为空与否。
        if(typeof req.body.content == 'undefined' || req.body.content == null) {
            res.json(["error", "No data found"]);
        } else {
            text = req.body.content;
            html = converter.makeHtml(text);
            res.json(["markdown", html]);
        }}, 
        // 验证失败，返回 “Unauthorized” 字样
        function(err, req, res, next) {
            return res.status(401).send({ success: false, message: err })
        });
 
 
app.listen(3000, function() {
 console.log("Server running on port 3000");
});

Сессия Postman с аутентификацией выглядит так:

Протестируйте финальное приложение с помощью Postman (HD большая картинка)

Как вы можете видеть здесь, мы загрузили фрагмент текста в синтаксисе Markdown, а затем получили правильно преобразованную HTML-версию результата. Мы протестировали только одну строку текста, но в этом интерфейсе есть возможность конвертировать большие фрагменты текста.

Это наш первый опыт работы с Node.js и Express — создание конечной точки интерфейса. Построение интерфейса - сложная тема. Когда вы хотите построить интерфейс, вы должны знать некоторые детали, но время ограничено. К сожалению, я не могу раскрыть это в этой статье, но это может быть подробно рассмотрено в последующих статьи.

Доступ к нашему интерфейсу в других приложениях

Теперь, когда интерфейс создан, мы можем написать небольшой скрипт на основе Node.js, чтобы доказать, что интерфейс доступен. В этом примере нам нужно установитьrequestпакет для облегчения отправки HTTP-запросов. (скорее всего он у вас уже установлен)

$ npm install request --save

Показанный ниже код отправляет запрос в наш интерфейс и получает ответ. Как вы видете,requestПакет значительно упрощает шаги. Преобразуемый текст Markdown хранится вtextToConvertв переменной.

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

Примечание: в переменнойtextToConvert, мы используем символ "`" для переноса нескольких строк кода JavaScript, это не одинарная кавычка.

var Request = require("request");
 
// Markdown 文本的开头
var textToConvert = `Heading
=======
## Sub-heading
 
Paragraphs are separated
by a blank line.
 
Two spaces at the end of a line  
produces a line break.
 
Text attributes _italic_, 
**bold**, 'monospace'.
A [link](http://example.com).
Horizontal rule:`;
 
// Markdown 文本的结尾
                    
Request.post({
    "headers": { "content-type": "application/json" },
    "url": "http://localhost:3000/convert",
    "body": JSON.stringify({
        "content": textToConvert,
        "username": "admin",
        "password": "smagazine"
    })
}, function(error, response, body){
    // 连接失败时，退出。
    if(error) {
        return console.log(error);
    }
    // 显示转换后的文本
    console.dir(JSON.parse(body));
});

При отправке POST-запроса на интерфейс нам необходимо предоставить текст Markdown для преобразования и учетные данные. Если учетные данные неверны, мы получим сообщение об ошибке.

{
  success: false,
  message: {
    name: 'AuthenticationError',
    message: 'Unauthorized',
    status: 401
  }
}

Для проверенного запроса приведенный выше образец Markdown будет преобразован в следующий формат:

[ 'markdown',
  `<h1 id="heading">Heading</h1>
  <h2 id="subheading">Sub-heading</h2>
  <p>Paragraphs are separated by a blank line.</p>
  <p>Two spaces at the end of a line<br />
  produces a line break.</p>
  <p>Text attributes <em>italic</em>, 
  <strong>bold</strong>, 'monospace'.
  A <a href="http://example.com">link</a>.
  Horizontal rule:</p>` ]

В примере мы намеренно написали фрагмент текста Markdown, текст в реальной ситуации может исходить из различных источников, таких как файлы, веб-формы и т. д. Но процесс запроса тот же.

Примечание: когда мы используемapplication/jsonПри отправке запроса в формате JSON нам нужно разобрать тело ответа в формате JSON, поэтому нам нужно вызватьJSON.stringifyфункция. Как видите, тестовому или интерфейсному приложению нужен только небольшой пример, поэтому я не буду здесь вдаваться в подробности.

Суммировать

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

Если вы обнаружите ошибки в переводе или в других областях, требующих доработки, добро пожаловать наПрограмма перевода самородковВы также можете получить соответствующие бонусные баллы за доработку перевода и PR. начало статьиПостоянная ссылка на эту статьюЭто ссылка MarkDown этой статьи на GitHub.

---

Программа перевода самородковэто сообщество, которое переводит высококачественные технические статьи из Интернета сНаггетсДелитесь статьями на английском языке на . Охват контентаAndroid,iOS,внешний интерфейс,задняя часть,блокчейн,товар,дизайн,искусственный интеллектЕсли вы хотите видеть более качественные переводы, пожалуйста, продолжайте обращать вниманиеПрограмма перевода самородков,официальный Вейбо,Знай колонку.