EggBorn.js: высокоуровневая полнофункциональная среда разработки Javascript.

Что такое EggBorn.js

EggBorn.js — это полнофункциональная среда разработки Javascript высшего уровня.

EggBorn.js — это лучшая практика для разработки полного стека на Javascript.
EggBorn.js не изобретает велосипед, а использует новейшие технологии с открытым исходным кодом в отрасли для разработки наилучшего сочетания полного стека.
EggBorn.js использует Vue.js + Framework7 / Vue Router + Webpack для интерфейса, Koa.js + Egg.js для сервера и mysql для базы данных.
EggBorn.js отслеживает последние достижения технологий с открытым исходным кодом и постоянно оптимизируется, чтобы поддерживать всю структуру в наилучшем состоянии в любое время.

На решении какой проблемы фокусируется EggBorn.js: модульность бизнеса

Энергичное развитие технологии Javascript обеспечило более плавный процесс разработки интерфейсов и серверных частей, а также значительно повысило эффективность разработки. Но есть пользователи сети, которые задаются вопросом, может ли Javascript быть пригодным для разработки крупномасштабных веб-приложений. Характерной чертой крупномасштабных веб-приложений является необходимость разработки большого количества компонентов страницы по мере роста бизнеса. Столкнувшись с этим сценарием, обычно есть два решения:

1 Недостаток метода одностраничного построения состоит в том, что результирующий пакет развертывания получается очень большим.
2 Страница загружается асинхронно.Недостаток в том, что страница слишком разбросана и требует частого взаимодействия с бэкендом.

EggBorn.js реализует третье решение:

3 Компоненты страницы классифицируются в соответствии с бизнес-требованиями, имеют модульную структуру и реализуют механизм асинхронной загрузки модулей, тем самым преодолевая недостатки предыдущих двух решений и полностью отвечая потребностям непрерывного роста крупномасштабного бизнеса веб-приложений.

Технические характеристики EggBorn.js

• Модульность бизнеса: компоненты страницы организованы в модули.
• Гибкий метод загрузки: модули можно загружать асинхронно или синхронно
• Модули очень взаимосвязаны: модули включают в себя внешние компоненты страницы и внутреннюю бизнес-логику.
• Гибкая конфигурация параметров: передняя и задняя части модуля могут быть параметризованы отдельно
• Интернационализация: как передняя, ​​так и задняя части модуля поддерживают независимую интернационализацию.
• Изоляция модуля: страница, данные, логика, маршрутизация, конфигурация и другие элементы модуля изолированы пространством имен, чтобы избежать загрязнения переменных и конфликтов между модулями.
• Супер простая в использовании обработка транзакций: просто настройте параметр в записи маршрутизации, чтобы идеально реализовать обработку транзакций базы данных.
• Прогрессивная разработка: благодаря высокой степени связности модулей бизнес можно депонировать в виде модулей и повторно использовать в нескольких проектах, которые можно внести в сообщество npm с открытым исходным кодом или развернуть на внутреннем частном складе npm компании.

С EggBorn.js теперь можно повторно использовать не только компоненты, но и бизнес-модули.

Начать быстро

Установите каркас EggBorn.js

$ npm install -g egg-born

Новый проект

$ egg-born project_name
$ cd project_name
$ npm install

В настоящее время EggBorn.js предоставляет два каркаса проекта, а именно:

• front-backend-mysql-- Front-end и back-end шаблоны проектов с полным стеком
• front-- Шаблон внешнего интерфейса, другие решения могут быть использованы в фоновом режиме.

Настройте параметры подключения mysql

Если принятоfront-backend-mysqlШаблон, пожалуйста, настройте параметры подключения mysql (пустая база данных в порядке)

редактироватьsrc/backend/config/config.default.jsдокумент

  // mysql
  config.mysql = {
    clients: {
      // donot change the name  
      __ebdb: {
        host: '127.0.0.1',
        port: '3306',
        user: 'travis',
        password: '',
        database: 'egg-born',
      },
    },
  };

запустить проект

Запустите серверную службу

$ npm run dev:backend

Запустите интерфейсную службу

$ npm run dev:front

Схема архитектуры EggBorn.js

структура системы

Структура файла проекта

Файловая структура модуля

разработка модуля

соглашение об именовании

Для непрерывного накопления бизнес-модулей и достижения эффекта повторного использования пространства имен всех модулей должны быть полностью изолированы, чтобы избежать взаимного загрязнения и конфликта, поэтому приняты следующие методы именования:

egg-born-module-{providerId}-{moduleName}

как модульegg-born-module-a-version, информация об именовании каждой ссылки выглядит следующим образом:

• providerId: a
• moduleName: version
• fullName: egg-born-module-a-version
• relativeName: a-version
• Адрес маршрутизации страницы внешнего интерфейса: /a/version/{page}
• Адрес маршрутизации серверного API: /a/version/{controller}/{action}.

загрузочный механизм

Модули поддерживают как асинхронную, так и синхронную загрузку. По умолчанию используется асинхронная загрузка, если вы хотите загружать синхронно, просто добавьте имя модуля после-syncсуффикс как модульegg-born-module-aa-login-sync.

Новый модуль

Входитьsrc/moduleКаталог выполняет скаффолдинг, создавая скелет файла модуля.

$ egg-born module_relative_name

EggBorn.js в настоящее время предоставляет 2 модульных каркаса, а именно

• module-- Полный шаблон модуля стека
• module-front-- Шаблон внешнего модуля

Фронтенд разработка модуля

Маршрутизация страниц внешнего интерфейса

существуетfront/src/routes.jsДобавьте маршруты страниц в

function load(name) {
  return require(`./pages/${name}.vue`).default;
}

export default [
  { path: 'welcome/:who', component: load('welcome') },
  { path: 'profile', component: load('profile'), meta: { requiresAuth: true } },
  { path: '/login', component: load('login') },
];

• path: Путь, поддерживает параметры. от/В начале представляет компонент корневой страницы.loginКомпоненты страницы обычно настраиваются так
• component: объект компонента страницы
• meta: метаданные маршрутизации
• meta.requiresAuth: если компонент страницы требует входа в систему, он должен быть установлен наtrue

Чтобы сослаться на компонент страницы на странице, используйте абсолютный путь, например

<f7-list-item link="/aa/hello/welcome/You" title="Welcome"></f7-list-item>
<f7-list-item link="/aa/hello/profile" title="Profile"></f7-list-item>

Интерфейсное управление состоянием

Vuex — это шаблон управления состоянием, разработанный для приложений Vue.js. EggBorn.js использует Vuex для реализации полностью изолированного механизма управления состоянием модуля.
существуетfront/src/store.jsдобавить такие состояния, как

export default function(Vue) {

  return {
    state: {
      message: 'hello world',
    },
  };

}

Доступ к состоянию этого модуля в компоненте страницы

const message = this.$local.state.message;

Доступ к другому состоянию модуля в компонентах страницы

const message = this.$store.state[providerId][moduleName].message;

Для получения дополнительной информации см.:Vuex

Конфигурация параметров внешнего интерфейса

существуетfront/src/config/config.jsДобавьте информацию о конфигурации, например

export default {
  mode: 1,
};

Этот модуль поддерживает только доступ к внутренним компонентам в параметрах страницы

const mode = this.$config.mode;

Интерфейсная интернационализация

существуетfront/src/config/localeкаталог для добавления файлов интернационализации
zh-cn.jsНиже приведены примеры определений языков в файле.

export default {
  mode: '模式',
  "Hello world! I'm %s.": '您好，世界！我是%s。',  
};

Интернационализированный язык использует метод глобальной интеграции, который способствует совместному использованию языковых ресурсов.Метод доступа в компоненте страницы выглядит следующим образом.

const mode = this.$text('mode');
const message = this.$text("Hello world! I'm %s.",'zhennann');

Разработка бэкенда модуля

бэкэнд API-маршрутизация

существуетbackend/src/routes.jsДобавьте маршруты API, например

const home = require('./controller/home.js');

module.exports = [
  { method: 'get', path: 'home/index', controller: home, action: 'index', transaction: true },
];

• method: методы, такие как get/post
• path: путь, поддерживает параметры
• component: объект контроллера
• action: метод контроллера, если он не установлен, он будет автоматически использовать завершающее слово пути.
• transaction: по умолчанию false, если установлено значение true, транзакции базы данных включены.

Получите доступ к маршруту API этого модуля в компоненте передней страницы.

this.$api.get('home/index').then(data => {
}).catch(err => {
});

Доступ к другим API-маршрутам модулей в компонентах интерфейсной страницы

this.$api.get('/providerId/moduleName/home/index').then(data => {
}).catch(err => {
});

Серверный контроллер

Реализация внутреннего контроллера соответствует Egg.js.

module.exports = app => {
  class HomeController extends app.Controller {

    async index() {
      const message = await this.service.home.index();
      this.ctx.success(message);
    }

  }
  return HomeController;
};

Для получения дополнительной информации см.:Egg.js Controller

Серверная служба

Служба используется для инкапсуляции бизнес-логики для вызова контроллера.Метод реализации соответствует Egg.js.

module.exports = app => {
  class Home extends app.Service {

    async index() {
      const res = await this.ctx.db.queryOne('show tables');
      return res;
    }

  }

  return Home;
};

Отличие от Egg.js в том, что Сервис используетctx.dbУправляйте базой данных для автоматической поддержки транзакций базы данных.

Для получения дополнительной информации см.:Egg.js Service

Вызов внутреннего контроллера

Для поддержки разработки крупномасштабных веб-систем EggBorn.js поддерживает вызовы между внутренними контроллерами модулей, такими как

const message = await this.ctx.performAction({
  method: 'get',
  url: 'home/index',
  query: {
    username: 'kevin',
  },
  params: {
    mode: 1,
  },
  body: {
    content: 'ready',
  },
});

• method: методы, такие как get/post
• url: используйте относительный путь для доступа к контроллеру этого модуля и используйте следующий путь для доступа к контроллеру других модулей./Абсолютный путь для начала.
• query,params,body: соответствует обычным параметрам контроллера.

Операции с базой данных

Операции с серверной базой данных соответствуют Egg.js.

Для получения дополнительной информации см.:Egg.js MySQL

Бэкэнд-транзакции базы данных

EggBorn.js предоставляет более удобный способ реализации транзакций базы данных, который нужно настроить только в записях маршрутизации внутреннего API.transactionПараметры, используемые сервисомctx.dbРаботайте с базой данных.
Если это главный контроллер черезctx.performActionВызовите субконтроллер, и правила открытия транзакций базы данных будут следующими:

Конфигурация главного контроллера	Конфигурация вспомогательного контроллера	Дочерний контроллер фактически включен
true	true	true
true	false	true
false	true	true
false	false	false

Конфигурация внутренних параметров

существуетbackend/src/config/config.jsДобавьте информацию о конфигурации, например

module.exports = appInfo => {
  const config = {};

  config.message = "Hello world! I'm %s.";

  return config;
};

Пример доступа к конфигурации параметров внутри этого модуля выглядит следующим образом.

const message = this.ctx.config.message;

Интернационализация серверной части

существуетbackend/src/config/localeкаталог для добавления файлов интернационализации
zh-cn.jsНиже приведены примеры определений языков в файле.

module.exports = {
  "Hello world! I'm %s.": '您好，世界！我是%s。',
  'not found': '未发现',
};

Интернационализированный язык использует метод глобальной интеграции, который способствует совместному использованию языковых ресурсов.Методы доступа следующие:

const notFound = this.ctx.text('not found');
const message = this.ctx.text("Hello world! I'm %s.", 'zhennann');

Бэкэнд-обработка ошибок

существуетbackend/src/config/errors.jsДобавить код ошибки в файл

// error code should start from 1001
module.exports = {
  1001: 'not found',
};

Пример возвращаемого сообщения об ошибке выглядит следующим образом.

this.ctx.fail(1001);

Пример исключения, которое также может быть сгенерировано, выглядит следующим образом.

this.ctx.throw(1001);

Управление модулями

зависимости модулей

EggBorn.js управляет зависимостями модуля через файл package.json.
Например, модуль aa-module1 зависит от aa-module2, и в файле package.json модуля aa-module1 необходимо выполнить следующую настройку.

{
  "name": "egg-born-module-aa-module1",
  "version": "0.0.1",
  "eggBornModule": {
    "dependencies": {
      "aa-module2": "0.0.1"
    }
  },
  "dependencies": {
    "egg-born-module-aa-module2": "^0.0.1"
  }
}

настраивать"egg-born-module-aa-module2": "^0.0.1", заключается в автоматической установке модуля aa-module2 при установке модуля aa-module1. Если модуль не выпущен публично, его не нужно устанавливать.

Версия данных модуля

Модули, как правило, работают с базой данных, при обновлении версии шаблона может измениться и структура базы данных. EggBorn.js реализует управление версией данных модуля, что облегчает накопление и осаждение бизнес-модулей.

Настройте fileVersion как текущую версию данных в файле package.json модуля.

{
  "name": "egg-born-module-aa-module1",
  "version": "0.0.1",
  "eggBornModule": {
    "fileVersion": 1
  }
}

Добавить маршрут API в бэкэнд модуля

{ method: 'post', path: 'version/update', controller: version }

добавить контроллер версий

module.exports = app => {
  class VersionController extends app.Controller {

    async update() {
      await this.service.version.update(this.ctx.getInt('version'));
      this.ctx.success();
    }

  }
  return VersionController;
};

Добавить версию Сервис

module.exports = app => {

  class Version extends app.Service {

    async update(version) {
      if (version === 1) {
        // do something
      }
    }

  }

  return Version;
};

При запуске серверной службы EggBorn.js автоматически обнаруживает изменение версии данных модуля и выполняет соответствующую маршрутизацию для завершения обновления версии данных.

Релиз модуля

Когда код модуля в проекте стабилен, модуль может быть выпущен публично и передан сообществу с открытым исходным кодом. Также можно установить частный репозиторий npm внутри компании, а затем опубликовать модули в частном репозитории, чтобы сформировать активы компании для удобного повторного использования.
Шаги выпуска модуля следующие:

$ cd path/to/module      -- 进入模块目录
$ npm install            -- 安装模块依赖
$ npm run build:front    -- 构建前端代码
$ npm run build:backend  -- 构建后端代码
$ npm publish            -- 发布至npm仓库

тест-драйв

В настоящее время поддерживает только внутренние тестовые драйверы.

Тест внутреннего контроллера

существуетbackend/test/controllerДобавьте тестовые файлы контроллера в каталог

// controller/home.test.js
const { app, mock, assert } = require('egg-mock/bootstrap');
const parseMockUrl = function(url) {
  const prefix = app.mockUtil.parseUrlFromPackage(__dirname);
  return `${prefix}${url}`;
};

describe('test/controller/home.test.js', () => {

  it('action:index', async () => {
    const result = await app.httpRequest().get(parseMockUrl('home/index'));
    assert(result.body.code === 0);
  });

});

Тест серверной службы

существуетbackend/test/serviceДобавьте тестовый файл службы в каталог

// service/home.test.js
const { app, mock, assert } = require('egg-mock/bootstrap');
const parseMockUrl = function() {
  return app.mockUtil.parseUrlFromPackage(__dirname);
};

describe('test/service/home.test.js', () => {

  it('index', async () => {
    const ctx = app.mockContext({ mockUrl: parseMockUrl() });
    const message = await ctx.service.home.index();
    assert(message);
  });

});

выполнить тест

Выполнение тестов в корневом каталоге проекта

$ npm run test:backend
$ npm run cov:backend

Конфигурация внешней архитектуры

Файл запуска внешнего интерфейса

Интерфейсная архитектура предоставляет два варианта

1. Vue.js + Framework7
2. Vue.js + Vue Router

Framework7 — это эксклюзивная библиотека пользовательского интерфейса для мобильной разработки со встроенным механизмом маршрутизации.
Vue Router — это официальная библиотека маршрутизации Vue.js, которую можно использовать с различными другими библиотеками интерфейса пользовательского интерфейса.

существуетsrc/front/main.jsпереключиться в файл

// choose one

//   framework7
import main from './framework7/main.js';

//   vuerouter
// import main from './vuerouter/main.js';

// export
export default main;

Конфигурация параметров внешнего интерфейса

src/front/config/config.jsКонфигурация параметров в файле может переопределить параметры модуля.

export default{
  module: {
    'aa-hello': {
      mode: 2,
    },
  },
};

Интерфейсная интернационализация

существуетsrc/front/config/localeДобавьте в каталог файлы интернационализации, которые могут переопределить язык интернационализации модуля.
zh-cn.jsНиже приведены примеры определений языков в файле.

export default {
  mode: '模式',
};

Конфигурация внутренней архитектуры

Бэкэнд-архитектура

Внутренняя архитектура основана на Egg.js и полностью поддерживает все функции и функции, предоставляемые Egg.js.

Для получения дополнительной информации см.:Egg.js

Конфигурация внутренних параметров

src/backend/config/config.default.jsКонфигурация параметров в файле может переопределить параметры модуля.

module.exports = appInfo => {
  const config = {};

  // module config
  config.module = {
    'aa-hello': {
      mode: 2,
    },
  };

  return config;
};

Интернационализация серверной части

существуетsrc/backend/config/localeДобавьте в каталог файлы интернационализации, которые могут переопределить язык интернационализации модуля.
zh-cn.jsНиже приведены примеры определений языков в файле.

module.exports = {
  mode: '模式',
};

Развертывание проекта

Создавайте интерфейсный код

$ npm run build:front

Запустите серверную службу

$ npm run start:backend

Остановить серверные службы

$ npm run stop:backend

Конфигурация параметров запуска серверной службы

редактироватьbuild/config.jsдокумент

// backend
const backend = {
  port: 7002,
  hostname: '127.0.0.1',
};

конфигурация nginx

Настоятельно рекомендуется использовать nginx для размещения внешних статических ресурсов и серверных служб обратного прокси.

server {
  listen 80;
  server_name example.com www.example.com;
  set $node_port 7002;

  root /path/to/www;

  location  /api/ {
    proxy_http_version 1.1;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header Host $http_host;
    proxy_set_header X-NginX-Proxy true;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
    proxy_pass http://127.0.0.1:$node_port$request_uri;
    proxy_redirect off;
  }

}

Вклад GitHub

Если у вас есть какие-либо вопросы, пожалуйста, отправьтеissueили изменить коммит напрямуюPR!