express静态文件

最新推荐文章于 2024-05-21 20:32:47 发布

小庄hua

最新推荐文章于 2024-05-21 20:32:47 发布

阅读量695

点赞数

分类专栏： express 文章标签： nodejs

本文链接：https://blog.csdn.net/qq_41370549/article/details/108018822

版权

express 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

express静态文件

当页面要展现图片的时候，需要每一个图片用路由去监听才会在页面上得到效果，例如

index.js

const express = require("express");
const path = require("path");

let app = express();
app.listen(4567);

app.get("/",(req,res)=>{
    res.sendFile(path.join(__dirname,"./public/index.html"));
});

app.get("/img/1.jpg",(req,res)=>{
    res.sendFile(path.join(__dirname,"./public/img/1.jpg"))
});
app.get("/img/5.png",(req,res)=>{
    res.sendFile(path.join(__dirname,"./public/img/5.png"))
});

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<img src="/img/5.png" alt="">
<img src="/img/gg/1.jpg" alt="">
<img src="/img/2.png" alt="">
<img src="/img/3.png" alt="">
<img src="/img/4.jpg" alt="">
</body>
</html>

静态文件

node.js会开放一个静态文件夹，当服务器去访问的时候，只要你能读取到的文件夹的内容，都可以直接被访问

设置静态文件目录

根路由默认访问index.html：

index.html在静态资源根目录
名字必须是index.html

index.js

const express = require("express");

let app = express();
app.listen(4567);

app.use(express.static("./public"));//设置静态文件夹

public/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<img src="/img/5.png" alt="">
<img src="/img/gg/1.jpg" alt="">
<img src="/img/2.png" alt="">
<img src="/img/3.png" alt="">
<img src="/img/4.jpg" alt="">
</body>
</html>

express之cookie的使用

一、关于Cookie

在我们关闭一个登录过的网址并重新打开它后，我们的登录信息依然没有丢失；当我们浏览了商品后历史记录里出现了我们点击过的商品；当我们推回到首页后，推荐商品也为我们选出了相似物品；事实上当我们有过此类操作后，浏览器会将我们的操作信息保存到cookie上面。阿进而言之，cookie就是储存在用户本地终端上的数据。

Cookie的特点

`1.cookie保存在浏览器本地，只要不过期关闭浏览器也会存在。``2.正常情况下cookie不加密，用户可轻松看到``3.用户可以删除或者禁用cookie``4.cookie可以被篡改``5.cookie可用于攻击``6.cookie存储量很小，大小一般是4k``7.发送请求自动带上登录信息`

一、关于Cookie

Cookie的特点

1.cookie保存在浏览器本地，只要不过期关闭浏览器也会存在。
2.正常情况下cookie不加密，用户可轻松看到
3.用户可以删除或者禁用cookie
4.cookie可以被篡改
5.cookie可用于攻击
6.cookie存储量很小，大小一般是4k
7.发送请求自动带上登录信息`

二、Cookie的安装及使用

来源： https://www.cnblogs.com/lpxj-blog/p/10720528.html

1.安装

`cnpm install cookie-parser --save`

2.引入

`const cookieParser=require(``"cookie-parser"``);`

3.设置中间件

`app.use(cookieParser());`

4.设置cookie

res.cookie(``"name"``,``'zhangsan'``,{maxAge: 900000, httpOnly: ``true``});
//res.cookie(名称,值,{配置信息})`

关于设置cookie的参数说明：

domain: 域名
name=value：键值对，可以设置要保存的 Key/Value，注意这里的 name 不能和其他属性项的名字一样
Expires：过期时间（秒），在设置的某个时间点后该 Cookie 就会失效，如 expires=Wednesday, 09-Nov-99 23:12:40 GMT。
maxAge：最大失效时间（毫秒），设置在多少后失效。
secure：当 secure 值为 true时，cookie 在 HTTP 中是无效，在 HTTPS 中才有效。
Path：表示在那个路由下可以访问到cookie。
httpOnly：是微软对 COOKIE 做的扩展。如果在 COOKIE 中设置了“httpOnly”属性，则通过程序（JS 脚本、applet 等）将无法读取到COOKIE 信息，防止 XSS 攻击的产生。
singed：表示是否签名cookie, 设为``true会对这个 cookie 签名，这样就需要用 res.signedCookies 而不是 res.cookies 访问它。被篡改的签名 cookie 会被服务器拒绝，并且 cookie 值会重置为它的原始值。

5.获取cookie

`req.cookie.name;`

案例

test2.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script>

    let Cookie = {
        set(obj,day=7){
            let date = new Date(new Date().getTime() + day*24*60*60*1000).toUTCString();
            for (let [k,v] of Object.entries(obj)){
                document.cookie = `${k}=${v}; expires=${date}`;
            }
        },
        get(key){
            new RegExp("(^|\\s)"+key+"=(.+?)(;|$)").test(document.cookie);
            return RegExp.$2;
        },
        remove(key){
            this.set({[key]:""},-1);
        }
    };

    Cookie.set({name:"afei"},7);

    $(document).click(function(){
        $.ajax({
            type : "GET",
            url : "/api",
            data : {a:10,b:20},
            success(msg){
                console.log(msg);
            }
        });
    });

</script>
</body>
</html>

index5.js

const express = require("express");
const cookieParser = require("cookie-parser");
const path = require("path");

let app = express();
app.listen(4567);

app.use(express.json());
app.use(express.urlencoded({extended:true}));
/*处理cookie的中间件*/
app.use(cookieParser());

app.get("/",(req,res)=>{
    console.log(req.app ===app && res.app === app);


    res
        // .status(200)
        .sendFile(path.join(__dirname,"./public/test2.html"));
});

app.get("/api",(req,res)=>{
    console.log(req.query);

    /*获取前端传过来的cookie*/
    console.log(req.cookies);

    /*给前端设置cookie*/
    res.cookie("age","18",{'expires':new Date(Date.now() + 90000)});
3
    res.send("789456123");
});

前端可以设置cookie大部分情况下用后端设置

express api熟悉

req.app=app && res.app=app

资源： https://www.zybuluo.com/XiangZhou/note/208532

路由参数

app.get("/article/:gd",(req,res)=>{
    /*对应位置的路由数据会存储到req.params*/
    console.log(req.params.gd);

    /*通过数据库找到对应的gd数据*/
    // data
    // res.render();

});

小庄hua

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
express静态文件

express静态文件当页面要展现图片的时候，需要每一个图片用路由去监听才会在页面上得到效果，例如index.jsconst express = require("express");const path = require("path");let app = express();app.listen(4567);app.get("/",(req,res)=>{ res.sendFile(path.join(__dirname,"./public/index.html"));
复制链接

扫一扫