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

我的博客地址

正式地址

測(cè)試地址

前端源碼

后端源碼

文章目錄

項(xiàng)目及其技術(shù)棧介紹

前端: 項(xiàng)目初始化

前端: 使用 Sass 和 Antd

前端: 開(kāi)發(fā)體驗(yàn)優(yōu)化

前端: 搭建路由和狀態(tài)管理

前端: 支持 Axios

前端: 打包與環(huán)境變量設(shè)置

前端: 團(tuán)隊(duì)代碼規(guī)范

后端: 項(xiàng)目初始化和使用 Koa 相關(guān)

后端: 使用 TypeORM 和 MySQL

部署: 使用 nginx 部署前端項(xiàng)目

部署: 后端部署

部署: 使用 jenkins 自動(dòng)化部署

前言

本章將會(huì)通過(guò)一個(gè)登錄注冊(cè)的例子來(lái)介紹 MySQL 以及 TypeORM 的使用, 因?yàn)樵诓煌到y(tǒng)下的 MySQL 下安裝方式不同, 所以安裝 MySQL 的部分會(huì)一筆帶過(guò).

安裝 MySQL

安裝使用 workbench, 并創(chuàng)建用戶(hù)和數(shù)據(jù)庫(kù)

安裝并使用 TypeORM

編譯出 node 可運(yùn)行的 JS 文件

安裝 MySQL

這一部分建議查看這篇文章, 如果是 win 或者 Mac 用戶(hù)建議通過(guò)連接下載資源包安裝. 如果你使用的 Ubuntu 系統(tǒng), 我會(huì)在后續(xù)章節(jié)介紹如何安裝, 或者自行谷歌也行.

安裝使用 workbench, 并創(chuàng)建用戶(hù)和數(shù)據(jù)庫(kù)

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

image.PNG

在這里我們可以通過(guò)命令進(jìn)行一系列的操作 (命令的結(jié)尾必須輸入分號(hào)), 比如查看有哪些數(shù)據(jù)庫(kù):

image.PNG

又或者進(jìn)入到某個(gè)數(shù)據(jù)庫(kù)中查看里面有哪些表:

image.PNG

但是在這里進(jìn)行操作十分不方便, 比如下面這個(gè)創(chuàng)建表的命令:

image.PNG

這時(shí)候我們就需要使用 workbench 這個(gè)圖形化數(shù)據(jù)庫(kù)設(shè)計(jì)建模工具了:

image.PNG

創(chuàng)建數(shù)據(jù)庫(kù)用戶(hù)

在使用 workbench 之前, 我們先要?jiǎng)?chuàng)建一個(gè)數(shù)據(jù)庫(kù)用戶(hù), 一切操作都在這個(gè)用戶(hù)的范圍內(nèi)進(jìn)行, 因?yàn)槲覀円话悴辉?root 用戶(hù)下進(jìn)行操作, 另外 TypeORM 的自動(dòng)建表功能也無(wú)法在 root 用戶(hù)下進(jìn)行.

首先在命令行登錄 root 用戶(hù):

image.PNG

然后使用如下命令創(chuàng)建一個(gè)用戶(hù)

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

image.PNG

接著我們?cè)O(shè)置該用戶(hù)擁有的權(quán)限, 這里設(shè)置的是擁有全部數(shù)據(jù)庫(kù)和表的所有操作權(quán)限:

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

image.PNG

設(shè)置完權(quán)限后記得使用這個(gè)命令讓他生效

flush privileges;

image.PNG

安裝并配置 workbench

我們直接去官網(wǎng)下載頁(yè)面下載然后安裝即可, 安裝完畢后我們打開(kāi)它, Mac 版的界面長(zhǎng)這樣, win 系統(tǒng)的會(huì)有點(diǎn)不一樣, 但是也大同小異:

image.PNG

然后我們點(diǎn)擊那個(gè) + 號(hào):

image.PNG

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

image.PNG

記得點(diǎn)一下這個(gè)按鈕輸入密碼:

image.PNG

之后測(cè)試連接, 成功后點(diǎn) ok:

image.PNG

之后下面就會(huì)多出一個(gè)選項(xiàng), 直接點(diǎn)擊即可建立數(shù)據(jù)庫(kù)連接:

image.PNG

image.PNG

創(chuàng)建一個(gè)數(shù)據(jù)庫(kù)

MySQL 創(chuàng)建數(shù)據(jù)庫(kù)的方式非常簡(jiǎn)單, 我們?cè)?workbench 中輸入

create database test

命令就創(chuàng)建了一個(gè)名為 test 的數(shù)據(jù)庫(kù), 使用 use test 后就能夠使用這個(gè)數(shù)據(jù)庫(kù)了:

image.PNG

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

安裝并使用 TypeORM

什么是 TypeORM

typeorm 是一款 ORM(對(duì)象關(guān)系映射) 框架, 能夠非常方便的與 TypeScript,JavaScript 一起使用, 并且能夠根據(jù)自定的 entity/model 自動(dòng)創(chuàng)建表, 與他類(lèi)似的還有 sequelize.

安裝

我們可以使用 NPM 來(lái)安裝 typeorm, 另外還需要安裝 typeorm 與 MySQL 之間進(jìn)行連接的連接器 mysql2

NPM i -S typeorm mysql2

配置

在項(xiàng)目根目錄新建 ormconfig.JS 文件, 用于寫(xiě) typeorm 的配置, 內(nèi)容包含所選數(shù)據(jù)庫(kù), 數(shù)據(jù)庫(kù)賬號(hào)密碼等, 詳細(xì)請(qǐng)看注釋:

image.PNG

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

image.PNG

這樣就算是配置好了, 但此時(shí)還不能直接使用, 需要?jiǎng)?chuàng)建 entity

創(chuàng)建 entity

按照之前 ormconfig.JS 中的配置, 我們?nèi)?src 目錄下新建一個(gè)名為 entity 的文件夾:

image.PNG

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

PrimaryGeneratedColumn

是自增 id 的意思:

image.PNG

需要注意的是, 如果你有上面那樣的報(bào)錯(cuò), 請(qǐng)到 tsconfig.JSON 中把裝飾器開(kāi)關(guān)打開(kāi)并關(guān)閉對(duì)于 null 的檢測(cè):

image.PNG

之后我們重新 NPM run dev, 去到 workbench 中就能夠看到, 對(duì)應(yīng) user 這個(gè) model 的表已經(jīng)被建好了, 我們可以通過(guò) select * from user 獲取到里面的信息:

image.PNG

此時(shí) user 表中還沒(méi)有數(shù)據(jù).

這時(shí)候我們的 TypeORM 就配置好了, 接下來(lái)將會(huì)通過(guò)編寫(xiě)一個(gè)簡(jiǎn)單的注冊(cè)登錄邏輯將前端, 后端, 數(shù)據(jù)庫(kù)之間的數(shù)據(jù)傳輸串通起來(lái), 并熟悉一些 TypeORM 的 API

注冊(cè)登錄功能

前端部分

首先我們?nèi)サ?src/services/API.ts 中添加注冊(cè)登錄的 API:

image.PNG

然后在

containsers/views/PageA

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

code.PNG

image.PNG

該段代碼在登陸成功后將會(huì)顯示一個(gè)歡迎的字段.

后端部分

前端部分完成后, 我們?nèi)サ胶蠖?src/controller/test.ts 中添加注冊(cè)和登錄的接口方法:

image.PNG

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

然后在

src/routers/index.ts

中添加對(duì)應(yīng)路由:

image.PNG

這樣登錄注冊(cè)的接口就完成了.

測(cè)試結(jié)果

我們?nèi)サ巾?yè)面注冊(cè)一個(gè)賬號(hào):

image.PNG

然后去 workbench 中查看是否存在這個(gè)數(shù)據(jù):

image.PNG

當(dāng)存在這個(gè)數(shù)據(jù)時(shí), 就說(shuō)明注冊(cè)接口已經(jīng)跑通了.

我們?cè)賮?lái)登陸一下:

image.PNG

有結(jié)果返回, 說(shuō)明登錄接口也跑通了, 這證明從前端 -> 后端 -> 數(shù)據(jù)庫(kù)直接的數(shù)據(jù)傳輸是通暢無(wú)阻的了.

注意

以上的注冊(cè)登錄接口只是用作簡(jiǎn)單測(cè)試所用, 在一個(gè)正常的項(xiàng)目中, 密碼入庫(kù)之前是會(huì)進(jìn)行加密的, 而校驗(yàn)的也是加密后的密碼, 所以千萬(wàn)別把明文密碼入庫(kù)了.

編譯出可運(yùn)行的 JS 文件

通常在服務(wù)器中, 我們會(huì)使用 pm2 進(jìn)行項(xiàng)目的啟動(dòng), 但是 pm2 一般運(yùn)行的 JS 文件, 而我們使用的是 ts 進(jìn)行代碼的編寫(xiě), 所以需要將 ts 代碼先編譯成 JS 文件, 再使用 pm2 進(jìn)行啟動(dòng) (當(dāng)然也可以直接配置 pm2 使用 ts-node 來(lái)運(yùn)行項(xiàng)目, 但是需要先在服務(wù)器中安裝 ts-node).

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

image.PNG

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

image.PNG

運(yùn)行該命令后得出:

image.PNG

之后 pm2 運(yùn)行的就是 dist 文件夾中的 index.JS.

后記

完成該篇文章后, 我們的后端搭建也基本 ok 了, 下一步將會(huì)介紹部署相關(guān)的知識(shí).

來(lái)源: http://www.jianshu.com/p/ee5ecc310e23

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。