我的博客地址

正式地址
測(cè)試地址
前端源碼
后端源碼

文章目錄

1. 項(xiàng)目及其技術(shù)棧介紹
2. 前端: 項(xiàng)目初始化
3. 前端: 使用Sass和Antd
4. 前端: 開發(fā)體驗(yàn)優(yōu)化
5. 前端: 搭建路由和狀態(tài)管理
6. 前端: 支持Axios
7. 前端: 打包與環(huán)境變量設(shè)置
8. 前端: 團(tuán)隊(duì)代碼規(guī)范
9. 后端: 項(xiàng)目初始化和使用Koa相關(guān)
10. 后端: 使用TypeORM和MySQL
11. 部署: 使用nginx部署前端項(xiàng)目
12. 部署: 后端部署
13. 部署: 使用jenkins自動(dòng)化部署

前言

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

1. 安裝MySQL
2. 安裝使用workbench，并創(chuàng)建用戶和數(shù)據(jù)庫(kù)
3. 安裝并使用TypeORM
4. 編譯出node可運(yùn)行的js文件

安裝MySQL

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

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

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

image.png

image.png

image.png

image.png

image.png

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

  
  
  image.png
  
  

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

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

image.png

image.png

image.png

• 安裝并配置workbench

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

     image.png

  2. 然后我們點(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è)趙orkbench中輸入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)建表，與他類似的還有sequelize。

• 安裝
  我們可以使用npm來安裝typeorm，另外還需要安裝typeorm與mysql之間進(jìn)行連接的連接器mysql2
npm i -S typeorm mysql2

• 配置
  在項(xiàng)目根目錄新建ormconfig.js文件，用于寫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)?code>src目錄下新建一個(gè)名為entity的文件夾:
  

  image.png
  
  在其下新建user.ts文件，并新建User類作為model，里面的PrimaryGeneratedColumn是自增id的意思:
  
  image.png
  
  需要注意的是，如果你有上面那樣的報(bào)錯(cuò)，請(qǐng)到tsconfig.json中把裝飾器開關(guān)打開并關(guān)閉對(duì)于null的檢測(cè):
  
  image.png
  
  之后我們重新npm run dev，去到workbench中就能夠看到，對(duì)應(yīng)user這個(gè)model的表已經(jīng)被建好了，我們可以通過select * from user獲取到里面的信息:
  
  image.png
  
  此時(shí)user表中還沒有數(shù)據(jù)。

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

注冊(cè)登錄功能

• 前端部分
  首先我們?nèi)サ?code>src/services/api.ts中添加注冊(cè)登錄的api:
  

  image.png
  
  然后在containsers/views/PageA組件中添加界面和邏輯代碼:
  
  code.png
  
  
  image.png
  
  該段代碼在登陸成功后將會(huì)顯示一個(gè)歡迎的字段。

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

  image.png
  
  在TypeORM中，可以使用save保存一個(gè)實(shí)例數(shù)據(jù)入表，可以通過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í)，就說明注冊(cè)接口已經(jīng)跑通了。

我們?cè)賮淼顷懸幌?

image.png

有結(jié)果返回，說明登錄接口也跑通了，這證明從前端 -> 后端 -> 數(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)行代碼的編寫，所以需要將ts代碼先編譯成js文件，再使用pm2進(jìn)行啟動(dòng)(當(dāng)然也可以直接配置pm2使用ts-node來運(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í)。