我的博客地址
正式地址
测试地址
前端源码
后端源码
文章目录
项目及其技术栈介绍
前端: 项目初始化
前端: 使用Sass和Antd
前端: 开发体验优化
前端: 搭建路由和状态管理
前端: 支持Axios
前端: 打包与环境变量设置
前端: 团队代码规范
后端: 项目初始化和使用Koa相关
后端: 使用TypeORM和MySQL
部署: 使用nginx部署前端项目
部署: 后端部署
部署: 使用jenkins自动化部署
前言
本章将会通过一个登录注册的例子来介绍MySQL以及TypeORM的使用&＃xff0c;因为在不同系统下的MySQL下安装方式不同&＃xff0c;所以安装MySQL的部分会一笔带过。
安装MySQL
安装使用workbench&＃xff0c;并创建用户和数据库
安装并使用TypeORM
编译出node可运行的js文件
安装MySQL
这一部分建议查看这篇文章&＃xff0c;如果是win或者mac用户建议通过连接下载资源包安装。 如果你使用的Ubuntu系统&＃xff0c;我会在后续章节介绍如何安装&＃xff0c;或者自行谷歌也行。
安装使用workbench&＃xff0c;并创建用户和数据库
安装完毕后&＃xff0c;我们可以通过在命令行输入mysql -uroot -p&＃xff0c;然后输入你的初始化密码(安装的时候会有这个密码给你&＃xff0c;也会提示你修改密码&＃xff0c;这个密码就是root用户的密码)&＃xff0c;进入到mysql中:
image.png
在这里我们可以通过命令进行一系列的操作(命令的结尾必须输入分号)&＃xff0c;比如查看有哪些数据库:
image.png
又或者进入到某个数据库中查看里面有哪些表:
image.png
但是在这里进行操作十分不方便&＃xff0c;比如下面这个创建表的命令:
image.png
这时候我们就需要使用workbench这个图形化数据库设计建模工具了:
image.png
创建数据库用户
在使用workbench之前&＃xff0c;我们先要创建一个数据库用户&＃xff0c;一切操作都在这个用户的范围内进行&＃xff0c;因为我们一般不在root用户下进行操作&＃xff0c;另外TypeORM的自动建表功能也无法在root用户下进行。
首先在命令行登录root用户:
image.png
然后使用如下命令创建一个用户
CREATE USER &＃39;你的用户名&＃39;&＃64;&＃39;ip地址&＃xff0c;本地的话填localhost&＃xff0c;%则是允许任意主机登录&＃39; IDENTIFIED BY &＃39;密码&＃39;;
image.png
接着我们设置该用户拥有的权限&＃xff0c;这里设置的是拥有全部数据库和表的所有操作权限:
GRANT ALL ON *.* TO &＃39;oxc&＃39;&＃64;&＃39;%&＃39;;
image.png
设置完权限后记得使用这个命令让他生效
flush privileges;
image.png
安装并配置workbench
我们直接去官网下载页面下载然后安装即可&＃xff0c;安装完毕后我们打开它&＃xff0c;mac版的界面长这样&＃xff0c;win系统的会有点不一样&＃xff0c;但是也大同小异:
image.png
然后我们点击那个&＃xff0b;号:
image.png
在弹出的框框里面输入必要的连接信息:
image.png
记得点一下这个按钮输入密码:
image.png
之后测试连接&＃xff0c;成功后点ok:
image.png
之后下面就会多出一个选项&＃xff0c;直接点击即可建立数据库连接:
image.png
image.png
创建一个数据库
mysql创建数据库的方式非常简单&＃xff0c;我们在workbench中输入create database test命令就创建了一个名为test的数据库&＃xff0c;使用use test后就能够使用这个数据库了:
image.png
在上面步骤都完成后&＃xff0c;我们进入下一步&＃xff0c;安装并使用TypeORM。
安装并使用TypeORM
什么是TypeORM
typeorm是一款ORM(对象关系映射)框架&＃xff0c;能够非常方便的与TypeScript&＃xff0c;Javascript一起使用&＃xff0c;并且能够根据自定的entity/model自动创建表&＃xff0c;与他类似的还有sequelize。
安装
我们可以使用npm来安装typeorm&＃xff0c;另外还需要安装typeorm与mysql之间进行连接的连接器mysql2
npm i -S typeorm mysql2
配置
在项目根目录新建ormconfig.js文件&＃xff0c;用于写typeorm的配置&＃xff0c;内容包含所选数据库&＃xff0c;数据库账号密码等&＃xff0c;详细请看注释:
image.png
之后去到src/index.ts中&＃xff0c;从typeorm中引入并使用createConnection方法:
image.png
这样就算是配置好了&＃xff0c;但此时还不能直接使用&＃xff0c;需要创建entity
创建entity
按照之前ormconfig.js中的配置&＃xff0c;我们去src目录下新建一个名为entity的文件夹:
image.png
在其下新建user.ts文件&＃xff0c;并新建User类作为model&＃xff0c;里面的PrimaryGeneratedColumn是自增id的意思:
image.png
需要注意的是&＃xff0c;如果你有上面那样的报错&＃xff0c;请到tsconfig.json中把装饰器开关打开并关闭对于null的检测:
image.png
之后我们重新npm run dev&＃xff0c;去到workbench中就能够看到&＃xff0c;对应user这个model的表已经被建好了&＃xff0c;我们可以通过select * from user获取到里面的信息:
image.png
此时user表中还没有数据。
这时候我们的TypeORM就配置好了&＃xff0c;接下来将会通过编写一个简单的注册登录逻辑将前端、后端、数据库之间的数据传输串通起来&＃xff0c;并熟悉一些TypeORM的api
注册登录功能
前端部分
首先我们去到src/services/api.ts中添加注册登录的api:
image.png
然后在containsers/views/PageA组件中添加界面和逻辑代码:
code.png
image.png
该段代码在登陆成功后将会显示一个欢迎的字段。
后端部分
前端部分完成后&＃xff0c;我们去到后端src/controller/test.ts中添加注册和登录的接口方法:
image.png
在TypeORM中&＃xff0c;可以使用save保存一个实例数据入表&＃xff0c;可以通过find&＃xff0c;findOne等方法查找数据&＃xff0c;具体需要自行谷歌他的文档。
然后在src/routers/index.ts中添加对应路由:
image.png
这样登录注册的接口就完成了。
测试结果
我们去到页面注册一个账号:
image.png
然后去workbench中查看是否存在这个数据:
image.png
当存在这个数据时&＃xff0c;就说明注册接口已经跑通了。
我们再来登陆一下:
image.png
有结果返回&＃xff0c;说明登录接口也跑通了&＃xff0c;这证明从前端 -> 后端 -> 数据库直接的数据传输是通畅无阻的了。
注意
以上的注册登录接口只是用作简单测试所用&＃xff0c;在一个正常的项目中&＃xff0c;密码入库之前是会进行加密的&＃xff0c;而校验的也是加密后的密码&＃xff0c;所以千万别把明文密码入库了。
编译出可运行的js文件
通常在服务器中&＃xff0c;我们会使用pm2进行项目的启动&＃xff0c;但是pm2一般运行的js文件&＃xff0c;而我们使用的是ts进行代码的编写&＃xff0c;所以需要将ts代码先编译成js文件&＃xff0c;再使用pm2进行启动(当然也可以直接配置pm2使用ts-node来运行项目&＃xff0c;但是需要先在服务器中安装ts-node)。
要将ts文件编译为js文件&＃xff0c;我们首先需要去tsconfig.json中配置编译后文件的存放路径&＃xff0c;在本例中设定为根目录中的dist文件夹:
image.png
然后去到package.json中添加编译命令&＃xff0c;使用tsc命令即可进行编译:
image.png
运行该命令后得出:
image.png
之后pm2运行的就是dist文件夹中的index.js。
后记
完成该篇文章后&＃xff0c;我们的后端搭建也基本ok了&＃xff0c;下一步将会介绍部署相关的知识。
京公网安备 11010802041100号