از طریق منوی جستجو مطلب مورد نظر خود در وبلاگ را به سرعت پیدا کنید
برنامه های تک صفحه ای با Vue.js و Flask: AJAX Integration. از اینکه برای پست پنجم به من ملحق شدید متشکریم روی استفاده از Vue.js و Flask برای توسعه وب تمام پشته. این پست نسبتاً کوتاه است، اما بسیار ارزشمند است زیرا من روش اتصال برنامه‌های front-end و back-end را با استفاده از جاوا اسکریپت ناهمزمان و XML (معروف به AJAX) نشان خواهم داد. کد برای …
سرفصلهای مطلب
ادغام AJAX با REST API
از اینکه برای پست پنجم به من پیوستید متشکرم روی استفاده از Vue.js و Flask برای توسعه وب تمام پشته. این پست نسبتاً کوتاه است، اما بسیار ارزشمند است زیرا من روش اتصال برنامه‌های front-end و back-end را با استفاده از جاوا اسکریپت ناهمزمان و XML (معروف به AJAX) نشان خواهم داد.
کد این پست را می توانید پیدا کنید روی حساب GitHub من در زیر شاخه پست پنجم.
محتوای سری
- راه اندازی و آشنایی با VueJS
- مسیریاب Vue
- مدیریت دولتی با Vuex
- RESTful API با Flask
- ادغام AJAX با REST API (تو اینجایی)
- احراز هویت JWT
- استقرار در یک سرور خصوصی مجازی
توضیح مختصری در مورد AJAX و برنامه های Thick Client
AJAX یک فناوری قدرتمند است که در ساخت برنامه های کاربردی وب بسیار تعاملی و سریع موفقیت چشمگیری داشته است. در واقع، من معتقدم AJAX احتمالاً تأثیرگذارترین فناوری است که به یک تغییر پارادایم بزرگ از دوران تین مشتری برنامه های وب به ضخامت فزاینده یا مشتری چاق برنامه های وب که امروز می بینیم. برنامه نظرسنجی که من در این مجموعه نشان داده ام، یک برنامه کاربردی سرور مشتری توزیع شده است که به عنوان یک کلاینت ضخیم اجرا شده است. این بدان معناست که اکثریت منطق و رفتار اجرا می شود روی کلاینت از طریق جاوا اسکریپت (عمدتا با استفاده از Vue.js) در حالی که سمت سرور یک API نسبتاً گنگ RESTful است که به سادگی داده ها را مصرف می کند و ارائه می دهد.
دو فناوری عمده وجود دارد که این برنامه کاربردی کلاینت ضخیم را قادر می‌سازد تا با حفظ حالت (داده)، رفتار و ارائه مبتنی بر داده‌ها، دستکاری کند.
- چارچوب Vue.js با سیستم واکنش پذیری عالی که به همراه کتابخانه Vuex flux به اشتراک گذاشته شده است.
- عملکرد AJAX در یک کتابخانه جاوا اسکریپت طراحی شده به نام پیاده سازی شده است axios
شما باید از قبل با عالی بودن Vue.js و Vuex از پست های قبلی من در این مجموعه آشنا باشید. بنابراین تمرکز خواهم کرد روی توضیح AJAX در این مقاله. AJAX یک فناوری ارتباطی شبکه ای است که از HTTP برای فشار دادن و کشیدن داده ها به سرور به صورت ناهمزمان در مرورگر استفاده می کند. به این ترتیب مرورگر قادر است به سرعت اجزای تکی وابسته را به روز کند روی حجم کمی از داده ها، به جای به روز رسانی کل page، که منجر به تجربه ای بسیار پاسخگوتر می شود.
راه اندازی Axios و فعال کردن CORS
برای نصب Axios از npm استفاده می کنم و آن را در آن ذخیره می کنم package.json فایل با دستور زیر:
$ npm install --save axios
اکنون، برای استفاده از Axios برای ایجاد درخواست‌های AJAX از مشتری به سرور back-end، باید تغییری در برنامه Flask ایجاد کنم تا فعال شود. به اشتراک گذاری منابع متقاطع (CORS). هر زمان که یک مشتری برای منبعی که در آن قرار دارد درخواست کند روی دستگاه دیگری همانطور که توسط پروتکل، آدرس IP / نام دامنه یا شماره پورت تعریف شده است، سپس هدرهای اضافی مرتبط با CORS باید اضافه شود. خوشبختانه، یک پسوند Flask کوچک و مفید وجود دارد، فلاسک-CORS، که ادغام با Flask را بسیار آسان می کند. همانطور که قبلا انجام دادم استفاده می کنم pip برای نصب آن به این صورت
(venv)$ pip install Flask-CORS
بعد من نیاز دارم import و نمونه سازی کنید CORS سپس آن را با شی برنامه کاربردی Flask در داخل ثبت کنید application.py ماژول برنامه back-end.
"""
application.py
- creates a Flask app instance and registers the database object
"""
from flask import Flask
from flask_cors import CORS
def create_app(app_name='SURVEY_API'):
app = Flask(app_name)
app.config.from_object('surveyapi.config.BaseConfig')
cors = CORS(app, resources={r"/api/*": {"origins": "*"}})
from surveyapi.api import api
app.register_blueprint(api, url_prefix="/api")
from surveyapi.models import db
db.init_app(app)
return app
پیاده سازی درخواست های AJAX با Axios
در مرحله بعد باید توابع ساختگی را که قبلاً در آن پیاده‌سازی کرده‌ام جایگزین کنم scr/api/index.js با GET، POST، و PUT درخواست ها با استفاده از کتابخانه Axios. اگر از آخرین مقاله به یاد داشته باشید، نقاط پایانی RESTful API زیر را در برنامه Flask تعریف کردم که باید از جاوا اسکریپت در مرورگر فراخوانی شوند.
| مسیر | روش | قابلیت کارکرد |
|---|---|---|
/api/surveys/ |
گرفتن | بازیابی همه نظرسنجی ها |
/api/surveys/ |
پست | یک نظرسنجی جدید ایجاد کنید |
/api/surveys/id/ |
گرفتن | بازیابی نظرسنجی توسط ID |
/api/surveys/id/ |
قرار دادن | انتخاب های یک نظرسنجی را به روز کنید |
که در src/api/index.js من نیاز دارم import کتابخانه Axios و برای قابلیت استفاده مجدد نیز متغیری به نام تعریف می کنم API_URL که برابر است با root از منبع API http://127.0.0.1:5000/api. سپس بدنه توابع موجود را جایگزین می کنم تا از متدهای Axios استفاده کنم get(...)، put(...)، و post(...) مانند:
// api/index.js
import axios from 'axios'
const API_URL = 'http://127.0.0.1:5000/api'
export function fetchSurveys() {
return axios.get(`${API_URL}/surveys/`)
}
export function fetchSurvey(surveyId) {
return axios.get(`${API_URL}/surveys/${surveyId}/`)
}
export function saveSurveyResponse(surveyResponse) {
return axios.put(`${API_URL}/surveys/${surveyResponse.id}/`, surveyResponse)
}
export function postNewSurvey(survey) {
return axios.post(`${API_URL}/surveys/`, survey)
}
اکنون فقط دو تغییر کوچک وجود دارد src/store/index.js برای تطبیق قراردادی که توسط Axios برای بازگرداندن داده ها از درخواست های دریافت استفاده می شود. در loadSurvey(...) و loadSurveys(...) متدهای اقدام، هر کدام تابعی را فراخوانی می کنند که به نوبه خود تابع را فراخوانی می کند axios.get(...) روش هایی که وعده ها را برمی گرداند. هنگامی که این وعده ها برطرف شد، حاوی داده هایی هستند که توسط درخواست AJAX به سرور بازگردانده می شوند و آن داده ها در یک ذخیره می شوند. .data عضو شی وعده حل شده بنابراین، داده های ارسال شده به جهش ها باید باشد response.data به جای فقط response.
const actions = {
// asynchronous operations
loadSurveys(context) {
return fetchSurveys()
.then((response) => {
// context.commit('setSurveys', { surveys: response })
context.commit('setSurveys', { surveys: response.data })
})
},
loadSurvey(context, { id }) {
return fetchSurvey(id)
.then((response) => {
// context.commit('setSurvey', { survey: response })
context.commit('setSurvey', { survey: response.data })
})
},
و وویلا! چقدر ساده است؟
از آنجایی که تمام کارهای سنگین قبلاً برای ساختن قسمت جلویی و انتهایی در پست های قبلی انجام شده بود، کار مورد نیاز برای یکپارچه سازی ارتباطات AJAX به معنای واقعی کلمه به همین سادگی است. تنها کاری که باید انجام دهید این است که سرورهای توسعه دهنده را فعال کنید و برنامه نظرسنجی را برای درایو ببرید.
نتیجه
در این مقاله کوتاه، روش اتصال برنامه‌های front-end و back-end را از طریق فناوری ارتباطی قدرتمند AJAX نشان داده‌ام. برای انجام این کار، من از کتابخانه Axios برای رسیدگی به سمت مشتری کارها استفاده کردم و روی قسمت پشتی من از پسوند Flask-CORS برای فعال کردن CORS استفاده کردم.
با تشکر از شما که مطالعه کردید و لطفاً برای مقاله بعدی که در آن روش اجرای ثبت نام و احراز هویت کاربران را پوشش می دهم، به من بپیوندید. مثل همیشه از هر نظر یا انتقادی در زیر استقبال می کنم.
(برچسب‌ها به ترجمه)# python
منتشر شده در 1403-01-27 01:46:06
