使用plop快速创建express mvc模板代码

我们可以设置 Plop 来生成 /routes/xx, /controllers/xx, 和 /models/xx 文件，提供工作效率。

1. 安装 plop#

1
npm install --save-dev plop

2. 创建 Plop 配置文件#

在项目根目录下创建一个 plopfile.js 文件：

为了在 Plop 生成文件时将文件名或类名的首字母大写，我们可以使用 Handlebars 的自定义 helper 函数来处理模板中的名称。

在模板文件中，也可以使用这个自定义 helper 来生成类名或函数名的首字母大写。

1
module.exports = function (plop) {
2
  // 添加首字母大写的自定义 helper 可以对传入参数进行处理 用法{{ capitalize name }}
3
  plop.setHelper(
4
    'capitalize',
5
    (text) => text.charAt(0).toUpperCase() + text.slice(1)
6
  )
7
  // mvc generator
8
  plop.setGenerator('mvc', {
9
    description: 'Create a mvc template',
10
    prompts: [
11
      {
12
        type: 'input',
13
        name: 'name',
14
        message: '模块名称:',
15
      },
16
      {
17
        type: 'input',
18
        name: 'route',
19
        message: '路由前缀:',
20
      },
21
    ],
22
    actions: [
23
      {
24
        type: 'add',
25
        path: 'src/routes/{{name}}/index.js',
26
        templateFile: 'plop-templates/router.hbs',
27
      },
28
      {
29
        type: 'add',
30
        path: 'src/controllers/{{name}}Controller.js',
31
        templateFile: 'plop-templates/controller.hbs',
32
      },
33
      {
34
        type: 'add',
35
        path: 'src/models/{{name}}Model.js',
36
        templateFile: 'plop-templates/model.hbs',
37
      },
38
      // pattern正则表达式 用它来匹配目标文件追加的位置
39
      // template后面需添加$1，$1是pattern正则括号内匹配到的字符串，当发生替换时，占位符会连同模板文本一起替换掉目标文件中的占位符，所以这个占位符会一直存在于目标文件中，方便后续的追加
40
      {
41
        type: 'modify',
42
        path: 'src/routes/index.js',
43
        pattern: /(\/\/ 路由引入 不要删除此行注释)/gi,
44
        template: "import {{name}} from './{{name}}'\r$1",
45
      },
46
      {
47
        type: 'modify',
48
        path: 'src/routes/index.js',
49
        pattern: /(\/\/ 注册路由 不要删除此行注释)/gi,
50
        template: "router.use('/{{route}}', authMiddleware, {{name}})\r$1",
51
      },
52
    ],
53
  })
54
}

3. 创建模板文件#

在项目根目录下创建一个 plop-templates 文件夹，并在其中创建三个模板文件：

plop-templates/controller.hbs

1
import {{capitalize name}}Model from '@/models/{{name}}Model.js'
2

3
// test
4
export const test = async (req, res) => {
5
  try {
6
    const result = await {{capitalize name}}Model.test()
7
    res.json(result)
8
  } catch (err) {
9
    res.status(500).json({ message: err.message })
10
  }
11
}

plop-templates/router.hbs

1
import express from 'express'
2
import * as {{capitalize name}}Controller from '@/controllers/{{name}}Controller.js'
3

4
const router = express.Router()
5

6
//  {{name}}路由
7
router.get('/', {{capitalize name}}Controller.test)
8

9
export default router

plop-templates/model.hbs

1
import pool from '@/config/database.js'
2

3
const {{capitalize name}}Model = {
4
  async test(type = '', client = '') {
5
    let connection
6
    try {
7
      connection = await pool.getConnection()
8
      let sql = 'SELECT COUNT(*) AS count FROM user_count'
9
      const [rows] = await connection.execute(sql, params)
10
      return rows
11
    } catch (error) {
12
      throw error
13
    } finally {
14
      if (connection) connection.release()
15
    }
16
  },
17
}
18

19
export default {{capitalize name}}Model

4. 配置 package.json#

1
{
2
  ...
3
  "scripts": {
4
    ...
5
    "mvc": "plop mvc",
6
  },
7
  ...
8
}

执行 yarn mvc

1
yarn mvc
2
$ plop mvc
3
? 模块名称: oneIdManage
4
? 路由前缀: oneId
5
✔  ++ /src/routes/oneIdManage/index.js
6
✔  ++ /src/controllers/oneIdManageController.js
7
✔  ++ /src/models/oneIdManageModel.js
8
✔  +- /src/routes/index.js
9
✔  +- /src/routes/index.js
10
✨  Done in 6.22s.

音乐

音乐

1. 安装 plop#

2. 创建 Plop 配置文件#

3. 创建模板文件#

4. 配置 package.json#

音乐

文章目录