cookie的安装和使用

最新推荐文章于 2024-04-08 07:58:13 发布

金小鱼学前端

最新推荐文章于 2024-04-08 07:58:13 发布

阅读量808

点赞数 1

文章标签：服务器前端 javascript

本文链接：https://blog.csdn.net/m0_64846104/article/details/128709453

版权

- cookie是HTTP协议中用来解决无状态问题的技术

- cookie的本质就是一个头

- 服务器以响应头的形式将cookie发送给客户端

客户端收到以后会将其存储，并在下次向服务器发送请求时将其传回

这样服务器就可以根据cookie来识别出客户端了

需要安装中间件来使得express可以解析cookie

1.安装cookie-parser

yarn add cookie-parser

2.引入

const cookieParser = require("cookie-parser")

3.设置为中间件

app.use(cookieParser())

indexjs

const express = require("express")
const path = require("path")
const app = express()
const fs = require("fs/promises")
//配置请求体解析
app.use(express.urlencoded({ extendeds: true }))
//引用解析cookie的中间件
const cookieparser = require("cookie-parser")
//将ejs设置为默认的模板引擎
app.set("view engine", "ejs")
//配置模板路径,无论控制台还是f5均可
app.set("views", path.resolve(__dirname, "views"))

//设置解析cookie的中间件
app.use(cookieparser())

//导入user组件
const userlist = require("./routes/user")
const usergoods = require("./routes/goods")
const { join } = require("path")
//让user组件里面的路由生效
//防止路由地址一样，前面加了一个前缀；例如/list/lists
// app.use( "/list",userlist)
// app.use("/good",usergoods)


app.use("/students", require("./routes/student"))


// //router是express中的一个对象
// const router = express.Router()
// console.log(router)
// //router其实是一个中间件，可以在这个中间件里面绑定各种路由和其他中间件
// router.get("/hello", (req, res) => {
//     res.send("nihao")
// })
// 让router中间件生效
// app.use(router)

//但麻烦可以定义到外面


//进入网站看到的第一个页面
app.get("/", (req, res) => {
    res.render("login")
})

//设置cookie
app.get("/get-cookie", (req, res) => {
    //给客户端发一个cookie
    res.cookie("username", "jin")
    res.send("cook已经发送")
})

//看看cookie是否可以使用
app.get("/hello", (req, res) => {
    //服务器读取cookies，但需要安装express的中间件解析cookies
    //安装cookie-parser  yarn add cookie-parser
        // req.cookies 用来读取客户端发回的cookie

    console.log(req.cookies);
    res.send("这是hello路由")
})

app.post("/login", (req, res) => {
    const { username, password } = req.body

    if (username === "jin" && password === "123") {
        // res.send("登陆成功")
        //直接能看到表单
        //将用户名放入到cookie里面
        //res.cookie("username", username)
        res.redirect("/students/lists")
    } else {
        res.send("用户名或密码错误")
    }
})

//配置服务器
app.listen(3000, () => {
    console.log("服务器已经启动");
})

//配置错误路由
app.use((req, res) => {
    res.status(404)
    res.send("<h1>你访问的网页已经被吃掉了</h1>")
})

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录页面</title>
</head>

<body>
    <h1>你好</h1>
    <hr>

    <form action="/login" method="post">
        <div><input type="text" name="username" placeholder="用户名"></div>
        <div><input type="text" name="password" placeholder="密码"></div>
        <div><input type="submit" value="登录"></div>
    </form>




</body>

</html>

student.js

const express = require("express")

//创建router对象
const router = express.Router()
let studentsarr = require("../data/students.json")
const path = require("path")
const fs = require("fs/promises")
const { nextTick } = require("process")

//学生列表的路由
router.get("/lists", (req, res) => {
    if (req.cookies.username) {
        res.render("student", { stus: studentsarr })
    } else {
        res.redirect("/")
    }

    // res.send("这里是student")
})

//添加学生的路由
router.post("/addstudent", (req, res, next) => {
    //生成一个id.at（-1）是数组最后一个
    const id = studentsarr.at(-1) ? studentsarr.at(-1).id + 1 : 1
    //获取用户输入的信息
    const newuser = {
        id,
        name: req.body.name,
        age: req.body.age,
        gender: req.body.gender,
        address: req.body.address,
    }
    studentsarr.push(newuser)
    //处理交给后续路由
    next()
})
//删除学生的路由
router.get("/delete", (req, res, next) => {
    //获取学生学号
    const id = req.query.id
    console.log(id);
    studentsarr = studentsarr.filter((stu) => stu.id != id)//filter它用于把Array的某些元素过滤掉，然后返回剩下的元素。
    next()
})
//修改学生的路由
router.post("/update-student", (req, res, next) => {
    //const id = req.query.id
    const { id, name, age, gender, address } = req.body
    // 修改学生信息
    // 根据学生id获取学生对象
    const student = studentsarr.find((item) => item.id == id)
    student.name = name
    student.age = +age
    student.gender = gender
    student.address = address
    next()

})
router.get("/to-update", (req, res) => {
    const id = +req.query.id//+是做一个类型转化，转换为字符串，才能对比
    // //获取学生id
    const student = studentsarr.find((item) => item.id === id)
    res.render("update", { student })

    //console.log(student)
})



router.use((req, res) => {
    //将数据写入到json文件中
    fs.writeFile(
        path.resolve(__dirname, "../data/students.json"),
        JSON.stringify(studentsarr)//
    ).then(() => {

        // 4. 返回响应
        // res.send("添加成功！")
        // 直接在添加路由中渲染ejs，会面临表单重复提交的问题
        res.redirect("/students/lists")
    }).catch(() => {
        res.send("输入错误")
    })
    //console.log(newuser);
})
//将router暴露在模块外
module.exports = router

金小鱼学前端

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
cookie的安装和使用

客户端收到以后会将其存储，并在下次向服务器发送请求时将其传回。这样服务器就可以根据cookie来识别出客户端了。- 服务器以响应头的形式将cookie发送给客户端。- cookie是HTTP协议中用来解决无状态问题的技术。- cookie的本质就是一个头。1.安装cookie-parser。需要安装中间件来使得express可以解析cookie。
复制链接

扫一扫