1.如何发请求

1.1.方法

  • 用 chrome 地址栏

  • 用 curl 命令 curl -v url（-v可不要）

    1.2.概念

    帮你发出请求的工具叫做 用户代理（User Agent）

    2.如何做出响应

    2.1.需用编程（node server.js 8888）

  • 其中 server.js 为文件名

  • Node.js 有一个 http 模块可以做到
  • 初始代码，直接复制到VSCode（也可点击 raw 然后全选复制）

  • 只看中间一部分，如下（注释部分是想表示 (中可以加一个html文件)）

    1. console.log("有个傻子发请求过来啦！路径（带查询参数）为：" + pathWithQuery);
    3. if (path === "/") {
    4.   response.statusCode = 200;
    5.   response.setHeader("Content-Type", "text/html;charset=utf-8");
    6.   response.write(`哈哈哈`);
    7.   // response.write(`
    8.   //     <!DOCTYPE html>
    9.   //     <head>
    10.   //         <link rel="stylesheet"  href="/x"
    11.   //     </head>
    12.   //     <body>
    13.   //         <h1>标题</h1>
    14.   //         <script src="/y"> <script>
    15.   //     </body>
    16.   // `);
    17.   response.end();
    18. } else if (path === "/x") {
    19.   response.statusCode = 200;
    20.   response.setHeader("Content-Type", "text/css;charset=utf-8");
    21.   response.write(`body{color: red;}`);
    22.   response.end();
    23. } else {
    24.   response.statusCode = 404;
    25.   response.setHeader("Content-Type", "text/html;charset=utf-8");
    26.   response.write(`你输入的路径不存在对应的内容`);
    27.   response.end();
    28. }

    2.2.注意事项

  • path 是不带查询参数的路径 /x

  • query 是查询参数的对象形式 {a:’1’}
  • querystring 是查询参数的字符串形式 ?a=1
  • pathWithQuery 是带查询参数的路径，一般不用
  • request 是请求对象
  • response 是响应对象

image.png

2.3.代码需注意的细节

image.png

3.代码逻辑

3.1.语法

  • 这种字符串 （符号为左上角第二个键）里面可以回车不影响代码，如果需要执行个回车可以加 \n

    1. response.write(`哈哈哈\n`);

  • ‘这种字符串’ （单引号）里面要回车只能用 \n 表示

    3.2.逻辑

  • 每次收到请求都会把中间代码执行一遍

  • 用 if else 判断路径，并返回响应
  • 如果是已知路径，一律返回 200
  • 如果是位置路径，一律返回 404
  • Content-Type 表示内容的 <类型/语法>

Content-Type是决定文件类型的关键， URL 里的后缀没用， /y.css 不一定是 CSS 内容

  • response.write() 可以填写返回的内容
  • response.end() 表示响应可以发给用户了（这一句最好加上，即使里面没有内容）
    1. if (path === "/x") {
    2.   response.statusCode = 200;
    3.   response.setHeader("Content-Type", "text/css;charset=utf-8");
    4.   response.write(`body{color: red;}`);
    5.   response.end();
    6. } else

    4.系统学习 HTTP

    CRM 学习法

    4.1.HTTP 的基础概念（请求和响应的规范写法）

HTTP请求和响应 - 图3http 请求规范—RFC 2612 第五章
http 响应规范—RFC 2612 第六章

浏览器显示示例（记得点下 view parsed 才会显示这个）

HTTP请求和响应 - 图4

curl 显示示例

HTTP请求和响应 - 图5

4.2.用 curl 构造请求

  1. curl -v http://localhost:8888/

  • 设置请求动词 -X -POST （注意大小写）

    1. curl -v -X POST http://localhost:8888/

  • 设置路径和查询参数（直接在 URL 后面加）

    1. curl -v -X POST http://localhost:8888/xxx?wd=hi（注意锚点不会发送）

  • 设置请求头

    1. curl -v -X POST -H 'Accept: text/html' http://localhost:8888/

  • 设置请求体 -d ‘内容’ 或 —data ‘内容’

    1. curl -v -X POST -H 'Accept: text/html' -d '请求体内容' http://localhost:8888/
    2. curl -v -X POST -H 'Accept: text/html' -H 'Content-Type: text/plain;charset=UTF-8' -d '请求体内容'http://localhost:8888/  
    3. /*设置字体-d 前面加 -H 'Content-Type: text/plain;charset=UTF-8' 其中 text/plain 表示纯文本*/

    4.3.用 Node.js 读取请求

    1.   console.log("有个傻子发请求过来啦！路径（带查询参数）为：" + pathWithQuery);
    2. console.log("method: ");
    3. console.log(method); //GET 或者 POST
    4. console.log("request.headers:");
    5. console.log(request.headers); //读取请求头

  • 读取请求动词

request.method

  • 读取路径

    1. request.url 路径，带查询参数
    2. path 纯路径，不带查询参数
    3. query 只有查询参数

  • 读取请求头

request.headers[‘Accept’]

  • 读取请求体

比较复杂，以后补充

4.4.用 Node.js 设置响应

  • 设置响应状态码

    1. response.statusCode=200 //200可以改成任何数字

  • 设置响应头

    1. response.setHeader('Content-Type','text/html');  //括号里内容都可更改

  • 设置响应体

    1. response.write('内容')
    2. 内容可以写个一个 HTML 文件；并且可追加内容

    5.console.log 调试法

    把你认为对的变量或 if 后的语句用 console.log 打出来

    例子：

  • 有问题的代码

    1. if(path === '/'){
    2. response.statusCode = 200
    3. response.setHeader('Content-Type', 'text/html;charset=utf-8')
    4. response.write(`
    5.   <link rel="stylesheet" href="./style.css">
    6.   <h1>你好</h1>
    7. `)
    8. response.end()
    9. } else if(path === './style.css'){
    10. response.statusCode = 200
    11. response.setHeader('Content-Type', 'text/css;charset=utf-8')
    12. response.write(`h1{color: red;}`)
    13. response.end()
    14. } else {
    15. response.statusCode = 404
    16. response.end()
    17. }

  • 加上这一句

    1. console.log("path:" + path);

    image.png

  • 加这两句，重新 node xxx 8888，再刷新访问的页面，显示如下

image.png