思考:我们在网址栏输入一个url,实际是下载了这个url下的html文件。这个html文件外联了一个main.css文件,这样的话,我们岂不是加载不出来样式?
解决办法:办法就是把那个main.css文件下载下来呗!
下载文件的办法:
在app.js文件中添加如下一行代码:
///设置静态文件托管
//当用户访问的url以/public开始,那么直接返回对应 __dirname + '/public' 下的文件
app.use('/public',express.static(__dirname + '/public'));
// 用户发送http请求 => url => 解析路由 => 找到匹配规则 => 执行指定的绑定函数,返回对应内容至客户端
//如果访问的路由中有public开头的,那么访问的是静态文件,直接读取指定目录下的文件返回给用户
//动态请求的过程: 处理业务逻辑,加载模版,解析模版 => 返回数据给用户
在views/index.html文件下的 <head></head> 中添加:
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css'>
注:当用户请求index.html文件时 解析代码到此处时,发送请求获取main.css文件
在public文件夹下创建main.css文件
main.css:
body{
background: #00bfff;
}