11.Egg.js教程-Cookie的增删改查

EJS 模板就先学这么多，本文我们学习一下 Cookie 的相关知识。Cookie 的作用就是在浏览器客户端留下一些数据，比如我们经常使用的登录一个网站，下次再来的时候就不用再次登录了。但是 Cookie 是可以设置时间限制的，所以经常看到 7 天内不用重复登录，这样的信息。

对 Cookie 的简单了解

HTTP 请求是无状态的，但是在开发时，有些情况是需要知道请求的人是谁的。为了解决这个问题，HTTP 协议设计了一个特殊的请求头：Cookie。服务端可以通过响应头（set-cookie）将少量数据响应给客户端，浏览器会遵循协议将数据保留，并在下一次请求同一个服务的时候带上。

编写前基本准备

你初步了解 Cookie 后，我们来进行实际操作。

我们先来了解在 Egg 下，如何实现 Cookie 的增删改查，这也是最基本的操作。（提示，在实际开发中 Cookie 的操作应该放在服务端，而不是用客户端的 JS 操作。）

在讲解之前，我们还是要作一些提前的代码编写，比如设置好对应的按钮、Controller 方法和路由。

我们先来到上节的/app/view/mybj.html模板中，编写四个按钮，分别是增加 Cookie、删除 Cookie、修改 Cookie和查看 Cookie。

<div>
    <button onclick="add()">增加 Cookie</button>
    <button onclick="del()">删除 Cookie</button>
    <button onclick="editor()">修改 Cookie</button>
    <button onclick="show()">查看 Cookie</button>
</div>

写完按钮后，增加对应的 JavaScript 方法。

可以先写一个方法，然后其它的复制后进行修改。就可以快速写出这些代码了。

<script>
    function add(){
        fetch("/add",{
            method:"post",
            headers:{
                "Content-type":"application/json"
            }
        });
    }
    function del(){
        fetch("/del",{
            method:"post",
            headers:{
                "Content-type":"application/json"
            }
        });
    }
    function editor(){
        fetch("/editor",{
            method:"post",
            headers:{
                "Content-type":"application/json"
            }
        });
    }
    function show(){
        fetch("/show",{
            method:"post",
            headers:{
                "Content-type":"application/json"
            }
        });
    }
</script>

再去/app/controller/mybj.js文件下，增加这四个对应的方法。

async add(){
  const ctx = this.ctx
}
async del(){
  const ctx = this.ctx
}
async editor(){
  const ctx = this.ctx
}
async show(){
  const ctx = this.ctx
}

最后再到/app/router.js中配置对应的路由

router.post('/add', controller.mybj.add);
router.post('/del', controller.mybj.del);
router.post('/editor', controller.mybj.editor);
router.post('/show', controller.mybj.show);

作完上面这四步，我们的基本结构就有了，剩下就可以好好的学习 Cookie 的基本操作了。

Cookie 的增加操作

先到/app/controller/mybj.js文件的add()方法里编写代码。其实 egg 已经为我们准备好了操作 Cookie 的方法，直接使用即可。

async add(){
  const ctx = this.ctx
  ctx.cookies.set("user","mybj123.com")
  ctx.body = {
    status:200,
    data:'Cookie 添加成功'
  }
}

这部分代码写完后，就可以可以在终端中开启服务，输入npm run dev开启。

来到页面点击增加 Cookie按钮，然后按F12打开调试模式，找到Application，可以看到Cookie值已经被加入进来了。

Cookie 的删除操作

再来看一下 Cookie 的删除操作，再来到/app/controller/mybj.js文件。修改del()方法。

async del(){
  const ctx = this.ctx
  ctx.cookies.set("user",null)
  ctx.body = {
    status:200,
    data:'Cookie 删除成功'
  }
}

写好后，直接到浏览器中点击删除，就可以删除Cookie了。

Cookie 的修改操作

修改操作和删除和增加一样。直接修改值就可以了。

async editor(){
  const ctx = this.ctx
  ctx.cookies.set("user",'www.mybj123.com')
  ctx.body = {
    status:200,
    data:'Cookie 修改成功'
  }
}

然后我们到浏览器修改一下。

Cookie 的显示操作

显示 Cookie 要使用ctx.cookies.get()方法。

async show(){
  const ctx = this.ctx
  const user=ctx.cookies.get("user")
  console.log(user)
  ctx.body = {
    status:200,
    data:'Cookie 显示成功'
  }
}

点击按钮后，可以在 VSCode 的终端中显示出结果。当然，你也可以试着让它显示在页面上。

以上关于11.Egg.js教程-Cookie的增删改查的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。