寫大事件項(xiàng)目的get,post類型的接口

2021-9-17    前端達(dá)人

1.準(zhǔn)備工作:npm下載相關(guān)包

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

npm init --yes

1.2 express包   

npm i express 

1.3 multer 包

npm i multer

2.創(chuàng)建server文件:在同級(jí)文件夾下創(chuàng)建server文件(文件名可以自定義)

3.登錄接口部分

 3.1 登錄接口代碼


  1. const express = require('express')
  2. //將這個(gè)express的方法賦值給app
  3. const app = express()
  4. //引入multer這個(gè)包
  5. const multer = require('multer')
  6. //上傳的文件會(huì)保存在這個(gè)目錄下
  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端口運(yùn)行成功,已經(jīng)跑起來了...');
  32. })

3.2 終端運(yùn)行代碼

 3.3 在Postman中測(cè)試發(fā)送請(qǐng)求,填寫必要參數(shù)返回結(jié)果:

3.4  在Postman中測(cè)試發(fā)送請(qǐng)求,不填寫必要參數(shù)返回結(jié)果:

4. 獲取接口部分:

4.1  獲取接口代碼


  1. //引入express框架
  2. const express = require('express')
  3. //將這個(gè)express的方法賦值給app
  4. const app = express()
  5. //引入multer這個(gè)包
  6. const multer = require('multer')
  7. //上傳的文件會(huì)保存在這個(gè)目錄下
  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端口運(yùn)行成功,已經(jīng)跑起來了...');
  37. })

4.2 在終端運(yùn)行

4.3 在Postman中測(cè)試發(fā)送請(qǐng)求,填寫必要參數(shù)返回結(jié)果:

 

4.4 在Postman中測(cè)試發(fā)送請(qǐng)求,不填寫必要參數(shù)返回結(jié)果:

5.post接口上傳圖片

 5.1 上傳圖片代碼


  1. //引入express框架
  2. const express = require('express')
  3. //將這個(gè)express的方法賦值給app
  4. const app = express()
  5. //引入multer這個(gè)包
  6. const multer = require('multer')
  7. //上傳的文件會(huì)保存在這個(gè)目錄下
  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端口運(yùn)行成功,已經(jīng)跑起來了...');
  30. })

5.2 Postman上傳圖片測(cè)試

 5.3終端查看



藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長(zhǎng)學(xué)習(xí),請(qǐng)掃碼藍(lán)小助,報(bào)下信息,藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請(qǐng)與我們聯(lián)系。

分享此文一切功德,皆悉回向給文章原作者及眾讀者.

轉(zhuǎn)自:csdn
作者:
免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)


日歷

鏈接

個(gè)人資料

存檔