静态资源访问

静态资源：css,js,html,img这些都是静态资源。

比如说页面中访问一张服务器上的图片：

• http://localhost:3000/img/s1.jpg
• http://localhost:3000/img/s2.jpg
• http://localhost:3000/css/index.css

express 实现静态资源访问：
1.将所有的静态资源放在一个文件夹下。
2. path.join(__dirname,“public”) 获取静态资源文件夹的绝对路径。
3. express.static() 设置静态资源路径
4. app.use() 使用中间件进行处理

express本质就是一堆中间件。

---

app.js如下：

const express = require("express");
const path = require("path");
let app = express();                        // 实例化对象
app.use(express.static(path.join(__dirname,"public")))
app.get("/",(req,res)=>{         //请求和响应数据
  // 将一个文件作为响应内容返回给浏览器端。
  res.sendFile(path.join(__dirname,"./public/page/index.html"));
})

// --------------未使用静态资源目录时的写法--------------
// app.get("/img/s1.jpg",(req,res)=>{
//   res.sendFile(path.join(__dirname,"./img/s1.jpg"));
// })

app.listen(3000,()=>{
  console.log("server is running");
})

（1）将所有的静态资源放在public文件夹里

（2）app.js是入口文件

（3）文件列表分布如下：

• 在index.html中要链接index.css,使用link外联式。
• 另外，照片的src路径要书写正确。（…/ 跳到本级文件夹的上一级文件夹，在这里跳到了‘03静态资源访问’文件夹下。./在当前文件夹下）
  
  最终效果图如下：
  

补充：
(1)text-align 居中对齐，只针对行内元素，给块元素设置无效。
(2)用margin： 0 auto; 给块元素设置居中。
(3)行内元素若要垂直竖向排列，给行内元素设置display:block。