до

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

Исходя из этого, у меня возникла идея написать генератор кода фронтенда на основе интерфейса. Поскольку в нашей компании есть два типа документов API, а также два фреймворка vue2+element и vue3+ant+ts во внешнем интерфейсе, таким образом, расширяются три вида генераторов кода.

идеи

Генератор внешнего кода, проще говоря:

Первым шагом является получение входных/выходных параметров интерфейса через интерфейсный документ и форматирование входных/выходных параметров в определенный JSON.

Второй шаг - извлечь шаблон кода в соответствии с вашим собственным проектом, объединив таблицы и компоненты формы.

Третий шаг — создание файлов vue, JS и маршрутизации через JSON и шаблоны кода первого и второго шагов.

Введение

Этот проект использует puppeteer для чтения веб-страницы документа интерфейса, получения ссылок интерфейса, входных параметров, выходных параметров и т. д., а также записи и полугенерации json в определенном формате.

Технические решения

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

Генерировать файлы с помощью fs.writeFile

иллюстрировать

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

Для компонентов таблиц и форм см. каталог компонентов в проекте, который необходимо импортировать глобально. см. каталог компонентов

Также есть код для генерации vue3+typescript+ant, который еще не анонсирован.

Компонент Описание

Большая часть фоновой системы управления состоит из форм + страниц форм, а формы\формы нужно писать одну за другой, особенно если у вас есть свои собственные требования к стилю, довольно хлопотно добавлять классы и тому подобное, а иногда и орфографию error\copy Если вовремя не обратить внимания, то возможно придется долго искать, что кажется хлопотным.Я предпочитаю конфигурационный код, поэтому стою на плечах специалистов и меняю эту форму и форму компонент. Не распыляйте, если вам это не нравится.

Инструкции по настройке

конфигурация шкалы

// 适用于scale的配置
export const config = {
  href: 'http://xxx.cn/',
  serverName: 'AdminStoreContractService',
  pages: [{
    filePath: 'promotionNew',     // 列表＼新＼修页面所在路径
    chunkName: 'base', // chunkName 用于路由中 require.ensure 打包参数
    list: { // 列表
      fileName: 'pn-list', // 列表文件名字
      name: '列表', // 菜单名
      apiName: 'listStoreContract',  // 列表接口名
      exportFile: { // 导出 [非必填]
        apiUrl: '',
        downFileName: ''
      }
    },
    modify: { // (修改＼新增)  [非必填]
      fileName: 'modify',  // 页面名
      apiName: 'saveStoreContract',  // 接口名
      detailApi: 'getStoreContractById', // 查看详情接口名 (用于查看详情、编辑)
      hasEdit: true
    },
    opts: [ // 表格行操作
      {
        apiName: 'modifyStoreContractStatus', // 接口
        confrimMsg: '确认审核该记录', // 如果没有确认信息，则直接请求
        text: '审核'
      }
    ]
  }]
}

Swagger API Конфигурация


// 适用于swagger api 的配置
export const swaggerConfig = {
  href: 'http://xxx.com',
  serverName: 'mini-new-promotion-service',
  baseUrl: '/promotion-new/manager/',
  pages: [{
    filePath: 'promotionNew',     // 列表＼新＼修页面所在路径
    chunkName: 'base', // chunkName 用于路由中 require.ensure 打包参数
    list: { // 列表
      fileName: 'pn-list', // 列表文件名字
      name: '列表', // 菜单名
      apiName: 'getPromotionList',  // 列表接口名
      exportFile: { // 导出 [非必填]
        apiUrl: '',
        downFileName: ''
      }
    },
    modify: { // (修改＼新增)  [非必填]
      fileName: 'modify',  // 页面名
      apiName: 'savePromotion',  // 接口名
      detailApi: 'promotionDetail', // 查看详情接口名 (用于查看详情、编辑)
      hasEdit: true
    },
    opts: [ // 表格行操作
      {
        apiName: 'updPromotionConfigStatus', // 接口
        confrimMsg: '确认审核该记录', // 如果没有确认信息，则直接请求
        text: '审核'
      }
    ]
  }]
}

Команда генерации кода

В настоящее время этот проект поддерживает два типа документов API, первый поддерживает swagger API, второй поддерживает масштабирование [этого типа пользователей относительно мало]

Перед выполнением команды измените конфигурацию в config.ts/swaggerConfig.ts, например, настройте URL-адрес генерируемого кода.

команда кода чванства

yarn run scr

Код команды для масштабирования

yarn run start

Сгенерированный файл:

Без лишних слов, вот код:

https://gitee.com/myreborns/curd

Генератор постоянно обновляется, добро пожаловать в общение с друзьями, если он прост в использовании, ставьте лайк.

сравнение масштаба\чванства

	scale	swagger
перечислить	Перечисления под одним и тем же сервисом будут размещены в одном месте, что может быть размещено непосредственно в файлах, используемых в проекте.	Медленно разберите его в соответствии с описанием на заднем плане.
Исходящее\входящее приобретение	Требуется послойное получение	Когда страница открыта, есть запрос на ее получение, просто получите возвращаемое значение запроса напрямую