我的博客地址

正式地址
测试地址
前端源码
后端源码

文章目录

1. 项目及其技术栈介绍
2. 前端: 项目初始化
3. 前端: 使用Sass和Antd
4. 前端: 开发体验优化
5. 前端: 搭建路由和状态管理
6. 前端: 支持Axios
7. 前端: 打包与环境变量设置
8. 前端: 团队代码规范
9. 后端: 项目初始化和使用Koa相关
10. 后端: 使用TypeORM和MySQL
11. 部署: 使用nginx部署前端项目
12. 部署: 后端部署
13. 部署: 使用jenkins自动化部署

前言

本章将会通过一个登录注册的例子来介绍MySQL以及TypeORM的使用，因为在不同系统下的MySQL下安装方式不同，所以安装MySQL的部分会一笔带过。

1. 安装MySQL
2. 安装使用workbench，并创建用户和数据库
3. 安装并使用TypeORM
4. 编译出node可运行的js文件

安装MySQL

这一部分建议查看这篇文章，如果是win或者mac用户建议通过连接下载资源包安装。 如果你使用的Ubuntu系统，我会在后续章节介绍如何安装，或者自行谷歌也行。

安装使用workbench，并创建用户和数据库

安装完毕后，我们可以通过在命令行输入mysql -uroot -p，然后输入你的初始化密码(安装的时候会有这个密码给你，也会提示你修改密码，这个密码就是root用户的密码)，进入到mysql中:

image.png

image.png

image.png

image.png

image.png

• 创建数据库用户
  在使用workbench之前，我们先要创建一个数据库用户，一切操作都在这个用户的范围内进行，因为我们一般不在root用户下进行操作，另外TypeORM的自动建表功能也无法在root用户下进行。
  首先在命令行登录root用户:

  
  
  image.png
  
  

  然后使用如下命令创建一个用户

CREATE USER '你的用户名'@'ip地址，本地的话填localhost，%则是允许任意主机登录' IDENTIFIED BY '密码';

image.png

image.png

image.png

• 安装并配置workbench

  1. 我们直接去官网下载页面下载然后安装即可，安装完毕后我们打开它，mac版的界面长这样，win系统的会有点不一样，但是也大同小异:
     

     image.png

  2. 然后我们点击那个＋号:

     
     
     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了，下一步将会介绍部署相关的知识。