سرور مجازی NVMe

ارائه فایل های استاتیک با فلاسک

Pythonبرنامه نویسی

توسط مهران در بهمن ۹, ۱۴۰۲

سرفصلهای مطلب

زمان لازم برای مطالعه: 8 دقیقه

راه اندازی فلاسک

فلاسک یک انتخاب عالی برای ساخت برنامه های وب به روش ماژولار با استفاده از پایتون است. بر خلاف جنگو و آنالوگ های دیگر مانند Ruby روی Rails, Flask یک میکرو فریمورک است. این بدان معنی است که فقط شامل مواردی است که برای انجام توسعه وب اصلی ضروری است، و بخش عمده ای از انتخاب ها را فراتر از آن زیر مجموعه حداقل به شما واگذار می کند.

این رویکرد مزیت بزرگی در ساده نگه داشتن کد و گردش کار شما به ویژه دارد روی پروژه های کوچکتر در اینجا به شما نشان خواهیم داد که چگونه فایل های ثابت مانند JS، CSS و تصاویر را با استفاده از Flask ارائه دهید.

مطمئن شوید که پایتون 3 را نصب کرده اید. شما می توانید استفاده کنید pyenv برای این کار، که به شما کمک می کند نسخه های پایتون را انتخاب کنید. دنبال کردن این راهنما برای راه اندازی پایتون 3 با استفاده از pyenv. اگر ترجیح می دهید virtualenv در عوض، مطمئن شوید که مستندات را بررسی کنید، اما فقط مطمئن شوید که یک محیط Python 3 فعال دارید.

قبل از اینکه بتوانیم فایل‌های استاتیک را با Flask ارائه کنیم، باید آن را نصب کنیم و یک برنامه ساده را اجرا کنیم. برای انجام این کار، Flask را با استفاده از دستور نصب کنید:

$ pip install flask

اکنون یک برنامه Flask پایه ایجاد خواهیم کرد که در خدمت فرود است page روی که ما متن کلاسیک “Hello World” را نمایش خواهیم داد.

$ mkdir serving_static

در این دایرکتوری جدید، یک فایل جدید ایجاد کنید که برنامه Flask را ایجاد کرده و آن را اجرا می کند. در این فایل یک مسیر Flask ایجاد می کنیم که در آن پیام خوش آمدگویی را با استفاده از قالب Flask نمایش می دهیم.



from flask import Flask
from flask import render_template


app = Flask(__name__)


@app.route("/")
def hello():
    message = "Hello, World"
    return render_template('index.html', message=message)


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

حالا بیایید قالبی برای نمایش پیام خود ایجاد کنیم. یک فایل HTML در محل “serving_static/templates/index.html” با کد HTML زیر ایجاد کنید. توجه داشته باشید که message متغیر پایتون از serve.py فایل بالا


<html>
  <head>
    <title>Flask Shop</title>
  </head>
  <body>
    <h1>{{message}}</h1>
  </body>
</html>

اکنون آماده اجرای برنامه هستیم. بازگشت به “serving_static” root دایرکتوری، برنامه را با استفاده از دستور اجرا کنید:

$ python serve.py

اگر سرور به درستی راه اندازی شود، پیامی مبنی بر شروع آن و یک URL برای مشاهده برنامه دریافت خواهید کرد. این URL را در مرورگر خود باز کنید و اکنون باید پیام “Hello, World” ما را که در مرورگر نمایش داده شده است ببینید.

Flask مسیرهای کاربردی را با استفاده از دکوراتورهایی مانند آنچه در آن دیده می شود ایجاد می کند serve.py در بالا. یک دکوراتور مانند @app.route("/") یک مسیر جدید در مسیر ارائه شده ایجاد می کند. تعریف تابع زیر حاوی منطق برنامه است که با دریافت درخواست در آن URL اجرا می شود.

ارائه فایل های استاتیک با استفاده از یک فهرست استاتیک

رایج‌ترین فایل‌های استاتیکی که می‌خواهید در یک برنامه وب ارائه کنید، فایل‌های CSS برنامه‌تان برای استایل‌سازی برنامه، و همچنین فایل‌های جاوا اسکریپت هستند که رفتار پویا را به برنامه اضافه می‌کنند. page. در این بخش می‌بینیم که چگونه می‌توان فایل‌های CSS و JavaScript را با افزودن آنها به برنامه ساده‌ای که در بالا ایجاد کردیم، ارائه کرد.

فایل های استاتیک در Flask مسیر خاصی دارند. همه URL های برنامه که با “/static” شروع می شوند، طبق قرارداد، از پوشه ای در “/static” در داخل برنامه شما ارائه می شوند. root پوشه

این بدان معناست که اگر یک پوشه “/static” در داخل پوشه “serving_static” اصلی خود ایجاد کنیم، می توانیم فایل های استاتیک مانند CSS، JS، تصاویر و سایر دارایی ها را با قرار دادن آنها در داخل پوشه “/static” ارائه کنیم.

حالا بیایید پیام خوشامدگویی را در فهرست برنامه خود تغییر دهیم page برای معرفی “The Flask Shop”، یک فروشگاه خیالی که در آن بازدیدکنندگان می توانند کتاب های Flask را خریداری کنند.

ابتدا شاخص را می خواهیم page الگویی برای نمایش نام فروشگاه و همچنین فهرستی از کتاب‌هایی که در اختیار بازدیدکنندگان قرار می‌گیرد روی فروش. الگوی HTML خود را در “serving_static_/templates/index.html” با این تغییرات به‌صورت زیر به‌روزرسانی کنید.


<html>
  <head>
    <title>Flask Shop</title>
    <link rel="stylesheet" href="/static/style.css">
  </head>
  <body>
    <h1>{{message}}</h1>

    <h3>روی sale this week alone:</h3>
    <ol>
      <li>Flask By Example</li>
      <li>Uncluttered Flask</li>
      <li>Flask From First Principles</li>
    </ol>

    <script src="/static/scripts.js" charset="utf-8"></script>
  </body>
</html>

متوجه خواهید شد که عنوان page اکنون “فلاسک‌فروشی” است و ما فهرستی از کتاب‌های فلاسک را برای فروش قرار داده‌ایم. بازدید کننده باید بتواند ببیند روی را page این لیست از کتاب ها هنگام بازدید از خانه page از برنامه فروشگاه ما

دوباره به قسمت head قالب HTML نگاهی بیندازید. متوجه خواهید شد که اکنون ما در حال پیوند دادن به یک فایل جدید، به ویژه یک شیوه نامه CSS به نام هستیم style.css. مسیر، /static/style.css نشان می دهد که این فایل در پوشه “/static” ما قرار دارد.

به یاد داشته باشید که Flask به جای اینکه سعی کند این فایل‌ها را به عنوان فایل‌های منبع پایتون اجرا کند، فایل‌هایی را که در «/static» قرار می‌گیرند، به‌طور خودکار به‌عنوان فایل‌های استاتیک ارائه می‌کند.

اجازه دهید اکنون یک پوشه استاتیک در “serving_static/static” ایجاد کنیم تا حاوی تمام فایل های استاتیک ما باشد.

در داخل این پوشه ثابت، اجازه دهید فایل جدید را ایجاد کنیم style.cssو قوانین CSS زیر را اضافه کنید تا کمی سبک به برنامه فروشگاه ما اضافه کنید.



h1 {
    color: navajowhite;
    font-variant-caps: all-small-caps;
    font-size: 46px;
}

h3 {
  color: white;
  font-size: 36px;
}

li {
  color: red;
  font-size: 50px;
}

body {
    background: firebrick;
}

با تعریف این قوانین سبک، برنامه ما پس‌زمینه سفید ساده‌ای را که در مثال «Hello, World» دیدیم، برای پس‌زمینه قرمز رنگارنگ‌تر «آجر نسوز» از بین می‌برد. ما همچنین در حال تعریف استایل سفید متمایز برای متن هستیم روی را page.

اکنون اجازه دهید پیامی را که نمایش می دهیم در واقع به روز کنیم روی را page. برگرد به داخل serving_static/serve.py و به روز رسانی کنید message متغیر نام مغازه باشد. پیدا کن hello() عملکرد و به روز رسانی message متغیر به صورت زیر



...


@app.route("/")
def hello():
    message = "The Flask Shop"
    return render_template('index.html', message=message)

...

حالا سرور خود را ریستارت کنید و اجرا کنید python serve.py از نو. سپس به آدرس برنامه در آدرس مراجعه کنید localhost: 5000 و باید لیست کتاب های فلاسک ما را ببینید.

توجه داشته باشید که سبک برنامه اکنون از فایل CSS ما که از دایرکتوری “/static” توسط برنامه Flask ما ارائه می شود، انتخاب می شود.

اگر دوباره به الگوی “serving_static/templates/index.html” ما نگاه کنید، قبل از بسته شدن </body> برچسب، ما یک تگ اسکریپت جاوا اسکریپت را درج می کنیم.

آدرس این اسکریپت است /static/scripts.js. این یک فایل ثابت دیگر است که توسط Flask از پوشه “/static” ما ارائه می شود.

اجازه دهید اکنون این فایل جاوا اسکریپت را در آدرس ایجاد کنیم serving_static/static/scripts.js. محتویات کد جاوا اسکریپت برای تغییر پویا رنگ پس زمینه برنامه فروشگاه ما در هر ثانیه خواهد بود. این یک اثر دراماتیک برای جلب توجه به زمان محدود فروش در فروشگاه خیالی فلاسک ما ایجاد می کند.




var background1 = 'black';
var background2 = 'firebrick';


var color = true;


setInterval(function () {
  document.body.style.backgroundColor = (color ? background1 : background2)
  color = !color;
}, 1000);

حالا سرور خود را متوقف کرده و دوباره اجرا کنید python serve.py یک بار دیگر. هنگامی که از برنامه ما در مرورگر بازدید می کنید، page پس زمینه باید چشمک بزند و هر 1 ثانیه یک بار از سایه قرمز تغییر کند، این:

به سایه سیاه، مانند این:

را setInterval تابع در کد جاوا اسکریپت ما هر ثانیه پس زمینه را در یک حلقه زمانی پیوسته تغییر می دهد.

ما اکنون فایل‌های جاوا اسکریپت و CSS را از پوشه “/static” خود برای استایل و بهبود رفتار برنامه‌مان ارائه می‌کنیم.

اگر فایل های CSS یا جاوا اسکریپت اضافی دارید، می توانید آنها را به همان روشی که در بالا انجام دادیم به پوشه “/static” اضافه کنید و به آنها ارجاع دهید.

ارائه فایل های جاوا اسکریپت

یکی دیگر از موارد استفاده رایج در مورد ارائه فایل‌های استاتیک در برنامه‌های وب، ارائه کتابخانه‌های شخص ثالث مانند Backbone.js، Vue.js، Bootstrap یا React است.

هر نوع کتابخانه ای که بخواهید شامل شود می تواند تقریباً به همان روشی که در بالا از دایرکتوری “/static” ما دیدیم، ارائه شود.

به عنوان مثال، اجازه دهید روش گنجاندن کتابخانه جاوا اسکریپت Backbone.js را در برنامه خود ببینیم.

یک ایده خوب هنگام خدمت به کتابخانه های شخص ثالث این است که آنها را در یک ویژه قرار دهید lib یا فروشنده دایرکتوری داخل پوشه “/static”. شما می توانید این پوشه شخص ثالث را هر چه دوست دارید نام گذاری کنید.

با این حال، نکته کلیدی این است که کتابخانه های خارجی را در پوشه خود قرار دهید، جایی که می توانید به راحتی نسخه ها را ارتقا دهید یا مدیریت دیگری را جدا از کد برنامه خود انجام دهید.

با در نظر گرفتن این موضوع، یک پوشه جدید در “serving_static/static/lib” ایجاد کنید. از آنجایی که شامل می شویم Backbone.js، دانلود نسخه تک فایلی Backbone.js اینجاست، و سپس آن را در داخل جدید قرار دهید lib پوشه داخل پوشه “/static” ما.

Backbone.js وابستگی سختی دارد روی Underscore.js، یکی دیگر از کتابخانه های جاوا اسکریپت که بسیاری از ابزارهای ضروری را ارائه می دهد. پس دانلود کنید آخرین نسخه از Underscore.js اینجا و آن را در کنار Backbone.js در پوشه “/static/lib” خود قرار دهید.

اکنون می توانیم از Backbone.js با قرار دادن آن در سایت خود استفاده کنیم page قالب و فراخوانی توابع آن.

در قالب خود، در فایل “serving_static/templates/index.html”، آن را پیدا کنید </ol> برچسب بسته شدن بعد از آن، روی یک خط جدید، یک عنصر عنوان جدید ایجاد کنید که با Backbone.js دستکاری می کنیم.

علاوه بر این، تگ های اسکریپت جدید را قبل از بسته شدن اضافه کنید </body> برچسب زدن در این تگ ها قرار می دهیم Underscore.js و Backbone.jsو همچنین کدی برای به روز رسانی DOM با استفاده از کد Backbone بنویسید.

بخش به روز شده از index.html قالب باید به شکل زیر باشد.



...
<ol>
      <li>Flask By Example</li>
      <li>Uncluttered Flask</li>
      <li>Flask From First Principles</li>
</ol>

    <h4 id="version" style="color:white;">Backbone</h4>

    <script src="/static/scripts.js" charset="utf-8"></script>
    <script src="/static/lib/underscore.js" charset="utf-8"></script>
    <script src="/static/lib/backbone.js" charset="utf-8"></script>
    <script type="text/javascript">
      document.getElementById('version').innerHTML = "Proudly built with Backbone.js version " + Backbone.VERSION;
    </script>
  </body>
  ...

آخرین ما <script> تگ بالا از Backbone.js استفاده می کند. اگر اکنون سرور را مجددا راه اندازی کنید، باید متن را مشاهده کنید روی را page در پایین نسخه صحیح Backbone.js را نشان می دهد که ما از آن استفاده می کنیم.

اگر از Vue.js، React یا هر کتابخانه دیگری استفاده می‌کردیم، می‌توانستیم آن را اضافه کنیم و فایل‌های استاتیک آن را به همان روش ارائه کنیم و آن را در دسترس برنامه خود قرار دهیم.

ارائه تصاویر و سایر انواع فایل

انواع فایل های دیگر، مانند تصاویر و حتی txt و .pdf فایل‌ها را می‌توان مشابه فایل‌های JS و CSS که قبلا نشان دادیم ارائه کرد. فقط آنها را در “/static” قرار دهید و به آنها پیوند دهید.

بیایید نمونه کدی از ارائه تصاویر را ببینیم. در اینجا دو تصویر از کتاب های مرتبط آورده شده است: کتاب 1 و کتاب 2. آنها را دانلود کنید و در یک پوشه جدید در “serving_static/static/images” قرار دهید.

اکنون می‌توانیم بخش «کتاب‌های مرتبط» را به قالب فهرست خود اضافه کنیم، که در آن تصاویر این کتاب‌ها را نمایش می‌دهیم.

خود را به روز کنید index.html قالب با موارد زیر:



...

<h4 id="version" style="color:white;">Backbone</h4>

<h3>Related</h3>
<img src="/static/images/book1.png" alt="Related Book 1" width="20%" height="auto">
<img src="/static/images/book2.jpg" alt="Related Book 2" width="20%" height="auto">

...

اکنون وقتی سرور را ریستارت می کنید و از برنامه در مرورگر بازدید می کنید، تصاویری از کتاب های مرتبط را مشاهده خواهید کرد.

آماده سازی فایل های استاتیک با یک سیستم ساخت

یکی از بزرگترین چیزهایی که در حال حاضر در راه اندازی ما گم شده است، کوچک سازی دارایی های استاتیک، الحاق جاوا اسکریپت، CSS و همچنین بهینه سازی های دیگر برای سریعتر کردن برنامه است. علاوه بر این، استفاده از پیش پردازشگرها و کامپایلرهایی مانند Sass، Coffeescript و Babel باید به صورت دستی در تنظیمات فعلی ما مدیریت شود.

استفاده از یک سیستم ساخت مانند بسته وب، گلپ، صبحانه، یا مرورگر به شما کمک می کند این را خودکار کنید process.

اگر شما علاقه مند به کاوش در این هستید، اینجاست راهنمای صبحانه برای اضافه کردن Brunch به عنوان یک سیستم ساخت برای پروژه خود.

یا می توانید مستندات سیستم ساخت مورد نظر خود را مرور کنید تا با روش راه اندازی و ادغام آن در برنامه Flask خود آشنا شوید.

ارائه فایل های استاتیک در تولید

اجرای کد شما در تولید کمی با محیط توسعه متفاوت است. در تولید، بسته به روی در برنامه شما، ممکن است با حجم بسیار بالاتری از ترافیک مواجه شوید که می تواند عوارض زیادی را به همراه داشته باشد روی سرور شما

در تولید پیشنهاد می شود فایل های استاتیک با سروری مانند nginx برای نگه داشتن بار روی سرور وب پایتون شما تا حد امکان سبک است. اگر تعداد فایل‌های زیادی را ارائه می‌دهید، این کار سرعت برنامه شما را افزایش می‌دهد.

علاوه بر این، شما می خواهید به جای سرور داخلی Flask از یک وب سرور پایتون درجه تولید استفاده کنید. برخی از گزینه های خوب هستند گونیکورن، گئونت و آپاچی با mod_wsgi.

نتیجه

در این مقاله دیدیم که چگونه می توانید با استفاده از Flask به آسانی دارایی های استاتیک را ارائه دهید. شما می توانید جاوا اسکریپت، CSS، تصاویر و همچنین سایر فایل های ثابت را ارائه دهید. این را می توان به روش های مختلفی انجام داد، ساده ترین آن استفاده از دایرکتوری “/static” است که Flask از آن برای ارائه فایل ها به مشتری استفاده می کند.

(برچسب‌ها به ترجمه)# python

منتشر شده در 1403-01-29 22:44:16

امتیاز شما به این مطلب