zoukankan      html  css  js  c++  java
  • 用node.js express设置路径后 子路径下的页面访问静态资源路径出问题

    在routes/news_mian.js 设置了访问news_main.html 的路径 '/',通知设置一个访问news-page.html的子路径'/newspage'子路径。但是在访问loaclhost:3000/news/newspage时静态资源路径前多了一个/news导致不能找到静态资源

    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');
    //     });
    
    // 定义模板
    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);
    
    //静态文件目录,
    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;
        console.log("Example boiler listing at http://%s:%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:"锅炉新闻"
        });
    });
    **router.get('/newspage',function(req,res,next){
        res.render('news_page',{
            title:"新聞"
        });
    });**
    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>

    直接访问/news 没有问题,当访问/news/newspage时,访问静态资源的路径就错了

    解决方法:

     news-page.html 中加载 css 和 js 的标签使用了相对路径, 而不是绝对路径

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

    将相对路径改为绝对路径就可以了

    <link rel="stylesheet" type="text/css" href="/css/mui.min.css">
  • 相关阅读:
    代码编写原则
    换个角度看世界
    不使用nib 文件时,需要改变一个view 的大小时,需要为viewcontroller添加loadView方法
    建议:一般地,建议使用xcode 4.3开发app 而不是使用xcode4.5
    iOS 5解决Could not instantiate class named NSLayoutConstraint问题
    访问对象方法比较
    让一个view 或者控件不支持拖拽
    Java Map遍历方式的选择
    Java里多个Map的性能比较(TreeMap、HashMap、ConcurrentSkipListMap)
    java List集合记录 ArrayList和LinkedList的区别
  • 原文地址:https://www.cnblogs.com/gxp69/p/7281620.html
Copyright © 2011-2022 走看看