Здравствуйте! Надеюсь, у вас все хорошо. В прошлом посте мы настроили структуру бэкенда нашего приложения, а в этом мы настроим рабочий процесс фронтенда для нашего приложения.
Запустите yarn init -y в структуре вашей корневой папки, чтобы настроить yarn или npm, как вам больше нравится.
yarn init -y
мы получим файл package.json примерно следующего вида
{
"name": "flask_blog",
"version": "1.0.0",
"repository": "git@github.com:MuhammadSaim/flask_tutorial_blog.git",
"author": "Muhammad Saim",
"license": "MIT"
}
Теперь установите все зависимости Dev для нашего проекта с помощью этой команды. В качестве инструмента сборки мы будем использовать Laravel Mix.
yarn install autoprefixer laravel-mix postcss tailwindcss -D
После выполнения этой команды ваш package.json будет выглядеть следующим образом.
{
"name": "flask_blog",
"version": "1.0.0",
"repository": "git@github.com:MuhammadSaim/flask_tutorial_blog.git",
"author": "Muhammad Saim",
"license": "MIT",
"devDependencies": {
"autoprefixer": "^10.4.8",
"laravel-mix": "^6.0.49",
"postcss": "^8.4.16",
"tailwindcss": "^3.1.8"
}
}
Теперь установите зависимости проекта, которые нам понадобятся в нашем проекте. Мы будем использовать UI Kit Daisy UI от Tailwind для нашего пользовательского интерфейса.
yarn add @tailwindcss/typography daisyui jquery
После установки этих зависимостей наш package.json будет выглядеть следующим образом.
{
"name": "flask_blog",
"version": "1.0.0",
"repository": "git@github.com:MuhammadSaim/flask_tutorial_blog.git",
"author": "Muhammad Saim",
"license": "MIT",
"devDependencies": {
"autoprefixer": "^10.4.8",
"laravel-mix": "^6.0.49",
"postcss": "^8.4.16",
"tailwindcss": "^3.1.8"
},
"dependencies": {
"@tailwindcss/typography": "^0.5.4",
"daisyui": "^2.22.0",
"jquery": "^3.6.0"
}
}
Теперь создайте файл конфигурации tailwindcss для нашего проекта.
npx tailwindcss init
В результате будет создан tailwind.confg.js, который выглядит примерно так.
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [],
theme: {
extend: {},
},
plugins: [],
}
Теперь создайте папку src в корневом каталоге и создайте еще две папки в папке src css и js и создайте файл app.css в папке css и файл app.js в папке js. Структура ваших папок будет выглядеть следующим образом.
Откройте файл src/css/app.css и поместите туда директивы tailwind.
@tailwind base;
@tailwind components;
@tailwind utilities;
Откройте файл src/js/app.js и установите jquery в этом файле.
window.$ = window.jQuery = require('jquery');
Теперь пришло время настроить Daisy UI и помощник типографики от twailwind в нашем проекте. Откройте файл tailwind.config.js и добавьте эти два элемента в массив plugins.
{
...,
plugins: [
require('@tailwindcss/typography'),
require('daisyui')
]
}
После этого tailwind.config.js будет выглядеть следующим образом. Также добавьте шаблоны и js файлы в содержимое, чтобы tailwindcss генерировал те классы, которые используются в проекте и удалял из файла сборки те, которые проект не использует для минимизации css файла.
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
'./application/views/**/*.jinja2',
'./application/assets/js/**/*.js',
],
theme: {
extend: {},
},
plugins: [
require('@tailwindcss/typography'),
require('daisyui')
],
}
Теперь пришло время собрать эти активы с помощью нашего инструмента сборки Laravel Mix. Создайте файл webpack.mix.js в нашей корневой директории и поместите все эти конфигурации в этот файл.
const mix = require('laravel-mix');
mix.options({
fileLoaderDirs: {
fonts: "assets/fonts",
images: "assets/images",
},
});
mix.js("src/js/app.js", "application/assets/js")
.postCss("src/css/app.css", "application/assets/css", [
require("tailwindcss"),
]);
Нам нужны скрипты для создания наших активов для разработки и производства, поэтому добавьте эти строки в файл package.json После добавления этих строк package.json будет выглядеть следующим образом.
{
"name": "flask_blog",
"version": "1.0.0",
"repository": "git@github.com:MuhammadSaim/flask_tutorial_blog.git",
"author": "Muhammad Saim",
"license": "MIT",
"scripts": {
"dev": "npm run development",
"development": "mix",
"watch": "mix watch",
"watch-poll": "mix watch -- --watch-options-poll=1000",
"hot": "mix watch --hot",
"prod": "npm run production",
"production": "mix --production"
},
"devDependencies": {
"autoprefixer": "^10.4.8",
"laravel-mix": "^6.0.49",
"postcss": "^8.4.16",
"tailwindcss": "^3.1.8"
},
"dependencies": {
"@tailwindcss/typography": "^0.5.4",
"daisyui": "^2.22.0",
"jquery": "^3.6.0"
}
}
После добавления этих конфигураций вы можете выполнить команду для сборки этих активов.
Разработка
yarn dev
Производство
yarn prod
Сервер просмотра
yarn watch
Это создаст ваши активы в директории assets в application/assets, вы также можете игнорировать эту директорию в файле .gitignore в директории application.
Теперь в views создайте 3 папки includes, layouts и pages создайте один файл в layouts с именем app.jinja2 и второй в директории pages с именем home.jinja2 содержание этих двух файлов здесь.
app.jinja2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="{{ url_for('static', filename='css/app.css') }}">
<title>{% block title %}{% endblock %}</title>
</head>
<body class="prose">
{% block content %}{% endblock %}
<script src="{{ url_for('static', filename='css/app.css') }}"></script>
</body>
</html>
home.jinja2
{% extends 'layouts/app.jinja2' %}
{% block title %} Home {% endblock %}
{% block content %}
<h1 class="text-3xl">Home</h1>
<button class="btn btn-primary">Home</button>
{% endblock %}
после установки всех наших шаблонов, чтобы мы могли немного изменить в нашем контроллере home.py.
from flask import Blueprint, render_template
controller = Blueprint('home', __name__)
@controller.route('/', methods=['GET'])
def index():
return render_template('pages/home.jinja2')
Теперь запустите ваше приложение
python run.py
Откройте url https://127.0.0.1:5000.
Вы можете получить обновленный код на GitHub Repo
Спасибо, что были со мной.
Увидимся в следующем посте, если у вас возникнут какие-либо вопросы при работе с этим постом, не стесняйтесь комментировать.