@jv2/jv-egg-boilerplate NPM

基于 easywebpack-cli 二次开发，jv的脚手架

开始

mkdir myproject

进入对应文件夹

cd myproject

设置npm代理

npm config set proxy=http://127.0.0.1:12639

查看代理是否设置成功

npm config get proxy

创建脚手架

npm init jvfw # 在create-jvfw项目中，require了本模板项目，该命令会执行脚本：`./bin/create-boilerplate.js` 把`./boilerplate`目录下的内容拷到当前目录

项目初始化

npm i

执行启动脚本

npm run dev

启动完成可自行选择取消代理

npm config delete proxy

启动完成访问页面地址：http://127.0.0.1:8080

示例

对应运行示例可以从example查看：https://git.code.oa.com/G-JV/jv-egg-example

规范

分层

后台分为 Model(数据类) Bll(业务逻辑层) Dal(DB层) 网上的三层介绍https://wenku.baidu.com/view/888e9be8f8c75fbfc77db29c.html

ORM

DB访问我们采用 typeorm https://github.com/typeorm/typeorm。

Model

model跟DB中的表一对一关联，无需我们手工创建和修改表，只要修改model。如果数据库用户有权限typeorm会帮我们维护表结构。示例：

'use strict';

import {Entity, BaseEntity, PrimaryGeneratedColumn, Column} from "typeorm";

@Entity('t_article')
export default class Article extends BaseEntity {
  @PrimaryGeneratedColumn({
    name: 'Fid',
    type: 'int',
    comment: '自增唯一健'
  })
  public id?: number;

  @Column({
    name: 'Ftitle',
    type: 'varchar',
    length: 32
  })
  public title?: string;

  @Column({
    name: 'Fcreate_time',
    type: 'datetime'
  })
  public createTime?: string;

  @Column({
    name: 'Fmodify_time',
    type: 'timestamp'
  })
  public modifyTime?: string;
}

数据库访问层

数据库访问也是全部放在了service/dal目录。如果业务场景不需要特殊的DB访问逻辑，那么它的逻辑层service只需继承dal/base.ts即可。

逻辑层

逻辑层全放在service/bll目录下，继承service/dal/base就可以拥有基础的数据库操作接口。如果需要特殊DB访问逻辑的，请在dal中创建独立的DB访问service并继承BaseService。

API

我们把controller封装成了一个统一的入口，不需要重复配置router。例如，我们在controller下创建一个admin.ts:

import { Context } from 'egg';
import Article from '../model/article';

export default class AdminController {
  public async list(ctx: Context) {
    return await ctx.service.bll.article.getAll();
  }
}

不需要做任何配置，我们就可以通过http://fmp.oa.com/framework/api/admin/list 访问到这个接口。

如果需要在controller中使用多级目录，则在访问url中用/表示，如：/api/my/admin/list, 表示在controller/my目录下的admin controller中的list方法。
这里是通过中间件api实现的，脚手架已初始化，无需做任何处理

返回数据

你只需要在你的接口中，直接return {} 任意你想返回的数据结构。api会把它赋给最终结果的data属性下。例如：

public async add(ctx: Context) {
    return {"name": "my"};
  }

最终调用者拿到的是

{
  ret: 0,
  msg: "",
  data: {
    "name": "my"
  }
}

如果你想自已定义返回的结果，你也可以返回IApiResult结构。底层会原样返回。

/**
 * api 返回数据标准结构
 */
declare interface IApiResult {
  ret: number,
  msg: string,
  data?: any
}

抛出异常

基础api会catch异常，然后按同上的返回方式返回ret和msg。这里的ret统一定义为10001。如果controller方想自定义异常信息，你可以直接抛出IApiResult结构信息。

throw {ret: 10086, msg: "我是自定义错误"};

服务鉴权

服务鉴权主要提供一个简单的拒绝非法请求功能，基于ts的decorator实现。服务端在config中需要配置一个accessKey，需要调用当前服务的必须知道这个服务的key并用通用方法计算出来。

// 中间件access配置
  // 用来请求鉴权  只需要针对/api/ 这类的service请求
  // 计算方法 md5(accessKey + ',' + timestamp)
  config.apiAccess = {
    enabled: true, // false 表示不启用鉴权
    accessKey: 'lct.framework' // 用来计算token的当前系统唯一key
  }

可以用配置enabled来启用关闭，每个系统自已可以配置唯一的accessKey来识别请求。

当一个接口需要使用鉴权时，只需加上装饰器即可。

import { Context } from 'egg';
import { decorators } from '@jv2/egg-jv-common';

export default class AdminController {

  @decorators.checkApiToken(true) // 标记需要校验token
  @decorators.checkApiLogin(false) // 指定不需要校验登录, 默认需要  不需要校验登录态的也会忽略csrf校验
  public async list(ctx: Context) {
    return await ctx.service.bll.article.getAll();
  }
}

前端

API请求

统一采用axios，我们二次封装了一个requestApi，为了做通用的逻辑处理。使用方法：

  const data = await this.$ajax.requestApi({
      url: '/api/user/list',
      data: {
        page: 0,
        count:10
      }
    });

编码规范

注释采用 tsdoc规范
业务项目编码一律采用ts
框架插件用原生 es6，但必须提供 index.d.ts 声明文件
一些存储类的key不要起太通用的名字，尽可能用可读行和指向性强的名字。比如 token 已被多次使用， session 就可以用 jv_session_token
属性和变量采用小驼峰，DB字段用F开头加下划线（如：Fnick_name）
类名用大驼峰，接口用 I 开头加大驼峰
文件命名采用中划线形式，类似vue-admin.ts

环境配置项

安装vscode插件--EditorConfig for VS Code,配置参考文档
安装vscode插件--vscode-tslint (deprecated),配置参考文档

项目接入

在jv.jm47.com应用列表中新增应用

npm.io

配置完成点击确认，会生成对应的jvAppId

npm.io

在项目的开发目录下，找到config.default.ts文件，配置jvAppId,和刚才填入的应用id保持统一。

config.jvCommon = {
        //这里填入刚才获取的jvAppId
        jvAppId: "100001",
        main: {
            accessKey: config.apiAccess.accessKey, // 这里相当于自已调用自已的接口，所以用上面的配置自已就可以
        },
        // 忽略的路径，不走登录鉴权
        ignorePath: [
            /^\/login(.*)/i,
            /^\/logout(.*)/i
        ],
        ignoreHost: ['http://127.0.0.1:7001'],
    };

再次启动服务，即可顺利访问--(访问地址的host和填入的主机名保持一致)

@everything-registry/sub-chunk-505 @infinitebrahmanuniverse/nolb-_jv @zalastax/nolb-_jv

5 years ago

5 years ago

6 years ago

6 years ago

6 years ago