grails框架入门小结（二）—前端页面

最新推荐文章于 2025-11-20 09:29:41 发布

原创

最新推荐文章于 2025-11-20 09:29:41 发布 · 1.2k 阅读

1 ·

CC 4.0 BY-SA版权

本文介绍了使用Grails框架进行前端开发的相关知识，包括环境配置，如安装node.js、npm、cnpm、gulp等组件，并在WebStorm中进行页面开发。重点讲解了使用Handlebars.js作为模板引擎来接收和渲染后台返回的JSON数据，通过组件、CSS样式、JavaScript实现前端交互。

使用grails开发使用到的前端知识。

环境安装：node.js，下载安装，在控制台检测node -v 结果为：v4.4.4。其自动集成了npm，所以不用我们去安装。但是我们需要用npm来安装cnpm，gulp等组件。在控制台检测npm -v结果为：2.15.1，检测cnpm -v 为4.42。检测gulp -v结果为：CLI version 3.9.1 Local version 3.9.1。以上就是环境安装。

另外使用WebStorm，进行页面开发。

在WebStorm的terminal中，安装cnpm，gulp等组件，以及http-server。

在之前用IDEA开发后台代码时，我返回到前台的是JSON数据。下面就在前端接收数据填充到页面并进行渲染吧。

1.在webstorm中新建文件夹，此处采用已经封装好的来进行开发。

这是一个目录结构，components中是使用到的组件，例如AdminLTE等。css文件夹存放的是经过gulp（sass操作，或者default操作）我们写好的sass文件之后css文件，即样式。hbs文件夹就是我们在处理数据和表现层的一个模板引擎，对，我知道现在有很多诸如Angular.js等的框架，我还在用这么low的模板引擎...，学起来相当的简单，里面存放时.hbs文件，是我们得数据模板，就是我们要显示的样子的一个模板，就把数据放进去就可以了。js文件夹就是我们写JQuery，Ajax，以及引入AdminLTE，以及Handlebars.js模板的地方，当然了这些都写在.js文件中。