前端全栈之基础框架篇

前言

概要

应用场景

• 业务系统
企业网站、CMS/CRM内容管理系统等，主要是前端数据展示及内容的更新，整个数据层结构模型也比较清晰，不会出现过多的复杂设计，所以比较适合全栈开发，可以大大减少沟通成本。

• 接口系统 BFF（Backend For Frontend）层 API 接口实现，可以对接后端服务层的远程RPC协议，然后对控制层二次封装，提供数据给移动端、PC端等多平台调用。由于免编译、热发布等特性，在处理数据增删查改、对接支付、发送短信邮件等服务上优势性明显。 常见的以 REST API 为例，风格简洁统一备受欢迎：

GET      /article         //查询
POST     /article         //新增
PUT      /article/:id     //修改
DELETE   /article/:id     //删除

• SSR Server Side Rendering 服务端渲染，相比于传统的模板类语言 （handlebars、ejs），这里多指 React、Vue等单页应用组件在服务端字符串化后以 html 形式返回给浏览器渲染 ，同时还可以在服务端对数据二次封装处理。主要适用于对C端产品首页性能及SEO优化有需求的场景。 主流框架：NextJS、NuxtJS

• 工具 一些依赖后端服务的工具，比如报表处理、图片处理、视频处理等等。

• ServerLess 函数调用等云服务，配合微服务架构可以集成完整的公用基础平台。相比于常规的应用系统，无需专人维护，按模块多组别维护，即用即销，灵活度更高。 主流框架：各云厂商、OpenFaaS

框架

• Express/Koa/Fastify 基础库，对底层 API 进行封装，简化了代码处理方式。同时具有强扩展性，可以通过集成插件模块使业务的实现上更加清晰，比如简化路由等常用功能：

const http = require('http');
const url = require('url');
http .createServer((req, res) => {
    const router = url.parse(req.url, true);
    if (router.pathname === '/' && req.method === 'GET') {
    res.writeHead(200, { 'Content-Type': 'text/html' });
    res.end(`${router?.query?.name} hello world`); }
}) .listen(9090);

const express = require('express');
const app = express();
app.get('/', (req, res, next) => {
	const { name } = req.query;
  res.send(`${name} hello world`);
}); 
app.listen(9090);

• EggJS 阿里开源，国内主流的Node企业级框架，开箱即用上手快，遵循MVC模型对控制层、服务层高度封装，可以快速搭建服务接口。 由于整个框架是高度集成的，所以官方宣称的有点也可能成为缺点“『约定优于配置』，按照一套统一的约定进行应用开发”，正是约定大于配置，所以必须按照约定的目录结构来开发，过于局限性。插件机制依赖ctx，会污染整个请求链路，不利于排查问题。

//article.controller.js
const { Controller } = require('egg');
class ArticleController extends Controller {
    async list() {
        const { ctx } = this;
        const id = ctx.params.id;
        const info = await ctx.service.article.getName(id);
        ctx.body = info;
    }
}
module.exports = ArticleController;

// router.js
module.exports = app => {
    const { router, controller } = app;
    router.get('/list', controller.article.list);
};

• NestJS/Midway 遵循依赖注入思想，偏后端思维（类似Java Spring），社区生态丰富，支持微服务，完美支持 TS 语法。

// article.module.ts
import { Module } from '@nestjs/common'
import { TypeOrmModule } from '@nestjs/typeorm'
import { ArticleController } from './article.controller'
import { ArticleService } from './article.service'
import { Article } from './article.entity'

@Module({
    imports: [TypeOrmModule.forFeature([Article])],
    controllers: [ArticleController],
    providers: [ArticleService],
    exports: [ArticleService],
})

export class ArticleModule {}

// article.controller.ts
import { Inject, Controller, Get, Query, Post, Body } from '@nestjs/common';
import { ArticleService } from "./article.service.ts"
@Controller('/article')
export class ArticleController {
    constructor(@Inject(ArticleService) private readonly service: ArticleService) {}

    @Get() async list(@Query('title') title:string) {
        return await this.service.findAll(title);
     }
}

数据库

• 关系型数据库：以行列为维度储存的二维表格模型，每张表为一个实体，实体可以关联。

• 非关系型数据库：非结构化存储，灵活度高无需统一数据结构，表与表之间没有关联，可扩展性强。相对轻量符合前端思维。 以下为常用数据库：

• Mysql 主流的关系型数据库，互联网应用广泛，以二维表的形式存储数据。

const mysql = require('mysql2')
const connection = mysql.createConnection({
    host: 'localhost',
    user: 'root',
    password: '',
    database: 'demo'
 })
connection.query('SELECT * FROM article WHERE name = "hello"', (err, results, fields) => {
    console.log(results)
})

• MongoDB 文档储存的非关系型数据库，面向集合存储，易存储对象类型数据，易扩展性，语法对前端开发友好，特别适合模型不确定的业务场景。
语法示例：

collection('article').find({ name: "hello" }).toArray()
collection('article').updateMany({ name: "hello" }, { $set: { nickname: "world" } })
collection('article').deleteMany({ name: "hello" })

• SqlLite 以文件形式存储在磁盘中，零配置管理，轻量快。由于其以单文件的形式存放，不依赖服务器，所以可以集成在客户端软件中，做一些本地数据存储。 场景：移动端、桌面软件

• ORM 原生 SQL 语句相对复杂，尤其是在关联拼接时，不仅要确定SQL语法正确性，还要关注子语句和父语句之间的联系， 同时要对入参转义，避免 SQL 注入等安全问题。 ORM 是对 SQL 语句的一种映射封装，可以快速组装需要的执行语句，调用方式一般采用链式结构，清晰明了，其主要目的就是让开发者中底层操作中抽离出来，去专心做业务逻辑。 目前主流的 ORM 框架有 Sequelize、TypeORM、Prisma，不过当遇到复杂查询时还是需要搭配原生 SQL，两者相辅相成。

SELECT `user`.`id` AS `user_id`, `user`.`name` AS `user_name`, 
`user`.`enable` AS `user_enable`, `user`.`super` AS `user_super`, 
`user`.`last_login_ip` AS `user_last_login_ip`, 
`user`.`last_login_at` AS `user_last_login_at`, 
`user`.`created_at` AS `user_created_at`, 
`user`.`updated_at` AS `user_updated_at`, 
`role`.`id` AS `role_id`, 
`role`.`name` AS `role_name` 
FROM `rs_user` `user` 
LEFT JOIN `rs_user_role_relation` `user_role` 
ON `user_role`.`user_id`=`user`.`id` 
LEFT JOIN `rs_role` `role` 
ON `role`.`id`=`user_role`.`role_id`

await getRepository(User)
      .createQueryBuilder('user')
      .select(['user', 'role.id', 'role.name'])
      .leftJoin('user.roles', 'role') 
			.getMany()

中间件

• Redis 一种非关系型数据库，以key-value 形式存储数据，优先保存内存中，读取数据快，适用非持久化存储场景，支持发布订阅，key具有效性过期自动删除。 简易流程：

const Redis = require('ioredis')
const redis = new Redis({ port: 6379, host: '127.0.0.1' })
redis.set('demo-key', 'hello world')
redis.get('demo-key', (err, result) => {
    console.log(result)
 })

• 消息订阅 消息队列机制，主要应用于消息异步传递机制，用于不同系统间的数据共享调用，解决数据库频繁连接、高频读写效率等问题，常见的场景如：日志上报、异步处理等等 特点：

• 解耦：按需订阅，各服务减少业务耦合，提高维护性

• 异步：同步操作转化为异步，降低处理等待时间

• 可靠：未处理的消息会缓存系统中，避免应该崩溃数据丢失

日志

安全

• 入参校验：数据处理前验证入参是否合法，避免注入等情况。

• cookie、jwt、oauth2.0：鉴权认证，涉及写入操作严格走拦截器权限校验。

• 接口防刷：增加节流模式，短时间频繁触发直接拦截加入频控黑名单。

• CROS跨域：增加请求站点白名单

总结