目录
【前文回顾】👉 深入理解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数据库
如果这篇【文章】有帮助到你,希望可以给【青春木鱼】点个赞👍,创作不易,相比官方的陈述,我更喜欢用【通俗易懂】的文笔去讲解每一个知识点,如果有对【前端技术】感兴趣的小可爱,也欢迎关注❤️❤️❤️【青春木鱼】❤️❤️❤️,我将会给你带来巨大的【收获与惊喜】💕💕!