开发人自己的项目管理工具（三）项目搭建-server端

前言

上一节我们初步搭建了前端项目，这一节我们的目标搭建起后端服务，大概能具备以下几个功能：

在本地运行起mongodb数据库
使用数据库工具连接数据库，查看数据库
本地运行一个node服务，连上数据库

安装mongodb

可以前往官网下载：MongoDB: The Developer Data Platform | MongoDB

可以免费商用的社区版本：Download MongoDB Community Server | MongoDB

下载对应系统的对应版本

直接双击就行了

这一步可以选择custom 安装到你想要的目录，或者一路next

如果你电脑性能够好，可以勾选 Install MongoDB as a Service , 作为一个服务安装，window启动，就可以自动启动服务。本地的化就不折腾数据库的用户名和密码了。下方的安装目录，分别是数据库目录和日志目录。一路next安装完成重启电脑。任务管理器的服务标签中就可以看到你的数据库服务。

另一种安装方式，不勾选Install MongoDB as a Service, 每次需要手动启动数据库在，安装目录中有bin 文件夹下，双击 mongod.exe就行，注意启动日志的端口号，连接时需要

使用数据库工具连接数据库

目前我使用的是这个：NoSQLBooster - The Smartest GUI Tool and IDE for MongoDB 免费版可以查看数据基本够用，暂时不需要导出导入的功能，安装也很简单，完成后的界面大概这个样子

我们来尝试连接下数据

点击Connect弹出链接管理对话框

输入mongodb://localhost:27017 这是本地数据库的默认地址和端口号

点击 Test Connection

返回状态是：OK 说明正常

创建链接后，界面大概像下面这个样子，我这边本地已经有一些库了

搭建node服务

在第一节中我们已经选择了阿里的开源库：midway.js。介绍 | Midway (midwayjs.org). 了解过node后端服务开发的，应该知道koa，express，eggjs. 为什么使用midway，以及midway有什么过人之处，文档介绍说的比我清楚。个人觉的就是这个库可以快速的搭建起企业项目，而不是个人使用的玩具。

安装midway

在我们的工程目录下运行以下命令

js 复制代码

npm init midway@latest -y

midway 已经为我们准备了很多目标我们选择比较新的： v3-esm下的koa-vs-esm,到此也不难看出midway是基于什么开发的。

我们给后端项目取名为 easy-pm-server

回车安装，模板项目就为我们准备好了，此时我们的项目目录看起来这个样子的

先分析一下默认项目de目录，后续开发我们还需要添加别的文件我们后面再说

js 复制代码

|--src
    |--config  //项目环境配置
        |--config.default.ts  //默认配置
        |--config.unittest.ts //测试配置
    |--controller // 路由和控制器 在常见的 MVC 架构中，C 即代表控制器，控制器用于负责 **解析用户的输入，处理后返回相应的结果
    |--filter //过滤器，对返回结果可以统一处理
    |--middleware //中间件 Web 中间件是在控制器调用 之前 和之后（部分）调用的函数。 中间件函数可以访问请求和响应对象。用于登录控制和权限过滤等等
        |--report.middleware.ts // 观察一下这个文件便于理解中间件
    |--service
        |--user.service.ts
    |--configuration.ts  //项目初始化载入组件
    |--interface.ts // 业务的 ts 定义文件

我们先安装默认项目的依赖，运行一下，浏览器打开： http://127.0.0.1:7001/

这样我们看到了第一个界面，这是项目的默认路由，我们去src/controller看看有两个文件controller，打开 home.controller.ts。这里就是刚刚打开页面的路由已经返回给浏览器页面的结果。具体请查看midway快速入门 | Midway (midwayjs.org)

js 复制代码

//home.controller.ts
import {Controller, Get} from '@midwayjs/core';

@Controller('/')
export class HomeController {
    @Get('/')
    async home(): Promise<string> {
       return 'Hello Midwayjs!';
    }
}

在开始接下来之前，��可能要花一点时间看一下创建第一个应用 | Midway (midwayjs.org)

midway配置

通常后端服务，需要具备连接数据库，前端访问后端接口（前后端分离需要支持跨域），登录认证，登录的图像验证码等等，这些常用组件midway 已经帮我们准备好了，开箱即用。HTTP 请求 | Midway (midwayjs.org) 我们看一下默认项目的启动配置文件src/configuration.ts

js 复制代码

import {Configuration, App} from '@midwayjs/core';
import * as koa from '@midwayjs/koa';   
import * as validate from '@midwayjs/validate'; // 参数验证组件
import * as info from '@midwayjs/info';         // 日志组件
// import { DefaultErrorFilter } from './filter/default.filter.js';
// import { NotFoundFilter } from './filter/notfound.filter.js';
import {ReportMiddleware} from './middleware/report.middleware.js';  //一个打印访问日志的中间件组件
import DefaultConfig from './config/config.default.js';  // 默认项目配置
import UnittestConfig from './config/config.unittest.js'; // 测试环境项目配置

//组件和配置载入
@Configuration({
    imports: [
       koa,
       validate,
       {
          component: info,
          enabledEnvironment: ['local'],
       },
    ],
    importConfigs: [
       {
          default: DefaultConfig,
          unittest: UnittestConfig,
       },
    ],
})

// 应用类，有一些生命周期后面会用到
export class MainConfiguration {
    @App('koa')
    app: koa.Application;

    async onReady() {
       // add middleware
       this.app.useMiddleware([ReportMiddleware]);
       // add filter
       // this.app.useFilter([NotFoundFilter, DefaultErrorFilter]);
    }
}

我们先来安装配置一下我们用到的组件参考文件使用组件 | Midway (midwayjs.org)

less 复制代码

npm i @midwayjs/cross-domain -S //支持跨域组件

//身份认证
npm i @midwayjs/jwt -S //jwt组件
npm i @midwayjs/captcha -S //图形验证码组件

//数据库
npm i @midwayjs/typegoose -S   //[Typegoose]作为基础的 MongoDB ORM 库组件 依赖[mongoose]
npm i @typegoose/typegoose -S 
npm i mongoose -S

你可能需要了解下面的库 Typegoose mongoose

安装完成后，我们在src/configuration.ts文件中像其他组件一样引入载入组件, 新增下列代码

js 复制代码

import * as crossDomain from '@midwayjs/cross-domain'
import * as jwt from '@midwayjs/jwt'
import * as captcha from '@midwayjs/captcha'
import * as typegoose from '@midwayjs/typegoose'

@Configuration({
    imports: [
        typegoose,  
        crossDomain,
        jwt,
        captcha,
    ],
})

这是启动配置文件，在src/config 目录下我们还要对前面引入的组件进行启用配置

类似前端vue项目的.env配置文件，不同的是config.default.ts会和其他环境的配置【增量和覆盖】合并

本地环境我们可以直接在config.default.ts配置

js 复制代码

// ===>配置前
import {MidwayConfig} from '@midwayjs/core';

export default {
    // use for cookie sign key, should change to your own and keep security
    keys: '1722744100134_1260',
    koa: {
       port: 7001,
    },
} as MidwayConfig;

//===> 配置后
import {MidwayConfig} from '@midwayjs/core';
export default {
    // use for cookie sign key, should change to your own and keep security
    keys: '1722744100134_1260',
    //允许跨域配置，跨域配置*是不允许携带cookie访问
    cors: {
       origin: '*',
       credentials: false,
    },
    // 服务配置
    koa: {
       port: 7001,
       serverTimeout: 60000,
       globalPrefix: '/easy-pm/api',// 统一添加一个路由前缀
    },
    jwt: {
       secret: '87(66&Q50h3)6Pmm',
       expiresIn: '10d',   // 有效期 
    },
    mongoose: {
       dataSource: {
          default: {
             uri: 'mongodb://127.0.0.1:27017/easy-pm-dev',  //数据库名称
          },
       },
    },
} as MidwayConfig;

ok我们再运行一下项目跑起来看看

可以看到数据库已经成功连接上了，访问一下��认地址 http://127.0.0.1:7001/

咦，翻车了，网页和和服务都报错了，不要慌我们看看是不是 404 说明没有这个路由了。还记得我们刚刚配置了全局路由前缀吗,我们加上试试。

Yes,Hello Midwayjs 又回来了。

我们再看下src/controller中的另外一个文件api.controller.ts 尝试访问一下，他下面的接口。

js 复制代码

import {Inject, Controller, Get, Query} from '@midwayjs/core';
import {Context} from '@midwayjs/koa';
import {UserService} from '../service/user.service.js';

@Controller('/api') // 基础路径
export class APIController {
    @Inject()
    ctx: Context; // 注入了上下文

    @Inject()
    userService: UserService;  // 注入User服务
    
    //装饰器声明这是一个get请求完整Path加上 基础路径就是/api/get_user
    //@Query 会去解析 前端请求路径的路径参数xxx/xx?uid=xxxx
    @Get('/get_user') 
    async getUser(@Query('uid') uid) {
        //userService服务中提供了一个根据uid查询到用户信息的方法
       const user = await this.userService.getUser({uid});
       // return 讲结果返回到前端
       return {success: true, message: 'OK', data: user};
    }
}
// 最终本地访问的路径是 http://127.0.0.1:7001/easy-pm/api/api/get_user

一个mock的用户信息返回了，注意uid是路由参数传递给后端服务，又返回给了前端

具体的可以看看service/user.service.ts，这样大概的后端服务就完成了。下一节我们会结合第二节的内容，进行一次初次的前后端联调