此文章是我自己用來記錄如何搭建一個以express爲基礎的api服務器框架的過程,並不是什麼新手教程,並不會每一步都寫得非常詳細,如果您要閱讀此文,需要一點nodejs和編寫代碼的基礎知識
現在開發網站或者app,都開始使用前後端分離的模式進行,前端專注展示,後端處理數據.後端的開發只關心處理請求和發送數據,並不需關心頁面展示
使用express搭建一個api服務器,處理http請求
建立一個新項目
從0開始,創建一個新的nodejs項目
此部分參考之前的文章 鏈接: 記錄使用npm創建一個全新的nodejs項目
https://blog.csdn.net/goodboy31985/article/details/106197587
項目取名api-framework-express
在github上創建此項目
另外,我在github上也建立這個項目,方便進行代碼的管理和版本管理
先確保在你的機器上正確安裝了git,從官網鏈接: https://git-scm.com/.下載並安裝自己的系統相對應的版本即可
-
在github中建立項目
這裏我們不需要生成README文件,我們等下直接在本地建立 -
在自己的項目中運行代碼,提交項目文件到git服務器
根據這裏的代碼提示,直接在自己的項目中運行這些代碼
如果出現了這個錯誤,是因爲還未登錄你的github
運行這兩行命令
git config --global user.email “[email protected]”
git config --global user.name “Your Name”
填寫你的git賬號的郵箱和用戶名
然後點擊這裏的提交按鈕
再次運行 git push -u origin master 命令,系統一般會嘗試讓你登錄github,登錄成功就可以正確得push項目了
此時刷新你的github上的項目頁面,裏面應該已經有了我們提交的文件
此時可以繼續參考之前的文章,進行typescript 和 斷點調試等功能的設置
在項目文件夾中新建一個 .gitignore 文件(注意不要漏掉前面的點),這個文件可以定義哪些文件不必上傳到git,因爲比如運行時產生的臨時文件是不需要上傳git的,內容可以如下
# Visual Studio Code
#
.vscode/
# node.js
#
dist/
node_modules/
logs/
cache/
這個文件中列出的文件或者文件夾,將被git忽略
最後再提交一次git
我們有了一個空項目,我們就在這個空項目上,開始搭建服務框架
搭建項目框架
安裝express包,先運行一個最基礎的服務器程序
- 使用yarn包管理器,下載express,並開啓一個服務器
使用命令 npm install express 在項目中引入express包
安裝成功後,在package.json中會出現此依賴
此外,由於此項目使用TypeScript編寫,有一些包會缺少類型聲明文件,此時,就需要引入此包一個對應的類型定義包,比如express 就有對應的 @types/express 我們也需要安裝
通過命令 npm install --dev @types/express 進行安裝
安裝完成後,在package.json中會出來一個開發依賴包,這些包只在開發階段有用,項目正式運行的時候,這些包並不是必要的. - 編寫代碼,讓服務器代碼運行起來
將此功能包裝成一個類,新建一個ApiServer.ts的文件,實現服務器的初始化和運行功能
ApiServer.ts
//ApiServer.ts
import express, { Application } from "express"
export class ApiServer
{
//單例
private static instance: ApiServer = null;
private constructor()
{
}
public static GetInstance()
{
if (ApiServer.instance==null) {
ApiServer.instance = new ApiServer();
}
return ApiServer.instance;
}
//此類的核心成員
private app: Application = null;
//初始化
Init()
{
this.app = express();
let server = this.app.listen(50000, () => {console.info("Example app listening on port 50000")})
//讓express 能夠處理 async/await 中拋出的異常
const layer = require('express/lib/router/layer');
Object.defineProperty(layer.prototype, 'handle', {
enumerable: true,
get()
{
return this.__handle;
},
set(fn)
{
if (fn.length === 4)
{
this.__handle = fn;
}
else
{
this.__handle = (req, res, next) =>
{
Promise.resolve(fn(req, res, next)).catch(next);
}
}
}
});
}
Run()
{
//測試消息
this.StartTestResponse();
//public文件夾下的靜態資源,可以直接進行訪問
this.app.use(express.static('public'))
}
//測試消息
StartTestResponse()
{
this.app.all('/api/test', (req, res) =>
{
res.writeHead(200, {
'Content-Type': 'text-plain'
});
res.end('Hello World\n' + new Date().toString());
})
}
}
app.ts 作爲整個項目的入口,在此文件中,調用ApiServer,開啓服務器
//app.ts
import { ApiServer } from "./ApiServer";
async function main()
{
ApiServer.GetInstance().Init();
await ApiServer.GetInstance().Run();
}
main();
在之前的文章中,已經設置好調試代碼,會以app.ts 作爲程序入口
這時運行程序進行調試,發現服務器已經成功運行在本機的50000端口上(如果遇到防火牆攔截,注意允許通過)
在瀏覽器中輸入本機地址和端口,測試下我們在ApiServer中測試api /api/test
已經成功輸出了hello world 和服務器的時間
至此,一個最簡單的服務器已經上線,可以爲我們提供查詢時間的功能
以後的文章中 會慢慢得在此基礎上不斷修改和完善各個模塊和功能