1.在app.js文件中设置静态文件托管
/*应用程序入口文件*/ /*加载express模块*/ var express = require('express'); /*加载模板处理模块*/ var swig = require('swig'); /*创建app应用*/ var app = express(); /*设置静态文件托管*/ /*当用户访问的url以/public开始,那么直接返回public目录下的文件*/ app.use('/public',express.static(__dirname + '/public')); /*配置应用模板 第一个参数:html为当前应用所使用的模板引擎 第二个参数:用于解析处理模板内容的方法*/ app.engine('html',swig.renderFile); /*设置模板文件存放目录 第一个参数:必须是views 第二个参数:目录路径*/ app.set('views','./views'); /*注册所使用的模板引擎(默认引擎) 第一个参数:必须是view engine 第二个参数:app.engine的第一个参数*/ app.set('view engine','html'); /*在开发过程中,取消模板缓存*/ swig.setDefaults({cache: false}); /*首页*/ app.get('/',function (req,res,next) { /*读取view目录下的指定文件,解析并返回给客户端*/ res.render('index'); }); /*监听http请求*/ app.listen(8099);
2.在public目录下创建main.css文件
body{ background: blue; }
3.在index.html文件中引用main.css
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>首页</title> <link rel="stylesheet" type="text/css" href="/public/main.css"> </head> <body> <h1>欢迎!!!</h1> </body> </html>
效果