前言:这是我第一次用node作项目,该项目进行得算是比较顺利,前后端分工明确,前端责任范围更广,包括与后端交换数据,和模板渲染,后端负责提供接口。之前基于node的了解主要来自官方文档和网上流传的若干电子著作。由于经验有限,十分欢迎大家给出建设性意见。
本集将采用连载形式,基本顺序同我做项目的顺序,先解决功能需求,后期优化性能。
项目所用到的技术:
采用node中非常好用的express框架搭建。
渲染模板,采用了语法好理解,功能强大,没有箭头符的express-handlebars。
采用request与后端互换数据。
介绍项目结构:
包含存储渲染模板所用帮助器的存储位置,位于lib中helper.js。
包含向浏览器暴露的公共文件img\css\js, 存储在public下。
包含请求页面路径及处理函数,在routes下。
包含视图文件,布局和部分模块及页面视图,采用了express-handlebar模板,储存在views下。
包含app.js,项目的入口,存放了中间件的处理、转发请求、全局变量、启动服务器等。这里也是本篇主要讲解的地方。
包含package.json配置文件,记录了项目所需要的全部依赖。
包含proxy.js ,在这里手动写了一个接口转发的逻辑。
项目结构如下:
-lib
-helper.js
-public
+css
+img
+js
-routes
-index.js
-views
-layouts
-main.hbs
...
-partials
-header.hbs
...
index.hbs
…
-app.js
-package.json
-proxy.js
创建项目
假设你已安装了express, 找到项目存放的目标文件夹,在其下方新建项目名称,并进入到项目初始化。
按顺序使用命名如下:
创建项目mkdir myProject
进入项目中cd myProject
初始化项目npm init,根据提醒填写相应信息
具体流程可参考:http://expressjs.com/en/starter/installing.html
安装依赖
使用命令 npm install 包名 —save-dev/-save 注意后缀表示存储到 package.json中,以便他人可以使用npm install 直接下载安装。命令—save 会将其安装在dependencies中,--save-dev 则会安装在devDependencies, 在两种属性名下的包均可以通过npm install 安装,不同点在于devDependencies表示开发中所用到的包,dependencies表示生产环境所用到的包,根据需要存储在不同地方。
启动项目
项目入口逻辑在app.js文件中,先引入项目所需要的全部依赖和用到的其他文件路径,设置视图相关的内容,使用中间件,设置监听端口。
代码如下:
var express = require (‘express’)
var favicon = require(‘serve-favicon’)//网站地址栏中图标
var logger = require(‘morgan’)//日志信息
var bodyParser = require('body-parser’);//解析
var exphbs = require('express-handlebars’);//模板
var request = require('request’);//与后端互换数据
var index = require('./routes/index’);//请求处理分支
var proxy = require("./proxy").proxy;//转发
var helpers = require('./lib/helpers’);//模板渲染中用到的帮助器
var app = express();//启动express
//设置视图位置
app.set('views', path.join(__dirname, 'views'));
//设置模板
var hbs = exphbs.create({
defaultLayout: 'main',
extname: "hbs",
helpers: helpers,
partialsDir: [
'main',
'views/partials/',
]
});
app.set('view engine', 'hbs');
app.engine('hbs', hbs.engine);
//设置监听端口
app.set('port', process.env.PORT || 8000);
//是否缓存
app.set('view cache', false);
//添加中间件
app.use(favicon(__dirname + '/public/img/favicon.ico'));
app.use(express.static(path.join(__dirname, 'public')));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({
extended: false
}));
//引入转发文件
app.use(function(req, res, next) {
req.proxy = new proxy();
req.proxy.req = req;
next();
});
//全局变量存储信息
app.use(function(req, res, next) {
req.proxy.request({
method: "GET",
url: “...",
qs: req.query
},function(err, response, body) {
var data;
try {
data = JSON.parse(body);
} catch(e) {
next(e)
return;
}
if (!res.locals.partials) {
res.locals.partials = {}
}
res.locals.partials.loginstate = data;
next();
});
});
//请求路由
app.use('/', index);
//处理错误
app.use(function(err, req, res, next) {
res.render('error', {
err: err,
url: req.originalUrl
});
})
//监听端口
app.listen(app.get('port'), function () {
console.log('express-handlebars example server listening on:' + app.get('port'));
});
在浏览器中输入localhost:8000即可打开端口。
下一节将介绍转发逻辑。