从零搭建项目 (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