从零搭建项目(9) --- 后端: 项目初始化和使用Koa相关

我的博客地址

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

文章目录

1. 项目及其技术栈介绍
2. 前端: 项目初始化
3. 前端: 使用Sass和Antd
4. 前端: 开发体验优化
5. 前端: 搭建路由和状态管理
6. 前端: 支持Axios
7. 前端: 打包与环境变量设置
8. 前端: 团队代码规范
9. 后端: 项目初始化和使用Koa相关
10. 后端: 使用TypeORM和MySQL
11. 部署: 使用nginx部署前端项目
12. 部署: 后端部署
13. 部署: 使用jenkins自动化部署

前言

相对于前端而言，后端搭建相对比较"轻"，使用的技术栈是Koa，koa-router ，koa-bodyparser，TypeORM，数据库使用的是MySQL，另外全部代码都将使用TypeScript进行编写，内容如下:

1. 项目启动
2. 编写测试接口和路由
3. 使用koa-bodyparser获取请求参数

项目启动

• 安装koa
  在本项目中使用的是Koa2，要安装它，我们首先需要进行项目初始化，我新建了一个文件夹来做这件事，所以首先我们需要使用npm初始化这个文件夹: 'npm init -y'，然后使用npm i -S koa安装Koa，另外记得安装它的类型包: npm i -D @types/koa。

• 初始化TypeScript
  另外我们需要初始化TypeScript配置，首先安装npm i -D typescript，然后使用tsc --init初始化一个tsconfig.json文件出来，此时我们的项目结构如下:
  

  

  image.png
  
  注意，tsconfig文件中的module项需要为commonjs:
  
  

  image.png
  
  原因是在node中采用CommonJS 模块规范，而我们使用TypeScript之后，将会使用es6的import进行模块的导入导出，而typescript文件最终编译回javascript文件的时候，需要将这部分代码转换成CommonJS规范，否则项目出错。

• 编写启动文件
  上面两步都做完后，我们在根目录中新建文件夹src，并且在里面新建index.ts文件：
  

  

  image.png
  
  在index.ts文件中，导入koa，并随便编写一个方法，如下代码意思就是去到localhost: 3001的时候，将会展示一个hi, i am oxc的字段:
  
  

  image.png

• 使用nodemon启动项目
  在上述步骤做完后，我们需要通过入口文件index.ts启动项目，这时候使用nodemon这款工具来启动是最好的，它拥有自动监听文件变化的功能。
  我们最好在全局安装它npm i -g nodemon。
  安装完毕后去到package.json中新建一条命令:
  

  

  image.png
  
  之后在命令行中使用命令npm run dev即可:
  
  

  image.png
  
  去到localhost: 3001查看结果，有以下字段则表明项目初始化成功:
  
  

  image.png

写一个测试接口

在前后端分离的项目中，后端通常扮演数据的提供者，通过各种不同的接口向前端提供数据，该章节基于上面项目启动成功的情况下，将会介绍如何在koa中写接口并向前端提供数据。

• 编写接口逻辑
  我们先到src文件夹下新建controller文件夹，这个文件夹是用于存放各种业务逻辑函数的，也就是MVC架构中的C。
  然后在controller下新建test.ts文件:
  

  

  image.png
  
  现在去到test.ts中写一个接口逻辑，这个接口在收到请求的时候，将会返回一个你好的字段:
  
  

  image.png
  
  另外注意导出的是这个类的实例，而不是这个类。

• 编写路由
  在koa中，通常使用koa-router作为路由处理工具，所以在编写路由之前先安装它:
  npm i -S koa-router
npm i -D @types/koa-router
  然后在src文件夹下新建routers/index.ts文件，用作存放路由文件:
  

  

  image.png
  
  在index.ts中，我们编写一个路径为/api/test的路由，文件中的RouteItem是路由对象的类型:
  
  

  image.png
  
  然后在src/index.ts中引入路由数组，并配置koa-router:
  
  

  image.png
  
  完成后可以测试一下接口是否跑通了。

• 测试结果
  之后我们去到之前搭建好的前端模板中，在src/services/api.ts中新增这个接口，由于baseURL中已经存在api字段，所以前端的接口都不需要写api字段：
  

  

  image.png
  
  
  

  image.png
  
  然后我们去到PageA组件中，引入这个接口并使用:
  
  

  image.png
  
  测试结果报错了，因为端口不同的缘故导致跨域:
  
  

  image.png

• 使用koa2-cors解决跨域
  解决跨域的方法有很多，在这里我们使用koa2-cors这个中间件解决跨域问题。
  首先安装它:
  npm i -S koa2-cors
npm i -D @types/koa2-cors
  然后直接在src/index.ts中导入并使用即可，注意这个中间件函数是通过执行cors的得来的:
  

  

  image.png
  
  再来测试一下结果，可以得到数据了:
  
  

  image.png
  
  这样我们的测试接口就完成了。

使用koa-bodyparser获取请求参数

在上面的测试接口中，如果我们在前端传递参数给后端，因为是get方法，所以可以在ctx.query中获取到:

image.png

image.png

但是如果我们它改为 post方法的接口:

image.png

image.png

因为koa2没有封装获取参数的方法，需要通过解析上下文context中的原生node.js请求对象req，将POST表单数据解析成query string（例如：a=1&b=2&c=3），再将query string 解析成JSON格式（例如：{"a":"1", "b":"2", "c":"3"}）。但是自己来做这个事情是非常不方便的，所以需要使用到 koa-bodyparser这个库，这个库也是一个中间件，可以将上面那样的参数转化为JSON格式。

• 安装
  npm i -S koa-bodyparser
npm i -D @types/koa-bodyparser

• 使用
  我们去到src/index.ts中引入它，然后通过use方法注入这个中间件:
  

  

  image.png
  
  然后你会发现ctx.request对象中多出了一个body属性，这个属性就是前端传过来的参数，我们将它打印出来:
  
  

  image.png
  
  这样就能获取到post请求的参数了。

后记

到这里为止，我们的koa项目就搭建起来了，获取请求以及回应请求都可以做到，那么下一步将通过一个注册登录的简单功能来扩展接口并引入数据库和TypeORM。