Web前端之路

用node作中间层--起步篇(项目结构及搭建服务器)

2017-03-15  本文已影响892人  baby熊_熊姐

前言:这是我第一次用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即可打开端口。

下一节将介绍转发逻辑。

上一篇 下一篇

猜你喜欢

热点阅读