Стек FREMP (Flask, ReactJS, MongoDB, Python)

Технология продолжает развиваться каждый день, и разработчики постоянно ищут все больше и больше вещей, чтобы получить свою практику. В этой статье я буду представлять новую Full Stack Framework под названием Fremp Анкет Используемая аббревиатура не самая лучшая, но она просто выполняет работу оправданными способами.

Что такое травма?
Как установить FREMP?
Создание простого приложения

Что такое травма?

Fremp означает F Ласк, Re Actjs, M Mongodb и P yton. В отличие от Среднее и Mern , стек FREMP использует Python для работы с задней частью. Следовательно, все основные операции, такие как создание и обработку API или дело с функциональной/OO Logic, можно легко разобраться в Python. Что касается передней части, он использует JavaScript, который позволяет выполнять общие операции, такие как проверка полей ввода и обновление компонентов на DOM.

Как установить FREMP?

В этом разделе мы проведем шаги, чтобы установить стек FREMP в среду Linux (Ubuntu).

1. Установите колбу

Чтобы установить колбу, мы должны убедиться, что Python установлен. Поскольку Python устарел, и Python3 вступил во владение, мы будем использовать Python3 для этого учебника.

$ apt-get install python3
$ apt-get install python3-pip
$ sudo -H pip3 install flask
$ flask --version

Pip является менеджером пакетов для Python и используется для установки колбы по всему миру в вашей среде, используя флаг -H.
На момент написания этой статьи последняя версия Flask – 1.1.1

2. Установите ReactJS

Чтобы установить ReactJS, нам нужно сначала установить NodeJS, затем использовать NPM/пряжу для установки необходимых модулей. Для этого урока мы используем установку и используем пряжу.

$ apt-get install nodejs
$ sudo npm install -g yarn
$ sudo npm install -g npx
$ yarn --version
$ npx --version

пряжа является менеджером пакетов для JavaScript и намного быстрее и легче NPM.
npx используется для запуска модуля Create-React-APP, и это создаст стартовый проект для нашего фронта.

3. Установите MongoDB

$ apt-get install mongodb
$ mongo --version

Чтобы убедиться, что у вас все установлено правильно, проверьте версию каждой структуры. Если версии отображаются без какой -либо ошибки, вы должны быть полезны.

Создание простого приложения

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

Я не сосредоточился на стилях так много, что я склонен сделать его максимально минимальным для простоты. Итак, начнем!

1. Проектная папка

Мы начнем с создания корневой папки, чтобы содержать как переднюю часть, так и заднюю часть приложения. В этом случае мы назовем корневую папку ‘frmp-app’. Не стесняйтесь называть это все, что вы хотите.

$ mkdir frmp-app
$ cd frmp-app

2. Создать папку Frontend React

Во -вторых, мы создадим переднюю папку и назваем ее «Frontend». Для этого запустите следующую команду и подождите, пока она закончит:

$ create-react-app frontend

На данный момент ваш каталог должен выглядеть так:

~/frmp-app$ ls -al
total 16
drwxrwxr-x  4 akhil akhil 4096 zin 30 17:55 .
drwxr-xr-x 13 akhil akhil 4096 zin 30 17:39 ..
drwxrwxr-x  6 akhil akhil 4096 zin 30 17:44 frontend

После создания папки «Frontend» вы можете «Frontend» и начать вносить изменения на Frondend Foler. Первое изменение, которое вы должны внести, – это определить прокси в Package.json файл.

  "proxy": "http://localhost:5000"

Добавьте линию в нижнюю часть Package.json. Всякий раз, когда поступает запрос, переходит от Localhost: 3000, он попадает в прокси и перенаправлен на Localhost: 5000. Бэкэнд обрабатывает запрос с информацией в нем и отвечает. После настройки прокси мы можем реализовать форму HTML в компоненте app.js.

src/app.js

import React, { Component } from 'react';
import './App.css';
import Results from './components/Results';
import NewName from './components/NewName';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      name: '',
      names: [],
      loading: true
    };

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    this.setState({ name: event.target.value });
  }

  async handleSubmit(event) {
    event.preventDefault();
    this.setState({
      loading: true,
    })
    await fetch('/addname/' + this.state.name, {
      method: 'GET'
    });
    this.getNames()
  }


  getNames() {
    fetch('/getnames/')
      .then(response => response.json())
      .then(json => {
        this.setState({
          name: '',
          names: json,
          loading: false
        })
      })
  }

  componentDidMount() {
    this.getNames();
  }

  render() {
    return (
      
        
          
          {this.state.loading ? Loading
 : }
        
      
    );
  }
}

export default App;

Как вы, возможно, видели, у нас есть два компонента, а именно «NewName» и «результаты».

NewName – это компонент, который содержит входную панель. Пользователь пишет свое имя и нажмите Enter.

src/components/newname.js

import React, { Component } from 'react';

class NewName extends Component {
    render() {
        return (
            
                
                    
                    
                
            
        )
    }
}

export default NewName;

Результаты – это компонент, который отображает список имен.

src/components/results.js

import React, { Component } from 'react';

class Results extends Component {
    render() {
        return (
            this.props.names.map(row => 
                
                    {row.name}
                
            )
        )
    }
}

export default Results;

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

$ cd ..

3. Создать папку Backend Flask

После создания нашего фронтального стартового проекта мы настроим наш бэкэнд, создав папку под названием «Бэкэнд» и сохранив всю логику и операции, связанные с API и базой данных здесь. Для этого запустите следующую команду:

$ mkdir backend
$ touch app.py

На данный момент ваш каталог должен выглядеть так:

~/frmp-app$ ls -al
total 16
drwxrwxr-x  4 akhil akhil 4096 zin 30 17:55 .
drwxr-xr-x 13 akhil akhil 4096 zin 30 17:39 ..
drwxrwxr-x  2 akhil akhil 4096 zin 30 18:01 backend
drwxrwxr-x  6 akhil akhil 4096 zin 30 17:44 frontend

app.py

from flask import Flask, redirect, url_for
from pymongo import MongoClient
from flask_cors import CORS, cross_origin
import json

app = Flask(__name__)
cors = CORS(app)
app.config['CORS_HEADERS'] = 'Content-Type'


mongoClient = MongoClient('mongodb://127.0.0.1:27017')
db = mongoClient.get_database('names_db')
names_col = db.get_collection('names_col')

@app.route('/addname//')
def addname(name):
    names_col.insert_one({"name": name.lower()})
    return redirect(url_for('getnames'))

@app.route('/getnames/')
def getnames():
    names_json = []
    if names_col.find({}):
        for name in names_col.find({}).sort("name"):
            names_json.append({"name": name['name'], "id": str(name['_id'])})
    return json.dumps(names_json)

if __name__ == "__main__":
    app.run(debug=True)

Поскольку мы подключаем Python с MongoDB, мы будем использовать Pymongo и использовать функцию монгоцвета для установления соединения. Mongoclient принимает строку в качестве параметра, а строка – это URL с портом, который соединяет ваш компьютер с MongoDB, то есть MongoDB://127.0.0.1: 27017 . В кластере мы создадим базу данных под названием имена-DB А внутри базы данных мы создадим коллекцию, имена -col , который будет содержать список объектов JSON. Каждый объект будет вводить имя пользователем. Получив имя коллекции, мы определяем два метода, а именно: AddName и GetNames. Когда addName называется, он спасает имя, переданное в БД. Затем второй метод вызывает все имена в БД и отправляет их на фронт, на компоненте Результаты Анкет

4. Монго скорлупа

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

$ mongo
$ use names-db
$ db.names-col.find()

5. Запустите проект

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

В вашем каталоге Frontend бегите

$ yarn start

Внутри справочного каталога беги

$ python3 app.py

Если вы четко следовали инструкции, это должно работать безупречно.

Откройте Localhost: 3000 в вашем браузере, чтобы получить приложение в прямом эфире.

Ваше здоровье!

Оригинал: “https://dev.to/kouul/frmp-stack-5g9”