Тег: html

1 2 3 ›

Golang + Vue + PostgreSQL #2

27.01.2022

Завантажити приклад #2

У цьому прикладі: Все те саме, що і у попередньому прикладі, тільки з базою даних PostgreSQL.

Як переглянути цей приклад?

Підготовка PostgreSQL

Встановіть PostgreSQL (port 5432)
Для користувача postgres встановіть пароль postgres
Створіть базу даних з назвою test. Нічого в ній не робіть

База даних готова, тепер - запускаємо приклад.

web-dev склерозник

Golang + Vue + SQLite #1

18.01.2022

Завантажити приклад #1

Якщо з якихось причин Вам не подобається Python, Flask,- ось приклад web-додатка Golang + Vue. Це абсолютна "калька" того прикладу, що був раніше зроблений на Python за допомогою Flask.

Для адаптування фронтенду, написаного на Vue, до нового бекенду на Golang знадобились мінімальні корекції. Так, абсолютно без змін фронтенду не обійшлось. Бо Golang є сильно типізованою мовою програмування і накладає деякі обмеження і ми вже не можемо робити витівки, які дозоляв слабо типізований Python.

До того ж при написанні бекенду на Golang був використаний web framework Fiber, у якого теж є деякі домовленості, які змусили трохи підкоригувати фронтенд, щоб уникнути "збочень" у написанні коду.

У цьому прикладі:

Використана база даних SQLite. У наступному прикладі буде PostgreSQL ;)
Для роботи з БД використовується ORM gorm
Принцип роботи з базою - CRUD, реалізована пагінація, пошук, сортування
Аутентифікація користувачів з використанням JWT (github.com/dgrijalva/jwt-go)
OAuth. Також аутентифікація користувачів можлива через Facebook / Google Account (дивись як налаштувати: https://blog.avislab.com/flask-vue/example9/ налаштування у файлі oauth/config.go)
Авторизація (права на доступ до окремих моделей роздаються так само, як і у попередніх прикладах. Дивись файл access.json)
AutoMigrate - виконується при старті додатка, а не окремою командою як у прикладі на Python
Завантаження файлів

Як переглянути приклад?

web-dev склерозник

Flask & Vue. Завантаження файлів. Приклад № 2.10

16.11.2021

Завантажити приклад #10

У цій статті: Завантаження файлів і робота з файлами у додатках Flask + Vue

Робота web-додатка з файлами - це задача, яка має декілька шляхів для рішення. Ми розглянемо лише один з можливих.

У попередніх прикладах у моделі Countries заздалегідь було зроблено поле flag_img. Та воно було лише текстовим полем. Настав час зробити так, щоб можна було завантажити картинку :)

web-dev склерозник

Flask & Vue. OAuth. Приклад№ 2.9

15.08.2021

Завантажити приклад #9

У цій статті: OAuth в прикладах для Facebook, Google Account на Flask + Vue.

OAuth використовується для того, щоб ідентифікувати користувача сторонніми сервісами. Якщо Ви бачили на сайтах "Увійти через Facebook" - це воно.

web-dev склерозник

Flask & Vue. Використання систем збірки проекту. Webpack. Приклад№ 2.8

11.06.2021

Завантажити приклад #8

У цій статті: Система збірки проекту Vue. Webpack.

У попередніх прикладах ми писали фронтенд на Vue, як це робили наші діди. Але існують системи збірки проекту для Vue. У цьому прикладі розберемося що це, навіщо і коли це добре, а коли - зайве.

web-dev склерозник

Flask & Vue. SQLAlchemy, Migrate, Marshmallow, JWT. Приклад№ 2.7

07.05.2021

Завантажити приклад #7

У цій статті: Migrate, SQLAlchemy, Marshmallow, JWT

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

web-dev склерозник

Flask & Vue. Кастомні компоненти. Приклад№ 2.6

06.05.2021

Завантажити приклад #6

У цій статті: Наводимо красу - кастомні компоненти

Пам'ятаєте, у попередній серії прикладів ми робили компонент "product" у вигляді плиток з можливістю редагування прямо в них. Давайте це повторимо з урахуванням доопрацьованого додатку.

web-dev склерозник

Flask & Vue. Авторизація. Приклад№ 2.5

05.05.2021

Завантажити приклад #5

У цій статті: Авторизація

У кожному web-додатку доводиться роздавати права користувачам. Не існує єдиного підходу і те, як саме Ви будите це робити - це цілком Ваше рішення і Ваші прблеми.

web-dev склерозник

Flask & Vue. Проста аутентифікація. Приклад№ 2.4

04.05.2021

Завантажити приклад #4

У цій статті: Проста аутентифікація

Коли потрібно пускати юзерів у приложуху тільки по логіну та паролю, це можна зробити декількома шляхами.

web-dev склерозник

Flask & Vue. Серверна пагінація, пошук, сортування даних. Приклад№ 2.3

03.05.2021

Завантажити приклад #3

У цій статті: серверна пагінація, пошук, сортування

Пошук, сортування та пагінація даних - це ті задачі, які виникають, коли записів у таблиці стає більше 100. Тобто, це потрібно відразу і завжди. У попередній статті ми трохи підготовлювали фронтенд до цих переробок. Нагадаю, до цього моменту пагінацією даних займався виключно фронтенд. Так робити можна лише тоді, коли даних не дуже багато, а відображення одного елемента даних (рядка) займає багато місця на екрані. Ну, Ви зрозуміли: майже ніколи так робити не слід. Ми рухаємось далі. У цій статті наведено приклад, як можна зробити серверну пагінацію на Flask. Фронтенд, написаний на Vue, перероблено для гармонійної взаємодії з бекендом.

web-dev склерозник

Flask & Vue. Frontend - Зручна навігація. Приклад№ 2.2

02.05.2021

Завантажити приклад #2

У цій статті: Навігація, роути, таблиця. Як робити рівно?

У попередній серії прикладів було зроблено посторінкове відображення даних (пагінація, як кажуть деякі). Покищо вона працює у режимі "завантажили усі дані, розбили по сторінкам і показуємо". Звісно, що у наступних прикладах зробимо щоб дані сторінок завантажувалися з сервера.

web-dev склерозник