هیوادار -

مشکل ثبت مجدد فرم با رفرش

. توی کد زیر بعد از ثبت کردن فرم اگر صفحه را رفرش کنیم همان فرم دوباره ثبت میشود.

    if request.POST and 'comment_form_submit' in request.POST:
        feedback_comment_form = FeedbackCommentForm(request.POST)
        if feedback_comment_form.is_valid():
            body = feedback_comment_form.cleaned_data['body']
            DocumentComment.objects.create(
                document=d,
                user=request.user,
                body=body,
                comment_datetime=datetime.datetime.now()
            )

            context['comment_list'] = DocumentComment.objects.filter(document=d)
            DocumentLogger.log(request, d, 'ثبت کامنت ')
            messages.success(request, 'کامنت ثبت شد')

            return render(request, "man/documents/document-detail.html", context)

if request.POST and 'comment_form_submit' in request.POST:

feedback_comment_form = FeedbackCommentForm(request.POST)

if feedback_comment_form.is_valid():

body = feedback_comment_form.cleaned_data['body']

DocumentComment.objects.create(

document=d,

user=request.user,

body=body,

comment_datetime=datetime.datetime.now()

)

context['comment_list'] = DocumentComment.objects.filter(document=d)

DocumentLogger.log(request, d, 'ثبت کامنت ')

messages.success(request, 'کامنت ثبت شد')

return render(request, "man/documents/document-detail.html", context)

مشکل در فروم جنگو این جوری توضیح داده شده است:

یعنی بعد از POST موفق باید فرم را redirect کنیم که با این کار صفحه جدید با GET فراخوانی میشود در نتیجه اگر رفرش کنیم باز هم در خواست GET ارسال میگردد. یعنی کد را به شکل زیر تغییر میدهیم.

    if request.POST and 'comment_form_submit' in request.POST:
        feedback_comment_form = FeedbackCommentForm(request.POST)
        if feedback_comment_form.is_valid():
            body = feedback_comment_form.cleaned_data['body']
            DocumentComment.objects.create(
                document=d,
                user=request.user,
                body=body,
                comment_datetime=datetime.datetime.now()
            )

            context['comment_list'] = DocumentComment.objects.filter(document=d)
            DocumentLogger.log(request, d, 'ثبت کامنت ')
            messages.success(request, 'کامنت ثبت شد')
            url = reverse('man:management_documents_document_detail', args=[doc_id])
            return HttpResponseRedirect(url)

if request.POST and 'comment_form_submit' in request.POST:

feedback_comment_form = FeedbackCommentForm(request.POST)

if feedback_comment_form.is_valid():

body = feedback_comment_form.cleaned_data['body']

DocumentComment.objects.create(

document=d,

user=request.user,

body=body,

comment_datetime=datetime.datetime.now()

)

context['comment_list'] = DocumentComment.objects.filter(document=d)

DocumentLogger.log(request, d, 'ثبت کامنت ')

messages.success(request, 'کامنت ثبت شد')

url = reverse('man:management_documents_document_detail', args=[doc_id])

return HttpResponseRedirect(url)

serializer توی Django Rest Framework با دیتای ورودی چیکار میکنه؟

بهترین روش یادگیری یه فریم ورک خوندن کد خود فریم ورک و داکیومنت توی خود کد هست. برای serializer توی جنگو یک کامنت هست توی rest_framework/serializer.py که:

class BaseSerializer(Field):
    """
    The BaseSerializer class provides a minimal class which may be used
    for writing custom serializer implementations.

    Note that we strongly restrict the ordering of operations/properties
    that may be used on the serializer in order to enforce correct usage.

    In particular, if a `data=` argument is passed then:

    .is_valid() - Available.
    .initial_data - Available.
    .validated_data - Only available after calling `is_valid()`
    .errors - Only available after calling `is_valid()`
    .data - Only available after calling `is_valid()`

    If a `data=` argument is not passed then:

    .is_valid() - Not available.
    .initial_data - Not available.
    .validated_data - Not available.
    .errors - Not available.
    .data - Available.
    """

    def __init__(self, instance=None, data=empty, **kwargs):. . .

class BaseSerializer(Field):

"""

The BaseSerializer class provides a minimal class which may be used

for writing custom serializer implementations.

Note that we strongly restrict the ordering of operations/properties

that may be used on the serializer in order to enforce correct usage.

In particular, if a `data=` argument is passed then:

.is_valid() - Available.

.initial_data - Available.

.validated_data - Only available after calling `is_valid()`

.errors - Only available after calling `is_valid()`

.data - Only available after calling `is_valid()`

If a `data=` argument is not passed then:

.is_valid() - Not available.

.initial_data - Not available.

.validated_data - Not available.

.errors - Not available.

.data - Available.

"""

def __init__(self, instance=None, data=empty, **kwargs):. . .

خیلی خوب توضیح میده که اگر به serializer پارامتر data رو پاس داده باشیم تابع is_valid قابل استفاده است. و initial_data هم در دسترس هست که همون دیتایی هست که به API پاس داده شده. بعد از is_valid این داده ورودی به valid شده تبدیل میشه که میتونیم توی validated_data ببینیم. مثلا اگر Id به object مربوطه تبدیل میشه. و errors و data هم در دسترس خواهد بود. data درواقع اون رکورد جدیدی هست که ایجاد شده است.

مثال زیر رو ببینید:

    def create(self, request, *args, **kwargs):
        serializer = self.get_serializer(data=request.data)

        if not serializer.is_valid():
            return Response(
                {"errors": serializer.errors},
                status.HTTP_400_BAD_REQUEST
            )

        self.perform_create(serializer)

        print("-----------------------------")
        print(serializer.initial_data)
        print(serializer.validated_data)
        print(serializer.errors)
        print(serializer.data)

        create_update_related_chain(serializer.instance, False)
        return Response(serializer.data, status.HTTP_201_CREATED)

def create(self, request, *args, **kwargs):

serializer = self.get_serializer(data=request.data)

if not serializer.is_valid():

return Response(

{"errors": serializer.errors},

status.HTTP_400_BAD_REQUEST

)

self.perform_create(serializer)

print("-----------------------------")

print(serializer.initial_data)

print(serializer.validated_data)

print(serializer.errors)

print(serializer.data)

create_update_related_chain(serializer.instance, False)

return Response(serializer.data, status.HTTP_201_CREATED)

میبینید که بعد serializer.is_valid() مقادیر مربوطه رو پرینت کردم.

مثال خروجی هم در ادامه میبینید:

-----------------------------
{'provider': 159, 'consumer': 156, 'interface': 164, 'interface2': 161, 'protocol': 2, 'lt': 0, 'description': '', 'api': '', 'frequency': 0, 'ProviderVerified': False, 'ConsumerVerified': False, 'ESBVerified': False, 'api_gateway': False, 'active': False}
OrderedDict({'provider': <Service: Active probe(pixip)>, 'consumer': <Service: AOTA(hasin)>, 'interface': <Service: Behsa Proxy(external)>, 'interface2': <Service: GFEP(external)>, 'protocol': <Protocol: SFTP>, 'lt': 0, 'description': '', 'api': '', 'frequency': 0.0, 'ProviderVerified': False, 'ConsumerVerified': False, 'ESBVerified': False, 'api_gateway': False, 'active': False})
{}
{'id': 1303, 'provider': 159, 'provider_name': 'active_probe', 'consumer': 156, 'consumer_name': 'aota', 'interface': 164, 'interface_name': 'behsa_proxy', 'interface2': 161, 'interface2_name': 'gfep', 'protocol': 2, 'protocol_name': 'sftp', 'lt': 0, 'lt_display': 'COMMAND', 'description': '', 'api': '', 'frequency': 0.0, 'ProviderVerified': False, 'ConsumerVerified': False, 'ESBVerified': False, 'api_gateway': False, 'active': False}

-----------------------------

{'provider': 159, 'consumer': 156, 'interface': 164, 'interface2': 161, 'protocol': 2, 'lt': 0, 'description': '', 'api': '', 'frequency': 0, 'ProviderVerified': False, 'ConsumerVerified': False, 'ESBVerified': False, 'api_gateway': False, 'active': False}

OrderedDict({'provider': <Service: Active probe(pixip)>, 'consumer': <Service: AOTA(hasin)>, 'interface': <Service: Behsa Proxy(external)>, 'interface2': <Service: GFEP(external)>, 'protocol': <Protocol: SFTP>, 'lt': 0, 'description': '', 'api': '', 'frequency': 0.0, 'ProviderVerified': False, 'ConsumerVerified': False, 'ESBVerified': False, 'api_gateway': False, 'active': False})

{}

{'id': 1303, 'provider': 159, 'provider_name': 'active_probe', 'consumer': 156, 'consumer_name': 'aota', 'interface': 164, 'interface_name': 'behsa_proxy', 'interface2': 161, 'interface2_name': 'gfep', 'protocol': 2, 'protocol_name': 'sftp', 'lt': 0, 'lt_display': 'COMMAND', 'description': '', 'api': '', 'frequency': 0.0, 'ProviderVerified': False, 'ConsumerVerified': False, 'ESBVerified': False, 'api_gateway': False, 'active': False}

باگ توی اضافه کردن EventListener

در کد زیر باگ نهفته ای وجود دارد. یک دکمه حذف یک ردیف از جدول وجود دارد که وقتی روی آن کلیک میکنیم. eventListener به آن اضافه میشود. باگ به این شکل از که به هر تعداد کلیک بر روی این دکمه EventListener اضافه میشود. تا زمانی که صفحه رفرش شود. این باگ موجب میشود که در نهایت به تعداد eventListener ها درخواست به سرور ارسال میشود.

function deleteLink(link_id){
        console.log(link_id);
        const saveBtn = document.querySelector("#deleteModal .btn-primary");
        saveBtn.addEventListener('click', () => {
            deleteRow(link_id)
        })
    }

function deleteLink(link_id){

console.log(link_id);

const saveBtn = document.querySelector("#deleteModal .btn-primary");

saveBtn.addEventListener('click', () => {

deleteRow(link_id)

})

}

برای حل این مشکل باید هر وقت خواستیم EventListener اضافه کنیم، قبلی را پاک کنیم.

function deleteLink(link_id){
        const confirmBtn = document.querySelector("#deleteModal .btn-primary");
        const newConfirmBtn = confirmBtn.cloneNode(true);
        confirmBtn.parentNode.replaceChild(newConfirmBtn, confirmBtn);

        newConfirmBtn.addEventListener('click', () => {
            deleteRow(link_id);
        });
    }

function deleteLink(link_id){

const confirmBtn = document.querySelector("#deleteModal .btn-primary");

const newConfirmBtn = confirmBtn.cloneNode(true);

confirmBtn.parentNode.replaceChild(newConfirmBtn, confirmBtn);

newConfirmBtn.addEventListener('click', () => {

deleteRow(link_id);

});

}

چرا Promise و کاربردهاش

برای حل مشکل Asynchronous توی جاوااسکریپت. قبل از Promise برنامه نویس ها از callback استفاده میکردند که مشکلات زیادی داشته از جمله callback hell

getUserData(1, function(user) {
  getPostsByUser(user.id, function(posts) {
    getCommentsForPost(posts[0].id, function(comments) {
      console.log('Comments:', comments);
    }, function(error) {
      console.error('Error fetching comments:', error);
    });
  }, function(error) {
    console.error('Error fetching posts:', error);
  });
}, function(error) {
  console.error('Error fetching user:', error);
});

getUserData(1, function(user) {

getPostsByUser(user.id, function(posts) {

getCommentsForPost(posts[0].id, function(comments) {

console.log('Comments:', comments);

}, function(error) {

console.error('Error fetching comments:', error);

});

}, function(error) {

console.error('Error fetching posts:', error);

});

}, function(error) {

console.error('Error fetching user:', error);

});

کد بالا رو در نظرم بگیرید. توی هر مرحله باید callback تودرتو نوشت که باعث میشه. کد کثیف و اگر توی کد داخلی باگی پیدا بشه پیدا کردن و فیکس کردنش سخته.

توی Promise میتونیم به صورت زنجیروار همه عملیاتها رو مدیریت کرد بجای ساختار تودرتو. گارانتی شده که یا عملیات موفق میشه و تابع resolve اجرا میشه یا عملیات ناموفق خواهد بود و تابع reject اجرا میشه. یعنی به راحتی میتونی تمامی حالات رو با تابع then و catch مدیریت کنیم. حتی اگر عملیات به دلیل کندی زیاد طول بکشه.

مثال بالا رو میتونیم زنجیری مدیریت کنیم

getUser(1)
  .then(user => getPosts(user.id))
  .then(posts => getComments(posts[0].id))
  .then(comments => console.log('Comments:', comments))
  .catch(error => console.error('Error:', error));

getUser(1)

.then(user => getPosts(user.id))

.then(posts => getComments(posts[0].id))

.then(comments => console.log('Comments:', comments))

.catch(error => console.error('Error:', error));

یکی از کاربردهاش API call هست

fetch('https://jsonplaceholder.typicode.com/posts')
  .then(response => response.json())
  .then(data => console.log('Posts:', data))
  .catch(error => console.error('API Error:', error));

fetch('https://jsonplaceholder.typicode.com/posts')

.then(response => response.json())

.then(data => console.log('Posts:', data))

.catch(error => console.error('API Error:', error));

توی مثال زیر حتی چندین API با هم صدا زده میشه و میبینیم که چقدر خوانا و راحت نوشته میشه:

Promise.all([
  fetch('https://api.example.com/user/1'),
  fetch('https://api.example.com/posts'),
  fetch('https://api.example.com/comments')
])
  .then(responses => Promise.all(responses.map(res => res.json())))
  .then(data => {
    console.log('User:', data[0]);
    console.log('Posts:', data[1]);
    console.log('Comments:', data[2]);
  })
  .catch(error => console.error('Error in one of the requests:', error));

Promise.all([

fetch('https://api.example.com/user/1'),

fetch('https://api.example.com/posts'),

fetch('https://api.example.com/comments')

])

.then(responses => Promise.all(responses.map(res => res.json())))

.then(data => {

console.log('User:', data[0]);

console.log('Posts:', data[1]);

console.log('Comments:', data[2]);

})

.catch(error => console.error('Error in one of the requests:', error));

Promise چیه؟

Promise یک آبجکت هست که یک تسک Asynchronous رو توی جاواساکریپت اجرا می کنه. این آبجکت تو تابع داره resolve و reject که این آبجکت گارانتی میکنه که یکی از این دو قطعا اجرا میشه. بخاطر همین بهش میگن Promise. یعنی گارانتی میکنه که این تسک یا موفق میشه یا نه و خارج از این دو حالت نیست.

با صدا زدن یه Promise شما از دو تابع میتونید استفاده کنید. then و catch اولی وقتی که تسک موفق بشه خروجی رو میگیره و دومی وقتی که

const promise = new Promise((resolve, reject) => {
  console.log('Promise started...');
  setTimeout(() => {
    resolve('Task completed successfully!');
    // reject('Oops! Something went wrong.'); // Uncomment to test rejection
  }, 2000); // Simulates a 2-second delay
});

promise
  .then(result => console.log(result))  // Handles success
  .catch(error => console.error(error)); // Handles error

const promise = new Promise((resolve, reject) => {

console.log('Promise started...');

setTimeout(() => {

resolve('Task completed successfully!');

// reject('Oops! Something went wrong.'); // Uncomment to test rejection

}, 2000); // Simulates a 2-second delay

});

promise

.then(result => console.log(result)) // Handles success

.catch(error => console.error(error)); // Handles error

توی کد بالا موارد زیر اتفاق میوفته:

Promise درجا اجرا میشه
دو ثانیه برنامه می ایستد
resolve اجرا میشه
then اجرا میشه

اگر بجای resolve تابع reject رو اجرا کنیم. توی مرحله 4 بجای then تابع catch اجرا میشه.

بازنویسی serializer توی Django Rest Framework

توی serializer های DRF گاهی لازمه وقتی متد list() اون صدا زده میشه باید قبلش دیتایی که ازش گرفته میشه تغییری بدیم برای این کار از متد to_representaion استفاده میکنیم.

class LinkAPISerializer(serializers.ModelSerializer):
    provider_name = serializers.CharField(source='provider.name_fixed', read_only=True)
    consumer_name = serializers.CharField(source='consumer.name_fixed', read_only=True)
    interface_name = serializers.CharField(source='interface.name_fixed', read_only=True)
    interface2_name = serializers.CharField(source='interface2.name_fixed', read_only=True)
    protocol_name = serializers.CharField(source='protocol.name_fixed', read_only=True)
    lt_display = serializers.CharField(source='get_lt_display', read_only=True)

    class Meta:
        model = Link
        fields = [
            'id', 'provider', 'provider_name', 'consumer', 'consumer_name', 'interface', 'interface_name', 'interface2',
            'interface2_name', 'protocol', 'protocol_name', 'lt', 'lt_display', 'description', 'api', 'frequency',
            'ProviderVerified', 'ConsumerVerified', 'ESBVerified', 'api_gateway', 'active'
        ]

    def to_representation(self, instance):
        data = super().to_representation(instance)
        if data.get('description'):
            data['description'] = data['description'].strip('\"')

        return data

class LinkAPISerializer(serializers.ModelSerializer):

provider_name = serializers.CharField(source='provider.name_fixed', read_only=True)

consumer_name = serializers.CharField(source='consumer.name_fixed', read_only=True)

interface_name = serializers.CharField(source='interface.name_fixed', read_only=True)

interface2_name = serializers.CharField(source='interface2.name_fixed', read_only=True)

protocol_name = serializers.CharField(source='protocol.name_fixed', read_only=True)

lt_display = serializers.CharField(source='get_lt_display', read_only=True)

class Meta:

model = Link

fields = [

'id', 'provider', 'provider_name', 'consumer', 'consumer_name', 'interface', 'interface_name', 'interface2',

'interface2_name', 'protocol', 'protocol_name', 'lt', 'lt_display', 'description', 'api', 'frequency',

'ProviderVerified', 'ConsumerVerified', 'ESBVerified', 'api_gateway', 'active'

]

def to_representation(self, instance):

data = super().to_representation(instance)

if data.get('description'):

data['description'] = data['description'].strip('\"')

return data

یک باگ ساده و یک راه حل ساده تر

کد زیر یک باگ جالب داره.

    def clean(self):
        cleaned_data = super().clean()

        if cleaned_data.get("branch").name != 'ETC' and cleaned_data.get("office") and cleaned_data.get("branch"):
            if cleaned_data.get("office").branch != cleaned_data.get("branch"):
                raise ValidationError("این اداره به اداره کل انتخاب شده مرتبط نیست")

        return cleaned_data

def clean(self):

cleaned_data = super().clean()

if cleaned_data.get("branch").name != 'ETC' and cleaned_data.get("office") and cleaned_data.get("branch"):

if cleaned_data.get("office").branch != cleaned_data.get("branch"):

raise ValidationError("این اداره به اداره کل انتخاب شده مرتبط نیست")

return cleaned_data

در صورتی که branch انتخاب نشده باشه cleaned_data.get(“branch”).name این اکسپشن میده. برای اصلاحش باید یه تغییر ساده بدیم

    def clean(self):
        cleaned_data = super().clean()

        if cleaned_data.get("branch").name != 'ETC' and cleaned_data.get("office") and cleaned_data.get("branch"):
            if cleaned_data.get("office").branch != cleaned_data.get("branch"):
                raise ValidationError("این اداره به اداره کل انتخاب شده مرتبط نیست")

        return cleaned_data

def clean(self):

cleaned_data = super().clean()

if cleaned_data.get("branch").name != 'ETC' and cleaned_data.get("office") and cleaned_data.get("branch"):

if cleaned_data.get("office").branch != cleaned_data.get("branch"):

raise ValidationError("این اداره به اداره کل انتخاب شده مرتبط نیست")

return cleaned_data

پشتیبانگیری از دیتابیس توی داکر

از دیتابیس MySQL بک آپ گرفتیم به صورتی که این دیتابیس توی یک Docker Container بود که دیتای اون مپ شده به آدرس زیر. بنابراین با بک آپ از /var/lib/mysql تمامی دیتای این دیتابیس بک آپ گرفته میشه و میتونیم بعدا برداریم.

علاوه بر اون با استفاده از mysqldump هم از کل دیتابیس ها یک بک آپ توی فرمت sql گرفتم برای محکم کاری.

از طرفی این دیتا مربوط به یک وب اپلیکیشن هست که فایلهای آپلود شده و آواتارها و هر چیزی که آدرسش توی دیتابیس هست اما خود فایل توی /project/uploads ذخیره شده. بنابراین باید از این مسیر هم یک بک آپ بگیریم. نتیجه شد اسکریپت زیر:

timestamp=$(date +"%Y%m%d_%H%M%S")
backup_dir="/home/backup"


filesystem_filename_backup="mysql_data_backup_FS_${timestamp}.tar.gz"
mysql_backup_file="mysql_data_backup_DUMP_${timestamp}.sql"
media_backup_file="media_files_backup_${timestamp}.tar.gz"


docker run --rm --volumes-from mysql -v ${backup_dir}/:/backup busybox tar cvfz backup/${filesystem_filename_backup} --directory=/var/lib/mysql .

if [ $? -eq 0 ]; then
        echo "backup successfull: ${filesystem_filename_backup}"
else
        echo "Error"
        exit 1
fi

echo "Starting MySQL backup..."

docker exec mysql mysqldump -u root -p'yourpassword' --all-databases > ${backup_dir}/${mysql_backup_file}

if [ $? -eq 0 ]; then
    echo "MySQL backup successful: ${mysql_backup_file}"
else
    echo "MySQL backup failed!"
    exit 1
fi

echo "Starting media files backup..."

tar -czf ${backup_dir}/${media_backup_file} -C /project/uploads .


if [ $? -eq 0 ]; then
    echo "Media files backup successful: ${media_backup_file}"
else
    echo "Media files backup failed!"
    exit 1
fi

echo "Backup completed successfully!"

timestamp=$(date +"%Y%m%d_%H%M%S")

backup_dir="/home/backup"

filesystem_filename_backup="mysql_data_backup_FS_${timestamp}.tar.gz"

mysql_backup_file="mysql_data_backup_DUMP_${timestamp}.sql"

media_backup_file="media_files_backup_${timestamp}.tar.gz"

docker run --rm --volumes-from mysql -v ${backup_dir}/:/backup busybox tar cvfz backup/${filesystem_filename_backup} --directory=/var/lib/mysql .

if [ $? -eq 0 ]; then

echo "backup successfull: ${filesystem_filename_backup}"

else

echo "Error"

exit 1

echo "Starting MySQL backup..."

docker exec mysql mysqldump -u root -p'yourpassword' --all-databases > ${backup_dir}/${mysql_backup_file}

if [ $? -eq 0 ]; then

echo "MySQL backup successful: ${mysql_backup_file}"

else

echo "MySQL backup failed!"

exit 1

echo "Starting media files backup..."

tar -czf ${backup_dir}/${media_backup_file} -C /project/uploads .

if [ $? -eq 0 ]; then

echo "Media files backup successful: ${media_backup_file}"

else

echo "Media files backup failed!"

exit 1

echo "Backup completed successfully!"

اپراتورهای rest و spread در جاوااسکریپت

امروز با کد زیر مواجه شدم و فهمش برام جذاب بود:

const maxColumns = Math.max(...jsonData.map((row) => row.length));

1	const maxColumns = Math.max(...jsonData.map((row) => row.length));

با مفهوم اپراتورهای rest و spread آشنا شدم که از ES6 به بعد به جاوااسکریپت اضافه شدن.

کد زیر رو در نظر بگیرید»

jsonData = [
    ["A", "B", "C"],    // Row 1: 3 columns
    ["D", "E"],         // Row 2: 2 columns
    ["F", "G", "H", "I"] // Row 3: 4 columns
];

jsonData.map((row) => row.length);

jsonData = [

["A", "B", "C"], // Row 1: 3 columns

["D", "E"], // Row 2: 2 columns

["F", "G", "H", "I"] // Row 3: 4 columns

];

jsonData.map((row) => row.length);

خروجی کد بالا [3, 2, 4] است. حالا کد زیر رو ببینید:

Math.max(...jsonData.map((row)=>row.length));

1	Math.max(...jsonData.map((row)=>row.length));

حالا خروجی کد بالا برابر با 4 است. یعنی اپراتور spread که همون … است آرایه رو به المانهای توش پخش میکنه و نتیجه اون اپراتور میشه Math.max(4,2,3)

اپراتور دیگه ای وجود داره به اسم rest:

const [first, ...rest] = [1, 2, 3, 4];
console.log(first); // 1
console.log(rest); // [2, 3, 4]

const [first, ...rest] = [1, 2, 3, 4];

console.log(first); // 1

console.log(rest); // [2, 3, 4]

یک سری مثال در جاوااسکریپت و react

// Array
const arr = [1, 2, 3];
console.log(...arr); // Outputs: 1 2 3

const newArr = [...arr, 4, 5]; // Combines arrays
console.log(newArr); // [1, 2, 3, 4, 5]

// Function arguments
Math.max(...[10, 20, 30]); // Equivalent to Math.max(10, 20, 30)

// Object
const obj = { a: 1, b: 2 };
const newObj = { ...obj, c: 3 }; // Merges objects
console.log(newObj); // { a: 1, b: 2, c: 3 }


// Function parameters
function sum(...nums) { // Gathers arguments into an array
    return nums.reduce((total, num) => total + num, 0);
}
console.log(sum(1, 2, 3)); // 6

// Destructuring
const [first, ...rest] = [1, 2, 3, 4];
console.log(first); // 1
console.log(rest); // [2, 3, 4]


// Passing props
const Component = (props) => <div {...props}>Hello!</div>;

// Updating state
const newState = { ...oldState, updatedKey: newValue };

// Cloning arrays/objects
const newArray = [...oldArray, newItem];
const newObject = { ...oldObject, newKey: newValue };

// Array

const arr = [1, 2, 3];

console.log(...arr); // Outputs: 1 2 3

const newArr = [...arr, 4, 5]; // Combines arrays

console.log(newArr); // [1, 2, 3, 4, 5]

// Function arguments

Math.max(...[10, 20, 30]); // Equivalent to Math.max(10, 20, 30)

// Object

const obj = { a: 1, b: 2 };

const newObj = { ...obj, c: 3 }; // Merges objects

console.log(newObj); // { a: 1, b: 2, c: 3 }

// Function parameters

function sum(...nums) { // Gathers arguments into an array

return nums.reduce((total, num) => total + num, 0);

}

console.log(sum(1, 2, 3)); // 6

// Destructuring

const [first, ...rest] = [1, 2, 3, 4];

console.log(first); // 1

console.log(rest); // [2, 3, 4]

// Passing props

const Component = (props) => <div {...props}>Hello!</div>;

// Updating state

const newState = { ...oldState, updatedKey: newValue };

// Cloning arrays/objects

const newArray = [...oldArray, newItem];

const newObject = { ...oldObject, newKey: newValue };

دپلوی React و Django در Docker

برای دپلوی کردن یک پروژه Django و React در داکر با کانفیگ زیر کار میکنیم:

version: '3.8'

services:
  frontend:
    build:
      context: ./frontend/shift-front
    container_name: frontend
    ports:
      - "3000:3000"
    volumes:
      - ./frontend/shift-front:/app  
      - ./frontend/shift-front/dist:/usr/share/nginx/html  
    environment:
      - NODE_ENV=production
    networks:
      - app-network
  backend:
    build:
      context: ./backend/shiftsupervisor
    container_name: backend
    ports:
      - "8000:8000"
    volumes:
      - ./backend/shiftsupervisor:/app  
      - ./backend/shiftsupervisor/static:/app/static  
      - ./backend/shiftsupervisor/staticfiles:/app/staticfiles  
      - ./backend/shiftsupervisor/media:/app/media  
    environment:
      - DEBUG=1
    networks:
      - app-network
  nginx:
    build:
        context: ./frontend/shift-front 
        dockerfile: Dockerfile
    container_name: nginx
    ports:
      - "80:80"
    volumes:
      - ./nginx/nginx.conf:/etc/nginx/nginx.conf:ro
      - ./backend/shiftsupervisor/static:/static
      - ./backend/shiftsupervisor/media:/media
    depends_on:
      - frontend
      - backend
    networks:
      - app-network
networks:
  app-network:
    driver: bridge

version: '3.8'

services:

frontend:

build:

context: ./frontend/shift-front

container_name: frontend

ports:

- "3000:3000"

volumes:

- ./frontend/shift-front:/app

- ./frontend/shift-front/dist:/usr/share/nginx/html

environment:

- NODE_ENV=production

networks:

- app-network

backend:

build:

context: ./backend/shiftsupervisor

container_name: backend

ports:

- "8000:8000"

volumes:

- ./backend/shiftsupervisor:/app

- ./backend/shiftsupervisor/static:/app/static

- ./backend/shiftsupervisor/staticfiles:/app/staticfiles

- ./backend/shiftsupervisor/media:/app/media

environment:

- DEBUG=1

networks:

- app-network

nginx:

build:

context: ./frontend/shift-front

dockerfile: Dockerfile

container_name: nginx

ports:

- "80:80"

volumes:

- ./nginx/nginx.conf:/etc/nginx/nginx.conf:ro

- ./backend/shiftsupervisor/static:/static

- ./backend/shiftsupervisor/media:/media

depends_on:

- frontend

- backend

networks:

- app-network

networks:

app-network:

driver: bridge

فایل بالا compose است و فایل backend/shiftsupervisor/Dockerfile

FROM python:3.12-slim

WORKDIR /app

RUN apt-get update && apt-get install -y --no-install-recommends \
    build-essential \
    libsqlite3-dev \
    && apt-get clean && rm -rf /var/lib/apt/lists/*

COPY requirements.txt .
RUN pip install --no-cache-dir -r requirements.txt

COPY . .


RUN python manage.py collectstatic --noinput

EXPOSE 8000
CMD ["python", "manage.py", "runserver", "0.0.0.0:8000"]

FROM python:3.12-slim

WORKDIR /app

RUN apt-get update && apt-get install -y --no-install-recommends \

build-essential \

libsqlite3-dev \

&& apt-get clean && rm -rf /var/lib/apt/lists/*

COPY requirements.txt .

RUN pip install --no-cache-dir -r requirements.txt

COPY . .

RUN python manage.py collectstatic --noinput

EXPOSE 8000

CMD ["python", "manage.py", "runserver", "0.0.0.0:8000"]

و فایل frontend/shiftfront/Dockerfile

FROM node:20 AS builder

WORKDIR /app

COPY package*.json ./
RUN npm install
COPY . ./
RUN npm run build

FROM nginx:latest
COPY --from=builder /app/dist /usr/share/nginx/html


EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

FROM node:20 AS builder

WORKDIR /app

COPY package*.json ./

RUN npm install

COPY . ./

RUN npm run build

FROM nginx:latest

COPY --from=builder /app/dist /usr/share/nginx/html

EXPOSE 80

CMD ["nginx", "-g", "daemon off;"]

و فایل nginx/nginx.conf

worker_processes 1;

events {
    worker_connections 1024;
}

http {
    include /etc/nginx/mime.types;
    default_type application/octet-stream;

    sendfile on;

    server {
        listen 80;

        location / {
            root /usr/share/nginx/html;
            index index.html;
            try_files $uri /index.html;
        }

        # Proxy requests to the backend
        location /api/ {
            rewrite ^/api/(.*)$ /$1 break;  # Remove /api/ before forwarding
            proxy_pass http://backend:8000;
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        }

        location /static/ {
            alias /static/;
        }

        location /staticfiles/ {
            alias /app/staticfiles/;
        }

        location /media/ {
            alias /media/;
        }
    }
}

worker_processes 1;

events {

worker_connections 1024;

}

http {

include /etc/nginx/mime.types;

default_type application/octet-stream;

sendfile on;

server {

listen 80;

location / {

root /usr/share/nginx/html;

index index.html;

try_files $uri /index.html;

}

# Proxy requests to the backend

location /api/ {

rewrite ^/api/(.*)$ /$1 break; # Remove /api/ before forwarding

proxy_pass http://backend:8000;

proxy_set_header Host $host;

proxy_set_header X-Real-IP $remote_addr;

proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

}

location /static/ {

alias /static/;

}

location /staticfiles/ {

alias /app/staticfiles/;

}

location /media/ {

alias /media/;

}

در ضمن تنظیمات مهم برای settings.py

ALLOWED_HOSTS = [
    '*',  # Allow all hosts for testing purposes
    'localhost',
    '127.0.0.1',
    'frontend',
    'backend',
    'nginx',
]


MIDDLEWARE = [
    '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',
    'corsheaders.middleware.CorsMiddleware',
]

REST_FRAMEWORK = {
    'DEFAULT_PERMISSION_CLASSES': [
        'rest_framework.permissions.AllowAny',
    ]
}

CORS_ORIGIN_ALLOW_ALL = True

# If you want specific origins:
CORS_ALLOWED_ORIGINS = [
    'http://localhost:5173',
    'http://frontend:3000',
    'http://127.0.0.1:8000',
]


CORS_ALLOW_ALL_ORIGINS = True
CORS_ALLOW_CREDENTIALS = True

CSRF_TRUSTED_ORIGINS = [
    'http://localhost:5173',
    'http://127.0.0.1:8000',
    'http://frontend:3000',  # Container name and port
    'http://backend:8000',
    'http://nginx',
]


ROOT_URLCONF = 'config.urls'

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [BASE_DIR / 'templates'],  
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

WSGI_APPLICATION = 'config.wsgi.application'


DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.sqlite3',
        'NAME': BASE_DIR / 'db.sqlite3',
    }
}

ALLOWED_HOSTS = [

'*', # Allow all hosts for testing purposes

'localhost',

'127.0.0.1',

'frontend',

'backend',

'nginx',

]

MIDDLEWARE = [

'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',

'corsheaders.middleware.CorsMiddleware',

]

REST_FRAMEWORK = {

'DEFAULT_PERMISSION_CLASSES': [

'rest_framework.permissions.AllowAny',

]

}

CORS_ORIGIN_ALLOW_ALL = True

# If you want specific origins:

CORS_ALLOWED_ORIGINS = [

'http://localhost:5173',

'http://frontend:3000',

'http://127.0.0.1:8000',

]

CORS_ALLOW_ALL_ORIGINS = True

CORS_ALLOW_CREDENTIALS = True

CSRF_TRUSTED_ORIGINS = [

'http://localhost:5173',

'http://127.0.0.1:8000',

'http://frontend:3000', # Container name and port

'http://backend:8000',

'http://nginx',

]

ROOT_URLCONF = 'config.urls'

TEMPLATES = [

{

'BACKEND': 'django.template.backends.django.DjangoTemplates',

'DIRS': [BASE_DIR / 'templates'],

'APP_DIRS': True,

'OPTIONS': {

'context_processors': [

'django.template.context_processors.debug',

'django.template.context_processors.request',

'django.contrib.auth.context_processors.auth',

'django.contrib.messages.context_processors.messages',

]

WSGI_APPLICATION = 'config.wsgi.application'

DATABASES = {

'default': {

'ENGINE': 'django.db.backends.sqlite3',

'NAME': BASE_DIR / 'db.sqlite3',

}

فایل axiosConfig.jsx

import axios from "axios";

const getCSRFToken = () => {
  let csrfToken = null;
  const csrfCookie = document.cookie
    .split("; ")
    .find((row) => row.startsWith("csrftoken="));
  if (csrfCookie) {
    csrfToken = csrfCookie.split("=")[1];
  }

  return csrfToken;
};

const api = axios.create({
  baseURL: "/api/", // Add /api/ prefix
  headers: {
    "X-CSRFToken": getCSRFToken(),
    "Content-Type": "application/json",
  },
  withCredentials: true,
});

export default api;

import axios from "axios";

const getCSRFToken = () => {

let csrfToken = null;

const csrfCookie = document.cookie

.split("; ")

.find((row) => row.startsWith("csrftoken="));

if (csrfCookie) {

csrfToken = csrfCookie.split("=")[1];

}

return csrfToken;

};

const api = axios.create({

baseURL: "/api/", // Add /api/ prefix

headers: {

"X-CSRFToken": getCSRFToken(),

"Content-Type": "application/json",

withCredentials: true,

});

export default api;

و فایل vite.config.js

export default defineConfig({
  plugins: [react()],
  build: {
    outDir: "dist", 
  },
});

export default defineConfig({

plugins: [react()],

build: {

outDir: "dist",

});