從零搭建項目 (10) --- 后端: 使用 TypeORM 和 MySQL

我的博客地址

正式地址

測試地址

前端源碼

后端源碼

文章目錄

項目及其技術棧介紹

前端: 項目初始化

前端: 使用 Sass 和 Antd

前端: 開發體驗優化

前端: 搭建路由和狀態管理

前端: 支持 Axios

前端: 打包與環境變量設置

前端: 團隊代碼規范

后端: 項目初始化和使用 Koa 相關

后端: 使用 TypeORM 和 MySQL

部署: 使用 nginx 部署前端項目

部署: 后端部署

部署: 使用 jenkins 自動化部署

前言

本章將會通過一個登錄注冊的例子來介紹 MySQL 以及 TypeORM 的使用, 因為在不同系統下的 MySQL 下安裝方式不同, 所以安裝 MySQL 的部分會一筆帶過.

安裝 MySQL

安裝使用 workbench, 并創建用戶和數據庫

安裝并使用 TypeORM

編譯出 node 可運行的 JS 文件

安裝 MySQL

這一部分建議查看這篇文章, 如果是 win 或者 Mac 用戶建議通過連接下載資源包安裝. 如果你使用的 Ubuntu 系統, 我會在后續章節介紹如何安裝, 或者自行谷歌也行.

安裝使用 workbench, 并創建用戶和數據庫

安裝完畢后, 我們可以通過在命令行輸入 MySQL -uroot -p, 然后輸入你的初始化密碼 (安裝的時候會有這個密碼給你, 也會提示你修改密碼, 這個密碼就是 root 用戶的密碼), 進入到 MySQL 中:

image.PNG

在這里我們可以通過命令進行一系列的操作 (命令的結尾必須輸入分號), 比如查看有哪些數據庫:

image.PNG

又或者進入到某個數據庫中查看里面有哪些表:

image.PNG

但是在這里進行操作十分不方便, 比如下面這個創建表的命令:

image.PNG

這時候我們就需要使用 workbench 這個圖形化數據庫設計建模工具了:

image.PNG

創建數據庫用戶

在使用 workbench 之前, 我們先要創建一個數據庫用戶, 一切操作都在這個用戶的范圍內進行, 因為我們一般不在 root 用戶下進行操作, 另外 TypeORM 的自動建表功能也無法在 root 用戶下進行.

首先在命令行登錄 root 用戶:

image.PNG

然后使用如下命令創建一個用戶

CREATE USER '你的用戶名'@'ip 地址, 本地的話填 localhost,% 則是允許任意主機登錄' IDENTIFIED BY '密碼';

image.PNG

接著我們設置該用戶擁有的權限, 這里設置的是擁有全部數據庫和表的所有操作權限:

GRANT ALL ON *.* TO 'oxc'@'%';

image.PNG

設置完權限后記得使用這個命令讓他生效

flush privileges;

image.PNG

安裝并配置 workbench

我們直接去官網下載頁面下載然后安裝即可, 安裝完畢后我們打開它, Mac 版的界面長這樣, win 系統的會有點不一樣, 但是也大同小異:

image.PNG

然后我們點擊那個 + 號:

image.PNG

在彈出的框框里面輸入必要的連接信息:

image.PNG

記得點一下這個按鈕輸入密碼:

image.PNG

之后測試連接, 成功后點 ok:

image.PNG

之后下面就會多出一個選項, 直接點擊即可建立數據庫連接:

image.PNG

image.PNG

創建一個數據庫

MySQL 創建數據庫的方式非常簡單, 我們在 workbench 中輸入

create database test

命令就創建了一個名為 test 的數據庫, 使用 use test 后就能夠使用這個數據庫了:

image.PNG

在上面步驟都完成后, 我們進入下一步, 安裝并使用 TypeORM.

安裝并使用 TypeORM

什么是 TypeORM

typeorm 是一款 ORM(對象關系映射) 框架, 能夠非常方便的與 TypeScript,JavaScript 一起使用, 并且能夠根據自定的 entity/model 自動創建表, 與他類似的還有 sequelize.

安裝

我們可以使用 NPM 來安裝 typeorm, 另外還需要安裝 typeorm 與 MySQL 之間進行連接的連接器 mysql2

NPM i -S typeorm mysql2

配置

在項目根目錄新建 ormconfig.JS 文件, 用于寫 typeorm 的配置, 內容包含所選數據庫, 數據庫賬號密碼等, 詳細請看注釋:

image.PNG

之后去到 src/index.ts 中, 從 typeorm 中引入并使用 createConnection 方法:

image.PNG

這樣就算是配置好了, 但此時還不能直接使用, 需要創建 entity

創建 entity

按照之前 ormconfig.JS 中的配置, 我們去 src 目錄下新建一個名為 entity 的文件夾:

image.PNG

在其下新建 user.ts 文件, 并新建 User 類作為 model, 里面的

PrimaryGeneratedColumn

是自增 id 的意思:

image.PNG

需要注意的是, 如果你有上面那樣的報錯, 請到 tsconfig.JSON 中把裝飾器開關打開并關閉對于 null 的檢測:

image.PNG

之后我們重新 NPM run dev, 去到 workbench 中就能夠看到, 對應 user 這個 model 的表已經被建好了, 我們可以通過 select * from user 獲取到里面的信息:

image.PNG

此時 user 表中還沒有數據.

這時候我們的 TypeORM 就配置好了, 接下來將會通過編寫一個簡單的注冊登錄邏輯將前端, 后端, 數據庫之間的數據傳輸串通起來, 并熟悉一些 TypeORM 的 API

注冊登錄功能

前端部分

首先我們去到 src/services/API.ts 中添加注冊登錄的 API:

image.PNG

然后在

containsers/views/PageA

組件中添加界面和邏輯代碼:

code.PNG

image.PNG

該段代碼在登陸成功后將會顯示一個歡迎的字段.

后端部分

前端部分完成后, 我們去到后端 src/controller/test.ts 中添加注冊和登錄的接口方法:

image.PNG

在 TypeORM 中, 可以使用 save 保存一個實例數據入表, 可以通過 find,findOne 等方法查找數據, 具體需要自行谷歌他的文檔.

然后在

src/routers/index.ts

中添加對應路由:

image.PNG

這樣登錄注冊的接口就完成了.

測試結果

我們去到頁面注冊一個賬號:

image.PNG

然后去 workbench 中查看是否存在這個數據:

image.PNG

當存在這個數據時, 就說明注冊接口已經跑通了.

我們再來登陸一下:

image.PNG

有結果返回, 說明登錄接口也跑通了, 這證明從前端 -> 后端 -> 數據庫直接的數據傳輸是通暢無阻的了.

注意

以上的注冊登錄接口只是用作簡單測試所用, 在一個正常的項目中, 密碼入庫之前是會進行加密的, 而校驗的也是加密后的密碼, 所以千萬別把明文密碼入庫了.

編譯出可運行的 JS 文件

通常在服務器中, 我們會使用 pm2 進行項目的啟動, 但是 pm2 一般運行的 JS 文件, 而我們使用的是 ts 進行代碼的編寫, 所以需要將 ts 代碼先編譯成 JS 文件, 再使用 pm2 進行啟動 (當然也可以直接配置 pm2 使用 ts-node 來運行項目, 但是需要先在服務器中安裝 ts-node).

要將 ts 文件編譯為 JS 文件, 我們首先需要去 tsconfig.JSON 中配置編譯后文件的存放路徑, 在本例中設定為根目錄中的 dist 文件夾:

image.PNG

然后去到 package.JSON 中添加編譯命令, 使用 tsc 命令即可進行編譯:

image.PNG

運行該命令后得出:

image.PNG

之后 pm2 運行的就是 dist 文件夾中的 index.JS.

后記

完成該篇文章后, 我們的后端搭建也基本 ok 了, 下一步將會介紹部署相關的知識.

來源: http://www.jianshu.com/p/ee5ecc310e23

總結

以上是生活随笔為你收集整理的typeorm mysql_从零搭建项目 (10) --- 后端: 使用 TypeORM 和 MySQL的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。