Web实验课程报告

一、实验内容

    本学期web实验课我做了两方面的内容，一方面是有机农场管理系统的继续完善，另一方面是系统模块功能的展，实现利用Cookie的登录注册功能。

    仔细研究了去年的web项目，在有机农场管理系统的基础上更改了原系统的CSS和HTML等，使界面更加美观。又在原系统基础上扩展了登录功能，实现了登录注册功能。并且利用了cookie识别用户的身份。

二、实验目的

   掌握常见网页设计工具的使用，熟悉web站点的开发工具环境和使用方法。掌握建立一个web的基本过程，掌握网站设计的基本技术与技巧。

    根据要求，给出网页设计方案，可以按照要求，利用合适的图文素材设计符合要求的网页设计作品。注意版面布局、色彩搭配等，网站链接自然，顺畅方便。了解和熟悉网页式设计的基础知识和实现技巧。

    熟练掌握html，CSS，JavaScript，node.js等的操作和使用。增强动手实践能力，进一步加强自身综合素质。逐渐培养做一个完整项目的能力。

 

三、实验原理

1、什么是Cookie

Cookie 是服务器保存在浏览器的一小段文本信息。浏览器每次向服务器发出请求，就会自动附上这段信息。

 

2、Cookie的作用

（1）Cookie 主要用来分辨两个请求是否来自同一个浏览器

（2）用来保存一些状态信息，例如：

a.对话（session）管理：保存登录、购物车等需要记录的信息。

b.个性化：保存用户的偏好，比如网页的字体大小、背景色等等。

c.追踪：记录和分析用户行为。

不推荐使用Cookie作为客户端存储，原因：

a.它的容量很小（4KB）。

b.缺乏数据操作接口。

c.而且会影响性能。

（3）使用Cookie一般有两个作用。第一个作用是识别用户身份，第二个作用是记录历史。

 

3、Cookie的组成

Cookie 包含以下几方面的信息:

a. Cookie 的名字。

b. Cookie 的值。（真正的数据写在这里面）(a、b两点是键值对 )

c. 到期时间。

d. 所属域名。（默认是当前域名）

e. 生效的路径。（默认是当前网址）(c/d/e是cookie的属性)

 

4、Cookies作用范围

浏览器的同源政策规定，两个网址只要域名相同和端口相同，就可以共享 Cookie。注意，这里不要求协议相同。也就是说，http://example.com设置的 Cookie，可以被https://example.com读取。

同源限制方面内容可以参考网页：

https://wangdoc.com/javascript/bom/same-origin.html

 

四、实验过程

1、HTTP 协议中的Cookie

HTTP 回应：Cookie 的生成(服务器端生成cookies)

服务器如果希望在浏览器保存 Cookie，就要在 HTTP 回应的头信息里面，放置一个Set-Cookie字段:

Set-Cookie:foo=bar

上面的代码会在浏览器保存一个名为foo的 Cookie，它的值为bar。

设置的格式为:<键(名)>=<值>。

 

HTTP 回应可以包含多个Set-Cookie字段，即在浏览器生成多个 Cookie。下面是一个例子:

HTTP/1.0 200 OK

Content-type: text/html

Set-Cookie: yummy_cookie=choco

Set-Cookie: tasty_cookie=strawberry

[page content]

 

除了 Cookie 的值，Set-Cookie字段还可以附加 Cookie 的属性。一个Set-Cookie字段里面，可以同时包括多个属性，没有次序的要求。下面是设置一个Cookie的例子:除了名与它的值,还包含Domain属性Secure属性和HttpPnly属性:

Set-Cookie:<cookie-name>=<cookie-value>;

Domain=<domain-value>;Secure; HttpOnly

 

除了键=值来设置cookie的名字和值之外,还可以设置属性。

a. Expires，Max-Age用来设置cookie持续时间。

b. Domain，Path设置发送http请求时那些域名和路径需要附带这个Cookie。

c. Secure属性指定浏览器只有在加密协议 HTTPS 下才能发送。

d. HttpOnly属性指定该 Cookie 无法通过 JavaScript 脚本拿到。

具体用法可以参考网上的很多博客，这里不再赘述。

 

HTTP 请求：Cookie 的发送(浏览器发送Cookie)

浏览器向服务器发送 HTTP 请求时，每个请求都会带上相应的 Cookie。也就是说，把服务器早前保存在浏览器的这段信息，再发回服务器。这时要使用 HTTP 头信息的Cookie字段。

Cookie: foo=bar

上面代码会向服务器发送名为foo的 Cookie，值为bar。

 

Cookie字段可以包含多个 Cookie，使用分号（;）分隔。

Cookie: name=value; name2=value2; name3=value3

 

下面是一个Http请求的例子。

GET /sample_page.html HTTP/1.1

Host: www.example.org

Cookie: yummy_cookie=choco; tasty_cookie=strawberry

 

服务器收到浏览器发来的 Cookie 时，有两点是无法知道的(因为这些Cookie的属性只保存在浏览器上)。

a.Cookie 的各种属性，比如何时过期。

b.哪个域名设置的 Cookie，到底是一级域名设的，还是某一个二级域名设的。

 

2、document.cookie读写当前网页的Cookie

读Cookie

读取的时候，它会返回当前网页的所有 Cookie，前提是该 Cookie 不能有HTTPOnly属性。

document.cookie // "foo=bar;baz=bar"

写Coookie

document.cookie属性是可写的，可以通过它为当前网站添加 Cookie。等号两边不能有空格

document.cookie = 'fontSize=14';

但是，document.cookie一次只能写入一个 Cookie，而且写入并不是覆盖，而是添加。

document.cookie = 'test1=hello';

document.cookie = 'test2=world';

document.cookie

// test1=hello;test2=world

 

写入 Cookie 的时候，可以一起写入 Cookie 的属性。

document.cookie = "foo=bar; expires=Fri, 31 Dec 2020 23:59:59 GMT";

各个属性的写入注意点如下：

a. path属性必须为绝对路径，默认为当前路径。

b. domain属性值必须是当前发送 Cookie 的域名的一部分。比如，当前域名是example.com，就不能将其设为foo.com。该属性默认为当前的一级域名（不含二级域名）。

c. max-age属性的值为秒数。

d. expires属性的值为 UTC 格式，可以使用 Date.prototype.toUTCString ()进行日期格式转换。

document. cookie写入 Cookie 的例子如下。

Document.cookie = 'fontSize=14; '

        + 'expires=' + someDate.toGMTString() + '; '

 + 'path=/subdirectory; '

 + 'domain=*.example.com';

Cookie 的属性一旦设置完成，就没有办法读取这些属性的值。

 

3、Cookie 的删除

删除一个现存 Cookie 的唯一方法，是设置它的expires属性为一个过去的日期。

document.cookie = 'fontSize=;expires=Thu, 01-Jan-1970 00:00:01 GMT';

上面代码中，名为fontSize的 Cookie 的值为空，过期时间设为1970年1月1月零点，就等同于删除了这个 Cookie。

五、实验内容

1、利用cookie实现登录注册

这个项目是一个cookie的简单例子, 有以下结构:

    index.html: 首页

    sign_in.html: 登录页面

    sign_up.html: 注册页面

    server.js: 服务器

    db/users: 模拟数据库, 实质上是一个数组, 每个数组项是一个对象, 表示一个用户。

 

    程序运行需要使用node作为服务器。node server.js 8888。在浏览器中输入localhost:8888, 就可以看到index.html页面。

    在地址栏输入localhost:8888/sign_up, 会进入注册页面, 即sign_up.html。输入要注册的邮箱即密码, 若已注册过则显示已注册, 没有注册则会注册成功。

    在地址栏输入localhost:8888/sign_in, 得到登录页面sign_in.html, 输入刚才注册的账号, 会进入首页index.html, 还会显示个人账户信息。

    当输入localhost:8888直接进入index.html页面时, 没有用户登录. 此时就没有设置cookie, 首页不会显示用户的cookie。

    若通过用户登录进入首页, 则会设置cookie. 首页也会显示账户。

 

（1）Cookie在注册登录时的作用过程

注册：注册时把账号密码写入数据库。

登录：第一次登录时服务器给浏览器发送Cookie。

 

后台的登录路由代码(nodejs)：

else if (path === '/sign_in' && method === 'POST') {

        readBody(request).then((body) => {

            let strings=body.split('&')

            let hash = {}

            strings.forEach((string) => {

                let parts = string.split('=')

                let key = parts[0]

                let value = parts[1]

                hash[key] = decodeURIComponent(value)

            })

            let {

                email,

                password

            } = hash

            var users = fs.readFileSync('./db/users', 'utf8')

            try {

                users = JSON.parse(users) // []

            } catch (exception) {

                users = []

            }

            let found

            for (let i = 0; i < users.length; i++) {