前言:

  最近在开发一个关于后台管理系统的基础开发平台,解释一下就是不管什么管理系统都有一些相同的功能,但是又有一些细节不一样,这个基础平台就是实现对于基础功能可以进行快速开发,主要有自定义的生成功能代码块,只需要选择一些配置项就能够生成我们需要的页面,主要就是通过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).queryres.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

node+ejs模板引擎的应用相关推荐

  1. Node.js「四」—— 路由 / EJS 模板引擎 / GET 和 POST

    本文为 Node.js 系列笔记第四篇.文章参考:nodejs 教程:<深入浅出 Node.js>:阮一峰 nodejs 博客: Node.js v16.13.0 文档 文章目录 一.路由 ...

  2. node.js Stream(流) 和 EJS 模板引擎——0822

    一.node.js 中的 Stream(流) 1.什么是 Stream ? Stream 是一个抽象接口,Node 中有很多对象实现了这个接口.例如,对http服务器发起请求的request 对象就是 ...

  3. Node.js 使用expresss,ejs模板引擎实现简单的登录注册

    express下如何使用ejs模板引擎 : 1-安装ejs 2-express下不需要导入ejs  只需要配置模板引擎 app.set("view engine","ej ...

  4. nodejs-5.1 ejs模板引擎

    ejs官方文档:https://ejs.bootcss.com/  https://github.com/mde/ejs 模板引擎:是一种将数据和页面分离的技术.. 1.什么是 EJS? " ...

  5. jade模板引擎修改为ejs模板引擎

    如果我们使用jade模板引擎,里面的页面应该是这样的: 后缀名都是jade 如果想使用ejs 模板引擎要怎么做呢? (1)安装 ejs npm install ejs --save (2)在项目的ap ...

  6. Express框架中如何引用ejs模板引擎

    1.如何在项目中安装ejs模板引擎 在NodeJS指南中利用利用以下命令建立网站的基本结构: express -t ejs microblog 运行这个命令后继续运行 cd microblog &am ...

  7. express中ejs模板引擎的使用,consolidate模块的使用

    在express动态页面的渲染,用的比较多的模板引擎就是 ejs 还有一种是jade 个人觉得吧 jade是靠缩进来实现 代码结构的话 像我这种比较喜欢看 htm标签的人来说 太难受了 如果是使用ex ...

  8. ejs模板引擎和html,模板引擎ejs

    ejs模板引擎 将数据与标签分离开来,这样就不需要前面写的学生管理系统那样,在页面显示信息通过字符串的拼接的方式,而是直接用ejs模板引擎,将服务器端传过来的数据在页面直接显示出来,不会那样的麻烦了. ...

  9. 在express路由中使用ejs模板引擎

    首先创建文件夹, example –views –about.ejs –index.ejs app.js app.js 代码 var express = require('express'); var ...

最新文章

  1. sql中小数位四舍五入控制
  2. clearcase 创建副本
  3. Android 小技巧
  4. Maven教程(一)
  5. Phantomjs代理设置
  6. 了解※数据科学※(一)之数据的概念及一个数据科学项目的流程分析
  7. IIS服务器绑定域名问题
  8. P3246 [HNOI2016]序列(莫队+单调栈+ST表)
  9. 使用 jQuery Mobile 与 HTML5 开发 Web App (七) —— jQuery Mobile 列表
  10. 服务里4个oracle,ORACLE RAC安装问题解决记录(4)- 一个隐藏的Windows服务(OraFenceService)...
  11. Linux服务器性能的重要指标:打开文件数的限制
  12. 数据告诉你,抖音凭什么逆袭?
  13. 测试webtrends的Refer
  14. 清除Conficker蠕虫病毒详细步骤
  15. 一文了解Clickhouse
  16. Flutter网格控件GridView
  17. python精准识别图片文字
  18. onclick,click和onfocus,change区别
  19. 小技巧 CSR蓝牙连接问题
  20. Kali下卸载程序和安装程序的方法

热门文章

  1. 静态链表的插入和删除
  2. Python中的排序sorted(d.items(), key=lambda x: x[1])
  3. 参数构造错误 微信_快速掌握前端开发中的常见错误
  4. LINUX下UDP实现消息镜像通信,linux环境下基于udp socket简单聊天通信
  5. 计算机应用看法,对计算机应用教学方法改革的看法
  6. js中new实例化对象内部过程
  7. 网络推广——网络推广专员优化网站有秘诀!
  8. 企业网络推广——企业网络推广表示网站优化少不了这三大技能
  9. python读取大文件内容_python 读取大文件
  10. [java]处理utf-8 bom字符串的bom头