Django со SPA?

Прежде всего, приветствую всех, я хочу преобразовать свой проект из MPA в SPA на Django, но не могу уловить структуру в голове. В области, которую вы видите на фото, я хочу перенаправить поле base.html (или любое другое поле, например login.html, register...) в поле app в index.html при первом входе пользователя на сайт. html...) в поле index.html при первом входе пользователя, но я хочу сделать так, чтобы это работало с помощью кнопок "вперед-назад" в браузере и ручного ввода url. Страницы .html возвращаются в ответ в виде строки на стороне django, и я получаю данные с помощью fetch. Моя проблема заключается в том, что если человек вручную вводит url на странице login.html, я перенаправляю login.html и передаю index.html. Если я сначала получаю index.html с помощью события load, а затем получаю login.html, я сразу же отображаю версию безss, а затем все исправляется. Поскольку событие beforeunload работает без получения index.html, DOM не может найти мое поле приложения, потому что я не перенаправил index.html. Если у вас есть конструктивное решение, я буду признателен, если вы им поделитесь.

Правила: Я должен сделать SPA на чистом ванильном javascript (мне не разрешено использовать фреймворки)

фото

Это мой пример маршрутизатора для спа:

window.addEventListener('load', () => { // *here my load event or beforeload event*
    loadPage(window.location.pathname);
    console.log("test: " + window.location.pathname);
});

// Capture all links
document.querySelectorAll('a[data-link]').forEach(link => {
    link.addEventListener('click', e => {
        e.preventDefault();
        const href = link.getAttribute('href');
        history.pushState({ path: href }, '', href);
        console.log("href: " + href);
        loadPage(href);
    });
});

// Listen to the popstate event
window.addEventListener('popstate', e => {
    const path = e.state.path;
    loadPage(path);
});

// Page loading function
function loadPage(path) {
    // Always load index.html first
    fetch('/')
        .then(response => response.text())
        .then(html => {
            if (path !== '/') {
                fetch(path)
                .then(response => response.text())
                .then(partHtml => {
                        document.documentElement.innerHTML = html;
                        document.querySelector('.app').innerHTML = partHtml;
                    })
                    .catch(error => console.error('Error fetching additional part:', error));
            }
            else {
                document.documentElement.innerHTML = html;
            }
        })
        .catch(error => console.error('Error fetching index.html:', error));
}

django пример html-возвращателя и результата для html:

@never_cache
def login_view(request):
    if request.method == 'POST':
        form = AuthenticationUserForm(request, request.POST)
        if form.is_valid():
            user = form.get_user()
            login(request, user)
            return redirect('dashboard')
    else:
        form = AuthenticationUserForm()
    return HttpResponse(render_to_string('new/login.html', {'form': form}))#render(request, 'login.html', {'form': form})

<div class="cursor">
  <div class="container">
    <div class="LoginArea" id="LoginArea">
      <form class="form" method="post">
        <a href="/" data-link
          ><button class="backbtn" type="button">
            <svg
              height="16"
              width="16"
              xmlns="http://www.w3.org/2000/svg"
              version="1.1"
              viewBox="0 0 1024 1024"
            >
              <path
                d="M874.690416 495.52477c0 11.2973-9.168824 20.466124-20.466124 20.466124l-604.773963 0 188.083679 188.083679c7.992021 7.992021 7.992021 20.947078 0 28.939099-4.001127 3.990894-9.240455 5.996574-14.46955 5.996574-5.239328 0-10.478655-1.995447-14.479783-5.996574l-223.00912-223.00912c-3.837398-3.837398-5.996574-9.046027-5.996574-14.46955 0-5.433756 2.159176-10.632151 5.996574-14.46955l223.019353-223.029586c7.992021-7.992021 20.957311-7.992021 28.949332 0 7.992021 8.002254 7.992021 20.957311 0 28.949332l-188.073446 188.073446 604.753497 0C865.521592 475.058646 874.690416 484.217237 874.690416 495.52477z"
              ></path>
            </svg></button
        ></a>
        <div class="title">
          Welcome,
          <span class="titlebottom">sign in to continue</span>
        </div>
        <div class="login-with">
          <div class="button-log"><b>42</b></div>
        </div>
        <input class="input" name="email" placeholder="Email" type="email" />
        <input
          class="input"
          name="password"
          placeholder="Password"
          type="password"
        />
        <div class="forgot-pass">
          <a href="/forgot-password" class="forgot-password-link"
            >Forgot Password?</a
          >
        </div>
        <a href="/dashboard" data-link
          ><button class="button-confirm">Let's go →</button></a
        >
        <a href="/signup" data-link
          ><button type="button" class="registerbtn">Join Us ✓</button></a
        >
      </form>
    </div>
  </div>
</div>

я хочу получить предложения по решению. не полный код, а только структуру.

Вернуться на верх