从0到1学习Node.js系列教程(第一篇):API接口初体验
前言:
大家好,我是东东吖,从今天开始,我将带领大家一起学习Node.js,希望大家能够从一名前端工程师进阶成为全栈工程师。让我们一起来解锁Node.js吧!
一、Nodejs介绍:
1.什么是Nodejs?
简单的说 Node.js 就是运行在服务端的 JavaScript。 Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台。 Node.js是一个事件驱动I/O服务端JavaScript环境,基于Google的V8引擎,V8引擎执行Javascript的速度非常快,性能非常好。
2.谁适合学习本教程?
如果你是一个前端工程师,你不懂得像PHP、Python或Ruby等动态编程语言,然后你想创建自己的服务,那么Node.js是一个非常好的选择。 Node.js 是运行在服务端的 JavaScript,如果你熟悉Javascript,那么你将会很容易的学会Node.js。 当然,如果你是后端程序员,想部署一些高性能的服务,那么学习Node.js也是一个非常好的选择。
3.学习本教程前你需要了解?
在继续本教程之前,你应该了解一些基本的计算机编程术语。如果你学习过Javascript,PHP,Java等编程语言,将有助于你更快的了解Node.js编程。
二、创建express后端服务器:
1.什么是express?
Express 是一个基于 Node.js 平台的极简、灵活的 web 应用开发框架,它提供一系列强大的特性,帮助你创建各种 Web 和移动设备应用。
2.全局下载express脚手架:
npm install -g express-generator
3.创建express项目:
express 项目名称
4.启动后端服务器:
①下载依赖:
npm i
②启动后端服务器
npm run start
当你能够看见这个页面,说明你的node服务已经创建并启动成功了。
5.express项目结构认识:
①bin:启动配置文件,在 www 里修改运行端口号\ ②node_modules:存放所有的项目依赖库,就像java存放架包\ ③public:用于存放静态资源文件 图片,CSS,JAVASCRIPT文件..\ ④routers:路由文件相当于springmvc中的Controller,ssh中的action\ ⑤views:存放页面的地方\ ⑥package.json:项目依赖配置及开发者信息。\ ⑦app.js:应用核心配置文件,项目入口
6.下载nodemon,自动重新启动:
当我们修改node代码后必须重启node服务器,这样十分影响我们的开发效率,我们需要下载一个可以帮我们自动重启的工具nodemon,当我们修改代码之后,他能帮我们自动重启。
①全局下载nodemon依赖包:
npm i nodemon -g
②修改为nodemon启动:
三、利用express体验get、post、put、delete四种请求:
1.get请求:
get请求一般用于获取,如果不设定请求方式,会默认为是get请求,像一些img,字体样式等利用媒体标签去请求,都会默认为是get方式,在地址栏就可以直接反问,要参数的话,可以直接在ulr的?后面拼接。 我们在user模块写一个git请求,模拟一个数组发送给客户端。
get请求可以直接在地址栏拼接参数,然后就能直接看见服务器返回的数据。
2.post请求:
我们继续在users模块编写一个post请求,这个请求三个参数必传,不然就会返回给客户端参数错误,只有当name,age,city这三个参数都传的时候,这个请求才会返回添加成功。post请求一般用于新增,但是有一些数据,涉及到安全,用get请求是不可取的,所有也会采用post请求。
post请求我们是不能在浏览地址栏访问的。不信你可以尝试一下,就像下面这样:
我们需要利用一个接口测试工具postman,当我们不传或者少传必传参数,就会返回参数错误:
只有当我们把name,age,city三个产生都传了才会返回成功
我们在服务器端打印一下接收的产生
打开终端,我们就能看见客户端发送来的参数,就能对这些数据做一些处理,考虑到同学们的学习成本,这篇文章我们就暂不讲了,大家知道原理就OK了。
3.put请求:
put请求与post类似,一般用于编辑更新数据,我们把请求方式改一下,再加一个必传参数id。
用postman测试一下,返回编辑成功
打开终端:
4.delete请求:
delete请求一般用于删除,我们设置一个必传参数id就可以了。
用postman测试一下,返回删除成功
打开终端:
四、如何解决跨域的?
我们用一个实际前端项目来调一下这个接口,我们会发现是调不通的,会报这样一个错误
这个错误是什么呢,原来我们前后端是在不同的服务器,所以产生了跨域,前端也可以解决跨域,但是这期我们是后端专场,所以这期我们只讲后端如何解决跨域的,那么后端是怎么解决的呢?后端解决跨域非常简单,在请求头中设置跨域的代码即可。
我们再来看请求返回的数据,发现返回成功了。
前端把数据渲染到页面上,完美!!!
以上就是后端工程师和我们对接api接口的大致流程,后端就是操作数据库,写一些后端的业务逻辑;而前端就是写一些页面交互的逻辑,处理数据渲染到页面上。
笔者往期文章:
- 东东吖带你打通全栈,go-vue-react项目介绍
- 【vue进阶之旅】如何自定义组件v-model,封装属于自己的组件库?
- 【vue进阶之旅】如何使用keep-alive做组件缓存?
- 发生跨域的时候,服务器到底有没有接收到请求?
- vue进阶之路:vue3.2-setup语法糖、组合式API、状态库Pinia归纳总结
- 跨域问题及前后端常见解决方案?
- 微信小程序如何分包?
- 前端性能优化,如何提高首屏加载速度?
- 项目中的配置文件都是干嘛的?
- 从0到1学习Node.js系列教程(第一篇):API接口初体验
- 父子组件的生命周期执行流程是怎么样的呢?
- 1024程序员这天,我发现了掘金官方的一个bug。
- 组件通信的8种方式,你搞清楚了吗?
- 手把手教你利用XSS攻击体验一次黑客