最近做的项目我负责架构和全栈开发,前端从JSP转换到了Html + jquery+ajax,后端为Java。随着功能不断地迭代还有系统不断地壮大,前端纯html+jquery+ajax的问题也暴露出来了:
- 前端代码越来越大,复用性越来越差。
- 同步请求很难处理
- 依赖库越来越多,没有统一管理
- CSS,JS和img压缩很麻烦
- 组内大部分都是偏向于后端的工程师,前端经验少,需要一个能快速上手的框架。
经过这些考虑,我决定采用NodeJS+ExpressJS+AngularJS(扩展HTML标签,动态HTML)+Jade(前端模板引擎,2016年4月已改名为PUG,但是改名后的版本还有问题,所以我们还是用Jade)+LESS(CSS面向对象化框架)+Yeoman(包括yo,bower和grunt的工具)+bower(前端库依赖管理,相当于maven)+Grunt(发布工具)的前端开发框架,来改造现有的前端,写这系列博客记录下。
我们前端的容器还是tomcat,但是html相关的管理改到了NodeJS中,我们没有用任何NodeJS服务器内容,ExpressJS只是用来测试。真正的后端接口还有web层容器还是Java。
搭建NodeJS环境
本文使用Webstorm作为基本IDE。
首先下载好NodeJS 4.4.4,(这个是长期稳定版)并安装,配置好环境变量(就是在terminal下能使用node命令还有npm),在WebStorm中新建NodeJS express项目:
模板引擎这里选择Jade,CSS渲染选择LESS。之后确认:
这里摆上npm包管理基本用法:
使用 npm 命令安装模块:
$ npm install <Module Name>
以下实例,我们使用 npm 命令安装常用的 Node.js web框架模块 Angular:
npm install angular
安装好之后,angular包就放在了工程目录下的 node_modules 目录中,因此在代码中只需要通过 require(‘angular’) 的方式就好,无需指定第三方包路径。
var angular= require('angular');
npm 的包安装分为本地安装(local)、全局安装(global)两种,从敲的命令行来看,差别只是有没有-g而已,比如
npm install express # 本地安装
npm install express -g # 全局安装
本地安装
1. 将安装包放在 ./node_modules 下(运行 npm 命令时所在的目录),如果没有 node_modules 目录,会在当前执行 npm 命令的目录下生成 node_modules 目录。
2. 可以通过 require() 来引入本地安装的包。
全局安装
1. 将安装包放在 /usr/local 下或者你 node 的安装目录。
2. 可以直接在命令行里使用。
你可以使用以下命令来查看所有全局安装的模块:
$ npm ls -g
我们在这个项目中会用到yeoman。我们的项目管理依赖于Bower,因为这里NodeJS主要完成前端工作,对于前端的依赖管理,bower的目录结构更好一些。
所以,我们使用WebStorm自带的命令行,快捷键alt+F12. 唤出命令行,执行:
npm install yo
npm install bower
npm install grunt-cli
之后,我们在项目根目录创建.bowerrc文件(填写bower管理的依赖库路径):
{
"directory": "./public/lib"
}
再在根目录创建bower.json文件(填写项目信息和依赖库):
{
"name": "sfpp-frontend",
"version": "3.0.0",
"dependencies": {
"angular": "~1.5.8",
"angular-route": "~1.5.8",
"bootstrap": "^3.3.7",
"angular-bootstrap": "^2.2.0",
"stickUp": "^0.5.7"
},
"devDependencies": {}
}
注:bower install angular --save
会添加angular并更新文件
运行:
bower install
将所有的view目录下的jade文件移动到public下,同时修改app.js中的jade view路径。这样为了jade渲染的html资源路径和在tomcat容器中看的一致。
同时,配置Webstorm渲染自动生成html: