Установка новой версии Node.js на CentOS

👁 283 просмотров
1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (Пока оценок нет)
Загрузка...

Данная статья является дополнением статьи по ссылке и отличается тем, что необходимо установить новую версию GCC 4.8.5 для компиляции исходников новой версии Node.js посредством чего решим ошибку установки:

WARNING: failed to autodetect C++ compiler version (CXX=g++)

В статье установим версию Node.js v8.0.0.

Примечание. Понятие «новая версия» относительна, поэтому, со временем версия версия Node.js 8.0.0 тоже устареет. Новая, относительно времени написания данной статьи.

 

Установка новой версии компилятора GCC на CentOS

Шаг 1. Устанавливаем GCC:

sudo yum install gcc-c++

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

Шаг 2. Скачиваем исходники GCC для создания бинарников установки на CentOS:

Сначала переходим в папку /usr/src/:

cd /usr/src

и скачиваем исходники:

wget http://mirrors-usa.go-parts.com/gcc/releases/gcc-4.8.5/gcc-4.8.5.tar.gz

Зеркала на скачивание могут меняться и можете выбрать любое зеркало поближе к своей стране или области, где вы находитесь. В данном случае, используются зеркала в США.

Шаг 3. Распаковываем исходники:

tar zxvf gcc-4.8.5.tar.gz

Шаг 4. Входим в распакованную папку и устанавливаем зависимости исходников:

cd gcc-4.8.5
./contrib/download_prerequisites

Шаг 5. Выходим из папки в корень /usr/src/ и создаем папку вывода компиляции:

cd ../
mkdir gcc-build-4.8.0

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

Шаг 6. В созданном каталоге gcc-build-4.8.0 сгенерируем makefile:

cd gcc-build-4.8.0
../gcc-4.8.5/configure --enable-checking=release --enable-languages=c,c++ --disable-multilib

Вот каталог gcc-4.8.5, оригинал ошибочно принят за 4.8.0. Это ошибка разработчиков, которую я упомянул в шаге 5.

Шаг 7. Компиляция. В данном случае, ждал этот процесс около 3 часов, поэтому имейте в виду, что может идти долго:

make -j4

Выполняем эту команду в папке gcc-build-4.8.0.

Шаг 8. Устанавливаем скомпилированные бинарники:

sudo make install

Шаг 9. Удостоверимся, что GCC новой версии у нас установился:

gcc -v

Теперь, когда новый компилятор GCC для CentOS установлен продолжим установку новой версии Node.js

 

Установка Node.js v8.0.0 на CentOS

Сначала обновляем систему репозиторий:

yum update

Устанавливаем группу инструментов разработки Development Tools:

yum -y groupinstall "Development Tools"

Опция -y позволит избежать подтверждения действий на протяжении установки. После введите команду для установки ПО, необходимого для подключения к VPS и получения доступа к нескольким параллельным сессиям:

yum -y install screen

Переходим в папку /usr/src:

cd /usr/src

Загружаем архив с Node.js при помощи команды wget:

wget http://nodejs.org/dist/v8.0.0/node-v8.0.0.tar.gz

Все доступные архивы кода NodeJS можно посмотреть по ссылке http://nodejs.org/dist/.

Извлекаем содержимое скачанного архива:

tar zxf node-v8.0.0.tar.gz

Переместимся в каталог, используя команду cd:

cd node-v8.0.0

Выполняем скрипт configure:

./configure

Команда для компиляции исходного кода:

make

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

make install

Команда make install призвана разместить скомпилированные двоичные файлы в системный путь, чтобы каждый пользователь мог работать с ним, не отвлекаясь на дополнительные настройки. По умолчанию двоичный код Node.js “лежит” в /usr/local/bin/node.

 

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

记录:在bandwagon的VPS上装nodejs

Установка Node.js на CentOS 6

Установка Node.js v0.x на CentOS

👁 106 просмотров
1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (Пока оценок нет)
Загрузка...

Примечание. Это легкий способ установки Node.js ?>v0.10.4, но таит в себе вопрос целесообразности, потому что таким способом можно установить только старую версию Node.js, на котором особо современyого ничего не сделать и даже AngularJS требует версию, начиная с Node.js v6. Версии Node.js требуют разные компиляторы, которыми собираются бинарники. В старых версиях требовался старый GCC, а в новых версиях требуется GCC версии GCC v4.8.5 или clang++ v3.4 и выше, таким образом, если попытаетесь установить новую версию Node.js на CentOS может выскочить ошибка в консоли:

WARNING: C++ compiler too old, need g++ 4.8 or clang++ 3.4 (CXX=g++)

Поэтому, если если хотите установить новую версию, то советую почитать эту статью.

Сначала обновляем систему репозиторий:

yum update

Устанавливаем группу инструментов разработки Development Tools:

yum -y groupinstall "Development Tools"

Опция -y позволит избежать подтверждения действий на протяжении установки. После введите команду для установки ПО, необходимого для подключения к VPS и получения доступа к нескольким параллельным сессиям:

yum -y install screen

Переходим в папку /usr/src:

cd /usr/src

Загружаем архив с Node.js при помощи команды wget:

wget http://nodejs.org/dist/v0.10.4/node-v0.10.4.tar.gz

Все доступные архивы кода NodeJS можно посмотреть по ссылке http://nodejs.org/dist/.

Извлекаем содержимое скачанного архива:

tar zxf node-v0.10.4.tar.gz

Переместимся в каталог, используя команду cd:

cd node-v0.10.4

Выполняем скрипт configure:

./configure

Команда для компиляции исходного кода:

make

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

make install

Команда make install призвана разместить скомпилированные двоичные файлы в системный путь, чтобы каждый пользователь мог работать с ним, не отвлекаясь на дополнительные настройки. По умолчанию двоичный код Node.js “лежит” в /usr/local/bin/node.

Как заполучить превью видео Youtube средствами JavaScript

👁 90 просмотров
1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (Пока оценок нет)
Загрузка...

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

var videoURL = prompt('Ссылка на видео в Youtube', "");//Окно запроса ссылки
var imgURL = "";//Ссылка на превью
var imgVidGalSrc = [];//Массив для хранения
var pattern = /^((http|https|ftp):\/\/)/;

if(videoURL!==null&&trim(videoURL)!==""&&pattern.test(videoURL))
{
    if(videoURL.indexOf("?v=") > -1)//Если ссылка из строки запроса браузера
    {
        var videCode = videoURL.split("=")[1];
        imgURL = "https://img.youtube.com/vi/"+videCode+"/0.jpg"
    }else if(videoURL.indexOf("youtu.be/") > -1)//Если ссылка из раздела Поделиться
    {
        var videCode = videoURL.split("be/")[1];
        imgURL = "https://img.youtube.com/vi/"+videCode+"/0.jpg"
    }else//Если произошла ошибка в первом и во втором случаях
    {
        imgURL = "images/icon-video.png";//Какая-то общая иконка
    }
    //Добавляем в общий массив хранения
    imgVidGalSrc.push({url:videoURL,thumb:imgURL});
}else
{
    alert("Вы ввели пустую строку или некорректную ссылку!")
}
//Функция удаления лишних пробелов
function trim( str, charlist ) {
    charlist = !charlist ? ' \s\xA0' : charlist.replace(/([\[\]\(\)\.\?\/\*\{\}\+\$\^\:])/g, '\$1');
    var re = new RegExp('^[' + charlist + ']+|[' + charlist + ']+$', 'g');
    return str.replace(re, '');
}

Связь между компонентами в Vue.js

👁 635 просмотров
1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (1 оценок, среднее: 5,00 из 5)
Загрузка...

Допустим, есть задача связать корневой компонент или приложение Vue.js с дочерними компонентами и наоборот.

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

Стоит отметить, что данный подход предполагает использование событий по нисходящей и свойств элемента по восходящей

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

От корневого к дочернему:

От дочернего к корневому:

Тут еще один пример двунаправленной передачи:

Компонент добавления тегов в Vue.js

👁 115 просмотров
1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (Пока оценок нет)
Загрузка...

Представим, что у нас есть задача сделать компонент в виде формы ввода тегов. Не буду вдаваться в подробности, но скажу, что компонент может быть записан в отдельные файлы component.js и component.css  и подключить обычным образом к странице. В Cordova, к примеру, пока это единственный способ использовать внешние компоненты, загружаемые в виде отдельных модулей, потому что нет поддержки import

Чтобы иметь обратную связь из модуля в главное приложение Vue.js нам необходимо установить событие обновления  тегов, потому что нам необходимо заполучить эти введенные, чтобы потом хранить их в БД. Решением этого является добавление в методе watch модуля наблюдение для параметра tags:

tags() {
    this.$root.$emit('updateTags',this.elementId, this.tags, this.tagBadges, this.existingTags);
}

Т.е., модуль будет вызывать метод в главном приложении, чтобы ему передавать обновленные данные состояния поля ввода тегов. В главном приложении в методе create создаем слушатель события для метода:

this.$root.$on('updateTags', (fieldName, tags, badges, existingTags) => {
    //...
});

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

<tags-input element-id="fieldGenreTags"
            :existing-tags="genreTags"
            :typeahead="true">
</tags-input>
<tags-input element-id="fieldSkillTags"
            :existing-tags="skillTags"
            :typeahead="true">
</tags-input>
<tags-input element-id="fieldImageTags"
            :existing-tags="imageTags"
            :typeahead="true">
</tags-input>
this.$root.$on('updateTags', (fieldName, tags, badges, existingTags) => {
   //
   var tagObj = {};
   tags.forEach(function(item, index, tags){
        tagObj[item] = badges[index];
   });
   //
   if("fieldGenreTags"==fieldName+"") this.curGenreTags = tagObj;
   if("fieldSkillTags"==fieldName+"") this.curImageTags = tagObj;
   if("fieldImageTags"==fieldName+"") this.curSkillTags = tagObj;
   //
   console.log("fieldGenreTags");
   console.log(this.curGenreTags);
   console.log("fieldSkillTags");
   console.log(this.curImageTags);
   console.log("fieldImageTags");
   console.log(this.curSkillTags);
})

Т.е., на странице для поля мы определяем для него ID, а в методе мы по этому ID разграничиваем получаемые данные.

Загрузка файла на удаленный сервер в Cordova

👁 166 просмотров
1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (Пока оценок нет)
Загрузка...

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

  • прием файла посредством PHP;
  • прием файла посредством Node.js

 

Плагины и доступы

Для начала нам нужно установить необходимые плагины для работы с загружаемыми файлами:

cordova plugin add cordova-plugin-file
cordova plugin add cordova-plugin-file-transfer
cordova plugin add cordova-plugin-white-list
cordova plugin add cordova-plugin-camera
cordova plugin add cordova-plugin-device

Далее даем доступы на права работы с файлами и с сетями платформе. К примеру. для Android они задаются в файле в папке по пути MyApp\platforms\android\app\src\main\AndroidManifest.xml:

<?xml version='1.0' encoding='utf-8'?>
<manifest android:hardwareAccelerated="true" android:versionCode="10000" android:versionName="1.0.0" package="io.cordova.hellocordova" xmlns:android="http://schemas.android.com/apk/res/android">
    <supports-screens android:anyDensity="true" android:largeScreens="true" android:normalScreens="true" android:resizeable="true" android:smallScreens="true" android:xlargeScreens="true" />
    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.CAMERA" />
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
    <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
    
    ...

 

Клиентский код

Кнопка открытия. Обращаем внимание на meta — тег с разрешениями на удаленную передачу:

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'">
        <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
        <meta name="format-detection" content="telephone=no">
        <meta name="msapplication-tap-highlight" content="no">
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
        <link rel="stylesheet" type="text/css" href="css/index.css">
    </head>
    <body>
        <button id="getImage">Выбрать картинку</button>
        <script src="cordova.js" ><script>
        <script src="index.js" ><script>
    </body>
</html>

Скрипт:

var app = {
    initialize: function() {
        this.bindEvents();
        this.setupApp();
    },
    bindEvents: function() {
        document.addEventListener('deviceready', this.onDeviceReady, false);
    },
    onDeviceReady: function() {
        app.receivedEvent('deviceready');
    },
    receivedEvent: function(id) {
        console.log('Received Event: ' + id);
    },
    setupApp: function(){
                function getImage() {
                    navigator.camera.getPicture(
                        this.uploadPhoto,
                        function (message) { alert('get picture failed'); },
                        {
                            quality: 50,
                            destinationType: navigator.camera.DestinationType.FILE_URI,
                            sourceType: navigator.camera.PictureSourceType.PHOTOLIBRARY
                        }
                    );
                }
                function uploadPhoto(imageURI) {
                    alert(imageURI);
                    var options = new FileUploadOptions();
                    options.fileKey = "file";
                    options.fileName = imageURI.substr(imageURI.lastIndexOf('/') + 1);
                    options.mimeType = "image/jpeg";
    
                    var params = {};
                    params.value1 = "test";
                    params.value2 = "param";
    
                    options.params = params;
    
                    var ft = new FileTransfer(); 
                    ft.upload(
                        imageURI, 
                        encodeURI("http://83.220.168.205/upload/upload.php"), 
                        this.win, 
                        this.fail, 
                        options);
                }
                function win(r) {
                    console.log("Code = " + r.responseCode);
                    console.log("Response = " + r.response);
                    console.log("Sent = " + r.bytesSent);
                }
                function fail(error) {
                    alert("An error has occurred: Code = " + error.code);
                    console.log("upload error source " + error.source);
                    console.log("upload error target " + error.target);
                    alert("upload error source " + error.source);
                    alert("upload error target " + error.target);
                }
        document.getElementById("getImage").onclick = function() {
            getImage();
        };
        
    }
    
}

app.initialize();

Серверный код на PHP

Сначала в корне сервера надо создать папку upload и в  ней файл upload.php и подпапку upload, куда будут файлы грузиться и храниться:

<?php
//Задаем заголовки на стороний доступ
header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: GET, POST, OPTIONS, PUT, PATCH, DELETE');
header('Access-Control-Allow-Headers: X-Requested-With,content-type');
header('Access-Control-Allow-Credentials: true');
//
$new_image_name = urldecode($_FILES["file"]["name"]).".jpg";
//Переносим файл в нужную папку
move_uploaded_file($_FILES["file"]["tmp_name"], "upload/".$new_image_name);
?>

Обращаем внимание на заголовки, которые разрешают доступ со стороны клиента.

Серверный код на JavaScript для Node.js

Если требуется загрузить и заполучить файл со стороны Node.js, то легче все это сделать при помощи стороннего модуля express-formidable, если приложение express. Сначала устанавливаем сам модуль:

npm install express-formidable

Далее дописываем наш app.js на прием. К пример, у нас есть url — адрес http://myhostname:3000/upload, то код для приема и сохранения загруженного с клиента файла будет следующим:

var formidable = require('formidable');

...

app.post('/upload', function(req, res) {
    res.set({
        'Access-Control-Allow-Origin': '*',
        'Access-Control-Allow-Methods': 'GET, POST, OPTIONS, PUT, PATCH, DELETE',
        'Access-Control-Allow-Headers': 'X-Requested-With,content-type',
        'Access-Control-Allow-Credentials': 'true'
    });
    //var data = req.body;
    //console.log(data);
    //console.log(req.files);
    var form = new formidable.IncomingForm();

    form.parse(req);

    form.on('fileBegin', function (name, file){
        file.path = __dirname + '/upload/' + file.name + '.jpg';
    });

    form.on('file', function (name, file){
        console.log('Uploaded ' + file.name);
    });
});

 

Отправка Email через PHP из Node.js через Ajax

👁 106 просмотров
1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (Пока оценок нет)
Загрузка...

Рассмотрим пример отправки почты через AJAX — запрос посредством PHP из сервера Node.js. Для начала нам потребуется инструмент генерации AJAX — запросов и для этого будем использовать модуль request. Установить ее очень просто:

npm install request

Отправка из Node.js:

var request = require('request');
request.
    post(
    {
        url:'http://xxx.xxx.xxx.xxx/mail/send.php', 
        form:{
            key: data.key,
            title: "Ваш пароль в сервисе",
            userEmail: data.userEmail,
            message:{
                "Логин":result[0].email,
                "Пароль":result[0].password
            }
        }
    }, 
    function(err, httpResponse, body){
        console.log(err);
        console.log(httpResponse);
        console.log(body);
    });

 

Прием в PHP — файле send.php:

<?php
$message = "";
foreach ($_REQUEST["message"] as $key => $value)
{
    $message .= "<br/><b>".htmlspecialchars($key)."</b>: ".htmlspecialchars($value)."<br/>";
}
// Для отправки HTML-письма должен быть установлен заголовок Content-type
$headers  = 'MIME-Version: 1.0' . "\r\n";
$headers .= 'Content-type: text/html; charset=utf-8' . "\r\n";
// Дополнительные заголовки
$headers[] = 'To: Mary <mary@example.com>, Kelly <kelly@example.com>';
$headers[] = 'From: Birthday Reminder <birthday@example.com>';
$headers[] = 'Cc: birthdayarchive@example.com';
$headers[] = 'Bcc: birthdaycheck@example.com';

// Отправляем
mail($_REQUEST["userEmail"], $_REQUEST["title"], $message, $headers);

echo json_encode($_REQUEST);

Некоторые полезные сниппеты на Vue.js

👁 64 просмотров
1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (Пока оценок нет)
Загрузка...

Как создать список select с предустановленным значением option?

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

Базовые вещи в Vue.js

👁 189 просмотров
1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (Пока оценок нет)
Загрузка...

Предисловие

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

Установка Vue.js

Установить Vue.js — это просто. Все, что нам нужно — это знать, какими методами установить. Есть несколько способов, в зависимости от того, где мы хотим использовать Vue.js.

Если хотим использовать на стороне клиента, то можем ссылать на cdn — ссылку проекта, добавив в страницу ссылку на cdn:

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script>

Можем также добавить через менеджер пакетов bower:

bower install vue

Если хотим использовать в масштабируемых Node.js — серверных приложениях, то выполняем код:

npm install vue

Все дополнительные моменты установки можно найти в разделе установки Vue по ссылке.

 

Базовое приложение Vue.js

Ниже представлено базовое приложение на Vue.js или базовый скелетон приложения на Vue.js

Описание основных параметров приложения Vue.js

Выше мы создали первое и базовое приложение на Vue.js. Давайте рассмотрим список основных его параметров.

Параметры приложения:

  • new Vue{…} — это главный объект приложения. Можно было это написать так var app = new Vue{…}; после чего через объект app можно было получить все значения данного приложения для взаимодействия с другими приложениями;
  • data — это поле, в котором хранятся все данные и переменные текущего приложения. Это могут быть обычные объекты или же массивы в JSON — формате;
  • computed — это поле, которое нужно для вычисляемых методов. Параметрами данного поля являются методы, которые вычиляют обновляющиеся данные. Вычисление происходит после каждого случая взаимодействия с приложением, поэтому это поле обновляется всегда;
  • methods — поле для определения методов текущего приложения. Это могут быть обработчики событий или другая логика выполнения кода;
  • watch — поле для задания слушателей для определенного параметра. Данный слушатель будет выполняться всегда, когда будет обновляться значение данного параметра;

Условные конструкции приложения:

  • v-if=’isTrue’ — условный оператор выполнения текущего блока, если какое-то значение истинно;
  • v-else — условный оператор ветвления, если не выполнится блок v-if. Является необязательной продолжительной частью v-if;
  • v-else-if — условный оператор ветвления, если не выполнится блок v-if и требуется продолжения ветвления. Является необязательной продолжительной частью v-if;
  • v-show — выполняет ту же операцию, что и v-if, но в отличии от v-if данная конструкция просто скрывает элемент посредством css — поля display;

Конструкции организации циклов:

  • v-for=‘item in items’ — самый простой вид итерации из массива, в данном случае, будет читать все объекты в виде item из массива items;
  • v-for=‘(index, item) in items’ — то же самое, но еще можно заполучить индекс текущего элемента массива;
  • v-for=‘value in object’ — итерация полей из объекта;
  • v-for=‘(key, val) in object’ — итерация полей из объекта с ключами;
  • v-for=‘n in 10’ — ранжирование, т.е. инкремент на 1 значения n от 0 до определенного значения, в  данном случае — до 10;

Организации событий:

  • v-on:eventname=’eventHandler — организиует для элемента событие с типом eventname и обработчиком eventHandler. В роли типа события может выступать любой определенный в JS событие на элементе, а в роли обработчика может выступать функция, определенная в параметре приложения methods;
  • @eventname=’eventHandler — короткая запись организации события без v-on;
  • v-on:eventname=’eventHandler(param)‘ — то же самое, но передаем еще и параметр в обработчик;
  • v-on:eventname=’eventHandler(param, $event) — то же самое, но передаем еще параметр и специальный объект события в обработчик. В последствии мы можем на объекте глобального события event вызвать, к примеру метод preventDefault() или же можем заполучить координаты нажатого объекта;

Работа с атрибутами:

  • v-bind:attrname=’pаram’ — позволяет задать значение для атрибута, где param — переменная приложения Vue;
  • :attrname=’param’ — то же самое, нов коротком виде;

Сквозная связь между данным поля HTML и параметром:

  • v-model:=’param’ — позволяет двунаправленно создавать связи между меняющимся значением какой-то формы HTML и каким-нибудь параметром или переменной Vue.js. Это позволяет создавать интерактивному смену значения одной переменной по всему приложению;

 

На этом материал для данного поста все. Это основные моменты, но не все. Vue.js гораздо гибок и богат функционалом. Для углубленного изучения, лучше, конечно, почитать документацию.

Один из методов организации связи по методике REST клиент-серверного приложения

👁 114 просмотров
1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (Пока оценок нет)
Загрузка...

Данный метод не претендует на истинность, поэтому смею себе вольность рассуждать то, как можно организовать связь между клиентом в виде мобильного приложения и сервером. Учитывая, что напрямую к БД у клиента доступа нет, то все взаимодействие выборки, записи, обработки сервером организуются методом передами ключей-запросов(фильтров) POST — методом. Т.е., мы заранее определяем ключевое слово(фильтр) и порядок операций, которые будут сделаны на сервере после его отправки  из клиента и ждем, когда сервер нам ответит через AJAX — ответ и все. Ниже приведу простой пример такого взаимодействия.

Примерные шаги

  1. Создаем URL — адрес для отправки POST — запросов с клиента. К примеру, если запросы обрабатывают данные пользователя, то логично создать URL — адрес www.myhostname.com:3000/user и на него отправлять данные;
  2. Учитывая, что при отправке POST — запроса мы отправляем данные в формате JSON, то один параметр должен быть флагом. Данный флаг нужен, чтобы создавать фильтры внутри одного POST — запроса на один URL.
  3. Организация фильтра запроса в пределах одного сеанса. К примеру {«flag»:»read»,»userName»:»David», …}, что означает, что мы хотим прочесть юзера под определенным логином, после чего сервер возвратит клиенту запрощенные данные.

 

Разбираемся в каждом шаге

Создание URL для запроса — это обычное создание страницы в Node.js, с которого данные будут обрабатывать в POST — запросе. Лучще воспользоваться для этого express.js . Для этого создаем необходимую страницу в директориях views/routes как обычно это делается для приложения express.js. К  примеру так в папке views/users.pug:

extends layout

block content
  h1= title
  p Welcome to #{title}

и файл приема запросов routes/users.js:

var express = require('express');
var router = express.Router();

/* GET users listing. */
router.get('/', function(req, res, next) {
  res.render('users', { title: 'User Page' });
});

module.exports = router;

После этого по пути www.myhostname.com:3000/users сервер будет принимать данные в POST или в GET режиме. Для обработки этих запросов пишем в главном файлу сервера app.js обработчики этих запросов, учитывая URL — запроса. К примеру, чтобы обработать все запросы к URL www.myhostname.com:3000/users прописываем следующие строки:

...
//Регистрируем новый URL-страницу
var users = require('./routes/users');
...
//Указываем на использование этой страницы и обрабатываем запросы
app.use('/users', users);
app.post('/users', function(req, res) {
    //Даем доступ клиенту на обработку его данных сервером
    res.set({
        'Access-Control-Allow-Origin': '*',
        'Access-Control-Allow-Methods': 'GET, POST, OPTIONS, PUT, PATCH, DELETE',
        'Access-Control-Allow-Headers': 'X-Requested-With',
        'Access-Control-Allow-Credentials': 'true'
    });
    
    //Получаем данные от клиента
    var data = req.body;
    
    //...тут какая-то общая логика обработки
    
    //...Обработка для фильтра userReadFromDb
    if(data.key=="userReadFromDb")
    {
        //...тут какая-то локальная логика обработки
        //Отправляем результаты обработки обратно клиенту
        res.json({"key":data.key,"info":"Ok"});
    }else
    //...Обработка для фильтра userWriteToDb
    if(data.key=="userWriteToDb")
    {
        //...тут какая-то лоакльная логика обработки
        //Отправляем результаты обработки обратно клиенту
        res.json({"key":data.key,"info":"Ok"}); 
    }
    ...
});
...

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

 

REST при помощи пулл соединений MySQL/Node.js

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

var mysql = require('mysql');

var dbConfig = {
    host: "myhost",
    user: "user",
    password: "password",
    database: "dbname",
    port:3306
};

var user = require('./routes/user');
app.use('/user', user);
app.post('/user', function(req, res) {
    res.set({
        'Access-Control-Allow-Origin': '*',
        'Access-Control-Allow-Methods': 'GET, POST, OPTIONS, PUT, PATCH, DELETE',
        'Access-Control-Allow-Headers': 'X-Requested-With',
        'Access-Control-Allow-Credentials': 'true'
    });
    var data = req.body;
    var mysqlPool  = mysql.createPool(dbConfig);
    if(data.key=="ENTER_CUSTOMER")
    {
        mysqlPool.getConnection(function(err, connection) {
            if(err) throw err;
            connection.query("SELECT * FROM user where email LIKE '"+data.userName+"'", function(err, result, fields) {
                if(err) {
                    connection.release();
                    console.error(err);                   
                    return;
                }
                res.json({"key":data.key,"result":result});
                connection.release();
            });
        }); 
    }
});