npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@palerock/express-annotate-js

v0.0.28

Published

**Express Annotate JS** 是一个基于 Javascript 中的注解提案 [`proposal-decorators`](https://babeljs.io/docs/en/babel-plugin-proposal-decorators) 和 `Express` 而实现的一套快速开发的 NodeJS 框架,其注解模块核心基于 [Annotate JS](https://github.com/canguser/annotate-js) ## 使用条件及环境 - 依赖项目

Downloads

37

Readme

Express Annotate JS gitee.png github.png

Express Annotate JS 是一个基于 Javascript 中的注解提案 proposal-decoratorsExpress 而实现的一套快速开发的 NodeJS 框架,其注解模块核心基于 Annotate JS

使用条件及环境

  • 依赖项目
    • "@palerock/annotate-js": "^1.2.26"
    • "express": "^4.17.1"
  • 使用前提
    • 熟悉 ES6 或以上的 Javascript 语法
    • 需要对 NodeJS 服务端开发有一定了解
    • 需要对 express 框架有一定了解
    • 需要了解 proposal-decorators 提案以及如何通过 babel 来搭建开发环境
    • 需要了解 Annotate JS 该框架的基本注解用法

快速开始

引入

# 引入依赖
npm install [email protected]
npm install @palerock/annotate-js
# 引入 express-annotate-js
npm install @palerock/express-annotate-js

以及一个简单的能够使用 proposal-decorators 提案的开发环境

{
  "presets": [
    [
      "@babel/preset-env"
    ]
  ],
  "plugins": [
    [
      "@babel/plugin-proposal-decorators",
      {
        "legacy": true
      }
    ],
    [
      "@babel/plugin-proposal-class-properties",
      {
        "loose": true
      }
    ]
  ]
}

使用

import {launcher, GetMapping, Register} from "@palerock/express-annotate-js";
import {Boot, Autowired, Bean} from "@palerock/annotate-js"; 

@Register // 将该 class 注册为 web 服务
class DemoController {

    @Autowired
    DemoService; // 自动注入 Service

    @GetMapping({url: '/'})
    getContent({content}) {
        // 通过参数注入获取请求参数
        return `Hello Express Annotate JS, ${this.DemoService.parseContent(content)}`;
    }

}

@Bean
class DemoService {
    parseContent(content) {
        return `Parsed content: ${content}`;
    }
}

@Boot
class Application {

    port = 3034;

    main() {
        // 启动服务
        launcher.start(this.port);
    }

}

运行后在浏览器输入以下链接 http://localhost:3034/?content=Enjoy%20it
将会看到显示如下内容: "Hello Express Annotate JS, Parsed content: Enjoy it"

使用异步方法

Express Annotate JS 同样支持异步,实例如下:

import {launcher, GetMapping, Register} from "@palerock/express-annotate-js";
import {Boot, Autowired, Bean, EnergyWire} from "@palerock/annotate-js"; 

@Register
class AsyncController {

    @Autowired // 注入 APIService
    APIService;

    @GetMapping({url: '/project/:id'}) // 使用 :id 将 URL 中的 id 映射为参数并注入到方法中
    async getProject({id}) {
        return this.APIService.getProjectCache(id);
    }

}

@Bean
class APIService {

    // 注入 Utils 中的 wait 方法
    @EnergyWire('Utils')
    wait;

    // 缓存用于返回
    projectCacheMap = {
        '1': {
            name: 'Project 01'
        },
        '2': {
            name: 'project 02'
        }
    };

    async getProjectCache(id) {
        await this.wait(2000); // 等待 2s 
        if (id in this.projectCacheMap) {
            return this.projectCacheMap[id];
        }
        return null;
    }

}

@Bean
class Utils {
    async wait(ms) {
        return new Promise(resolve => {
            setTimeout(() => resolve(), ms);
        })
    }
}

@Boot
class Application {

    port = 3034;

    main() {
        launcher.start(this.port);
    }

}

启动服务后,浏览器输入 http://localhost:3034/project/1,可以在等待 2s 后看到返回结果:

{"name":"Project 01"}

如上诉例子所见,只需要对指定方法加上 async/await 关键字便可以支持异步方法
于此同时,因为使用的是 Express,所以 URL 的书写方式和 Express 表达一致,/project/:id 表示 RESTFul 规范中 GET 方法中获取资源的映射规则。

文档撰写中,具体详情请参考源码或留言评论