我的博客地址
文章目錄
- 項目及其技術(shù)棧介紹
- 前端: 項目初始化
- 前端: 使用Sass和Antd
- 前端: 開發(fā)體驗優(yōu)化
- 前端: 搭建路由和狀態(tài)管理
- 前端: 支持Axios
- 前端: 打包與環(huán)境變量設(shè)置
- 前端: 團隊代碼規(guī)范
- 后端: 項目初始化和使用Koa相關(guān)
- 后端: 使用TypeORM和MySQL
- 部署: 使用nginx部署前端項目
- 部署: 后端部署
- 部署: 使用jenkins自動化部署
前言
相對于前端而言，后端搭建相對比較"輕"，使用的技術(shù)棧是Koa，koa-router ，koa-bodyparser，TypeORM，數(shù)據(jù)庫使用的是MySQL，另外全部代碼都將使用TypeScript進行編寫，內(nèi)容如下:
- 項目啟動
- 編寫測試接口和路由
- 使用
koa-bodyparser獲取請求參數(shù)
項目啟動
安裝koa
在本項目中使用的是Koa2，要安裝它，我們首先需要進行項目初始化，我新建了一個文件夾來做這件事，所以首先我們需要使用npm初始化這個文件夾: 'npm init -y'，然后使用npm i -S koa安裝Koa，另外記得安裝它的類型包:npm i -D @types/koa。-
初始化TypeScript
另外我們需要初始化TypeScript配置，首先安裝npm i -D typescript，然后使用tsc --init初始化一個tsconfig.json文件出來，此時我們的項目結(jié)構(gòu)如下:
image.png
注意，tsconfig文件中的module項需要為commonjs:
image.png
原因是在node中采用CommonJS 模塊規(guī)范，而我們使用TypeScript之后，將會使用es6的import進行模塊的導(dǎo)入導(dǎo)出，而typescript文件最終編譯回javascript文件的時候，需要將這部分代碼轉(zhuǎn)換成CommonJS規(guī)范，否則項目出錯。
-
編寫啟動文件
上面兩步都做完后，我們在根目錄中新建文件夾src，并且在里面新建index.ts文件：
image.png
在index.ts文件中，導(dǎo)入koa，并隨便編寫一個方法，如下代碼意思就是去到localhost: 3001的時候，將會展示一個hi, i am oxc的字段:
image.png -
使用nodemon啟動項目
在上述步驟做完后，我們需要通過入口文件index.ts啟動項目，這時候使用nodemon這款工具來啟動是最好的，它擁有自動監(jiān)聽文件變化的功能。
我們最好在全局安裝它npm i -g nodemon。
安裝完畢后去到package.json中新建一條命令:
image.png
之后在命令行中使用命令npm run dev即可:
image.png
去到localhost: 3001查看結(jié)果，有以下字段則表明項目初始化成功:
image.png
寫一個測試接口
在前后端分離的項目中，后端通常扮演數(shù)據(jù)的提供者，通過各種不同的接口向前端提供數(shù)據(jù)，該章節(jié)基于上面項目啟動成功的情況下，將會介紹如何在koa中寫接口并向前端提供數(shù)據(jù)。
-
編寫接口邏輯
我們先到src文件夾下新建controller文件夾，這個文件夾是用于存放各種業(yè)務(wù)邏輯函數(shù)的，也就是MVC架構(gòu)中的C。
然后在controller下新建test.ts文件:
image.png
現(xiàn)在去到test.ts中寫一個接口邏輯，這個接口在收到請求的時候，將會返回一個你好的字段:
image.png
另外注意導(dǎo)出的是這個類的實例，而不是這個類。 -
編寫路由
在koa中，通常使用koa-router作為路由處理工具，所以在編寫路由之前先安裝它:
npm i -S koa-router
npm i -D @types/koa-router
然后在src文件夾下新建routers/index.ts文件，用作存放路由文件:
image.png
在index.ts中，我們編寫一個路徑為/api/test的路由，文件中的RouteItem是路由對象的類型:
image.png
然后在src/index.ts中引入路由數(shù)組，并配置koa-router:
image.png
完成后可以測試一下接口是否跑通了。
-
測試結(jié)果
之后我們?nèi)サ街按罱ê玫那岸四０逯?，?code>src/services/api.ts中新增這個接口，由于baseURL中已經(jīng)存在api字段，所以前端的接口都不需要寫api字段：
image.png
image.png
然后我們?nèi)サ?code>PageA組件中，引入這個接口并使用:
image.png
測試結(jié)果報錯了，因為端口不同的緣故導(dǎo)致跨域:
image.png -
使用
koa2-cors解決跨域
解決跨域的方法有很多，在這里我們使用koa2-cors這個中間件解決跨域問題。
首先安裝它:
npm i -S koa2-cors
npm i -D @types/koa2-cors
然后直接在src/index.ts中導(dǎo)入并使用即可，注意這個中間件函數(shù)是通過執(zhí)行cors的得來的:
image.png
再來測試一下結(jié)果，可以得到數(shù)據(jù)了:
image.png
這樣我們的測試接口就完成了。
使用koa-bodyparser獲取請求參數(shù)
在上面的測試接口中，如果我們在前端傳遞參數(shù)給后端，因為是get方法，所以可以在ctx.query中獲取到:
但是如果我們它改為
post方法的接口:
因為koa2沒有封裝獲取參數(shù)的方法，需要通過解析上下文context中的原生node.js請求對象req，將POST表單數(shù)據(jù)解析成query string（例如：a=1&b=2&c=3），再將query string 解析成JSON格式（例如：{"a":"1", "b":"2", "c":"3"}）。但是自己來做這個事情是非常不方便的，所以需要使用到
koa-bodyparser這個庫，這個庫也是一個中間件，可以將上面那樣的參數(shù)轉(zhuǎn)化為JSON格式。
安裝
npm i -S koa-bodyparser
npm i -D @types/koa-bodyparser-
使用
我們?nèi)サ?code>src/index.ts中引入它，然后通過use方法注入這個中間件:
image.png
然后你會發(fā)現(xiàn)ctx.request對象中多出了一個body屬性，這個屬性就是前端傳過來的參數(shù)，我們將它打印出來:
image.png
這樣就能獲取到post請求的參數(shù)了。
后記
到這里為止，我們的koa項目就搭建起來了，獲取請求以及回應(yīng)請求都可以做到，那么下一步將通過一個注冊登錄的簡單功能來擴展接口并引入數(shù)據(jù)庫和TypeORM。
