Не получается перейти на другую страницу ejs

Не получается перейти на другую страницу ejs.

Index.ejs

<h1>Index page</h1>

<a href="/about" >About-1. Описание</a> </br>
<a href="http://localhost:3000/About/" >About-2. Описание</a>

В файл routes.js добавил.

.get('/about', (req, res) => {
       res.render('about');
      })

routes.js Полный код.

const multer = require('multer');
const rand = require('randomstring');

const filesStorage = multer.diskStorage({
  destination: (req, file, next) => {
    next(null, 'static/uploads/files');
  },
  filename: (req, file, next) => {
    const ext = file.originalname.split('.').pop();
    next(null, rand.generate({
      length: 32,
      charset: 'alphabetic'
    }) + '.' + ext);
  }
});
const filesUpload = new multer({
  storage: filesStorage
});


const site = {
  main: require('./controllers/main')
};

const cms = {
  articles: require('./controllers/cms/articles'),
  files: require('./controllers/cms/files'),
  lang: require('./controllers/cms/lang'),
  slideshow: require('./controllers/cms/slideshow')
};

module.exports = (app, passport) => {

  app
    .get('/', site.main.lang)
    .get('/video', site.main.video)
    .get('/slideshow', site.main.slideshow)
    .get('/:lang', site.main.index)
    
    /*articles*/        
    .get('/:lang/articles', site.main.index)
    .get('/:lang/articles/:id', site.main.article)

    .get('/:lang/panomuseum', site.main.panomuseum)
    .get('/:lang/panomuseum/2', site.main.panomuseum2)
    .get('/:lang/panotheatre', site.main.panotheatre)
    
    /*My*/
    // .get('/:lang/articles', site.main.index)
    .get('/Index', site.main.index)
     .get('/history', site.main.history)
    // .get('/history', (req, res) => {
    //   res.render('history');
    //  })
     .get('/about', (req, res) => {
       res.render('about');
      })
    ;


  app

    .get('/cms/lang', cms.lang.index)
    .post('/cms/lang', filesUpload.any(), cms.lang.save)

    .get('/cms/:lang/articles', cms.articles.index)
    .post('/cms/articles/saveOrder', cms.articles.saveOrder)

    .get('/cms/:lang/articles/add', cms.articles.add)
    .post('/cms/:lang/articles/add', filesUpload.any(), cms.articles.postAdd)

    .get('/cms/:lang/articles/:id/edit', cms.articles.edit)
    .post('/cms/:lang/articles/:id/edit', filesUpload.any(), cms.articles.postEdit)
    .get('/cms/:lang/articles/:id/delete', cms.articles.delete)

    .get('/cms/:lang/articles/:id', cms.articles.subArticle)
    .get('/cms/:lang/articles/add/:id', cms.articles.add)

    .post('/cms/files/delete', cms.files.delete)
    .post('/cms/files/saveFile', filesUpload.single('file'), cms.files.saveFile)
    .post('/cms/files/saveThumb', filesUpload.single('thumb'), cms.files.saveThumb)

    .get('/cms/slideshow', cms.slideshow.index)
    .post('/cms/slideshow/save', filesUpload.any(), cms.slideshow.save);

  return app;

Обновление-1 === === === ===
Моя цель: адаптировать существующий проект под свой проект.

controllers\main.js

const db = require('../db');
const fs = require('fs');
const path = require('path');
const config = require('../config.js');
class Main {

  async video(req, res, next) {
    const videoFolder = './static/video'
    let videos = []

    fs.readdirSync(videoFolder).forEach((file) => {
      let extension = path.extname(file)
      let filename = path.basename(file, extension)

      videos.push({
        file,
        filename: parseInt(filename),
      })
    })

    videos = videos.sort((a, b) => {
      return a.filename - b.filename
    })



    return res.render('video', {
      domain: config.express.domain,
      videos,
    })
  }

    async panomuseum(req, res) {
    const article = await db.article.getByID(req.params.lang);
    const sub = await db.article.getRoot(req.params.lang);
    const files = await db.files.getByOwnerId(req.params.lang);

    const lang = await db.lang.getById(req.params.lang);

    return res.render('panomuseum', {
      article,
      sub,
      files,
      lang
    });
  }

  async panomuseum2(req, res) {
    const article = await db.article.getByID(req.params.lang);
    const sub = await db.article.getRoot(req.params.lang);
    const files = await db.files.getByOwnerId(req.params.lang);

    const lang = await db.lang.getById(req.params.lang);

    return res.render('panomuseum2', {
      article,
      sub,
      files,
      lang
    });
  }

  async panotheatre(req, res) {
    const article = await db.article.getByID(req.params.lang);
    const sub = await db.article.getRoot(req.params.lang);
    const files = await db.files.getByOwnerId(req.params.lang);

    const lang = await db.lang.getById(req.params.lang);

    return res.render('panotheatre', {
      article,
      sub,
      files,
      lang
    });
  }

  async index(req, res) {
    const article = await db.article.getByID(req.params.lang);
    const sub = await db.article.getRoot(req.params.lang);
    const files = await db.files.getByOwnerId(req.params.lang);


    const lang = await db.lang.getById(req.params.lang);
    const timeout = await db.settings.getByID("timeout");
    const caption = await db.settings.getByID("caption");


    return res.render("index", {
      article,
      sub,
      files,
      lang,
      timeout,
      caption,
      domain: req.app.get("domain"),
    });
  }

  // async history(req, res) {
  //   // const article = await db.article.getByID(req.params.lang);
  //   // const sub = await db.article.getRoot(req.params.lang);
  //   // const files = await db.files.getByOwnerId(req.params.lang);


  //   // const lang = await db.lang.getById(req.params.lang);
  //   // const timeout = await db.settings.getByID("timeout");
  //   // const caption = await db.settings.getByID("caption");


  //   return res.render("history", {   
  //     domain: req.app.get("domain")
  //   });
  // }


  async history(req, res) {
    console.log('Request for history page recieved');
    return res.render("history");
  }

  async about(req, res) {
    console.log('Request for about page recieved');
    return res.render("about");
  }

  async menu(req, res) {
    return res.render("menu", {
      domain: req.app.get("domain"),
    });
  }

  async slideshow(req, res) {
    const slideshow = await db.files.getSlideshow();
    const timer = await db.settings.getByID("timer");

    return res.render("slideshow", {
      slideshow,
      timer,
      domain: req.app.get("domain"),
    });
  }

  async slide(req, res) {
    const slideshow = await db.files.getByID(req.params.id);
    const timer = await db.settings.getByID("timer");

    return res.render("slideshow", {
      slideshow: [slideshow],
      timer,
      domain: req.app.get("domain"),
    });
  }

  async article(req, res) {
    const article = await db.article.getByID(req.params.id);
    const sub = await db.article.getSub(req.params.id);
    const files = await db.files.getByOwnerId(req.params.id);
    const id = req.params.id;
    const lang = await db.lang.getById(req.params.lang);
    const timeout = await db.settings.getByID("timeout");
    const caption = await db.settings.getByID("caption");

    return res.render("index", {
      id,
      article,
      sub,
      files,
      lang,
      timeout,
      caption,
      domain: req.app.get("domain"),
    });
  }

  
  async lang(req, res) {
    const langs = await db.lang.getAll();

    let activeCount = 0;

    for (let lang of langs) {
      if (lang.value == 1) {
        activeCount++;
      }
    }

    if (activeCount == 0) {
      return res.redirect("/0");
    } else if (activeCount == 1) {
      for (let lang of langs) {
        if (lang.value == 1) {
          return res.redirect("/" + lang.id);
        }
      }
    }

    const timeout = await db.settings.getByID("timeout");

    return res.render("lang", {
      langs,
      timeout,
    });
  }

  async openSlide(req, res) {
    console.log("openSlide");
    let files = await db.files.getSyncSmartHome();

    parentIO.sockets.in("client").emit("goToUrl", {
      message: "/slide/" + files[parseInt(req.params.id)].id,
    });

    return res.json({
      success: true,
    });
  }

  async openSlideshow(req, res) {
    console.log("open slideshow");

    parentIO.sockets.in("client").emit("goToUrl", {
      message: "/slideshow",
    });

    return res.json({
      success: true,
    });
  }
}

module.exports = new Main();

Картинка

Привет. Не могу понять что именно не работает. Опиши пожалуйста ситуацию в формате

  • каким должно быть поведение (например, на странице /about нужно увидеть отрисованный шаблон файла about.ejs)
  • каким поведение является (вижу пустую страницу, или сетвер отвечает 404)
1 лайк

Ожидание.

  • нажал на ссылку на странице Index;
  • результат: появилась страница About;

Текущая ситуация.

  • нажал на ссылку на странице Index;
  • результат: страница не открывается ;
    Сейчас выясню детально… Какую ошибку выдает… Вроде 304…
    Выясняю…
    Это прнципиально?

views\about.ejs
<h1>About</h1>

Да. По тому что возвращает сервет можно предположить где нужны изменения. Например 404 означает что не описан обработчик для пути. Страница с текстом не из файла about означает что иной обработчик, не тот скриншот которого ты показал, создает ответ на запрос к серверу.

результат: страница не открывается ;

Не достаточно информации. Ты видишь “подвешенный” запрос который не завершился? Ты видишь что отдался какой-то HTML, но это не тот что ожидается? Ты видишь пустое тело страницы?


Проще всего если ты можешь запаковать файл и скинуть zip чтобы я запустил проект локально.

1 лайк

Ничего не происходит…
11.08.2022_13-11-07

Если ничего не происходит, скорее всего дело в том что не описан (ожидаемым для фреймверка образом) обработчик события этого пути.

Я посмотрел внимательно на набор путей.

 app
    .get('/', site.main.lang)
    .get('/video', site.main.video)
    .get('/slideshow', site.main.slideshow)
    .get('/:lang', site.main.index)
...

Маска пути /:lang является надмножеством путей куда входит /about. Чтобы твой /about обрабатывался не как путь типа /:lang, определение /about нужно поставить перед /:lang.

И поставь простейший обработчик, пока что без рендеринга шаблона чтобы не решать 2 задачи: факт вызова функции для пути и факт отрисовки.

 app
    .get('/', site.main.lang)
    .get('/video', site.main.video)
    .get('/slideshow', site.main.slideshow)
    .get('/about', function (req, res) {
      res.send('THIS IS ABOUT')
    })
    .get('/:lang', site.main.index)

попробуй такую конструцию. Ожидается текст THIS IS ABOUT для пути /about

1 лайк

Пока изучаю ваш ответ, добавлю примечание: lang - это индекс языка текста(русс, англ. и т.д.).
В результате в исходном проекте ссылка выглядит так: “localhost:3000/0/articles/14”.

Я хочу вставить свою страницу Index и потом от неё плясать по своим страницам…

Выполнил.

  • файл routes.js;
  • вставил код
.get('/about', function (req, res) {
      res.send('THIS IS ABOUT')
    })
  • в Опере ввёл _http://localhost:3000/about_
  • результат: в Опере на странице получаю сообщение: THIS IS ABOUT

11.08.2022_13-24-18

Фрагмент файл routes.js;

module.exports = (app, passport) => {

  app
    .get('/', site.main.lang)
    .get('/video', site.main.video)
    .get('/slideshow', site.main.slideshow)
    
    // My correct -- --- --- --- --- ---
    .get('/about', function (req, res) {
      res.send('THIS IS ABOUT')
    })
    // My correct ^^^ ^^^ ^^^ ^^^ ^^^ ^^^
    .get('/:lang', site.main.index)
    
    /*articles*/        
    .get('/:lang/articles', site.main.index)
    .get('/:lang/articles/:id', site.main.article)

    .get('/:lang/panomuseum', site.main.panomuseum)
    .get('/:lang/panomuseum/2', site.main.panomuseum2)
    .get('/:lang/panotheatre', site.main.panotheatre)

Какие дальнейшие действия?

Отлично. Значит мы нашли точку, отвечающую за результат высылаемый /about. Теперь пробуй вместо текста отдавать результат отрисовки about.ejs (тот самый метод render).

Работает…
Выполнил:

  • файл routes.js добавил:
  .get('/about', function (req, res) {
         res.render('about');
      })
  • в браузере перешёл по пути http://localhost:3000/about;
  • результат: на странице текст About.

Вопрос.
1. Как выполнить путь IndexPage-1Page-1-1?
Условно заменим About на Page.
Т.е.

  • с Index переходим на Page-1;
  • с Page-1 переходим на Page-1-1.

Файл routes.js фрагмент:

module.exports = (app, passport) => {

  app
    .get('/', site.main.lang)
    .get('/video', site.main.video)
    .get('/slideshow', site.main.slideshow)
    
    // My correct -- --- --- --- --- ---
    // .get('/about', function (req, res) {
    //   res.send('THIS IS ABOUT')
    // })
    // --- --- --- --- --- --- --- --- --
      .get('/about', function (req, res) {
         res.render('about');
      })

    // My correct ^^^ ^^^ ^^^ ^^^ ^^^ ^^^
    .get('/:lang', site.main.index)
    
    /*articles*/        
    .get('/:lang/articles', site.main.index)
    .get('/:lang/articles/:id', site.main.article)

    .get('/:lang/panomuseum', site.main.panomuseum)
    .get('/:lang/panomuseum/2', site.main.panomuseum2)
    .get('/:lang/panotheatre', site.main.panotheatre)
    
    /*My*/
    // .get('/:lang/articles', site.main.index)
    .get('/Index', site.main.index)
     .get('/history', site.main.history)
    // .get('/history', (req, res) => {
    //   res.render('history');
    //  })
    // .get('/about', (req, res) => {
    //   res.render('about');
    //  })
    // .get('/about', (req, res) => {
     //  res.render('about.ejs');
     // })
    ;

Опиши по каким путям какие результаты отдавать.

Например для структуры типа

Index
    - Page1
        - Page11

пути можно описать так:

.get('/page', function (req, res) {
    res.render('page');
})
.get('/page/1', function (req, res) {
    res.render('page-one');
})
.get('/page/1/1', function (req, res) {
    res.render('page-one-one');
})

Тут возникает задача следуюего уровня: как организовать шаблоны и описания путей так чтобы минимальным образом выразить желаемую структуру. Возможно ты захочешь описывать параметризированные пути и на основании параметра принимать решение какой из шаблонов отрисовывать. Всегда возможен вариант решения “влоб” где все возможные пути прописаны внучную и для каждого пути прописана отрисовка шаблона

1 лайк

Как правильно работать с кэшем барузера?
Пример:

  • я внёс изменения в код.
  • перезагрузил проект;
  • в браузере ввожу: http://localhost:3000/about;
  • результат: получаю старый вариант страницы;

По факту у меню такого не было…
Но для подстраховки я чищу кэш…
Это хлопотно…
Или нет необходимости чистить кэш?

Если только для разработки то есть такие варианты:

  • перегруждать страницу всегда без кеша. Посмотри сочетание клавиш для этого в том браузере что ты используешь

  • в хроме в dev tools есть чекбокс отключение кеша. Чтобы браузер запрашивал страницу без кеша, dev tools должны оставаться открытыми

  • можно в самом express для каждого запроса устанавливать такой заголовок который укажет браузеру не использовать кеширование. А код запускать только при локальной разработке. Отличие локальной среды и продакшен обычно делаются через переменные окружения. Примерно такая форма кода будет решением:

if (process.env.IS_DEVELOPMENT) {
  app.use((req, res, next) => {
    res.set('Cache-Control', 'no-store')
    next()
  })
}
1 лайк