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模板引擎,如果有不对的地方欢迎大家指正,最后希望能够帮助到大家!

原文地址:https://www.cnblogs.com/lxl0419/p/10075497.html