【Nodejs】回顾node中如何使用Express模块写接口_05

最新推荐文章于 2024-04-08 16:10:35 发布
最新推荐文章于 2024-04-08 16:10:35 发布
阅读量1.1k 收藏 9
点赞数 2
分类专栏： # ⭐ Node.js入门基础 文章标签： 前端 javascript 中间件 node.js 后端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sunyctf/article/details/124741807
版权

目录

​​​​​​​一. 后端接口是什么

二. 使用Express模块写后端接口

⬛ 模拟练习 👇

⬛ 代码整合 👇

❣️ 一个前端请求的执行过程：以用户注册路由为例

  【前文回顾】👉 深入理解Express框架之如何使用各类中间件_04 

​​​​​​​

 

​​​​​​​一. 后端接口是什么

在网上查资料时，有看到比较高大上专业的说法，在nodejs中，接口是使用nodejs实现的包含方法、属性、索引器和事件作为成员对协定进行定义的引用类型，nodejs可以通过express模块来写接口。

那什么是后端接口：个人认为，通俗的讲就是后端给前端提供的数据，和数据库的交互。

🌴 注：接口是给前端程序的
我们需要明确一个概念，就是所谓后端接口，是后端提供给前端的可以和数据库交互的数据。是给前端程序的而非前端开发人员

在nodejs下，每个路由对应一个接口。路由即接口，如一个登陆路由就是一个登陆接口。不同的后端语言，接口的实现形式不一样，nodejs下的接口，就是以路由的形式实现，也就是说，在nodejs下，接口的形式就是一个路由。

 

二. 使用Express模块写后端接口

我们在工作中，时常碰到这种场景，有时候前端需要调用接口，测试功能，但是相关的接口还没有开发好，或者没有相应的数据，这时候怎么办呢？在这里，我们就来模拟一下，在实际开发中，使用nodejs+express写自己的接口

示例：项目目录结构图（用户模块为例）

public ......................................托管静态资源目录，放所有的静态文件

router.......................................存放所有的路由器的目录

user.js................................用户路由器

app.js........................................web服务器文件，项目的启动文件

pool.js......................................连接池文件，被路由器所使用

本地项目存储位置如下：👇

项目文件夹xz的内容：👇


⬛ 模拟练习 👇

练习：创建文件app.js，创建web服务器，托管静态资源到public目录，包含用户注册的文件user_reg.html，点击提交，向服务器端发请求（post   /reg）。使用用户路由器。

练习：在router/user.js中创建路由器对象，添加用户注册的路由（post  /reg），导出路由器对象；在web服务器app.js中引入用户路由器并挂载，添加前缀/user
提示：require('./router/user.js')

练习：在app.js 下，使用body-parser中间件将post请求的数据解析为对象，在路由中获取

练习：用户登录  

练习：修改用户

 练习：删除用户

练习：检索用户


⬛ 代码整合 👇

*app.js  ------服务器

//引入express包
const express=require('express');
//引入用户路由器
const userRouter=require('./router/user.js');
//引入body-parser中间件
const bodyParser=require('body-parser');
// console.log(userRouter);
//创建web服务器
const app=express();
//设置端口
app.listen(8080);
//托管静态资源到public目录
app.use( express.static('./public') );
//使用body-parser中间件将post请求数据解析为对象
app.use( bodyParser.urlencoded({
  extended:false
}) );
//路由器/路由在最后出现(中间件就是要拦截路由的，所以一定要放在路由器挂载之前，才能起到拦截的作用)
//在web服务器挂载路由器，添加前缀/user
//路由URL访问  /user/reg 
app.use( '/user',userRouter );

*pool.js  ------连接池

//引入mysql模块
const mysql=require('mysql');
//创建连接池对象
const pool=mysql.createPool({
  host:'127.0.0.1',
  port:'3306',
  user:'root',
  password:'',
  database:'xz',
  connectionLimit:'20'
});
//导出连接池对象
module.exports=pool;

路由器目录router下的路由器：

*user.js  ------用户路由器

//引入exress包
const express=require('express');
//引入连接池模块
const pool=require('../pool.js');
//console.log(pool);
//创建路由器对象
const r=express.Router();
//添加路由
//1.用户注册  post  /reg  接口地址：http://127.0.0.1:8080/user/reg
r.post('/reg',(req,res)=>{
  //1.1获取post请求的数据
  let obj=req.body;
  console.log(obj);
  //1.2验证数据是否为空
  if(!obj.uname){
    res.send({code:401,msg:'uname required'});
	//阻止往后执行
	return;
  }
  if(!obj.upwd){
    res.send({code:402,msg:'upwd required'});
	return;
  }
  if(!obj.email){
    res.send({code:403,msg:'email required'});
	return;
  }
  if(!obj.phone){
    res.send({code:404,msg:'phone required'});
	return;
  }
  //1.3执行SQL命令
  pool.query('INSERT INTO xz_user SET ?',[obj],(err,result)=>{
    if(err) throw err;
	console.log(result);
	//注册成功
	res.send({code:200,msg:'reg suc'});
  });
});
//2.用户登录  post  /login  接口地址：http://127.0.0.1:8080/user/login
r.post('/login',(req,res)=>{
  //2.1获取post请求的数据
  let obj=req.body;
  console.log(obj);
  //2.2验证数据是否为空
  if(!obj.uname){
    res.send({code:401,msg:'uname required'});
	return;
  }
  if(!obj.upwd){
    res.send({code:402,msg:'upwd required'});
	return;
  }
  //2.3执行SQL命令
  //到数据中查询是否有用户名和密码同时匹配的数据
  pool.query('SELECT * FROM xz_user WHERE uname=? AND upwd=?',[obj.uname,obj.upwd],(err,result)=>{
    if(err) throw err;
    //返回的结果是空数组，长度为0，说明登录失败
	console.log(result);
	if(result.length===0){
	  res.send({code:301,msg:'login err'});
	}else{//查询到了匹配的用户，登录是成功
	  res.send({code:200,msg:'login suc'}); 
	}
  });
});
//3.修改用户  get  /update  接口地址：http://127.0.0.1:8080/user/update
r.get('/update',(req,res)=>{
  //3.1获取查询字符串传递的数据
  let obj=req.query;
  console.log(obj);
  //3.2使用for-in遍历对象，验证各项是否为空
  //声明变量用于保存状态码
  let i=400;
  for(let k in obj){
	//每循环一个属性，i加1
	i++;
	//k代表每个属性名  obj[k]代表对应的属性值
    //console.log(k,obj[k]);
    //如果属性值为空，则提示该项属性不能为空
	if(!obj[k]){
	  res.send({code:i,msg:k+' required'});
	  return;
	}
  }
  //3.3执行SQL命令
  //修改数据，将整个对象修改
  pool.query('UPDATE xz_user SET ? WHERE uid=?',[obj,obj.uid],(err,result)=>{
    if(err) throw err;
	//返回的是对象，如果对象下的affectedRows为0说明修改失败，否则修改成功
	console.log(result);
	if(result.affectedRows===0){
	  res.send({code:301,msg:'update err'});
	}else{
	  res.send({code:200,msg:'update suc'});
	}
  });
});
//4.删除用户  get  /delete  接口地址：http://127.0.0.1:8080/user/delete
r.get('/delete',(req,res)=>{
  //4.1获取查询字符串传递的数据
  let obj=req.query;
  console.log(obj);
  //4.2验证数据是否为空
  if(!obj.uid){
    res.send({code:401,msg:'uid required'});
	return;
  }
  //4.3执行SQL命令
  pool.query('DELETE FROM xz_user WHERE uid=?',[obj.uid],(err,result)=>{
    if(err) throw err;
	//返回对象，通过affectedRows判断是否删除成功
	console.log(result);
	if(result.affectedRows===0){
	  res.send({code:301,msg:'delete err'});
	}else{
	  res.send({code:200,msg:'delete suc'});
	}
  });
});
//查询所有用户
//   /user/userlist  接口地址：http://127.0.0.1:8080/user/userlist
r.get("/userlist",(req,res)=>{
	// 准备sql语句
	var sql="select * from xz_user";
	//连接池查询数据库
	pool.query(sql,(err,result)=>{
		if(err) throw err;
		//把查询结果当做响应传给前台
		res.send(result);
	});
});

// 查询对应uid的用户
//   /user/userlist_uid  接口地址：http://127.0.0.1:8080/user/userlist_uid
r.get("/userlist_uid",(req,res)=>{
  let obj=req.query;
  // console.log(obj)
	// 准备sql语句
	var sql="select * from xz_user where uid=?";
	//连接池查询数据库
	pool.query(sql,[obj.uid],(err,result)=>{
		if(err) throw err;
		//把查询结果当做响应传给前台
		res.send(result);
	});
});
//导出路由器
module.exports=r;

静态资源目录public下的静态资源​​​​​​​文件：

*user_reg.html

<h2>用户注册</h2>
<form method="post" action="/user/reg">
  用户<input type="text" name="uname"><br>
  密码<input type="text" name="upwd"><br>
  邮箱<input type="text" name="email"><br>
  电话<input type="text" name="phone"><br>
  <input type="submit">
</form>

*user_login.html

<h2>用户登录</h2>
<form method="post" action="/user/login">
  用户<input type="text" name="uname"><br>
  密码<input type="text" name="upwd"><br>
  <input type="submit">
</form>

*user_update.html

<h2>修改用户</h2>
<form method="get" action="/user/update">
  编号<input type="text" name="uid"><br>
  邮箱<input type="text" name="email"><br>
  电话<input type="text" name="phone"><br>
  姓名<input type="text" name="user_name"><br>
  性别<input type="text" name="gender"><br>
  <input type="submit">
</form>

*user_delete.html

<h2>删除用户</h2>
<form method="get" action="/user/delete">
  编号<input type="text" name="uid">
  <input type="submit">
</form>

*userlist.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<form action="/user/userlist">
			<input type="submit">
		</form>
	</body>
</html>

*userlist_uid.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<form action="/user/userlist_uid">
			<input type="text" name="uid">
			<input type="submit">
		</form>
	</body>
</html>

🏝️ 扩展：
 

💬 中间件在哪里引入合适？

由于中间件要写在路由文件里，有多少个路由就要写多少个中间件，路由又写在路由器里，路由器最终要挂载到服务器里(app.js)，成为服务器的一部分，所以，可以这样认为，以后所有的中间件都要在服务器里引入

💬 连接池在哪里引入合适？

连接池不是中间件，所以不用引用到服务器里，它是一个单独的自定义模块，将来哪一个路由器需要连接数据库，就引用到具体的路由器即可实现一个连接池文件多个复用


❣️ 一个前端请求的执行过程：以用户注册路由为例

在这里我们使用form表单的请求方式，通过浏览器向服务器发出请求

 *user_reg.html

<h2>用户注册</h2>
<form method="post" action="/user/reg">
  用户<input type="text" name="uname"><br>
  密码<input type="text" name="upwd"><br>
  邮箱<input type="text" name="email"><br>
  电话<input type="text" name="phone"><br>
  <input type="submit">
</form>

*用户注册路由

用户注册的接口地址：http://127.0.0.1:8080/user/reg

释：路由URL访问     /user/reg

▪️ 路由前缀： /user    ▪️ 路由地址：/reg

//引入express包
const express=require('express');
//引入连接池模块
const pool=require('../pool.js');
//console.log(pool);
//创建路由器对象
const r=express.Router();
//添加路由
//1.用户注册  post  /reg
r.post('/reg',(req,res)=>{
  //1.1获取post请求的数据
  let obj=req.body;
  console.log(obj);
  //1.2验证数据是否为空
  if(!obj.uname){
    res.send({code:401,msg:'uname required'});
	//阻止往后执行
	return;
  }
  if(!obj.upwd){
    res.send({code:402,msg:'upwd required'});
	return;
  }
  if(!obj.email){
    res.send({code:403,msg:'email required'});
	return;
  }
  if(!obj.phone){
    res.send({code:404,msg:'phone required'});
	return;
  }
  //1.3执行SQL命令
  pool.query('INSERT INTO xz_user SET ?',[obj],(err,result)=>{
    if(err) throw err;
	console.log(result);
	//注册成功
	res.send({code:200,msg:'reg suc'});
  });
});

😇  易犯错误：多个send问题❗      👉​​​​​​​ 了解更新send用法详情
Error: Can't set headers after they are sent.
路由中出现多次响应，多个send被调用


1. 首先，启动服务器app.js。

👉 进入项目文件夹xz的路径栏里，输入cmd，回车

  👉 nodejs下，启动服务器：node app.js，回车即可启动服务器

😇 小技巧：在命令行输入node以及空格后，输入要运行的文件的开头部分，按tab键可自动补全文件名，这样可以节省输入的时间

2.  使用浏览器请求静态资源文件user_reg.html

👉 静态资源文件请求格式：http://127.0.0.1:8080/user_reg.html

浏览器地址栏输入，以上地址，运行结果：

3. 输入用户注册的表单信息，通过浏览器向服务器提交form表单请求

❗ 注意：form表单的action属性值中url："/user/reg"​​​​​​​，要和后端接口url保持一致：r.post('/reg',req,res)=>{ ... }


4. 服务器(后端)获取前端的请求数据

👉​​​​​​​ nodejs通过创建对应的注册路由，在路由中获取上图form表单提交传递的数据，如下图红框的内容为后端获取的数据

r.post('/reg',(req,res)=>{
  //获取post请求的数据
  let obj=req.body;
  console.log(obj); // 下图红框数据👇
                                  👇

👉 接下来，nodejs通过连接池对象操作数据库，执行sql命令，向浏览器页面返回注册成功的数据

pool.query('INSERT INTO xz_user SET ?',[obj],(err,result)=>{
    if(err) throw err;
	console.log(result);// 结果为下图蓝框数据
	//注册成功
	res.send({code:200,msg:'reg suc'}); // 响应返回给浏览器页面的展示数据
  });
});

❗ 注意：安装mysql数据库后，在操作数据库前，先启动数据库服务
 

nodejs操作数据库，需要启动数据库服务，所以，在通过浏览器请求静态资源文件user_reg.html后，向服务器提交form表单请求前，我们通过XAMPP客户端启动mysql数据库
 

 

 ​

如果这篇【文章】有帮助到你，希望可以给【青春木鱼】点个赞👍，创作不易，相比官方的陈述，我更喜欢用【通俗易懂】的文笔去讲解每一个知识点，如果有对【前端技术】感兴趣的小可爱，也欢迎关注❤️❤️❤️【青春木鱼】❤️❤️❤️，我将会给你带来巨大的【收获与惊喜】💕💕！

儒雅的烤地瓜
关注
  • 2
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
nodejs入门教程六：express模块用法示例
10-19
主要介绍了nodejs入门教程之express模块用法,结合实例形式分析了express模块的功能、创建、路由相关使用技巧,需要的朋友可以参考下
node.js连接数据库_nodejs_Node.js_
10-02
该案例是用node.js代码实现数据库的连接
Nodejs接口详解
小猿
10-20 137
nodejs写接口
Node.js---使用Express写接口
m0_48375854的博客
01-12 2184
使用Express写接口一、创建基本的服务器二、创建API路由模块三、编写 GET 接口四、编写POST接口五、CORS 跨域资源共享1、接口的跨域问题2、使用 cors 中间件解决跨域问题3、什么是 CORS4、CORS 的注意事项六、JSONP接口 一、创建基本的服务器 二、创建API路由模块 三、编写 GET 接口 四、编写POST接口 五、CORS 跨域资源共享 1、接口的跨域问题 2、使用 cors 中间件解决跨域问题 3、什么是 CORS 4、CORS 的注意事项 六、JSONP接口 ...
简单用Nodejs + express 编写接口
最新发布
肥晨开发的学习之路
04-08 1932
另外，确保对用户输入进行验证和清理，以防止常见的安全问题，如 SQL 注入、跨站点脚本（XSS）等。另外，确保适当地使用异步操作和避免阻塞操作，以提高应用程序的响应性能。考虑将路由分割成多个文件，并使用 Express 的 Router 功能来组织和管理它们。这样可以确保团队成员之间的协作，并使代码更易于追踪和恢复。这包括捕获并处理同步和异步错误，以及返回适当的错误状态码和错误消息给客户端。使用测试框架来编写和运行测试，并确保测试覆盖了应用程序的各个方面。记得根据你的实际需求，进行相应的处理和验证逻辑。
Node.js-----使用express写接口
idiot_MAN的博客
03-14 630
cros(Cross-Origin Resource Sharing，跨域资源共享)由一系列HTTP响应头组成，这些HTTP响应头决定浏览器是否阻止前端JS代码跨域获取资源浏览器的同源安全策略默认会阻止网页"跨域"或缺资源，但是如果接口服务器配置了CROS相关的HTTP响应头就可以接触浏览器端的跨域访问限制。
【node】使用Express写接口
Lin_Yu_的博客
01-06 465
node.js express 写接口i
node.js+Express框架，前端自己创建接口
Qxn530的博客
11-16 2335
前端不使用mock调用接口，也不用写后端代码调用接口，而是通过node+express自己写接口
express-todolist_nodejs_Node.js_goodgka_express列表_
09-29
一个基于node。js的前端列表展示页面
nodejs_nodejs_Node.js_force7x5_
10-03
Node.js开发指南
如何用express写接口
Qiemo_的博客
04-29 3307
什么是experss ? express是一个基于node.js平台,极简高效开发的web开发框架 对于nodejs来说,express是一个第三方模块,支持丰富的api,强大而灵活的中间件特性 第一步 创建项目并初始化 创建一个新文件夹,在此目录下运行 npm init --yes命令来生成package.json文件 第二步 下载express包 本地安装 运行 npm i express 第三步 快速创建web服务器 //导入express const express = requi
6、使用express写接口
weixin_48137421的博客
04-14 1393
使用express写接口，然后调用测试接口，并解决跨域访问问题
使用 Express 写接口
果冻
01-20 554
使用Express 写接口
Express写接口
2302_77399796的博客
12-24 360
但如果接口服务器配置了CORS相关的HTTP响应头，就可以解除浏览器端的跨域访问限制。通过安装和配置cors 中间件，可以很方便地解决跨域问题。Level2的浏览器，才能正常访问开启了CORS的服务端接口（例如：IE10+、Chrome4+、FireFox3.5+）。客户端浏览器无须做任何额外的配置，即可请求开启了CORS的接口。CORS（主流的解决方案，推荐使用） JSONP（有缺陷的解决方案:只支持GET请求）刚才编写的GET和POST接口，存在一个很严重的问题：不支持跨域请求。（3）编写GET接口。
Express -- Mysyql的基本操作
qq_38535965的博客
09-02 301
数据以表格形式存储，通过设定的字段对每一行数据进行划分。
Nodejs搭建服务器及express编写接口
持续学习中
01-21 4170
Nodejs用http模块搭建http服务器： //引入http模块 var http = require("http"); var url = require('url'); //设置主机名 var hostName = '192.168.1.7'; //设置端口 var port = 8092; //创建服务 var server = http.createServer(functi...
【Node】使用express编写接口 Day2
Macao7_W的博客
10-21 280
本文为笔者学习Node笔记，待完善，欢迎一起交流学习。
express项目
Da_ci_hua的博客
05-31 99
【代码】express项目。
Node.js基础---使用Express写接口
Anorry的博客
03-07 1163
编写接口和跨域CORS解决等
用nodejs 中express 框架写个post接口
02-14
可以使用Express框架快速实现一个POST请求接口。 首先，您需要在您的计算机上安装Node.js和npm，然后通过命令行创建一个新的项目并安装Express： ``` $ mkdir my-express-app $ cd my-express-app $ npm init -y $...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

儒雅的烤地瓜

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值