我的博客地址
文章目录
- 项目及其技术栈介绍
- 前端: 项目初始化
- 前端: 使用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了，下一步将会介绍部署相关的知识。
网友评论