前言

從 前后端分離開始，接口大多由后端開發(fā)，前端負(fù)責(zé)請求接口將數(shù)據(jù)渲染到頁面，某些時(shí)候需要自己搭建一臺服務(wù)器用于一些文件圖片請求或者進(jìn)行后端相關(guān)知識的學(xué)習(xí)。
node寫接口篇主要學(xué)習(xí)前端如何用node寫接口 ，一邊學(xué)習(xí) 一遍記錄。趕緊卷起來

今天，學(xué)習(xí)使用node搭建本地服務(wù)器

一、新建文件夾

1.任意位置新建一個(gè)文件夾，我建的文件夾名為demo
2.打開文件夾，在地址欄輸入cmd（如圖），回車就打開dos命令窗口了 打開文件夾后在地址欄輸入并回車?。。?！

二、配置初始化文件

在步驟一中，新建完了文件夾demo并打開了dos窗口接下來

• 1.輸入命令npm init，生成package.json文件

npm init

• 2.輸入命令后一直回車，直到新的命令出來（如圖）

3.這是看文件夾，發(fā)現(xiàn)多了一個(gè)文件package.json，新建配置文件成功?。?！

三、安裝第三方依賴包

同樣執(zhí)行步驟一，cmd進(jìn)入項(xiàng)目文件后先后執(zhí)行這兩個(gè)命令（如圖）

npm add express  

express 用于快速搭建服務(wù)器，屬于對于nodejs中http模塊的進(jìn)一步封裝。用于快速搭建服務(wù)器。

npm add nodemon

用于更改代碼保存后的自動更新

四、搭建服務(wù)器

demo目錄下新建index.js，并將下面代碼粘貼進(jìn)去

此時(shí)的目錄結(jié)構(gòu)

//導(dǎo)入express
const express = require('express')
//創(chuàng)建web服務(wù)器
const app=express()
// 通過ap.listen進(jìn)行服務(wù)器的配置，并啟動服務(wù)器，接收兩個(gè)配置參數(shù)，一個(gè)是對應(yīng)的端口號，一個(gè)是啟動成功的回調(diào)函數(shù)
app.listen(9588,()=>{
    console.log('服務(wù)器啟動成功');
})

1.重復(fù)步驟一，進(jìn)入項(xiàng)目路徑下執(zhí)行node 文件名命令，啟動服務(wù)器（如圖），我這里就用dos執(zhí)行命令了，用Vscode同樣可以

2.后續(xù)每次修改文件都要執(zhí)行命令重新啟動項(xiàng)目很麻煩
建議通過nodemon啟動項(xiàng)目 nodemon index.js (如圖)

五、訪問服務(wù)器

經(jīng)過上面幾個(gè)步驟，服務(wù)器已經(jīng)新建并啟動成功了。如何查看效果已確保啟動成功？
下面在服務(wù)器里放一張圖片，我們?nèi)ピL問服務(wù)器，能看到圖片就說明沒問題！

1.demo下新建一個(gè)文件夾img用于存放圖片（目錄結(jié)構(gòu)如圖）

2.圖片放進(jìn)去了，也要修改index.js文件才能訪問到

//導(dǎo)入express
const express = require("express");
//創(chuàng)建web服務(wù)器
const app = express();
//將文件部署到服務(wù)器
app.use(express.static("img"));

app.listen(9588, () => {
  console.log("服務(wù)器啟動成功");
});

3.通過ip地址訪問

win + R 鍵，輸入cmd回車，打開dos窗口后輸入ipconfig并回車查看自己的ip地址

標(biāo)注出來的就是自己的IP地址

打開瀏覽器，通過ip + 端口號9588 + 文件名 就能查看文件了

六、開發(fā)get接口

1.修改index.js文件

//導(dǎo)入express
const express = require('express')
//創(chuàng)建web服務(wù)器
const app=express()
//將文件部署到服務(wù)器
app.use(express.static('img'))
// 通過ap.listen進(jìn)行服務(wù)器的配置，并啟動服務(wù)器，接收兩個(gè)配置參數(shù)，一個(gè)是對應(yīng)的端口號，一個(gè)是啟動成功的回調(diào)函數(shù)
//get接口的開發(fā)
app.get('/api/list',(err,res)=>{
    res.send({
        code:200,
        data:[{name:1},{name:2},{name:3}]
    })
})
app.listen(9588,()=>{
    console.log('服務(wù)器啟動成功');
})

2.用postman 測試，返回?cái)?shù)據(jù)了，沒有問題

七、開發(fā)post接口

1.修改index.js文件

在這里插入代碼片//導(dǎo)入express
const express = require('express')
//創(chuàng)建web服務(wù)器
const app=express()
//將文件部署到服務(wù)器
app.use(express.static('img'))
//配置解析表單數(shù)據(jù)(application/x-www-form-urlencoded)格式的中間件
app.use(express.urlencoded({extended:false}))
// 通過ap.listen進(jìn)行服務(wù)器的配置，并啟動服務(wù)器，接收兩個(gè)配置參數(shù)，一個(gè)是對應(yīng)的端口號，一個(gè)是啟動成功的回調(diào)函數(shù)
//get接口的開發(fā)
app.get('/api/list',(err,res)=>{
    res.send({
        code:200,
        data:[{name:1},{name:2},{name:3}]
    })
})
//post接口的開發(fā)
app.post('/api/setList',(req,res)=>{
    const newList = req.body
    console.log(newList);
    res.send({newList})
})
app.listen(9588,()=>{
    console.log('服務(wù)器啟動成功');
})

2.用postman 測試，返回?cái)?shù)據(jù)了，沒有問題

八、總結(jié)

沒拉下一個(gè)步驟，小白也能看的懂吧。接口開發(fā)過于簡單化，后續(xù)會逐步提升

下班~文章來源地址http://www.zghlxwxcb.cn/news/detail-734075.html

到了這里，關(guān)于【node寫接口】 通過node 快速搭建一個(gè)服務(wù)器、get請求、post請求 小白入門的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！