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

我的博客地址

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

文章目录

  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

这时候我们就需要使用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
    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保存一个实例数据入表,可以通过findfindOne等方法查找数据,具体需要自行谷歌他的文档。
    然后在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了,下一步将会介绍部署相关的知识。

推荐阅读更多精彩内容