Shen Fugui’s BLOG

Automatic code generation tool

An overview of the

The reason why I wanted to write this article is mainly because I have been in three startups and I have been bruised and tired every time. The boss wants two or three people to do software work that dozens of other companies can do. And still ask you fast, 8 hours a day affirmation is not finished ah this appeared voluntary overtime principle and do not give overtime pay.

For some time I was thinking about whether it was my technical problem or the company’s problem that I couldn’t finish a project like this on time or something else. That is another way of thinking, assuming that let a big bull ali himself a person to build a software platform (such as a set of B2B2C mall system) 1,2 months should be endless. That much business logic is mostly a matter of time, and technically it’s not really that complicated.

reflection

1. The start-up team has no technology precipitation (no reusable components and standardized codes)

2. Poor internal run-in and inconsistent technology stack. Abilities are not uniform

3. Lack of cohesion and team mission

Automatic code generation tool ideas

1. Encapsulation of common code blocks

2. Automatically generate code from JSON configuration files

3. String templates

1. Take tables as an example

In the development management background, tabular lists appear most frequently, so let’s start with that.

I’ll start by installing a small dependency package.

npm install clipboard

Copy the code

Then write a utility method, clipboard.js


import Vue from 'vue'
import Clipboard from 'clipboard'

function clipboardSuccess() {
  Vue.prototype.$message({
    message: 'Copy successfully'.type: 'success'.duration: 1500})}function clipboardError() {
  Vue.prototype.$message({
    message: 'Copy failed'.type: 'error'})}export default function handleClipboard(text, event) {
  const clipboard = new Clipboard(event.target, {
    text: (a)= > text
  })
  clipboard.on('success', () => {
    clipboardSuccess()
    clipboard.off('error')
    clipboard.off('success')
    clipboard.destroy()
  })
  clipboard.on('error', () => {
    clipboardError()
    clipboard.off('error')
    clipboard.off('success')
    clipboard.destroy()
  })
  clipboard.onClick(event)
}

Copy the code

Call way

<el-button @click='htmlCopy("", $event)'> </el-button> /.. / utils/clipboard '3, htmlCopy (text, event) { const tableData = this.tableData const tableRow = this.tableDataObj const tbaleHtml = temp.tableToHtml(tableData, tableRow) clip(tbaleHtml, event) this.test = tbaleHtml }Copy the code

Generate the corresponding table from the JSON string and convert it to the corresponding HTML with the new ES6 feature

// Generate json string data {" tableData ", "music", "rowData: [{" rowName" : "ID", "rowData" : "ID", "rowWidth" : "100"}, {" rowName ":" name ", "rowData" : "name", "rowWi DTH ":" 200 "}, {" rowName ":" status ", "rowData" : "status", "rowWidth" : "80"})}Copy the code
  /** * @param tableData * @param tableRow tableRow information * @returns {string} table HTML template */
  tableToHtml: (tableData, tableRow) = > {
    var tableRowData = tableRow
    var rowStr = ` `
    // Table column data splice
    for (let i = 0; i < tableRow.rowData.length; i++) {
      const tempData = `
              <el-table-column
                header-align="center"
                prop="${tableRowData.rowData[i].rowData}"
                label="${tableRowData.rowData[i].rowName}"
                width="${tableRowData.rowData[i].rowWidth}">
              </el-table-column>
      `
      rowStr += tempData
    }
    var templat = `
    <el-table
              ref="multipleTable"
              :data="${tableData}" stripe="true" tooltip-effect="dark" style="width: 100%; margin-top: 20px; text-align: center; border-radius: 5px;" @selection-change="handleSelectionChange"> <el-table-column header-align="center" type="selection" width="55"> </el-table-column>${rowStr}<el-table-column label=" 内 容 "header-align="center"> <template slot-scope="scope"> <el-table-column label=" 内 容" type="danger" @click="handleDelete(scope.$index, scope.row)"> delete </el-button> </template> </el-table-column> </el-table> '
    return templat
  },
  // The data needed in the table
  tableToData: (tableData, tableRow) = > {
    var templat = ` `
    var rowStr = ` `
    for (let i = 0; i < tableRow.rowData.length; i++) {
      const tempData = `${tableRow.rowData[i].rowData}: '',
      `
      rowStr += tempData
    }
    templat = `
      ${tableData}: '',
      ${rowStr}
    `
    return templat
  }

Copy the code