旨在脱离后端环境的前端开发套件 - IDT Server篇

IDT,一个基于Nodejs的,旨在脱离后端环境的前端开发套件,目的就是能让前端开发完全脱离后端的环境,无论后端是什么模板引擎(主流),都能应付自如。

IDT主要包括两大部分:Server + Build,这一篇主要介绍Server篇。

为了辅助前端开发,一个本地的类似于Apache的服务器是少不了的,但是有个问题,如果项目中的html,是php的smarty模板怎么办?使用纯粹的静态服务器是不行的,因为对前端开发来说,这个html必须由php的smarty模板引擎来解析,前端人员不懂php怎么办,可以让后端人员来协助搭建环境;但是项目是java,而html是velocity模板引擎呢?让后端人员来搭建java环境吧。。。好繁琐呀。而且,我想根据前后端的接口来自己mock数据怎么办?。。这些都是问题,IDT应运而生。

适用于Django Template、PHP Smarty、Java Velocity、Java Freemarker的Integration Develop Tool [ 集成开发工具 ] 

其实,IDT中的server使用的是grunt-conect组件,然后通过了middleware的概念,来处理各种类型的数据:

例如:html middleware做的事情,就是把与请求的url相对应的html文件,与自己的mock数据的文件,通过对应的模板引擎渲染,呈现给浏览器:

ajax middleware做的事情也是一样的。

目前,IDT支持了Python Django、PHP Smarty、Velocity、Freemarker的模板引擎的渲染,大大提高了前端开发的效率。

如何安装IDT:传送门

在安装完成以后,就可以开始开发了,在终端输入:idt -V 有正常输出,则安装正常~

在安装的源文件目录中,有一个:example-ws 目录,这里面就是示例目录,在这里可以切换各种模板引擎,进行测试:

.

├── django

│   ├── base.html

│   └── test.html

├── freemarker

│   ├── list.html

│   ├── test.tpl

│   └── view.html

├── idt-config.js

├── mock

│   └── html

│       ├── commonmock

│       │   └── common.js

│       ├── django

│       │   └── test.html.js

│       ├── freemarker

│       │   └── test.tpl.js

│       ├── smarty

│       │   └── test.tpl.js

│       └── velocity

│           └── test.html.js

├── smarty

│   ├── footer.tpl

│   └── test.tpl

└── velocity

├── dep.html

├── header.html

└── test.html

可以把这个目录拷出一份来,并且cd进入此目录,则可以直接执行:

idt ws start

那么这个例子就跑起来了,想结束server,只需要Ctrl+C。

在切换引擎的时候,唯一需要修改的地方就是:

    // 模板引擎根目录【只需要修改最后一个参数即可】
    templates: path.join( webContent, secondary, ‘velocity‘ ),

    // 模板引擎切换: smarty / django / velocity / freemarker [ 默认velocity ]
    /**
     * velocity模板引擎采用:
     * https://www.npmjs.com/package/velocity
     *
     * django模板引擎采用‘A wrapper of Django‘s template engine‘方式(桥接原理)
     * 详见:https://www.npmjs.com/package/django
     * 在启用之前请确保python环境已经ready,然后安装django:
     * # pip install -v Django==1.7
     * //or
     * # easy_install "Django==1.7"
     *
     * smarty模板引擎采用:
     * https://www.npmjs.com/package/nsmarty
     *
     * freemarker模板引擎采用:(桥接原理)
     * 在启用之前,请确保java环境,并且需要安装:http://fmpp.sourceforge.net/
     * https://www.npmjs.com/package/freemarker.js#readme
     */
    tplEngine: ‘velocity‘,

idt-config.js中的第50行,用来修改模板引擎的view的根目录,71行则是切换引擎的配置。

还有需要注意的地方就是上面代码中的注释部分:

django需要安装好python环境,并且,通过python安装好django,详细地则可以通过上面给出的链接去查看;

同理,freemarker也需要java环境,并且下载fmpp这个东东,而且要把fmpp中的bin目录加入环境变量;

django和freemarker的原理类似,node层次的代码,只是一层wrapper,它会通过命令行形式静默地去掉用python的接口或者java的接口,从而完成渲染。

IDT的功能不止这些,还有反向代理、远程调试、Less的实时编译(通过less middleware,less在请求过程中,直接被编译成css),批量导出静态文件、Build构建(调用了Edp进行build)等等功能,接下来会慢慢的介绍它的每一个功能。

感兴趣的可以看它的源代码就会了解~

时间: 2024-10-12 12:47:15

旨在脱离后端环境的前端开发套件 - IDT Server篇的相关文章

旨在脱离后端环境的前端开发套件 - IDT之Server篇

IDT,一个基于Nodejs的,旨在脱离后端环境的前端开发套件,目的就是能让前端开发完全脱离后端的环境,无论后端是什么模板引擎(主流),都能应付自如. IDT主要包括两大部分:Server + Build,这一篇主要介绍Server篇. 为了辅助前端开发,一个本地的类似于Apache的服务器是少不了的,但是有个问题,如果项目中的html,是php的smarty模板怎么办?使用纯粹的静态服务器是不行的,因为对前端开发来说,这个html必须由php的smarty模板引擎来解析,前端人员不懂php怎么

移动前端开发之数据库操作篇

在移动平台开发中,经常会有大数据存储与交互的操作,在以webkit为内核的浏览器中,提供了一个叫作WEBSQL的数据库.这让我们前端也可以像php等程序语言一样,进行数据库的读写操作.Web Storage存储本地数据的方法目前可以在许多主流浏览器.平台与设备上实现,与之相关的API也已经标准化,但是,Web Storage存储空间是有5MB,键值存储的方式带来诸多不便,未来本地存储也不仅仅是这一种方法.其中最为熟知的就是Web SQL数据库,它内置SQLite数据库,对数据库的操作可以通过调用

搭建前端的开发环境和前端开发流程总结

一.搭建前端的开发环境 1.代码编辑工具:sublime/WebStorm/HBuilder. 2.断点调试工具:Firebug. 3.版本管理工具:Git(本人建议使用git,至于原因大家可以看看相关blog),安装完成后我们就可以从github上clone一些项目. 4.代码合并和混淆工具:webpack (Webpack具有Grunt.Gulp对于静态资源自动化构建的能力,同时兼容AMD与CMD的模块加载规范). 4.开发调试工具:NodeJs.很多非常有用的工具都是基于NodeJs的,我

做一名合格的前端开发工程师(12篇)——第一篇 Javascript加载执行问题探索

来源:http://www.cnblogs.com/huangxincheng/archive/2011/12/04/2275988.html,感谢! 做前端开发少不了各种利器.比如我习惯用的还是Google浏览器和重型武器Fiddller. 一: 原始情况 首先大家看看如下的代码: 1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" In

前端开发【第2篇:CSS】

鸡血 样式的属性多达几千个,但别担心,按照80-20原则,常用的也就几十个,你完全可以掌握它. Css初识 HTML的诞生 早期只有HTML的时候为了让HTML更美观一点,当时页面的开发者会把颜色写到标签里面,想想一下一堆标签一堆属性:颜色.字体等,总结一个字就是“乱” 为了解决这个问题,万维网联盟(W3C),这个非营利的标准化联盟,肩负起了 HTML 标准化的使命,并在 HTML 4.0 之外创造出样式(Style). 所有的主流浏览器均支持层叠样式表. CSS语法和CSS优先级 1.CSS

JBOSS安装与配置搭建本地项目环境(方便前端开发调式)

JBOSS安装与配置搭建本地项目环境  什么是JBOSS? JBOSS是EJB的服务器,就像Tomcat是JSP服务器一样,就是服务器的一种. 环境搭建如下: 一:首先安装JDK,配置环境变量(PATH,CLASSPATH,JAVA_HOME).       1. 网上下载JDK安装,我的下载如下: 点击安装,下一步,然后出现如下界面,更改文件目录如下: 我的jdk存放在D盘java文件下,点击[下一步]按钮后,出现如下: jre目录也放在D盘java下.点击[下一步]安装完成后,我在D盘jav

web前端开发笔试集锦(javascript篇1)转

原文出处: http://hi.baidu.com/jinhui04/item/eaf40034fa00def597f88dbc 1, 判断字符串是否是这样组成的,第一个必须是字母,后面可以是字母.数字.下划线,总长度为5-20 var reg = /^[a-zA-Z][a-zA-Z_0-9]{4,19}$/;reg.test("a1a__a1a__a1a__a1a__"); 2,截取字符串abcdefg的efg var str = "abcdefg";if (/e

前端开发css样式基础篇

楼主比较懒,这个是看到别人写的 直接拷贝回来 尊重原著.http://www.cnblogs.com/iflygofy/archive/2016/08/01/5726479.html 里面有一些自己加上去的注释.. 颜色和单位的使用 颜色 用颜色的名字表示颜色,比如:red 用16进制表示演示 比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-255之间一般都用16进制表示颜色 单位 px:像素,与分辨率设置相关. %相对于浏览器的百分之多少,可以对宽度width做

前端开发【第6篇:JavaScript客户端(浏览器)】

Web浏览器中的JavaScript 客户端JavaScript时间线 1.Web浏览器创建Document对象,并且开始解析web页面,解析HTML元素和它门的文本内容后添加Element对象和Text节点到文档中.在这个阶段Document.readystate属性的值是“loading” 2.当HTML解析器遇到没有async和defer属性的<script>元素时,它把这些元素添加到文档中,然后执行内火外部脚本.这些脚本会同步执行,并且在脚本下载(如果需要)和执行时解析器会暂停,因为J