предисловие
В Node-проектах, будь то использование koa/express-маршрутизации, мы обычно создаем такие маршруты
router.post("/api/test", middleware, handler); // 创建路由
Например:
Обычно мы создаем маршрутыhandlerОн будет извлекать другие файлы отдельно, то естьcontroller, что добавит еще один шаг к процессу написания роутера. Так можно ли пропустить этот шаг?
Конечно, эта статья поможет вам шаг за шагом использовать декораторы для единообразной обработки и построения маршрутов, чтобы вам не пришлось дописывать какой-то один.controllerметод, а затем создатьrouterЧто ж, используя декораторы, нам нужно только добавить декорации маршрутизации в метод интерфейса для создания маршрутизатора. Так интересно~
Структура проекта
Давайте начнем, научим вас шаг за шагом использовать декораторы для построения маршрутов!
Инициализировать проект
инициализацияpackage.json
Создайте новый каталог сvscodeОткрыть. воплощать в жизньnpm initИнициализировать созданиеpackage.json
Установите сторонние пакеты, используемые проектом koa:
npm install -S koa koa-router koa-bodyparser koa-compress
- koa-router управляет маршрутизацией
- koa-bodyparser читает пост, переводит данные в объектный формат
- koa-compress сжимает данные запроса для повышения скорости передачи
Настройте babel для поддержки ES6 ES7
Поскольку проект использует декоратор для настройки маршрутизации, он должен поддерживать синтаксис ES7, а затем вам нужно настроить babel.
В этой статье настраивается версия babel7
Позвольте мне шаг за шагом провести вас по настройке Babel.
npm install -D @babel/core
npm install -D @babel/preset-env
npm install -D @babel/plugin-proposal-decorators
npm install -D @babel/register
В версии babel7 используется @babel, а ниже 7 — babel-xxx, что легко отличить
Ниже описаны функции этих пакетов.
- @babel/core Основной код Babel
- @babel/preset-env Скомпилируйте новую версию синтаксиса, такую как: функция стрелки, но не преобразовывайте новую версию API, такую как: Array.include, чтобы преобразовать разницу между новой версией API и совместимыми браузерами ( совместимость т.е.) требует babel-polyfill
- @babel/plugin-proposal-decorators разрешает декораторы
- @babel/register компилирует во время выполнения, а не сначала
Затем создайте файл .babelrc в корневом каталоге проекта.
Настройка пресетов, плагинов
{
"presets": [
["@babel/preset-env", {
"targets": {
"node": "current"
}
}]
],
"plugins": [
["@babel/plugin-proposal-decorators", { "legacy": true }]
]
}
На этом настройка закончена. Проект относительно прост, этих конфигураций babel достаточно для использования в этом проекте, а затем вы можете с радостью использовать es6, новый синтаксис декоратора.
Создать службу узла
новыйindex.js，app.jsзапустить службу
index.js в основном используется для регистрации babel и промежуточных файлов для запуска сервисов. Почему это так? Используйте динамическую компиляцию в этом файле, но файл index.js не будет компилироваться при компиляции, поэтому этот файл по-прежнему должен использовать старый синтаксис e5.
require("@babel/register")
require("./app")
app.js фактически запустит службу узла
import Koa from "koa"
import bodyparser from "koa-bodyparser"
import compress from "koa-compress"
const app = new Koa();
app.use(compress());
app.use(bodyparser());
const PORT = 8081;
app.listen(PORT,()=>{
console.log(`启动成功! env=${process.env.NODE_ENV}`)
console.log(`Listening at http://localhost:${PORT}`)
})
Настройте команду запуска для запуска службы
Затем вам нужно добавить команду выполнения package.json
"dev":"cross-env NODE_ENV=development nodemon ./index.js"
Здесь используются два плагина, обычно используемые при разработке узлов.cross-env,nodemonЕго основные области применения заключаются в следующем.
Установитьnpm install -D cross-env nodemon,установить наdevDependencies
- cross-env добавляет переменные среды в проект, чтобы различать среду разработки и производственную среду.Как правило, добавляйте переменные среды перед выполнением команды npm через
это место добавленоNODE_ENVпеременные, которые можно использовать в программеprocess.env.NODE_ENVПолучить значение переменной, добавленной командой выполнения
- Nodemon может заменить службу запуска узла, но nodemon обладает богатым набором функций и может отслеживать изменения кода для перезапуска проекта.
Выполнить нижеnpm run devВы можете видеть, что служба успешно запущена
Добавить декоратор маршрута
Создайте новый общий каталог в корневом каталоге проекта, затем создайте новый каталог декоратора в общем каталоге и создайте новый index.js в этом каталоге.
нет би би , приведенный выше код:
/**
* 请求方法
*/
export const RequestMethod = {
"GET":"get",
"POST": "post",
"PUT": "pust",
"DELETE": "delete",
"OPTION": "option",
"PATCH": "patch"
}
/**
* 定义注册的路由数组
*/
export const controllers = [];
/**
* 给controller添加装饰
* @param {*} path
*/
export function Controller(path=""){
return function(target){
// 给controller类添加路由前缀
console.log(target)
target.prefix = path;
}
}
/**
* 给controller类的方法添加装饰
* url 可选
* method 请求方法
* middleware 中间件
*/
export function RequestMapping({url="",method="",middleware=[]}){
return function(target,name,descriptor){
let path = "";
// 判断有没有定义url
if(!url){
// 取方法名作为路径
path = `/${name}`;
}else{
// 自己定义的url
path = url;
}
// 创建router需要的数据 url，method，middleware（可以没有）,最终执行的方法，装饰器队对象的构造函数
const item = {
url:path,
method:method,
middleware:middleware,
handler:target[name],
constructor:target.constructor,
};
controllers.push(item);
}
}
Единое создание маршрутов
Создайте папку маршрутизатора, а затем продолжите создание файла index.js.
нет би би , приведенный выше код:
Этот файл является входным файлом для унифицированного создания маршрутов. Вам необходимо передать экземпляры koa и экземпляры koa-router для создания маршрутов и упаковки маршрутов.
import { controllers } from "./../common/decorator"
/**
* 初始化路由
*/
export default (app,router) => {
controllers.forEach((item) => {
// 获取每个路由的前缀
const prefix = item.constructor.prefix;
let url = item.url;
if(prefix) url = `${prefix}${url}`; // 组合真正链接
console.log(item.method,url); // 打印请求的路由method,url
router[item.method](url, ...item.middleware, item.handler); // 创建路由
});
app.use(router.routes()).use(router.allowedMethods()) // 路由装箱
}
Затем инициализируйте маршрутизацию в app.js:
initRoutes(app,router)
использовать
Создайте контроллер/index.js , промежуточное ПО/index.js
Тестовый код для промежуточного ПО/index.js
export default async (ctx,next)=>{
console.log("middleware")
await next();
}
Тестовый код для контроллера/index.js:
import {RequestMethod,Controller,RequestMapping } from "./../common/decorator/index"
import TestFun from './../middleware/index'
// 添加Controller前缀
@Controller("/api/test")
export default class TestController {
// 基本面使用 /api/test/login
@RequestMapping({
url:"/login",
method:RequestMethod.GET, // 定义请求方法
})
async login(ctx){
ctx.body = {
code:0,
message:"success"
}
}
// 定义有中间件的router /api/test/test
@RequestMapping({
method:RequestMethod.POST, // 定义请求方法
middleware: [TestFun] // 使用中间件
})
async test(ctx){
ctx.body = {
code:0,
message:"success"
}
}
}
Импорт и экспорт контроллера/index.js в router/index.jsexport * from "../controller/index"Если есть другие контроллеры, просто добавьте их в router/index.js~
перезапустить службу
Тест с почтальоном
хорошо, готово~, мне больше не нужно писать роутер в будущем, я чувствую себя намного лучше!
Исходный код, пожалуйста, нажмитеадрес гитхаба
Комментарии к коду очень подробные. Если у вас есть какие-либо вопросы или предложения по улучшению, оставьте сообщение, чтобы обменяться мнениями и учиться вместе~
Моя рекомендация
Если у вас есть друзья, которые часто заказывают еду на вынос, редактор порекомендует вам выгоду. Комиссионные можно заработать для собственного использования или продвижения, каждый день вы получаете купоны на такси, купоны на бензин, купоны на вынос Ele.me, купоны на фрукты и овощи, купоны на вынос Meituan, купоны на быструю покупку, купоны на привилегированные купоны, купоны на отели и т. д. доступный.
Нажмите здесь, чтобы узнать подробностинажмите на ссылку