در این مقاله ما قصد داریم از چهارچوب Django و Django REST برای بک‌اند و Vue.js برای فرانت‌اند است. APIها با کمک Axois (یک کتابخانه HTTP Client) از طریق Vue.js استفاده شده و همچنین موضوع احرازهویت JWT از طریق Auth0 مدیریت می‌شود.
ابتدای کار قصد داریم که تمام موارد مورد نیاز برای پروژه را نصب کنیم و بعد سراغ Django و Vue.js می‌رویم.
در نهایت کدهای تولید شده را می‌توانید در این مخزن گیت‌هاب مشاهده کنید.
به صورت خلاصه
در این مطلب ما مراحل زیر را انجام می‌دهیم:
- مقدمه‌ای بر پایتون و جانگو
- مقدمه‌ای بر ویوجیاس و ویژگی‌های آن
- ورود به پروژه بک‌اند
- ورود به پروژه فرانت‌اند
- مقدمه‌ای بر Json Web Token - بخش دوم
- ادغام کردن Django با Auth0 - بخش دوم
- ادغام‌سازی Auth0 با Vue.js - بخش دوم
- نتیجه‌گیری و مراحل بعدی - بخش دوم
مقدمه‌ای بر پایتون و جانگو
پایتون زبان برنامه‌نویسی چند منظوره و در حال حاضر یکی از پرطرفدارترین زبان‌های دنبال است. قابلیت خوانایی و کارایی بالایی دارد، همچنین یادگیری آن بسیار آسان است. پایتون یک زبان قابل حمل است و می‌تواند در سیستم عامل‌های مختلفی مانند لینوکس، ویندوز و مک استفاده شود.
برای توسعه‌دهندگان وب، پایتون ابزارها و چهارچوب‌های بسیار عالی را ارائه می‌دهد که باعث شده توسعه‌دهندگان کاربردی‌تر باشند و قابلیت ساخت نمونه‌ها را در زمان بسیار کوتاهی داشته باشند. محبوب‌ترین فریمورک پایتون برای توسعه وب در حال حاضر جانگو نام دارد. جانگو به عنوان فریمورکی کامل برای پروژه‌هایی با مهلت کم برای تحویل شناخته شده است. به این دلیل که قابلیت‌های موجود در پایتون به توسعه‌دهندگان این اجازه را می‌دهد تا سریع‌تر نمونه‌های‌شان را ایجاد کنند.
جانگو از قدرت پایتون استفاده می‌کند و به همین دلیل به توسعه‌دهندگان ویژگی‌های عالی مانند Viewهای مبتنی بر کلاس و ORM قدرتمند ارائه می‌دهد. قابلیت ORM تمام پیچیدگی‌های کار با بانک‌های اطلاعاتی را برای شما از بین می‌برد. می‌توانید روند توسعه را با استفاده از SQLite شروع کنید (هیچ مراحل نصب خاصی را ندارد) بعد از آن به سراغ یک بانک اطلاعاتی RDBMS بروید. شما با استفاده از قابلیت ORM این امکانات را بسیار به راحتی در اختیار دارید.
جانگو همچنین سیستم انتقال قدرتمندی را ارائه می‌دهد که به شما اجازه داده تا بدون نگرانی و از دست دادن داده‌های‌تان بانک اطلاعاتی‌تان را انتقال دهید.
یکی دیگر از مزیت‌های جانگو وجود انجمن کاربری بزرگ و در حال رشد است. این انجمن برای مشکلات متفاوت مربوط به فرایند توسعه وب پکیج‌های متن بازی را ارائه داده که شما می‌توانید از آن‌ها استفاده کنید و دیگر نیازی به اختراع دوباره چرخ ندارید.
مستندات جانگو بسیار کامل بوده و تمام ویژگی‌هایی که این فریمورک ارائه می‌دهد را در خود دارد. همچنین کار با این فریمورک برای افراد مبتدی مناسب است و برای شروع نیازی به حرفه‌ای بودن در موضوع خاصی نیست.
مقدمه‌ای بر Vue.js و ویژگی‌های Vue.js
Vue.js یک فریمورک پیش‌رو برای ساخت رابط کاربری با استفاده از جاوااسکریپت است. می‌توانید از Vue.js در لایه View مربوط به اپلیکیشن‌تان استفاده کنید و یا می‌توانید از آن برای ساخت اپلیکیشن‌های تک صفحه‌ای استفاده نمایید.
ویوجیاس تقریبا تمام ویژگی‌های مهم Angular و React را در یک کتابخانه جمع‌آوری کرده است. برای مثال درست مانند React ویوجیاس از یک Virtual DOM و رویکرد مبتنی بر کامپوننت استفاده کرده است. همچنین از سینتکس مشابهی برای دستورالعمل‌های انگولار بهره برده است (مثال v-if و v-for).
ویوجیاس ویژگی‌های بسیاری دارد، برای مثال:
- Virtual DOM
- کامپوننت‌های تعاملی
- کارایی عالی
- رندر محلی در آندروید و آی‌او‌اس (به کمک Weex و NativeScript)
ورود به پروژه بک‌اند
قبل از اینکه پروژه بک‌اند را ایجاد کنیم نیاز است که برخی از نیازمندی‌ها را روی کامپیوترتان نصب کنید. برای جانگو باید پایتون نسخه ۳، PIP و venv را نصب کنید.
به یاد داشته باشید که نیاز به نصب یک سیستم مدیریت بانک اطلاعاتی پیچیده نداریم، برای این مطلب می‌توان از SQLite استفاده کرد.
نصب کردن نیازمندی‌ها
بیایید با پایتون ۳ شروع کنیم. قبل از این وجود پایتون را روی سیستم‌تان بررسی کنید. اگر نصب نبود نگران نباشید، روند نصب آن بسیار ساده است. تنها کافی‌ست براساس سیستم عاملی که دارید نسخه مورد نظر را از وبسایت رسمی پایتون نصب کنید.
برای اینکه بررسی کنید که پایتون در سیستم شما وجود دارد و نسخه آن چیست می‌توانید دستور زیر را وارد کنید:
python3 --version
ماژول venv (بخشی از کتابخانه استاندارد پایتون) به شما اجازه می‌دهد که یک محیط توسعه مجازی سبک را برای پروژه‌تان ایجاد کنید. این ماژول به شما این امکان را می‌دهد که برای هر پروژه پایتون یک محیط ایزوله شده را در اختیار داشته باشید.
داشتن یک محیط ایزوله شده به شما امکان کنترل بیشتری روی پکیج‌های نصب شده پایتون را می‌دهد. می‌توانید بدون نگرانی در پروژه‌های مختلف پایتون از نسخه‌های متفاوت یک پکیج استفاده کنید و این موضوع به لطف محیط‌های توسعه ایزوله شده است. همچنین از آنجایی که هر محیط توسعه می‌تواند باینری پایتون مربوط به خود را داشته باشید می‌توانید محیط‌های توسعه مختلفی را براساس نسخه‌های متفاوت پایتون در اختیار داشته باشید.
بعد از اینکه یک محیط توسعه مجازی را ایجاد کردید، venv به آخرین نسخه نصب شده از باینری پایتون توجه می‌کند.
بعد از آن شما نیاز به نصب کردن pip که پکیج منیجر پایتون است دارید. البته این پکیج منیجر به صورت پیشفرض همراه با پایتون ارائه می‌شود پس نیاز به نگرانی در مورد نصب آن به صورت جداگانه ندارید.
برای بررسی وجود این پکیج منیجر می‌توانید از دستور زیر استفاده کنید (خروجی براساس محیط توسعه‌تان pip و یا pip3 خواهد بود):
pip --version
اگر از نصاب رسمی پایتون استفاده کرده باشید، بنابراین باید حتما pip را به صورت نصب شده در اختیار داشته باشید. همچنین اگر در محیط venv هستید pip به صورت پیشفرض برای شما نصب شده است. برای لینوکس می‌توانید این مورد را هم جداگانه نصب کنید.
ایجاد یک Virtual Enviroment
بعد از اینکه تمام نیازمندی‌های مربوط به بک‌اند را نصب کردید، باید Virtual Enviroment را برای پروژه‌تان پیاده‌سازی کنید. به محیط خط فرمان برگشته و دستورات زیر را اجرا کنید:
# ایجاد دایرکتوری پروژه
mkdir django-vue
# رفتن به داخل دایرکتوری
cd django-vue
# پیاده‌سازی venv در داخل پوشه
python3 -m venv ./
حال نیاز است که با استفاده از دستور source می‌توانید venv را فعال کنید:
source ./bin/activate
نصب جانگو
برای نصب کردن جانگو از pip استفاده می‌کنیم:
pip install django
مرحله بعدی ایجاد پروژه جانگو با استفاده از خط فرمان است:
django-admin startproject djangovue .
مرحله بعدی، دستورات زیر را برای سازمان‌دهی به پروژه جانگو را با استفاده از catalog اجرا کنید:
python manage.py startapp catalog
همچنین نیاز است که این اپلیکیشن را به لیست اپلیکیشن‌های نصب شده اضافه کنید. برای اینکار فایل settings.py را باز کرده و اپلیکیشن را اضافه نمایید:
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'catalog'
]
حال می‌توانید بانک اطلاعاتی‌تان را انتقال داده و سرور توسعه را اجرا کنید:
python manage.py migrate
python manage.py runserver
اگر آدرس http://127.0.0.1:8000 را در مرورگر اجرا کنید با تصویر زیر روبرو خواهید شد:
ورود به پروژه فرانت‌اند
Vue.js ابزار CLI دارد که به توسعه‌دهندگان اجازه می‌دهد به سرعت SPAهای خودشان را ایجاد کنند. CLI مربوط به ویوجیاس نسخه از پیش پیکربندی شده‌ای را برای کارهای توسعه فرانت‌اند ایجاد می‌کند و شما می‌توانید به سرعت وارد پروسه توسعه اصلی شوید.
قبل از اینکه Vue.js CLI را نصب کنید نیاز است که با استفاده از Node.js و NPM یک محیط توسعه را داشته باشید. می‌توانید هر دوی این موارد را از طریق وبسایت رسمی Node.js روی سیستم عامل‌تان نصب کنید.
بعد از آن وارد محیط خط فرمان شده و دستور زیر را اجرا کنید:
npm install -g vue-cli
بسته به پیکربندی مربوط به NPM ممکن است به sudo نیز در قبل از دستورات نیاز داشته باشید.
بعد از نصب کردن Vue.js CLI شما از آن برای ساخت یک اپلیکیشن ویوجیاس مبتنی بر قالب وب‌پک استفاده می‌کنید. در داخل روت پروژه جانگو، دستورات زیر را وارد کنید:
vue init webpack frontend
با اجرای این دستور ویوجیاس شما سوالاتی می‌پرسد که می‌توانید براساس الگوی زیر به آن‌ها جواب بدهید:
- Project name: frontend
- Project description: A Vue.js project
- Author: Your Name your.name@somewhere.com
- Vue build: Runtime + Compiler: recommended for most users
- Install vue-router? Yes
- Use ESLint to lint your code? Yes
- Pick an ESLint preset: Standard
- Set up unit tests: No
- Setup e2e tests with Nightwatch? No
- Should we run npm install for you after the project has been created? (recommended) Yes, use NPM
بعد از پیاده‌سازی پروژه ویوجیاس حال کدهای زیر را اجرا کنید:
cd frontend
# اجرای اسکریپت dev
npm run dev
بعد از آن شما قادر به مشاهده اپلیکیشن ویوجیاس از طریق آدرس http://127.0.0.1:8080 خواهید بود.
دیدگاه و پرسش
در حال دریافت نظرات از سرور، لطفا منتظر بمانید
در حال دریافت نظرات از سرور، لطفا منتظر بمانید