hello world

--- theme: channing-cyan --- >本文是azuo和萌妹俩的第七篇创作，内容创作@[azuo](https://juejin.cn/user/122746142200264/posts)😄，精神支持@[大头萌妹](https://juejin.cn/user/1389392059187303)😂 前言：作为一个8年的大龄码农，带过了不少新人，发现很多前端人总是觉得写后端很难，还没开始学习，心里就犯嘀咕，其实，后端和前端的开发中间就只隔着一个《HTTP协议》。本文将通过前端的知识来阐述一些后端常见的开发场景，旨在消除前端人在进入后端领域开发前的心理屏障。 ## 一、什么是后端开发其实后端开发入门很简单，可以把它整体当作成一个**函数**，函数的入参是**请求报文**，返回值为**响应报文**。后端开发公式：**response = f(request)** 公式因子说明： - request：请求报文 - response ：响应报文 - f：处理参数（**请求报文**）并返回处理结果（**响应报文**） **f**就是做后端开发的内容，包括但不限制于： ``` javascript function doBackend(request，response){ // 解析request:参数JSON话，参数加解密 // 权限管理：RBAC等 // 远程调用（服务端之间通信）：http协议、TCP/UDP、RPC（在TCP/UDP的基础上实现的）、参数加密等 // 数据持久化：数据库curd； // 拼接response response.send('xxx') // 返回内容 response.end() } ``` ## 二、HTTP协议简单说明其实，这个函数是建立在**HTTP协议**上，我们写服务器开发前，是需要有HTTP协议的基础知识。下面，我将简单的介绍一些基础的HTTP协议。 ### 2.1.1 URL组成调用后端接口是要通过请求地址（即URL）来访问的，那么我们详细的来认识URL。一个完整的URL包括：协议部分、域名部分、端口部分、虚拟目录部分、文件名部分、参数部分、锚部分 ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f53aba07dec2461aba6fb4518ef2f257~tplv-k3u1fbpfcp-watermark.image?) 更加详细说明：[https://developer.mozilla.org/zh-CN/docs/Learn/Common_questions/What_is_a_URL](https://developer.mozilla.org/zh-CN/docs/Learn/Common_questions/What_is_a_URL) ### 2.1.2 请求报文主要包含url信息和请求数据，组成：起始行 + 首部（header 头）+ 数据主体（get请求没有） ```

``` 浏览器打开掘金首页：https://juejin.cn/ ，通过抓包工具（Fiddler、whislte），查看请求报文如下： ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4c741d6ea6934d52a557451d37477d43~tplv-k3u1fbpfcp-watermark.image?) ### 2.1.3 响应报文主要包含：响应码（告知请求是否成功）和返回数据，组成：起始行 + 首部（header 头）+ 数据主体 ```

``` 浏览器打开掘金首页：https://juejin.cn/ ，通过抓包工具（Fiddler、whislte），查看响应报文如下： ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/046a8f958b854b8aa8eaa3a69e474c88~tplv-k3u1fbpfcp-watermark.image?) HTTP协议更加详细的学习，《HTTP协议权威指南》 ## 三、后端常见开发场景本章节内容将基于前面介绍的HTTP协议来实现一下后端常见的开发场景。在开始之前，我先将第一个部分和第二部分的内容做一个归纳。后端开发范式： ![未命名.drawio.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/54de83faf5514fe9ac5bd7dd2f72b2e9~tplv-k3u1fbpfcp-watermark.image?) 接下，将使用NodeJS的[http](https://nodejs.org/dist/latest-v17.x/docs/api/http.html)模块来实现一下简单场景, ### 3.1 解析请求报文和拼接响应报文请求地址：http://127.0.0.1:1000/param1=11 ``` javascript const http = require('http') const server = http.createServer((request, response) => { /**解析请求报文 */ const headers = [] request.rawHeaders.forEach((key, index) => { if (index % 2 === 0) { headers.push(`${key}:${request.rawHeaders[index + 1]}`) } }); /**处理响应报文 */ response.setHeader('Content-Type', ' text/html') // 设置响应头，告诉浏览器返回数据主体是html类型 // 拼接响应数据主体 response.write(` hello world hello world

起始行
${request.method} ${request.url} ${request.httpVersion}

请求头
${headers.join('
')} ` ) response.end() }) server.listen(1000) ``` ### 3.2 重定向跳转重定向的响应报文需告知浏览器响应码为**302**，并设置**Location**响应头，请求地址：http://127.0.0.1:1000/ 具体实现如下： ``` javascript const http = require('http') const server = http.createServer((request, response) => { // 设置响应码 302 或者301 response.statusCode = 302 // 设置响应头，告诉浏览器要跳转的地址 response.setHeader('Location', 'https://juejin.cn/') response.end() }) server.listen(1000) ``` ### 3.3 设置Cookie 浏览器设置Cookie，是通过查看响应报文是否存在**Set-Cookie**请求头，存在不指定时间未过期，浏览器就会种上该字段的Cookie 请求地址：http://127.0.0.1:1000/d 具体实现如下： ``` JavaScript const http = require('http') const server = http.createServer((request, response) => { /** 设置cookie，制定cookie ** 字段名为SSID， ** 有效期：Wed, 13-Jan-2023 22:23:01 GMT ** 生效目录：/d ** 并设置为httpOnly */ response.setHeader('Set-Cookie', [ `SSID=Ap4GTEq; Expires=Wed, 13-Jan-2023 22:23:01 GMT;Path=/d;HttpOnly;` ]) // 拼接响应数据主体 response.write(`hello world`) response.end() }) server.listen(1000) ``` > 主要请求路径要带上/d，才能在浏览器上看到对应的cookie：http://127.0.0.1:1000/d ### 3.4 数据库操作实现从数据库查询id=1的用户信息，其实操作的是数据库，主要是以SQL，学习一下就行了，不难哈接口协议：GET /user?id=1 请求地址：http://127.0.0.1:1000/user?id=1 ``` javascript const http = require('http') const { URL } = require('url') const server = http.createServer((request, response) => { // 解析参数 const urlObj = new URL(`http://${request.headers.host}${request.url}`) const userId = urlObj.searchParams.get('id') // 到数据库的User表查找id=1的记录 const userInfo = findUser(userId) // 设置返回数据主体为JSON格式 response.setHeader('Content-Type', 'application/json; charset=utf-8') response.write(JSON.stringify({ code: 0, data: userInfo, msg: 'success' })) response.end() }) function findUser(userId) { // 简写 return { id: userId, name: 'azuo', age: 8 } } server.listen(1000) ``` ## 四、总结后端开发其实就是围绕HTTP协议来进行的，前端入门后端开发其实就隔着一个《HTTP协议》。