如何在 EJS 中添加 SPA？

Question

我目前正在将用 VanillaJS 编写的电子商务网站从 SPA 转换为可以抓取的 Web 应用程序。为此，我将每个“屏幕”或“页面”转换为 ejs 文件。这对于关于、联系、产品页面等非常有用，但我希望用户仪表板成为一个 SPA，因为不需要抓取这些页面。

为此，我将“dashboard.js”设为“index.js”，将“dashboard.ejs”设为“index.html”。我希望通过它运行所有仪表板屏幕（用户、产品等）。我还希望所有这些屏幕都在我的主标签中生成，这可以从下面的代码中看出。

问题是出现错误“未捕获（承诺）TypeError：screen.render 不是路由器的函数（dashboard.js:17:35）”。

dashboard.js:17:35 是“main.innerHTML = await screen.render();”

我试过寻找答案，但搜索结果都与 React 有关，这对我没有帮助，因为这是 VanillaJS。

仪表板.js

import dashboardScreen from './dashboardScreen.js';

export const parseRequestUrl = () => {
    const address = document.location.href.slice(1).split('?')[0];
    const queryString = document.location.href.slice(1).split('?').length === 2 
        ? document.location.href.slice(1).split('?')[1]
        : '';
    const url =address.toLowerCase() || '/';
    const r = url.split('/');
    const q = queryString.split('=');
    return {
        resource: r[1], 
        id: r[2],
        verb: r[3],
        name: q[0],
        value: q[1]
    };
};

const routes = {
    '/users/dashboard': dashboardScreen,
}

const router = async () => {
    const request = parseRequestUrl();
    const parseUrl = 
        (request.resource ? `/${request.resource}`: '/') +
        (request.id ? '/:id': '') + 
        (request.verb ? `/${request.verb}` : '');
    const screen = routes[parseUrl] ? routes[parseUrl]: ''//Error404Screen;

    const main = document.querySelector('main');
    main.innerHTML = await screen.render();
    if(screen.after_render) await screen.after_render();
};

window.addEventListener('load', router);
window.addEventListener('hashchange', router);

dashboardScreen.js

import dashboardMenu from './dashboardMenu.js';

const dashboardScreen = {
    after_render: () => {
        
    },
    render: async () => {
        return `
            <section class="dashboard content">
                ${dashboardMenu.render({ selected: 'dashboard' })}
            </section>
        `;
    }
};

export default dashboardScreen;

仪表板菜单.js

const dashboardMenu = {
    render: (props) => {
        return `
            <button id="dashboard-popup" class="dashboard-popup">
                <i class="fa-solid fa-plus"></i>
            </button>
            <div id="dashboard-overlay" class="dashboard-overlay"></div>
            <div id="dashboard-menu" class="dashboard-menu">
                <ul>
                    <li class="${props.selected === 'dashboard' ? 'selected' : ''}">
                        <a href="/users/admin"><div><i class="fa-solid fa-chart-simple"></i></div>Overview</a>
                    </li> 
                    <li class="${props.selected === 'users' ? 'selected' : ''}">
                        <a href="/users/userlist"><div><i class="fa-solid fa-users"></i></div>Users</a>
                    </li> 
                    <li class="${props.selected === 'orders' ? 'selected' : ''}">
                        <a href="/users/orderlist"><div><i class="fa-solid fa-list-ul"></i></div>Orders</a>
                    </li> 
                    <li class="${props.selected === 'products' ? 'selected' : ''}">
                        <a href="/users/productlist"><div><i class="fa-solid fa-box"></i></div>Products</a>
                    </li> 
                    <li class="${props.selected === 'banners' ? 'selected' : ''}">
                        <a href="/users/bannerlist"><div><i class="fa-solid fa-images"></i></div>Banners</a>
                    </li> 
                </ul>
            </div>
        `;
    }
}

export default dashboardMenu;

userRouter.js

//admin dashboard
userRouter.get('/admin', async (req, res) => {
    res.render('users/admin', {
        //metadata
        meta_title: 'Admin Dashboard',
        meta_description: 'View and change your admin user information',
        meta_image: 'woman-sunglasses.jpg',
        meta_url: '/users/admin',
        //script
        script: '<script type="module" src="/scripts/dashboard/dashboard.js" defer></script>'
    });
});

Answer 1

不是解决您问题的直接答案，但我去过那里，做到了。

Google 绝不会喜欢你的 SPA。它只会显示一个页面，而不是像任何 SPA（React、Angular 等）那样以 js 页面形式存在的 1000 个页面。

只需将您的网站移植到Hugo

我知道这不是你想听到的答案，但这是我绝望了好几个星期后所做的。