جاوا اسکریپت - هیوادار

پر کردن مودال با استفاده از اطلاعات فرم

نیاز بود که توی یک جدول اگر توی سلول یکی از ستونها کلیک کردیم یک مودال باز بشود. اما باید اطلاعاتی مربوط به آن ردیف به مودال پاس بدیم. متوجه شدم که این اطلاعات مربوط به ردیف مذکور را میتوان به عنوان یک پایامتر به سلول مربوطه اضافه کرد مثل:

<tbody>
	{% for f in feedbacks %}
		<tr>
			<td
				{% if f.active %} class="text-danger" {% endif %}
			>
				{% if f.active %} (فعال) {% endif %}v.{{f.feedback_version}}
			</td>
			<td>{{f.feedback_date}}</td>
			<td>{{f.user}}</td>
			<td>
				<div class="row">
					<div class="col-4">
						<a
							href="#"
							data-version="{{ f.feedback_version }}"
							main_points="{{ f.main_points|escape }}"
							secondary_points="{{ f.secondary_points|escape }}"
							guids="{{ f.guids_and_recommendations|escape }}"
							feedback_id="{{ f.id }}"
							feedback_version="{{ f.feedback_version }}"
							class="open-modal"
							style="cursor: pointer;"
						>
							جزئیات
						</a>
					</div>
				</div>
			</td>
		</tr>
	{% endfor %}
</tbody>

<tbody>

{% for f in feedbacks %}

<tr>

<td

{% if f.active %} class="text-danger" {% endif %}

{% if f.active %} (فعال) {% endif %}v.{{f.feedback_version}}

</td>

<td>{{f.feedback_date}}</td>

<td>

href="#"

data-version="{{ f.feedback_version }}"

main_points="{{ f.main_points|escape }}"

secondary_points="{{ f.secondary_points|escape }}"

guids="{{ f.guids_and_recommendations|escape }}"

feedback_id="{{ f.id }}"

feedback_version="{{ f.feedback_version }}"

class="open-modal"

style="cursor: pointer;"

جزئیات

</a>

</div>

</td>

</tr>

{% endfor %}

</tbody>

توی خود مودال یک سری فیلد خالی تعریف میکنیم که بعدا با جاواساکریپ اطلاعات پارامترها رو به اون اضافه کنیم:

{% block modals %}
    <div id="mapModal" class="modal fade" tabindex="-1" aria-labelledby="#mapModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="mapModalLabel">
                        جزئیات
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <p><strong>نسخه:</strong> <span id="modal-version"></span></p>
                    <p><strong>نکات اصلی:</strong> <span id="main_points"></span></p>
                    <p><strong>نکات فرعی:</strong> <span id="secondary_points"></span></p>
                    <p><strong>راهنماییها:</strong> <span id="guids"></span></p>
                </div>
                <div class="modal-footer">
                    <a href="#" data-bs-dismiss="modal">بستن</a>
                    <a id="activation_btn">
                        فعالسازی
                    </a>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block modals %}

جزئیات

</h5>

</div>

<p><strong>راهنماییها:</strong> <span id="guids"></span></p>

</div>

فعالسازی

</a>

</div>

{% endblock %}

الان توی اسکریپت زیر از هر ردیف سلول مربوطه رو بر اساس اسم کلاس میگیریم. بعد از اون سلول پارامترم مربوطه که دیتا بهش وصل شده رو بر میداریم بعد همون مقدارها رو به مودال میدیم:

<script>
	document.addEventListener('DOMContentLoaded', function () {
		document.querySelectorAll('.open-modal').forEach(function (cell) {
			cell.addEventListener('click', function () {
				const version = this.getAttribute('data-version');
				const main_points = this.getAttribute('main_points');
				const secondary_points = this.getAttribute('secondary_points');
				const guids = this.getAttribute('guids');
				const feedback_version = this.getAttribute('feedback_version');
				const feedback_id = this.getAttribute('feedback_id');

				document.getElementById('modal-version').textContent = version;
				document.getElementById('main_points').innerHTML  = main_points;
				document.getElementById('secondary_points').innerHTML  = secondary_points;
				document.getElementById('guids').innerHTML  = guids;
				document.getElementById('activation_btn').href = "/man/documents/versionactivate/"+feedback_id+"/"+feedback_version+"/";

				const mapModal = new bootstrap.Modal(document.getElementById('mapModal'));
				mapModal.show();
			});
		});
	});
</script>

document.addEventListener('DOMContentLoaded', function () {

document.querySelectorAll('.open-modal').forEach(function (cell) {

cell.addEventListener('click', function () {

const version = this.getAttribute('data-version');

const main_points = this.getAttribute('main_points');

const secondary_points = this.getAttribute('secondary_points');

const guids = this.getAttribute('guids');

const feedback_version = this.getAttribute('feedback_version');

const feedback_id = this.getAttribute('feedback_id');

document.getElementById('modal-version').textContent = version;

document.getElementById('main_points').innerHTML = main_points;

document.getElementById('secondary_points').innerHTML = secondary_points;

document.getElementById('guids').innerHTML = guids;

document.getElementById('activation_btn').href = "/man/documents/versionactivate/"+feedback_id+"/"+feedback_version+"/";

const mapModal = new bootstrap.Modal(document.getElementById('mapModal'));

mapModal.show();

});

</script>

باگ توی اضافه کردن 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 اجرا میشه.

اپراتورهای 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",

});

یک نمونه AJAX

در یک پروژه پرتکرار از AJAX استفاده کردیم و یه نمونه پیچیده شو اینجا میزارم.

function this_func(dep_pk) {
	var CardDivision = $("#card-division");
	var CardDep = $("#card-department");
	var DepTitle = $("#dep-title")
	var servicesList = $("#services-list");
	servicesList.empty();
	
	$.ajax({
		url: "{% url 'doc:get_svcs_per_dep' dep_id=0 %}".replace("0", dep_pk),
		method: "GET",
		success: function(data) {
			CardDivision.hide();
			CardDep.removeAttr("hidden");
			DepTitle.text(Object.keys(data)[0])
			var services = data[Object.keys(data)[0]];

			for (var id in services) {
				servicesList.append(`
					<div class="col-3 card card-catalog text-center m-2 p-3" >
						<a href="/doc/${services[id]}/">${services[id]}</a>
					</div>
				`);
			}
		},
		error: function(xhr, status, error) {
			console.error("An error occurred:", status, error);
		}
	});
}

function this_func(dep_pk) {

var CardDivision = $("#card-division");

var CardDep = $("#card-department");

var DepTitle = $("#dep-title")

var servicesList = $("#services-list");

servicesList.empty();

$.ajax({

url: "{% url 'doc:get_svcs_per_dep' dep_id=0 %}".replace("0", dep_pk),

method: "GET",

success: function(data) {

CardDivision.hide();

CardDep.removeAttr("hidden");

DepTitle.text(Object.keys(data)[0])

var services = data[Object.keys(data)[0]];

for (var id in services) {

servicesList.append(`

<a href="/doc/${services[id]}/">${services[id]}</a>

</div>

`);

}

error: function(xhr, status, error) {

console.error("An error occurred:", status, error);

}

});

}

در کد بالا route زیر که مربوط به یک view توی جنگو هست صدا زده شده

url: "{% url 'doc:get_svcs_per_dep' dep_id=0 %}".replace("0", dep_pk),

1	url: "{% url 'doc:get_svcs_per_dep' dep_id=0 %}".replace("0", dep_pk),

این یک route مربوطه به جنگو هست که یک پارامتر به اسم dep_id هم میگیره. قسمت جالب این کد اینه که همین کد جاوااسکریپت با django template engine داره render میشه و بعد توسط .replcace اصلاح میشه

نمونه route و view رو هم در ادامه میبینید.

@login_required
def get_services_per_dep(request, dep_id):

    return JsonResponse({'foo':'bar'})
	
	
path("get-svcs/<int:dep_id>/", views.get_services_per_dep, name="get_svcs_per_dep"),

@login_required

def get_services_per_dep(request, dep_id):

return JsonResponse({'foo':'bar'})

path("get-svcs/<int:dep_id>/", views.get_services_per_dep, name="get_svcs_per_dep"),