node express-托管静态资源(引入文件、图片等)

﹏ヽ暗。殇╰゛Y 2021-07-24 16:37 502阅读 0赞

托管静态资源
        在当前项目的文件中放置了图片、css文件和js文件
        如果使用ejs模板,那ejs文件中就不能额外link其他css文件
    
        在服务器监听之前注册托管中间件
        1、app.use(express.static('文件路径')); 
           app.use(express.static(path.join(__dirname, 'public'),{可选配置参数}));
           	 配置参数参考:http://expressjs.com/en/4x/api.html#express	
           
        	其中:
        		文件路径一般为"assets";项目启动后,http://127.0.0.1:3000/就代表该路径
        			http://127.0.0.1:3000/img/1.jpg; 就表示项目assets/img/1.jpg;可通过网络访问
        			
        2、再在ejs文件中<link rel="stylesheet" href="除掉存放文件的根目录即最外层的文件目录名后的路径"/>
        3、若要在link时添加最外层文件名，则需要一个虚拟目录,app.use('/文件路径',express.static('文件路径'))
        4、虚拟目录可任意更改，添加了虚拟目录，ejs文件引入时必须加上，虚拟目录设置为任意可防止服务器文件被攻击

代码示例:

在当前项目创建public文件夹->css文件夹->1.css文件，引入到页面

express框架

/** * Created by 10853 on 2020/2/1. */
    //引入模块
    var express=require('express');
    
    //创建服务器
    var app=express();
    //设置模板引擎
    app.set('View engine','ejs');
    app.set('views','./');
    //设置静态托管
    app.use(express.static('public'))
    
    //开启服务器并监听端口
    app.listen(3000,function(){ 
        console.log('this express server is running at http://127.0.0.1:3000 ');
    
    })
    
    //注册app中间件use,可处理get和post请求
    //app.use(function(req,res){ 
    // console.log('...')
    //})
    
    
    //注册get请求中间键
    app.get('/',function(req,res){ 
        //服务器回应数据
        res.render('1s.ejs',{ })
    })
    
    app.get('/movie',function(req,res){ 
        res.render('2s.ejs',{ name:'jeff',age:18,hobby:['sleep','eat','love']})
    })
    
    app.post('/submit',function(req,res){ 
        res.send('这是一个post请求的数据');
    })

ejs文件: