写大事件项目的get,post类型的接口

2021-9-17    前端达人

1.准备工作:npm下载相关包

1.1初始化npm得到package.json文件 (不初始化也可以之前初始化的文件获得package.json文件)

npm init --yes

1.2 express包   

npm i express 

1.3 multer 包

npm i multer

2.创建server文件:在同级文件夹下创建server文件(文件名可以自定义)

3.登录接口部分

 3.1 登录接口代码


  1. const express = require('express')
  2. //将这个express的方法赋值给app
  3. const app = express()
  4. //引入multer这个包
  5. const multer = require('multer')
  6. //上传的文件会保存在这个目录下
  7. const upload = multer({ dest: 'uploads/' })
  8. //使用中间件
  9. app.use(express.urlencoded());
  10. app.use(express.json());
  11. //登录接口
  12. app.post('/api/login', (req, res) => {
  13. if (req.body.username && req.body.password) {
  14. res.json({
  15. "status": 0,
  16. "message": "登录成功",
  17. })
  18. // res.send(req.body)
  19. console.log('req.body', req.body)
  20. } else {
  21. res.json({
  22. "status": 1,
  23. "message": "登录失败",
  24. })
  25. // res.send(req.body)
  26. console.log('req.body', req.body)
  27. }
  28. // res.send()
  29. })
  30. app.listen(8023, () => {
  31. console.log('8023端口运行成功,已经跑起来了...');
  32. })

3.2 终端运行代码

 3.3 在Postman中测试发送请求,填写必要参数返回结果:

3.4  在Postman中测试发送请求,不填写必要参数返回结果:

4. 获取接口部分:

4.1  获取接口代码


  1. //引入express框架
  2. const express = require('express')
  3. //将这个express的方法赋值给app
  4. const app = express()
  5. //引入multer这个包
  6. const multer = require('multer')
  7. //上传的文件会保存在这个目录下
  8. const upload = multer({ dest: 'uploads/' })
  9. //使用中间件
  10. app.use(express.urlencoded());
  11. app.use(express.json());
  12. //获取接口
  13. app.get('/my/user/userinfo', (req, res) => {
  14. if (req.body.Authorization) {
  15. res.json({
  16. "status": 0,
  17. "message": "获取成功",
  18. "data": {
  19. "id": 1,
  20. "username": "leopard",
  21. "nickname": "little-leopard",
  22. "email": "laotang@qq.com",
  23. "user_pic": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAe"
  24. }
  25. })
  26. console.log('req.body', req.body)
  27. } else {
  28. res.json({
  29. "status": 1,
  30. "message": "获取失败",
  31. })
  32. console.log('req.body', req.body)
  33. }
  34. })
  35. app.listen(8023, () => {
  36. console.log('8023端口运行成功,已经跑起来了...');
  37. })

4.2 在终端运行

4.3 在Postman中测试发送请求,填写必要参数返回结果:

 

4.4 在Postman中测试发送请求,不填写必要参数返回结果:

5.post接口上传图片

 5.1 上传图片代码


  1. //引入express框架
  2. const express = require('express')
  3. //将这个express的方法赋值给app
  4. const app = express()
  5. //引入multer这个包
  6. const multer = require('multer')
  7. //上传的文件会保存在这个目录下
  8. const upload = multer({ dest: 'uploads/' })
  9. //使用中间件
  10. app.use(express.urlencoded());
  11. app.use(express.json());
  12. app.post('/my/user/avatar', upload.single('avatar'), (req, res) => {
  13. console.log(req.file);
  14. if (req.file) {
  15. res.json({
  16. "status": 0,
  17. "message": "上传图片成功"
  18. })
  19. console.log('req.body', req.body)
  20. } else {
  21. res.json({
  22. "status": 1,
  23. "message": "上传图片失败"
  24. })
  25. console.log('req.body', req.body)
  26. }
  27. })
  28. app.listen(8023, () => {
  29. console.log('8023端口运行成功,已经跑起来了...');
  30. })

5.2 Postman上传图片测试

 5.3终端查看



蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

分享此文一切功德,皆悉回向给文章原作者及众读者.

转自:csdn
作者:
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务


日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档