node+ejs模板引擎的应用

前言：

　　最近在开发一个关于后台管理系统的基础开发平台，解释一下就是不管什么管理系统都有一些相同的功能，但是又有一些细节不一样，这个基础平台就是实现对于基础功能可以进行快速开发，主要有自定义的生成功能代码块，只需要选择一些配置项就能够生成我们需要的页面，主要就是通过nodejs和ejs模板引擎完成这个功能。

正文：

其实实现起来也很简单：

首先就是我们先要搭建需要生成的页面模板，然后通过传递参数来实现生成不同的需求页面，下面贴一些主要的代码：（这里是生成的vue文件，其实不管是html vue文件都一样）

这里是ejs模板
<!-- 查看 -->
      <Modal v-model="modal.flag" :title="modal.title" :footer-hide="modal.footer" :width="modal.width" :class="modal.size" :mask="modal.mask">
        <Form ref="formItem" :model="formItem" :label-width="120" label-position="right" class="formStyle"><% for (let i=0; i<config.length; i++) { %>
          <Row>
            <Col span="8">
              <FormItem label="<%= config[i].itemName %>：" prop="<%= config[i].itemCode %>"><% if (config[i].inputElement === 'input') { %>
                <Input v-model="formItem.<%= config[i].itemCode %>" :readonly="readonly"></Input><% } else if (config[i].inputElement === 'text') { %>
                <Input v-model="formItem.<%= config[i].itemCode %>" :readonly="readonly" type="textarea" :rows="4"></Input><% } else if (config[i].inputElement === 'password') { %>
                <Input v-model="formItem.<%= config[i].itemCode %>" :readonly="readonly" type="password" :rows="4"></Input><% } else if (config[i].inputElement === 'radio') { %>
                <RadioGroup v-model="formItem.<%= config[i].itemCode %>">
                  <Radio v-for="(item, index) in formItem.<%= config[i].itemCode %>_list" :label="item.value" disabled>{{ item.label }}</Radio>
                </RadioGroup><% } else if (config[i].inputElement === 'checkbox') { %>
                <CheckboxGroup v-model="formItem.<%= config[i].itemCode %>">
                  <Checkbox v-for="(item, index) in formItem.<%= config[i].itemCode %>_list" :label="item.value" disabled>{{ item.label }}</Checkbox>
                </CheckboxGroup><% } else if (config[i].inputElement === 'switch') { %>
                <i-switch v-model="formItem.<%= config[i].itemCode %>" :true-value="open" :false-value="close" size="large" disabled>
                  <span v-for="(item, index) in formItem.<%= config[i].itemCode %>_list" :slot="item.value" :key="index">{{ item.label }}</span>
                </i-switch><% } else if (config[i].inputElement === 'date') { %>
                <DatePicker type="date" v-model="formItem.<%= config[i].itemCode %>" :readonly="readonly"></DatePicker><% } else if (config[i].inputElement === 'time') { %>
                <TimePicker type="time" v-model="formItem.<%= config[i].itemCode %>" :readonly="readonly"></TimePicker><% } else if (config[i].inputElement === 'tree') { %>
                <Input v-model="formItem.<%= config[i].itemCode %>_list" :readonly="readonly"/>
                <Input v-model="formItem.<%= config[i].itemCode %>" style="display:none" :readonly="readonly"/><% } else if (config[i].inputElement === 'select') { %>
                <Select v-model="formItem.<%= config[i].itemCode %>" disabled>
                  <Option v-for="(item, index) in formItem.<%= config[i].itemCode %>_list" :value="item.value" :key="index">{{ item.label }}</Option>
                </Select><% } %>
              </FormItem>
            </Col>
          </Row><% } %>
        </Form>
      </Modal>

//这里是生成模板时，通过node服务将后台请求到的数据简单处理一下然后添加到模板中，然后生成vue文件
http.createServer(function(req, res) {
    res.writeHead(200, {
        'Content-Type': 'text/plain'
    });
    // 解析 url 参数
    let params = url.parse(req.url, true).query
    res.end()
    console.log("读取模板！");
    
    fs.readFile('./src/views/system-management/FYI/vue.ejs', function(err, data) {
        if (err) {
            return console.error(err)
        }
        console.log("异步读取文件数据: " + data.toString());
        
        let template = data.toString()
        console.log("columns: " + params.telegram.columns);
        console.log(params);
        let liquid = {
            columns: JSON.parse(params.telegram).columns,
            columnsButton: JSON.parse(params.telegram).columnsButton,
            modelUrl: JSON.parse(params.telegram).modelUrl,
            config: JSON.parse(params.telegram).config,
            operationButton: JSON.parse(params.telegram).operationButton,
            addCardButton: JSON.parse(params.telegram).addCardButton,
            editCardButton: JSON.parse(params.telegram).editCardButton,
            columnsField: JSON.parse(params.telegram).columnsField,
            formId: JSON.parse(params.telegram).formId,
            functionId: JSON.parse(params.telegram).functionId,
            sumWidth: JSON.parse(params.telegram).sumWidth,
            id: JSON.parse(params.telegram).id
        }
        let vue = ejs.render(template, liquid)
        let vuePath =  `./src/views/system-management/FYI/${liquid.formId}.vue`
        console.log("数据已成功注入模板中！")
        console.log("准备写入文件")
        fs.writeFile(vuePath, vue, function(err) {
            if (err) {
                return console.error(err)
            }
            console.log("数据写入成功！")
        })
        console.log("vue 文件已生成!")
        
    })
}).listen(3000);

//这里就是将以上两个部分连接起来就实现了整个过程，先从后请求数据然后再通过本地的node服务将数据添加到模板中最后生成vue文件

birthCode() {
                let sessionId = Cookies.get('status');
                let this1 = this;
                this1.$http({
                        headers: {
                            "Authorization": sessionId,
                        },
                        method: 'post',
                        url: this1.GLOBAL.BASE_URL + '/common/function/loadingPage',
                        params: {
                            'id': this1.funId
                        },
                    })
                    .then(function(res) {
                        // axios请求
                        this1.$http({
                                method: 'get',
                                url: 'http://localhost:3000',
                                params: {
                                    telegram: res.data[0]
                                }
                            })
                            .then(function(response) {
                                debugger
                                
                            })
                            .catch(function(error) {
                                
                            })
                    })
                    .catch(function(error) {
                        //
                    })
            }

这些只是自己在项目中的一些运用，也是第一次接触使用ejs模板引擎，如果有不对的地方欢迎大家指正，最后希望能够帮助到大家！