Как грамотно и правильно настроить переходы по страницам на сайте. (Попытка номер 3)
Вот есть адрес:
http://localhost/
я хочу, чтобы, если путь начинается с /
, естественно после localhost, то у меня должна грузиться папка src и каким бы не был путь.
Например
http://localhost/home/vasy/lusy
http://localhost/home/?reg=base
http://localhost/hren/hren
А если путь начинается с > http://localhost/admin
Например
http://localhost/admin/home/vasy/lusy
http://localhost/admin/home/?reg=base
http://localhost/admin/hren/hren
то сервер должен грузить все что в папке admin
Что касается клиентской части переходов, думаю с этим я сам разберусь
Вот пишу вопрос и понимаю, что выгляжу глупо. Так как не понимаю самой сути проблемы
Сервер выглядит так, вариант 1
app.use('/', express.static(path.join(__dirname, `src`), { index: 'none' }));
app.use('/admin', express.static(path.join(__dirname, `admin`), { index: 'none' }));
app.get(`/*`, (req, res) => {
let mainHtmlPath;
if (req.url === '/admin/') {
mainHtmlPath = path.join(__dirname, `admin`, 'index.html');
} else {
mainHtmlPath = path.join(__dirname, `src`, 'index.html');
}
fs.readFile(mainHtmlPath, 'utf8', (err, html) => {
if (err) console.log(err, 'Ошибка')
res.send(html)
})
});
один из вопросов грамотно ли это?
второй вариант сервера
import adminRoutes from './routes/adminRoutes.js';
import clientRoutes from './routes/clientRoutes.js';
app.use('/', express.static(path.join(__dirname, `src`), { index: 'none' }));
app.use('/', clientRoutes);
app.use('/admin', express.static(path.join(__dirname, `admin`), { index: 'none' }));
app.use('/admin', adminRoutes);
Но второй вариант у меня почему-то не работает
вот файлы clientRoutes.js и adminRoutes.js выглядят так
import express from "express";
import path from "path";
import fs from "fs";
const router = express.Router();
const app = express()
const __dirname = path.resolve();
router.get('/admin/', (req, res) => {
console.log('============================', req.url);
fs.readFile(path.join(__dirname, `admin`, 'index.html'), 'utf8', (err, html) => {
if (err) console.log(err, 'Ошибка')
res.send(html)
})
});
export default router;
router.get('*', (req, res) => {
console.log('============================', req.url);
fs.readFile(path.join(__dirname, `src`, 'index.html'), 'utf8', (err, html) => {
if (err) console.log(err, 'Ошибка')
res.send(html)
})
});
export default router;
структура такова
есть папка с проектом.
в которой в корне две папки admin && src
в каждой папке admin && src свой главный index.html
и так же естественно свои стили картинки JS файлы и так далее...
на клиенте переходы по страницам реализованы так, и все работает (без папки admin)
import { httpAjax } from './ajax/index.js';
const mainMenu = document.querySelector('.main-menu')
const main = document.querySelector('main')
const footer = document.querySelector('footer')
const header = document.querySelector('header')
const upState = getPage => {
const linkName = getPage.page.substring(1);
if (!getPage) return
import(`../view/pages/${linkName}/index.js`);
httpAjax('GET', `./view/pages${getPage.page}/index.html`, 'text').then(elem => main.innerHTML = elem);
}
window.addEventListener('popstate', e => upState(e.state));
window.addEventListener("load", e => {
let state;
if (location.pathname === '/') {
state = { page: 'home' }
} else {
state = { page: location.pathname }
}
history.pushState(state, '', state.page)
upState(state);
});
mainMenu.addEventListener('click', e => {
let state;
if (e.target.tagName !== "A") return;
state = { page: e.target.getAttribute('href') }
history.pushState(state, '', state.page)
upState(state);
e.preventDefault();
})
Что касается админки, переходов нет. Мне пока главное разобраться с сервером
Какой из вариантов сервера грамотнее и лучше, если не один из этих, то подскажите как это все реализовать грамотно.
читаю документацию и не понимаю сути работы сервера.