从零实现一套低代码(保姆级教程)【后端服务】 --- 【16】初始化后端项目

这篇具有很好参考价值的文章主要介绍了从零实现一套低代码(保姆级教程)【后端服务】 --- 【16】初始化后端项目。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

摘要

在前面的实现过程中,我们的低代码平台,在前端已经有一定的构建页面的能力了。

但是对于我们实现一个平台,肯定要支持用户对页面进行保存等功能,包括后面我们运行时的设计,都要依赖于后端的能力

从零实现一套低代码(保姆级教程)【后端服务】 --- 【16】初始化后端项目,低代码
所以,现在我们需要考虑开始使用数据存储了。那因为博主平时的工作主要都是前端开发,所以后端框架选择了比较贴合前端的Nest.js

我们低代码来讲,通常是对协议的保存以及修改,所以我们的数据库使用MongoDB,当然,如果读者有一定的后端开发经验,可以自行选择后端框架和数据库。

当然,选择这一些列文章看的主要可能是前端开发,所以实现后端内容的这一部分我会写的比较详细。(虽然博主的后端知识也比较匮乏,如果有问题欢迎指正)。

1.初始化Nest项目

我们来到Nest.js的中文文档:
https://nestjs.bootcss.com/controllers.html

当然,这里面很多也没有翻译,读者有兴趣可以看看,主要还是跟着我的节奏来吧。。。
首先是安装nest和创建项目。

$ npm i -g @nestjs/cli
$ nest new XinBuilderServer2

创建好之后,我们来到对应的目录下面,启动

npm run start

就可以在页面里看到Hello Word了,默认的端口号是3000, 如果想要修改的话可以在main.ts中进行修改。

现在我们来思考一下,我们要这个后端服务第一步需要干什么。对于协议,我希望我能将它保存在数据库里。

所以我们需要一个接口,用来对协议的保存和更新。

每当你选择新建一个功能模块的时候,比如现在我想有一个和存储协议相关的接口功能。
需要再控制台中输入以下命令:

nest g mo -p src pageJson  
nest g co -p src pageJson  
nest g service -p src pageJson

这三行命令是什么意思呢?就是说,在Nest中,新建一个Module + Controller + Service。这个时候你就会发现你的目录下新增了几个文件:

当然这几个名词,你也可以先不用知道什么意思(博主也知识大概理解)。后面会告诉你怎么去写。

从零实现一套低代码(保姆级教程)【后端服务】 --- 【16】初始化后端项目,低代码
你也可以手动添加。只不过费事一点而已。

2.引入MongoDB

有了后端服务之后,我们就要安装数据库了,数据库的话我们就选择MongoDB,读者可以到官网下载自己需要的安装包。

最好还是找一个教程,这里安装数据库的过程就不细写了,当你安装完后启动了,再回到项目里面。

我们需要一个库去操作数据库,在这里我们使用mongoose来操作数据库。安装的话只需要:

npm i mongoose
npm i @nestjs/mongoose

一切准备就绪之后,我们来到项目中:
xin-builder-server2\src\app.controller.ts

我们在入口的app中,引入MongoDB:

import { Module } from '@nestjs/common';
import { AppController } from './app.controller';
import { AppService } from './app.service';
import { PageJsonModule } from './page-json/page-json.module';
import { MongooseModule } from '@nestjs/mongoose';

const DBRootModule = MongooseModule.forRoot('mongodb://127.0.0.1/localData');

@Module({
  imports: [DBRootModule, PageJsonModule],
  controllers: [AppController],
  providers: [AppService],
})
export class AppModule {}


切记切记,虽然上面只有短短的几句话,但是这一个过程还是比较让人烦躁的。因为在安装过程中,不确定会出现什么问题。

总之,我们的目的就是能在我们的项目中,可以和数据库建立联系。

3.实现获取页面列表的接口

对于一个模型来说,接口的工作就是增删改查,我们先写一个获取页面列表的接口。

那对于一个页面来讲,我们暂且只需要一个pageId和pageJson,分别代表页面的唯一表示和页面的JSON结构。
页面的展示还需要一个pageName作为页面名称。

在pageJson目录下新增一个page-json.interface.ts文件和pageJson.schema.ts文件,用来定义页面的结构:

xin-builder-server2\src\page-json\pageJson.schema.ts

import { Schema } from 'mongoose';
 
export const pageJsonSchema = new Schema({
  pageId: { type: String, required: true },
  pageName: { type: String, required: true },
  pageJson: { type: Object, required: true }
});

xin-builder-server2\src\page-json\page-json.interface.ts

import { Document } from 'mongoose';
 
export interface PageJson extends Document {
  readonly pageId: string;
  readonly pageJson: Object;
}

接下来我们到service中:
xin-builder-server2\src\page-json\page-json.service.ts
一个正常的service应该这么写:

import { Injectable } from '@nestjs/common';
import { InjectModel } from '@nestjs/mongoose';
import { Model } from 'mongoose';
import { PageJson } from './page-json.interface';

@Injectable()
export class PageJsonService {
  constructor(@InjectModel('PageJson') private readonly pageJsonModel: Model<PageJson>) {}
}

有了基础准备之后,我们开始实现获取页面列表的接口:

import { Injectable } from '@nestjs/common';
import { InjectModel } from '@nestjs/mongoose';
import { Model } from 'mongoose';
import { PageJson } from './page-json.interface';

@Injectable()
export class PageJsonService {
  constructor(@InjectModel('PageJson') private readonly pageJsonModel: Model<PageJson>) {}

  async findAllPage(): Promise<PageJson []>{
    return await this.pageJsonModel.find({})
  }
}

pageJsonModel.find()的参数就是对应的查询条件,也就是sql语句的封装。如果我传一个空对象,那么就是全量查询。

现在我们来到page-json.controller.ts中:
xin-builder-server2\src\page-json\page-json.controller.ts

import { Controller, Post } from '@nestjs/common';
import { PageJson } from './page-json.interface';
import { PageJsonService } from './page-json.service'

interface PageJsonResponse<T = unknown> {
  code: number;
  data?: T;
  message: string;
}

@Controller('page-json')
export class PageJsonController {
  constructor(private readonly PageService: PageJsonService) {}

  @Post('findAllPage')
  async findAllPage(): Promise<PageJsonResponse<PageJson[]>> {
    return {
      code: 200,
      data: await this.PageService.findAllPage(),
      message: 'Success.',
    };
  }
}

在这里我们就相当于通过调用service中的方法,去实现一个接口控制器。

最后我们修改一下page-json.module文件:

import { Module } from '@nestjs/common';
import { PageJsonController } from './page-json.controller';
import { PageJsonService } from './page-json.service';
import { MongooseModule } from '@nestjs/mongoose';
import { pageJsonSchema } from './pageJson.schema'

const pageJsonSchemaTable = MongooseModule.forFeature([{ name: 'PageJson', schema: pageJsonSchema }]);

@Module({
  imports: [pageJsonSchemaTable],
  controllers: [PageJsonController],
  providers: [PageJsonService]
})
export class PageJsonModule {}

OK,现在我们需要一个方式去验证一下了:

4.实现swagger接口文档

一般我们调试接口,都是使用postMan之类的可视化工具,在Nest中,可以直接使用swagger接口文档,我们继续安装:

ynpm i @nestjs/swagger

安装完成后我们在main.ts中将其引入:

import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';
import { SwaggerModule, DocumentBuilder } from '@nestjs/swagger'

async function bootstrap() {
  const app = await NestFactory.create(AppModule);
  const options = new DocumentBuilder()
  .setTitle('API example')
  .build()
  const document = SwaggerModule.createDocument(app, options)
  SwaggerModule.setup('api', app, document)
  await app.listen(4000);
}
bootstrap();

安装好之后,我们修改一下page-json.controller里的接口:

ApiTags就是这个模块的描述,ApiOperation就是这个接口的描述

import { Controller, Post } from '@nestjs/common';
import { PageJson } from './page-json.interface';
import { PageJsonService } from './page-json.service'
import { ApiTags, ApiOperation } from '@nestjs/swagger'

interface PageJsonResponse<T = unknown> {
  code: number;
  data?: T;
  message: string;
}

@ApiTags('页面管理')
@Controller('page-json')
export class PageJsonController {
  constructor(private readonly PageService: PageJsonService) {}

  @Post('findAllPage')
  @ApiOperation({summary: '查询页面列表'})
  async findAllPage(): Promise<PageJsonResponse<PageJson[]>> {
    return {
      code: 200,
      data: await this.PageService.findAllPage(),
      message: 'Success.',
    };
  }
}

这时候,我们可以通过localhost:3000/api打开对应的接口文档页面:

从零实现一套低代码(保姆级教程)【后端服务】 --- 【16】初始化后端项目,低代码

当你点击Exute之后,应该是一个空数组,因为你的数据库中并没有数据。

博主补充

OK,这一篇文章就不继续往下实现了,主要就是能将整体的安装过程以及配置过程串通。
只有这一步搞定了,我们才可以做后面的事情。

相关的代码提交在github上:
https://github.com/TeacherXin/XinBuilderServer2
commit: 初始化后端服务文章来源地址https://www.toymoban.com/news/detail-821464.html

到了这里,关于从零实现一套低代码(保姆级教程)【后端服务】 --- 【16】初始化后端项目的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 保姆级教程从零搭建云服务器(小彩蛋,请大家看烟花秀)

    笔者已从零搭建好云服务器,在文章开始笔者请大家看一场简单的烟花秀,该篇博文是写给小白的保姆级教程,不论是有基础还是没基础的,都可以根据本篇博文,轻松搭建个人云服务器。 烟花秀:浏览器直接输入ysw.world:666回车即可,由于个人域名没有备案,所以目前只能

    2024年02月03日
    浏览(44)
  • 保姆级教程!!教你通过【Pycharm远程】连接服务器运行项目代码

    这篇文章主要解决一个问题—— 我有服务器,但是不知道怎么拿来写代码,跑深度学习项目 。确实,玩深度学习的成本比较高,无论是前期的学习成本,还是你需要具备的硬件成本,都是拦路虎。小罗没有办法帮你解决硬件上的问题,所以只能帮你们理清一下有了服务器以

    2024年03月27日
    浏览(54)
  • 【模型+代码/保姆级教程】使用Pytorch实现手写汉字识别

    参考文章: 最初参考的两篇: 【Pytorch】基于CNN手写汉字的识别 「Pytorch」CNN实现手写汉字识别(数据集制作,网络搭建,训练验证测试全部代码) 模型: EfficientNetV2网络详解 数据集(不必从这里下载,可以看一下它的介绍): CASIA Online and Offline Chinese Handwriting Databases 鉴于

    2024年02月07日
    浏览(43)
  • Unity教程2:保姆级教程.几行代码实现输入控制2D人物的移动

    目录 人物的创建以及刚体的设置 图层渲染层级设置 角色碰撞箱设置 使用代码控制人物移动 创建脚本文件  初始函数解释 控制移动代码 初始化变量  获得键盘输入  调用函数 手册链接在这:Unity User Manual (2019.3) - Unity 手册 没有控制人物移动的2D游戏就太说不过去了!那么接

    2024年02月06日
    浏览(43)
  • docker从零部署jenkins保姆级教程

    jenkins,基本是最常用的持续集成工具。在实际的工作中,后端研发一般没有jenkins的操作权限,只有一些查看权限,但是我们的代码是经过这个工具构建出来部署到服务器的,所以我觉着有必要了解一下这个工具的搭建过程以及简单的一些使用。尽可能多的了解公司中和你开

    2024年02月10日
    浏览(51)
  • 高级圣诞树代码实现合集-保姆级教程【前端三件套实现—0基础直接运行】

    0基础直接运行教程: 1.新建txt文本: 2.将代码粘贴到txt文本里: 3.将后缀改为html 4.双击打开html文件,观察效果~ 这段代码是一个用HTML和JavaScript实现的圣诞树动画效果。我将代码分成几个部分进行讲解。 HTML结构: 在 head 标签中定义了页面的标题、字符集和样式。 样式部分

    2024年02月04日
    浏览(65)
  • docker从零部署jenkins保姆级教程(下)

    上一篇文章,我们完成了以下工作。 1)、docker部署jenkins 2)、建立第一个jenkins job 3)、通过jenkins job自动编译构建我们的github项目 上面所做的3个工作,其实都是为了这一篇文章打基础,不管是部署docker还是部署jenkins,我们最终的目的还是部署我们的项目,让项目跑起来,让流

    2024年02月09日
    浏览(86)
  • docker从零部署jenkins保姆级教程(上)

    jenkins,基本是最常用的持续集成工具。在实际的工作中,后端研发一般没有jenkins的操作权限,只有一些查看权限,但是我们的代码是经过这个工具构建出来部署到服务器的,所以我觉着有必要了解一下这个工具的搭建过程以及简单的一些使用。尽可能多的了解公司中和你开

    2024年02月09日
    浏览(45)
  • 保姆级教程:从零构建GitHub Pages静态网站

    Github Pages官网:https://pages.github.com/ GitHub Pages 是 GitHub 提供的一个免费的静态网站托管服务,它允许 GitHub 用户创建和托管自己的静态网站,这些网站可以通过特定的 GitHub 仓库进行管理和托管。 GitHub Pages 的主要特点包括 : 免费托管 : GitHub Pages 提供免费的静态网站托管服务

    2024年02月04日
    浏览(55)
  • 「教程」如何使用一套代码在多种程序中接入天气预警API

    天气预警的重要性不言而喻,在遭受自然灾害和极端天气时,及时获得预警信息可以拯救生命和减少财产损失。如今,随着科技的进步,开发者和企业可以借助天气预警 API 这款强大的服务,将实时预警信息集成到自己的应用中,为用户提供准确的预警通知。 本文将重点探讨

    2024年02月14日
    浏览(58)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包