After setting the path with node.js express, there is a problem in accessing the static resource path on the page under the sub-path.

  node.js, question

I set the path’/’to access news_main.html in routes/news_mian.js, and notify to set a sub-path’/newspaper’ to access news-page.html. However, when accessing loaclhost:3000/news/newspage, there is one more /news before the static resource path, resulting in the static resource cannot be found.

clipboard.png

directory structure

clipboard.png

app.js---
 var express=require('express');
 var app=express();
 var path=require('path');
 var http=require('http')
 **var news_main=require('./routes/news_main');  **//
 var pullrefresh_sub=require('./routes/pullrefresh_sub');
 var boiler_alarm=require('./routes/boiler_alarm')
 //var news_page=require('./routes/news_page');
 // app.get('/',function(req,res){
 //         res.render('news_main');
 //     });
 
 //Define Template
 app.set('views',path.join(__dirname,'views'));
 app.engine('html',require('ejs').renderFile);
 app.set('view engine','html');
 
 **app.use('/news',news_main);  **
 app.use('/pull',pullrefresh_sub);
 app.use('/alarm',boiler_alarm);
 
 //static file directory,
 app.use(express.static(path.join(__dirname,'public')));
 
 // var server=http.createServer()
 var server=app.listen(3000,function(){
 var host=server.address().address;
 var port=server.address().port;
 Log ("exampleboilerlisting at http://percent s: percent s",host,port);
 
 });
 
 
 news_main.js
 
 var express=require('express');
 var router=express.Router();
 
 router.get('/',function(req,res,next){
 res.render('news_main',{
 Title: "boiler news"
 });
 });
 **router.get('/newspage',function(req,res,next){
 res.render('news_page',{
 Title: "News"
 });
 });  **
 module.exports=router;

HTML——

<link rel=”stylesheet” href=”/css/boilerNews/newspage.css” />
<script src=”/js/mui.min.js”></script>
<script src=”/libs/vue/vue.js”></script>
Direct access/newsNo problem when visiting/news/newspageHowever, the path to access the static resources is wrong. How do you deal with setting sub-paths under the main path?

app.use('/news',news_main);

You used routing middleware in this location, and then you went to news_main.js

router.get('/newspage',function(req,res,next){
 res.render('news_page',{
 Title: "News"
 });
 });

The address visited at this time is

It's been added to the /news.
 
 /news/newspage

Do you use relative paths instead of absolute paths to load css and js tags in your news-page.html?
For example: are you like this

<link rel="stylesheet" type="text/css" href="css/mui.min.css">

If so, it is sufficient to change the relative path to the absolute path.

<link rel="stylesheet" type="text/css" href="/css/mui.min.css">

You put the following line

//static file directory,
 app.use(express.static(path.join(__dirname,'public')));

Put it on

**app.use('/news',news_main);  **
 app.use('/pull',pullrefresh_sub);
 app.use('/alarm',boiler_alarm);

Try the upper line of these!