从零搭建项目(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了，下一步将会介绍部署相关的知识。

本文章由javascript技术分享原创和收集