Node.js带你走进前后端分离的项目开发（一） ——HTTP介绍与node环境搭建

最新推荐文章于 2024-09-08 01:57:51 发布

朱砂绛

最新推荐文章于 2024-09-08 01:57:51 发布

阅读量678

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_42376054/article/details/85036802

版权

前端专栏收录该内容

18 篇文章 2 订阅

订阅专栏

1 引言

在真实的开发或学习的过程中，我们会发现其中每一部分都不是完全独立的。而这时，就会因为某一方面的种种原因（不会使用或太复杂的编写过程），去影响了整体项目的进度。

众所周知，搭建网站时就会需要前后端不同的人去完成一个项目。如果不使用前后分离的方法去完成，那么合作起来十分麻烦；如果使用前后分离，那么在各自开发阶段的开发就会变得便捷，但测试要等到最后各自开发完成才进行合并吗？答案不是的。那么如何在开发过程中达到能够测试的效果呢？

2 问题分析

很明显地，后台人员可以使用postman轻松解决，那前端人员应该怎么办呢？本系列文章将讲述如何带领前端人员实现前端分离，最主要的东西是nodeJS。它是什么？Node 是一个服务器程序，可以将运行V8 JavaScript。（点击详情了解：Node.js究竟是什么？）

在本篇文章中，笔者将首先介绍什么是HTTP与node的环境搭建。

3 解决方案

什么是HTTP
运行环境配置

*****本文只涉及前两点*****

路由的搭建
首页的图片显示
登录的实现

什么是HTTP

必须要讲：目前很多应用系统中的内容传输协议采用的HTTP协议，因此不管你是前端人员、后端人员、运维人员，甚至是管理人员，只要你是计算机行业的人，首先必须要掌握http知识。

① http 协议：浏览器对 web 服务器的请求，是一种无状态（不建立链接，不保留链接的相关信息，需要才传递）的协议

② HTTP 请求的过程

（1）建立 TCP 连接

（2）Web 浏览器向 Web 服务器发送请求命令

（3）Web 浏览器发送请求头信息

（4）Web 浏览器应答

（5）Web 浏览器发送应答头信息

（6）Web 浏览器向浏览器发送数据

（7）Web 浏览器关闭 TCP 连接

③ HTTP 请求的组成

（1）HTTP 请求的方法或动作，比如是 GET 还是 POST 请求

GET（默认）：一般用于信息获取

使用url传递参数

对所发送信息的数量也有限制，一般在 2000 子字符、

是安全的，因为只用于获取信息，但是所获取的参数（显示于 url 上）对任何人都可见

POST：一般用于修改服务器上的资源

对所发送信息的数量无限制

参数不会显示于 url 上

（2）正在请求的 url

（3）请求头，包含一些客户环境信息，身份验证等

（4）请求体（请求正文），包括客户提交的查询字符串信息，表单信息等等

④ HTTP 响应的组成

（1）一个数字和文字组成的状态码，用来显示请求是否成功

HTTP 状态码（《Web前端技术》教材书书 P6）：由 3 位数字构成，其中首位数字定义了状态码的类型

1XX ：信息类，表示收到 Web 浏览器请求，正在进一步的处理中。

2XX ：成功，表示用户请求被正确接受，理解和处理。例 200：OK

3XX ：重定向，表示请求没有成功，客户必须采取进一步的动作。

4XX ：客户端错误，表示客户端提交的请求有错误。例 404： NOT Found

5XX ：服务器错误，表示服务器不能完成对请求的处理。例 500

状态码有助于调试

（2）响应头，类似于请求头，包含服务器类型、日期时间、内容类型和长度等

（3）响应体（响应正文）

运行环境配置

①node.js

因为本文基于nodejs的技术上，因此首先是node.js的配置。此处只讲述基于windows环境进行的下载安装：

（1）通过官网 https://nodejs.org/en/download/ 进行版本的选择下载，笔者本人选择的是LTS(长时间兼容)下的Windows install(.msi)版本，再基于自己的电脑配置选择对应的32位或64位。

（2）下载完成后，按照安装提示上的默认选项进行安装即可（若想要指定安装地址，进入到如图所示的步骤时，按提示输入即可）。

（3）可通过cmd中命令行：node –v 进行查看是否安装成功和安装版本。

（注：node即可解析js代码，但是不能实时更新，若想达到修改js时就能够自动更新，可安装nodemon，其下载安装命令行：npm install nodemon -g）

② npm

npm是包管理器，是全球最大的开源库生态系统。它的安装很难吗？当然不是，在安装node.js后，它已经存在了你的电脑里。可通过命令行：npm –v 来查看版本

③ supervisor——能够使某个js文件运行在某个服务器的端口上，且之后再修改该文件的时候就不需要重新启动

使用命令行：npm install –g supervisor进行下载安装。但在国内由于墙的原因，有时候使用NPM安装模块的速度上会很慢，这时候我们其实可以选择国内淘宝的NPM镜像，使用下面的命令来进行安装：

npm install -g cnpm --registry=https://registry.npm.taobao.org

安装完成后使用cnpm来代替npm命令即可，其实可以看到除了cnpm替代了npm其他的并没有任何区别。（但。。。笔者通过第一种方式在安装时没有感到速度慢）。

完成上述配置后，其实就已经能够在node里面进行js的解析。

方法：首先，通过cmd进入需要运行的文件夹下（cd + 空格 + 路径）；然后，使用命令行 node +目标文件名（hello / hello.js），此时该js就已经运行在node.js环境中了。

4 总结

本文概述：本文只介绍到什么是 http 与安装配置 node 环境。笔者在后续的文章中会基于本次的环境进行真实的去运行一个简单的项目。

小谈：之前因为笔者长期使用idea编辑器觉得十分便捷，因此使用它来编辑前端的代码，当想要使用node.js在idea运行时，发现十分的复杂不便捷，出现的问题，，，小白我到目前还没有解决，可能在之后深入node后能够得到解决。个人到目前的理解是：idea更适合java的编写，而如果仅仅想要编写前端的代码的话，尽量选择专用ide。

关于采用vscode编写代码，个人体会：1、轻松解决不能应用require.js 中的模块；2、编辑时有着与idea相同快感；3、安装插件更加便捷；4、对html与js的提示更加多。所以如果不想因为ide的原因影响整体代码的编写，推荐使用vscode。