Технология продолжает развиваться каждый день, и разработчики постоянно ищут все больше и больше вещей, чтобы получить свою практику. В этой статье я буду представлять новую 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 (); } } export default App;{this.state.loading ? Loading
:}
Как вы, возможно, видели, у нас есть два компонента, а именно «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”