JS Apps - Exercise: Routing Implement Furniture Store - Софтуерен университет

miriyan77 0 Точки

JS Apps - Exercise: Routing Implement Furniture Store

Опитвам се да реша задачата 'Implement Furniture Store' от упражнението след лекцията за раутинга в курса
по JS App като следвам решението на Виктор Костадинов от видеото от 16 март 2021г,
но моето решение се чупи още в самото начало и не мога да разбера защо.
Инсталирал съм локално live-server, както и библиотеката page.js.
Сървърът е пуснат и работи нормално на порт 8080. Архитектурата е в най-начална фаза
и е съвсем елементарна - един файл index.html, папка src, в която има файл app.js,
като и вмъкната папка views също с един файл - register.js.

В register.js има един ред код - export function registerPage(){ console.log('REGISTER'); }

В app.js -

import page from '../node_modules/page/page.mjs';
import { registerPage } from './views/register.js';
page('/register',registerPage);
page.start();

В head тага в index.html съм написал <script src="./src/app.js" type="module"></script>

Очаквах че като отида на http://localhost:8080/register ще намеря надписа REGISTER в конозолата,

но вместо това получих 404 (Not Found), а в самата уеб страница се изписа Cannot GET /register.

Ще съм благодарен, ако някой може да ми покаже грешката ми или поне на някакви насоки къде да я търся.

Тагове:

26/04/2022 04:01:15 JavaScript Applications

Axiomatik 2422 Точки

Make sure that both servers are running, Viktor's custom back-end server (port 3000 or 3030) and VS-Code live server (port 5500) I think was the setup for that video. Codewise, it seems correct what you have implemented, especialy when the homepage is showing up on localhost://8080.

This was my version of app.js from that lecture, hope it helps somehow:

import page from '../node_modules/page/page.mjs';
import { render } from '../node_modules/lit-html/lit-html.js';

import { logout } from './api/data.js';
import { createPage } from './views/create.js';
import { dashboardPage } from './views/dashboard.js';
import { detailsPage } from './views/details.js';
import { editPage } from './views/edit.js';
import { registerPage } from './views/register.js';
import { loginPage } from './views/login.js';
import { myPage } from './views/myFurniture.js';

const main = document.querySelector('.container');

// View Controller (module)
// fetch data
// interpolate template
// handle user input
// return content / render content

// returns same page
// page('/', dashboardPage);
page('/', decorateContext, dashboardPage);
// page('/dashboard', dashboardPage);

// dynamic route
page('/details/:id', decorateContext, detailsPage);
page('/create', decorateContext, createPage);
page('/edit/:id', decorateContext, editPage);
page('/register', decorateContext, registerPage);
page('/login', decorateContext, loginPage);
page('/my-furniture', decorateContext, myPage);

document.getElementById('logoutBtn').addEventListener('click', async () => {
    await logout();
    setUserNav();
    page.redirect('/');
});

setUserNav();
page.start();

function decorateContext(ctx, next) {
    ctx.render = (content) => render(content, main);
    ctx.setUserNav = setUserNav;
    next();
}

function setUserNav() {
    const userId = sessionStorage.getItem('userId');
    if (userId !== null) {
        document.getElementById('user').style.display = 'inline-block';
        document.getElementById('guest').style.display = 'none';
    } else {
        document.getElementById('user').style.display = 'none';
        document.getElementById('guest').style.display = 'inline-block';
    }
}

26/04/2022 09:47:42

miriyan77 0 Точки

Thank you for your swift answer, but I still can't make up my mind about all of this.
I forgot to mention that the rest service included in the resources to the task was
running, so that is not the problem. And I get it that it is not the code itself that makes
the trouble. It is something in the set up.

The general problem is perhaps that the server cannot run the function registerPage associated

with the path '/register' through the command 'page("/register", registerPage)',

because it cannot find the file register.js, where the function is,

and the reason for this is what I want to try to understand.

26/04/2022 11:10:18