نحوه ساختن یک برنامه جهانی با Nuxt.js و Django

مقدمه
ظهور کتابخانه های مدرن جاوا اسکریپت مانند React.js و Vue.js توسعه وب نرم افزار نهایی را بهتر کرده است. این کتابخانه ها دارای ویژگی هایی از جمله SPA (برنامه های تک صفحه) هستند که بارگذاری دینامیک مطالب در صفحات وب بدون بارگذاری مجدد کامل از مرورگر میباشد.
مفهوم پشت بیشتر برنامه های تک پیج ، ارائه در سمت کلاینت است. در رندر سمت کلاینت ، اکثر مطالب در یک مرورگر با استفاده از JavaScript ارائه می شوند. در لود صفحه ، محتوا در ابتدا لود نمی شود تا جاوا اسکریپت به طور کامل بارگیری شود و بقیه سایت را ارائه دهد.
خاتمه در سمت کلاینت یک مفهوم نسبتاً جدید است و تبعاتی در رابطه با استفاده از آن وجود دارد. نکته منفی قابل توجه این است که ، از آنجایی که محتوا دقیقاً تا زمانی که صفحه با استفاده از JavaScript به روز شود، ارائه نمی گردد ،SEO برای وب سایت دچار مشکل خواهد برد زیرا به سختی می توان اطلاعاتی را برای crawl موتورهای جستجو به دست آورد.
از طرف دیگر ، ارائه سمت سرور مجازی روشی معمول برای بدست آوردن صفحات HTML ارائه شده در یک مرورگر است. در برنامه های قدیمی تر رندر شده توسط سرور مجازی ، برنامه وب با استفاده از یک زبان سمت سرور مجازی مانند PHP ساخته شده است. هنگامی که یک صفحه وب توسط یک مرورگر درخواست می شود ، سرور مجازی از راه دور محتوای (پویا) را اضافه می کند و یک صفحه HTML شلوغ را ارائه می دهد.
دقیقاً همانطور که در رندرگیری سمت کلاینت مشکلاتی وجود دارد ، رندر سمت سرور مجازی باعث می شود مرورگر بیش از حد درخواست های سرور مجازی را ارسال کند و تکرار بارگذاری مجدد صفحه را برای داده های مشابه انجام دهد. چارچوب های JavaScript وجود دارد که در ابتدا می توانند صفحه وب را با راه حل SSR (Server-Send Rendering) بارگذاری کنند ، سپس از یک چارچوب برای اداره مسیریابی پویا استفاده کرده و فقط داده های لازم را دریافت می کنند. برنامه های کاربردی حاصل از آن برنامه های جهانی نامیده می شوند.
به طور خلاصه ، از یک برنامه جهانی برای توصیف کد JavaScript استفاده می شود که می تواند در سمت کلاینت و سرور مجازی اجرا شود. در این مقاله ، ما یک برنامه جهانی دستور العمل پخت با استفاده از Nuxt.js.ایجاد میکنیم.
Nuxt.js یک چارچوب سطح بالاتر برای توسعه برنامه های جهانی Vue.js است. با الهام از React’s Next.js ایجاد شده است و به حل مشکلات (پیکربندی سرور مجازی و توزیع کد مشتری) که در تنظیم برنامه های Vue.js رندر شده در سمت سرور مجازی ایجاد می شود ، کمک می کند. Nuxt.js همچنین دارای ویژگی هایی مانند داده های async ، میان افزار ، طرح بندی و غیره است که به توسعه بین سمت کلاینت و سمت سرور مجازی کمک می کند.
توجه: ما می توانیم به برنامه ای که ایجاد می کنیم به عنوان رندر شده در سمت سرور مجازی (SSR) ارجاع دهیم زیرا Vue.js در هنگام ایجاد یک برنامه تک پیج ، به طور پیش فرض رندرگیری سمت کلاینت را اجرا می کند. این برنامه در واقع یک برنامه جهانی است.

در این مقاله خواهیم دید که چگونه یک برنامه جهانی با استفاده از Django و Nuxt.js. ایجاد کنیم. Django عملیات برگشتی پس زمینه را بر عهده خواهد داشت و API ها را با استفاده از (DRF) Django Rest Framework ارائه می دهد ، در حالی که Nuxt.js ظاهر اصلی را ایجاد می کند.
نسخه نمایشی برنامه نهایی:

می بینیم که برنامه نهایی یک برنامه دستور پخت است که عملیات CRUD را انجام می دهد.
کد منبع این آموزش در اینجا در GitHub موجود است.
پیش نیازها
برای دنبال کردن این آموزش ، به نصب موارد زیر روی دستگاه خود نیاز دارید:
1- Python3
2- Pip
3- Npm
Pipenv ابزاری آماده تولید است که هدف آن آوردن بهترین موارد بسته بندی از همه جا دنیای به دنیای پایتون است. Pipfile ، pip و virtualenv را در یک دستور واحد مهار می کند.
این آموزش فرض می کند که خواننده موارد زیر را دارد:
1- دانش پایه در مورد کار با چارچوب Django و Django Rest.
2- دانش پایه کار با Vue.js.
تنظیم Backend (پشت خط)
در این بخش پشت خط را تنظیم می کنیم و کلیه پوشه های مورد نیاز برای راه اندازی و اجرا را ایجاد می کنیم ، بنابراین نمونه جدیدی از یک ترمینال را راه اندازی کنید و با اجرای این دستور دیرکتوری برنامه را ایجاد کنید:
⦁ $ mkdir recipes_app
⦁
در مرحله بعد ، ما به دیرکتوری میرویم:
⦁ $ cd recipes_app
⦁
اکنون Pipenv را با استفاده از Pip نصب می کنیم و یک محیط مجازی جدید را فعال می کنیم:
⦁ $ pip install pipenv
⦁
⦁ $ pipenv shell

توجه: اگر قبلاً Pipenv را روی رایانه خود نصب کرده اید ، باید از دستور اول عبور کنید.
بیایید با استفاده از Pipenv ، Django و سایر متعلقات را نصب کنیم:
⦁ $ pipenv install django django-rest-framework django-cors-headers
⦁
توجه: پس از فعال کردن یک محیط مجازی جدید با استفاده از Pipenv ، هر خط فرمان در ترمینال با نام دایرکتوری کار کنونی پیشوند می یابد. در این حالت ، (recipes_app) است .
اکنون ، یک پروژه جدید Django با نام api و یک برنامه Django به نام core ایجاد خواهیم کرد:
⦁ (recipes_app)$ django-admin startproject api
⦁
⦁ (recipes_app)$ cd api
⦁
⦁ (recipes_app)$ python manage.py startapp core

بیایید برنامه core را به همراه rest_framework و core-headers ثبت کنیم تا پروژه Django آن را تشخیص دهد. فایل api / settings.py را باز کنید و بر این اساس آن را به روز کنید:
api/settings.py
# Application definition
INSTALLED_APPS = [
‘django.contrib.admin’,
‘django.contrib.auth’,
‘django.contrib.contenttypes’,
‘django.contrib.sessions’,
‘django.contrib.messages’,
‘django.contrib.staticfiles’,
‘rest_framework’, # add this
‘corsheaders’, # add this
‘core’ # add this
]

MIDDLEWARE = [
‘corsheaders.middleware.CorsMiddleware’, # add this
‘django.middleware.security.SecurityMiddleware’,
‘django.contrib.sessions.middleware.SessionMiddleware’,
‘django.middleware.common.CommonMiddleware’,
‘django.middleware.csrf.CsrfViewMiddleware’,
‘django.contrib.auth.middleware.AuthenticationMiddleware’,
‘django.contrib.messages.middleware.MessageMiddleware’,
‘django.middleware.clickjacking.XFrameOptionsMiddleware’,
]

# add this block below MIDDLEWARE
CORS_ORIGIN_WHITELIST = (
‘localhost:3000’,
)

# add the following just below STATIC_URL
MEDIA_URL = ‘/media/’ # add this
MEDIA_ROOT = os.path.join(BASE_DIR, ‘media’) # add this

ما localhost: 3000 را به لیست سفید اضافه کردیم زیرا برنامه مشتری در آن پورت ارائه می شود و ما می خواهیم از خطاهای CORS جلوگیری کنیم. همچنین MEDIURL و MEDIAROOT را اضافه کردیم زیرا هنگام ارائه تصاویر در برنامه به آنها احتیاج خواهیم داشت.
تعریف مدل دستور پخت
بیایید مدلی ایجاد کنیم تا نحوه ذخیره اقلام دستور پخت در بانک اطلاعاتی را معرفی کند، فایل core/models.py را باز کرده و قطعه زیر را به طور کامل جایگزین کنید:
core/models.py
from django.db import models
# Create your models here.

class Recipe(models.Model):
DIFFICULTY_LEVELS = (
(‘Easy’, ‘Easy’),
(‘Medium’, ‘Medium’),
(‘Hard’, ‘Hard’),
)
name = models.CharField(maxlength=120)
ingredients = models.CharField(max_length=400)
picture = models.FileField()
difficulty = models.CharField(choices=DIFFICULTY_LEVELS, max_length=10)
prep_time = models.PositiveIntegerField()
prep_guide = models.TextField()

def __str_(self):
return “Recipe for {}”.format(self.name)

قطعه کد بالا شش نوع ویژگی را در مدل دستور پخت ثبت می کند:
⦁ نام
⦁ مواد لازم
⦁ تصویر
⦁ دشواری
⦁ زمان آماده سازی
⦁ راهنمای آماده سازی
ایجاد سریالایزرها (پیاپی ساز) برای مدل دستور پخت
برای تبدیل نمونه های مدل به JSON به سریالایزرها نیاز داریم تا frontend بتواند با داده های دریافت شده کار کند. ما یک فایل core/serializers.py ایجاد خواهیم کرد و آن را با موارد زیر به روز می کنیم:
core/serializers.py
from rest_framework import serializers
from .models import Recipe
class RecipeSerializer(serializers.ModelSerializer):

class Meta:
model = Recipe
fields = (“id”, “name”, “ingredients”, “picture”, “difficulty”, “prep_time”, ”

در قسمت قطعه کد بالا ، ما مدل لازم برای کار و زمینه هایی را که می خواهیم به JSON تبدیل شوند را مشخص کرده ایم.
تنظیم پنل مدیریت
Django رابط ادمین بیرون از باکس در اختیار ما قرار می دهد. این رابط کاربری بررسی عملکرهای CRUD را بر روی مدل دستور پختی که ما ایجاد کرده ایم ، آسان می کند ، اما در ابتدا ، اندکی پیکربندی انجام خواهیم داد.
فایل core/admin.py را باز کنید و قطعه زیر را کامل جایگزین کنید:
core/admin.py
from django.contrib import admin
from .models import Recipe # add this
# Register your models here.

admin.site.register(Recipe) # add this

ایجاد نماها
بیایید یک کلاس RecipeViewSet را در فایل core / views.py ایجاد کنیم ، آن را با قطعه زیر کامل جایگزین کنید:
core/views.py
from rest_framework import viewsets
from .serializers import RecipeSerializer
from .models import Recipe

class RecipeViewSet(viewsets.ModelViewSet):
serializer_class = RecipeSerializer
queryset = Recipe.objects.all()

Viewets.ModelViewSet روشهایی را برای مدیریت عملیات CRUD بطور پیش فرض فراهم می کند. فقط باید کلاس سریالایزر و queryset را مشخص کنیم.
تنظیم URL ها
به فایل api / urls.py بروید و آن را با کد زیر جایگزین کنید. این کد مسیر URL را برای API مشخص می کند:
api/urls.py
from django.contrib import admin
from django.urls import path, include # add this
from django.conf import settings # add this
from django.conf.urls.static import static # add this

urlpatterns = [
path(‘admin/’, admin.site.urls),
path(“api/”, include(‘core.urls’)) # add this
]

# add this
if settings.DEBUG:
urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

اکنون یک فایل urls.py را در دایرکتوری core ایجاد کنید و در قسمت زیر قرار دهید:
core/urls.py
from django.urls import path, include
from rest_framework.routers import DefaultRouter
from .views import RecipeViewSet

router = DefaultRouter()
router.register(r’recipes’, RecipeViewSet)

urlpatterns = [
path(“”, include(router.urls))
]

در کد بالا ، کلاس router الگوهای URL زیر را تولید می کند:
⦁ /recipes/ – ایجاد و خواندن عملیات را می توان در این مسیر انجام داد.
⦁ /recipes/{id} عملیات خواندن ، بروزرسانی و حذف را می توان در این مسیر انجام داد.
جا به جایی های در حال اجرا
از آنجا که ما اخیراً یک مدل دستور پخت ایجاد کرده ایم و ساختار آن را تعریف کرده ایم ، باید یک فایل جا به جایی تهیه کرده و تغییرات را در مدل در بانک اطلاعاتی اعمال کنیم ، بنابراین دستورات زیر را اجرا می کنیم:
⦁ (recipes_app)$ python manage.py makemigrations
⦁
⦁ (recipes_app)$ python manage.py migrate

اکنون ، برای دسترسی به رابط ادمین ، یک اکانت ابرکاربر ایجاد خواهیم کرد:
⦁ (recipes_app)$ python manage.py createsuperuser
⦁
از شما خواسته می شود نام کاربری ، ایمیل و رمز عبور را برای این ابرکاربر وارد کنید. حتما جزئیاتی را که می توانید به خاطر بسپارید وارد کنید زیرا به آنها احتیاج خواهید داشت که به زودی وارد داشبورد سرور مجازی شوید.
این تمام پیکربندی است که باید در پس زمینه انجام شود. اکنون می توانیم API های ایجاد شده را تست کنیم ، بنابراین بیایید سرور مجازی Django را شروع کنیم:
⦁ (recipes_app)$ python manage.py runserver
⦁
هنگامی که سرور مجازی در حال اجرا است ، برای اطمینان از عملکرد آن ، به آدرس http://localhost:8000/api/recipes/بروید

می توانیم با استفاده از رابط ، یک دستور پخت جدید ایجاد کنیم:

همچنین می توانیم با استفاده از کلیدهای اولیه id آنها ، عملیات DELETE ، PUT و PATCH را روی موارد خاص دستور پخت انجام دهیم. برای انجام این کار ، به یک آدرس با این ساختار /api/recipe/{id} خواهیم کرد. بیایید با این آدرس امتحان کنیم http://localhost:8000/api/recipes/1:

همه این ها برای پس زمینه برنامه است ، اکنون می توانیم به سراغ ظاهر برنامه برویم.
تنظیم Frontend
در این بخش از آموزش ، front-end برنامه را خواهیم ساخت. می خواهیم پوشه کد front-end را در ریشه دایرکتوری recipes_app قرار دهیم. بنابراین ، قبل از اجرای دستورات در این بخش ، از دیرکتوری api استفاده میکنیم (یا برای پیش رفتن در ترمینال قبلی، یک ترمینال جدید ایجاد میکنیم.)
بیایید با این دستور برنامه nuxt به نام client را ایجاد کنیم:
⦁ $ npx create-nuxt-app client
⦁

توجه: create-nuxt-app قبلی با npx بسته را نصب می کند اگر قبلاً در سطح جهانی روی دستگاه شما نصب نشده باشد.

پس از اتمام نصب ، create-nuxt-app چند سؤال درباره اضافه کردن ابزارهای بیشتر می پرسید. ما به آنها به شرح زیر پاسخ خواهیم داد:
⦁ نام پروژه را وارد کنید یا برای قبول نام پیش فرض فقط کلید enter را بزنید
⦁ توضیحات پروژه را وارد کنید یا برای پیش فرض فقط کلید enter را بزنید
⦁ none را برای چارچوب سرور مجازی های سفارشی انتخاب کنید
⦁ PWA support را برای نصب ویژگی ها انتخاب کنید
⦁ Bootstrap را برای چارچوب UI را انتخاب کنید
⦁ none را برای چارچوب آزمون انتخاب کنید
⦁ universal را برای حالت رندر انتخاب کنید
⦁ یک نام نویسنده وارد کنید یا برای قبول نام پیش فرض فقط کلید enter را بزنید
⦁ npm را برای مدیر بسته انتخاب کنید

این امر باعث می شود با استفاده از مدیر بسته انتخابی ، نصب متعلقات انجام شود و در آخر ، صفحه ای مانند این به شما ارائه می شود:

بیایید دستورات زیر را برای شروع برنامه در حالت توسعه اجرا کنیم:
⦁ $ cd client
⦁
⦁ $ npm run dev

پس از شروع سرور مجازی توسعه ، برای دیدن برنامه به آدرس http: // localhost: 3000 بروید:

حال اجازه دهید نگاهی به ساختار دیرکتوری پوشه client بیندازیم:
├── client
├── assets/
├── components/
├── layouts/
├── middleware/
├── node_modules/
├── pages/
├── plugins/
├── static/
└── store/

در اینجا بخشی از هدف این دیرکتوری ها آورده شده است:
⦁ Assets – حاوی فایل های کامپایل نشده مانند تصاویر ، CSS ، SASS و JavaScript می باشد.
⦁ Components – شامل مؤلفه های Vue.js است.
⦁ Layouts – حاوی طرح بندی برنامه است. طرح بندی ها برای تغییر ظاهر یک صفحه استفاده می شوند و می توان برای چندین صفحه نیز استفاده کرد.
⦁ Middleware – حاوی میان افزار برنامه است. میان افزارها توابع سفارشی هستند که قبل از ارائه یک صفحه اجرا می شود.
⦁ Pages – حاوی نمایش ها و مسیرهای برنامه است. Nuxt.js تمام فایل های .vue را در این دیرکتوری می خواند و از این اطلاعات برای ایجاد روتر برنامه استفاده می کند.
⦁ Plugins – دارای افزونه های JavaScript است که قبل از شروع برنامه مسیریابی Vue.js اجرا می شود.
⦁ Static – حاوی فایل های استاتیک است (فایل هایی که بعید به نظر می رسد تغییر پیدا کنند) و تمام این فایل ها روی ریشه برنامه که / است، نگاشت می شوند.
⦁ Store – اگر قصد داشته باشیم از Vuex با Nuxt.js. استفاده کنیم ، حاوی فایل های فروشگاه است.
همچنین یک فایل nuxt.config.js در پوشه client وجود دارد ، این فایل شامل پیکربندی سفارشی برای برنامه Nuxt.js است. قبل از ادامه ، این فایل zip را دانلود کنید ، آن را اکسترکت کرده و پوشه images/ را در دیرکتوری static/ قرار دهید.
ساختار صفحات
در این بخش چند فایل .vue را به دیرکتوری pages/ اضافه خواهیم کرد تا برنامه ما دارای پنج صفحه باشد:
⦁ صفحه نخست
⦁ صفحه لیست همه دستور پخت ها
⦁ صفحه نمایش دستور پخت تکی
⦁ صفحه ویرایش تک دستور
⦁

نتیجه
در این مقاله ، ما با یادگیری تفاوت های بین برنامه های ارائه شده از سمت کلاینت و سمت سرور مجازی ، شروع به کار کردیم. در ادامه یاد گرفتیم که یک اپلیکیشن جهانی چیست و در آخر ، دیدیم که چگونه می توان با استفاده از Nuxt.js و Django ، یک برنامه جهانی ساخت.
کد منبع این آموزش در اینجا در GitHub موجود است.

از این لینک ها زیر می توانید آمورش های بیشتری برای لینوکس پیدا کنید :

استفاده از nsh برای دستورات از راه دور اوبونتو 18 – میزبانی وب سایت با Caddy اوبونتو 18

تنظیم سرور ذخیره سازی آبجکت با استفاده از Minio در اوبونتو 18 – ضبط و اشتراک گذاری ترمینال با Terminalizer اوبونتو

تنظیم مسیریابی شرطی و پاسخگو با React Router v4 – ایجاد یک URL کوتاه کننده با Django و GraphQL

یک برنامه ردیابی سلامت را با React ،GraphQL و Okta – ساخت برنامه چت زمان حقیقی React و GraphQL

به روزرسانی فیلترهای مرتب سازی Angular (زاویه ای) – با استفاده از React ، Superagent و API اینستاگرام

نحوه ساختن یک برنامه جهانی با Nuxt.js و Django – دکمه دانلود با ریزتعاملات با CSS ، anime.js و segment.js

نحوه اضافه کردن عکسهای پیشرفته در Node و Express – با Vue ،GraphQL و Apollo Client یک وبلاگ ساخت

یک برنامه SSR با روتر Preact ، Unistore و Preact بسازید – ساخت برنامه های وب پیشرونده با Angular

اشکال زدایی JavaScript در تولید با نقشه های منبع – می توان با Koa برنامه “سلام جهانی” ساخت

ساختن یک برنامه با Node ، React ، Okta – مدیریت حالت فرم در React با Redux Form

نحوه تنظیم Laravel ، Nginx و MySQL – ارتقاء از AngularJS به Angular با ngUpgrade