码云 Egg.js教程 2021-12-17

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的终端中显示出结果。当然，你也可以试着让它显示在页面上。