安装 ts

pnpm add -D typescript

安装 ts-node 作为服务端的编译工具

一般情况下，ts 需要我们手动编译 tsc cli 工具，所以采用 ts-node

pnpm add -D ts-node

修改 package.json 启动脚本

"scripts": {
    "start": "ts-node src/index.ts"
  },

安装 nodemon，监听文件变化，然后自动刷新

pnpm add -D nodemon

修改 package.json 启动脚本

"scripts": {
    "start": "nodemon --watch src --exec ts-node src/index.ts"
  },

搭建 koa

pnpm add koa

后端有两个东西

• 服务端代码【java go】
• 数据库

ES 的语法也是可以在服务端被识别，因为 ts 的存在，es 和 ts 的结合是最好的

一般一个库是和一个@types/xxx 相绑定的

pnpm add -D @types/koa

在 tsconfig.json 中，开启 esModuleInterop

整理 MVC 架构

概念

m-->model：数据模型 --> orm 框架 映射出来的数据库表

会在代码层面去产生一套函数，这套函数可以直接读取数据库的数据和操作数据库的数据

v-->view：视图 前端代码在后端就是视图层

c-->controller：控制器 专门写业务逻辑的

m v c r routes 路由层

view --> 一个请求 login ，路由层匹配对应的请求路径请求方法 --> 分发给控制器 【写后端业务逻辑 校验用户密码，密码对了要做 sms 短信验证】 --> 通过 model 层操作数据库

路由匹配 业务代码 数据库代码是单独分开的，很好维护

在 src 目录下新建文件夹，controller、routes、model

app.use((ctx) => {
    console.log('ctx.request', ctx.request)
    ctx.response.body = {
        status: 200,
        message: 'ok',
        data: {
            token: 'fake_token'
        }
    }
})

ctx.request 包含了所有的请求信息 ctx.response 代表你要返回给请求你的人什么东西，可以返回 html 文件，可以返回一个 json 数据

整理路由

路由层只做路由匹配和分发工作

if(ctx.request.url ==='/login')

一般企业应用中，会使用 koa-router，避免一条一条的做路由判断

pnpm add @koa/router @types/koa__router

@koa/router，一般@koa 开头的是 koa 官方的插件

新建 router 实例

在 routes 文件夹下新建 user.ts

import KoaRouter from '@koa/router'

const userRouter = new KoaRouter()

userRouter.post('/login', (ctx) => {
    console.log('用户发送登录请求来了', ctx.request)
    ctx.response.body = {
        status: 200,
        message: 'ok',
        data: {
            token: 'fake_token'
        }
    }
})

export default userRouter.routes() // 导出中间件采用routes()方法

在 routes 文件夹下新建 index.ts

这个文件把所有的路由进行整合，全部注册一下

import userRouter from './user'
import Koa from 'koa'

export default function (ctx: Koa<Koa.DefaultState, Koa.DefaultContext>) {
    ctx.use(userRouter)
}

在 src 目录 index.ts 文件夹执行一下

一般路由的中间件采用异步的方式编写，因为操作数据库往往是异步的，可以写成 async、await 的形式，当接收到返回结果再进行其他操作

ctx.body === ctx.response.body

而 ctx.request 上没有 body 字段，因为没有处理请求体，如果要处理请求体，要使用koa-bodyparser中间件

pnpm add koa-bodyparser @types/koa-bodyparser

在 index.ts 中注册 bodyparser，app.use(bodyParser())

bodyparser 可以帮我们解析请求头

跨域问题解决

生产环境：前端不用管，后端设置响应头

后端规定好响应头

在响应的头部添加字段，ctx.response.header['Allow-Acessxxxxx']，我们不自己挂，而是使用第三方库@koa/cors来处理

pnpm add @koa/cors

开发环境：前端本地开发环境 localhost 肯定和后端开发服务器不同源，需要解决开发环境的跨域问题

1. 直接在 package.json 中添加字段"proxy": "http://localhost:1565"
2. 在 webpack 配置文件中，react 项目反编译后，在 config/webpackDevServer.config.js 中
   1. 找到 proxy 选项
   2. 在 webpack 官方文档，搜索 webpack devserver proxy

   proxy: {
     ...proxy,
     '/api': {
       target: 'http://localhost:1565',
       pathReWrite: {'^/api': ''}
     }
   },
   

   pathReWrite 表示重写路径

匹配对应的 controller

user 路由对应的 controller 是 userController

在 src/controller 文件夹下，新建 userController 文件夹，新建文件 index.ts 和 types.ts，在 index.ts 里面写业务逻辑，需要导出一个个函数，在 types.ts 里面写接口。

一个文件夹包含一个 index.ts 和一个 types.ts

在 types.ts 中，一个接口对应一段注释

index.ts

import { userLoginParams } from './types'

export const login = async function (userLoginInfo: userLoginParams) {
    console.log('useLonginInfo', userLoginInfo)

    // 给数据库做一个处理
    // 数据库：Select matchUser from user where username == 'xxx' and password == 'xxx'
    return new Promise((resolve) => {
        setTimeout(() => {
            const user = null
            resolve(user)
        }, 2000)
    })
}

types.ts

// 用户登录参数

export interface userLoginParams {
    username: string
    password: string
}

在 user 路由文件分发路由给 controller

import KoaRouter from '@koa/router'
import { login } from '../controller/userController'
import { userLoginParams } from '../controller/userController/types'

const userRouter = new KoaRouter()

userRouter.post('/login', async (ctx) => {
    console.log('用户发送登录请求来了', ctx.request.body)

    const user = await login(ctx.request.body as userLoginParams)
    if (user) {
        ctx.body = {
            status: 200,
            message: 'ok',
            data: user
        }
    } else {
        ctx.body = {
            status: 4009,
            message: 'password is not correct!',
            data: null
        }
    }
})

export default userRouter.routes() // 这里会导出一个中间件，监听用户请求的函数