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的删除操作

再来看一下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的删除操作

Cookie的修改操作

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

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

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

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

Cookie的显示

「点点赞赏,手留余香」

0

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:
1. 本站所有文章教程及资源素材均来源于网络与用户分享或为本站原创,仅限用于学习和研究。
2. 如果内容损害你的权益请联系客服QQ:1642748312给予处理。
码云笔记 » 11.Egg.js教程-Cookie的增删改查

发表评论

IT互联网行业相关广告投放 更专业 更精准

立即查看 联系我们