Express:的web应用程序框架。Node.js?Express是Node.js简洁灵活的web应用开发框架,提供了一系列强大的功能,帮助您创建各种Web和移动设备应用。
目录
本文重点介绍Express4.x(具体为4.10.4)的开发框架,其中还会涉及Mongoose、Ejs、Bootstrap等相关内容。
建立项目目录结构Express4.x配置文件Ejs模板,使用Bootstrap接口框架路由功能Session,使用页面提示页面访问控制。
发展环境:
人的本质
MonogoDB: v2.6.4
nodejs:v0.11.2
Npm 2.1.10(如果nodejs安装在1.2.19版本,本文将升级到2.x版本)。
1.建立项目。
输入项目目录。
mkdir工作场所
cd工作区
全球安装express。express作为命令安装在系统中。
npm安装-g express
查看快速版本。
快速-五
注意:express命令不再包含在express 4 . x版本中。
需要安装快速发电机。
npm安装快速发电机-g
详细安装过程见《准备Nodejs开发环境Ubuntu》。
使用express命令创建项目并支持ejs。
[email protected]: ~/workspace/nodeJs $ express-e nodeJs-demo
创建: nodejs-demo(项目名)创建3360nodejs-demo/package.json(项目包信息)创建3360nodejs-demo/app.js(主程序)创建3360nodejs-demo/public(开放目录)创建:nodejs-demo/public/images创建3360 nodejs-demo/public/JavaScript创建3360 nodejs-demo/public/style sheets创建: nodejs)create : nodejs-demo/view/index . ejscreates 3360 nodejs-demo/error . ejscreates 3360 nodejs-demo/bincreate 3360 nodejs-demo/bin/Ww(启动app.js的启动文件)installdependencies : $ CD nodejs-demon pm安装运行app3360 $ debug=nodejs-demo。/bin/www .
项目创建成功。
按照上面的提示安装依赖项:
复制代码如下: CD nodejs-演示npm安装。
根据提示启动网页:
复制的代码如下: $ debug=nodejs-demo。/bin/www .
但是,我们不打算在这里使用此方法启动程序。原因是我们需要在开发过程中使用nodemon作为工具。Node用于动态识别开发过程中项目的变化,然后动态加载(类似于Eclipse开发的java web)。这个工具对于开发网络是必要的。
要安装nodemon:
npm安装nodemon -g
那我们为什么不用?/bin/www上面的脚本?
原因是nodemon。/bin/www无法识别项目的更改。(我个人的实验,如果你认识大牛,请给我一些建议。)
修改app.js:
most line//module . exports=app;评论完毕。
替换为:app . listen(3000);
使用以下命令启动app.js主程序:
[email protected]: ~/workspace/nodeJs/nodeJs-demo $ nodemon app . js
然后修改程序,看看它是否会动态加载。将出现以下提示:
12月1日16:223:07[nodemon]因更改而重新启动…12月1日163:22:07[nodemon]启动` node app.js '
表示生效。
测试:
打开本地端口3000,通过浏览器访问: localhost:3000。
2.目录结构。/drwxrwxr-X5 Hadoop Hadoop 4096 12月1日15:57./-rw-rw-r1 Hadoop Hadoop 1495 12月1日16:22 app . js-rw-rr1 Hadoop Hadoop 12288 12月1日16:22 . app . js . swpdrwxr-xr-x2 Hadoop Hadoop 4096 12月1日15。336057 bin/drwxrwxr-x9 Hadoop Hadoop 4096 12月1日15:58 node _ modules/-rw-rw-r1 Hadoop Hadoop 326 12月1日15:57 package . jsondrwxr-xr-X5 Hadoop Hadoop 4096 12月1日153:57 public/Drwxr-xr-x2 Hadoop 4099
目录简介:
节点模块,存放所有的项目依赖库。(每个项目管理自己的依赖,与格雷尔马文等不同)package.json,项目依赖配置及开发者信息app.js,程序主入口公共的,静态文件(css、js、img)路由,路由文件(MVC中的控制器)视图,页面文件(Ejs模板)nodejs-demo/bin/www(启动文件,用于启动app.js)
打开app.js查看内容:
/*** 模块依赖*/var express=require('express '),routes=require(' ./routes '),user=require ' ./routes/user '),http=require('http '),path=require(' path ');var app=express();//环境变量app.set('端口',进程。环境。端口| | 3000);app。set(' view ',_ _ dirname '/view ');app.set('view engine ',' ejs ');app。使用(快递。fav图标());app。使用(快递。记录器(' dev ');app。使用(快递。body parser());app。使用(快递。方法重写());app。使用(app。路由器);app。使用(快递。静态(路径。join(_ _ dirname,' public '));//开发模式if(' development '==app。获取(' env '){ app。使用(快递。错误处理程序());}//路径解析app.get('/')路由。索引);app.get('/users ',user。列表);//启动及端口http.createServer(应用程序).listen(app.get('port '),function(){ console。日志('快速服务器侦听端口app。get(' port '));});4.Ejs模板使用
让EJB模板文件,使用扩展名为超文本标记语言的文件。
修改:app.js
var ejs=require(' ejs ');//引入射精。重新安装依赖app.engine(' .html,ejs ._ _快递);app.set('视图引擎,' html ');//app.set('view engine ',' ejs ');重命名:视图/*。EJB为视图/*。超文本标记语言
访问localhost:3000正确
主要要重命名index.ejs等文件
5.增加引导程序界面框架
其实就是把js,css文件复制到项目中对应该的目录里。包括四个文件:
复制到公共/样式表目录
自举。量滴CSS引导响应。量滴半铸钢钢性铸铁(Cast Semi-Steel)
复制到公共/JavaScript目录
自举。量滴jsjquery-1。9 .1 .量滴射流研究…
接下来,我们把index.html页面切分成3个部分:页眉. html,页脚. header.html
header.html,为超文本标记语言页面的头部区域index.html,为内容显示区域footer.html,为页面底部区域
header.html
!DOCTYPE html html lang=' en ' hearta charset=' utf-8 ' title %=: title %/title!-Bootstrap-link。吉杜。信息/样式表/引导。量滴CSS ' rel='样式表媒体='屏幕'!-链接。吉杜。信息/CSS/引导响应。量滴CSS ' rel='样式表media=' screen '-/head body screen _ capture _ injected=' true '索引。html % include header.html % h1 %=title %/h1pWelcome to %=title %/p % include footer.html % footer。html脚本src=' http 33603http://www。吉杜。info/JavaScript/jquery-1。9 .1 .量滴射流研究…访问localhost:3000正确。
我们已经成功的使用了EJS模板的功能,把公共的头部和底部从页面中分离出来了。
并已经引入了引导程序界面框架。
6.路由功能
我们设计一下用户登陆业务需求。
访问路径:/,页面:index.html,不需要登陆,可以直接访问。访问路径:/home,页面:home.html,必须用户登陆后,才可以访问。访问路径:/登录,页面:login.html,登陆页面,用户名密码输入正确,自动跳转到home.html访问路径:/注销,页面:无,退出登陆后,自动回到index.html页面
打开app.js文件,在增加路由配置
app.get('/')路由。索引);app.route('/login ').获取(路线。登录)发布(路线。dolo gin);app . get('/注销',路由。注销);app.get('/home ',路线。家);注:获取为得到请求,邮政为邮政请求,全部为所有针对这个路径的请求
我们打开routes/index.js文件,增加对应的方法。
出口。index=函数(req,res) { res.render('index ',{ title : ' index ' });};exports.login=function(req,res){ res.render('login ',{title: '用户登录'});};exports.doLogin=function(req,RES){ var user={ username : ' admin ',password : ' admin ' } if(req。尸体。用户名==用户。用户名请求。尸体。密码==用户。密码){ RES . redirect('/home ');} RES . redirect(“/log in”);};exports.logout=function(req,RES){ RES . redirect('/');};exports.home=function(req,RES){ var user={ username : ' admin ',password : ' admin ' } RES . render(' Home ',{title:'Home,user 3360 user });};创建查看/登录。超文本标记语言和视图/主页。超文本标记语言两个文件
login.html
%包含header.html % div class=' container-fluid ' form class=' form-卧式'方法='post'fieldsetlegend用户登陆/legenddiv class=' control-group ' label class=' control-label ' for=' username '用户名/label div class=' controls '输入类型=' text ' class=' input-xlarge ' id=' username ' name=' username '/div/div class=' control-group ' label class=' control-label '代表=' password '密码/label div class='控件输入类型=' password ' class=' input-xlarge ' id=' password ' name=' password '/div/div class=' form-actions '按钮类型=' submit ' class=' BTN BTN-primary '登陆/button/div/fieldset/form/div%包含footer.html %家园。 html:%包含header.html % h1欢迎%=用户。用户名%,欢迎登陆!/h1a claa=' BTN'。吉杜。“信息/注销”退出/a%包括footer.html %修改index.html,增加登陆链接
index.html
%包含header.html % h1欢迎使用%=title %/h1pa href=' http://www .吉杜。“信息/登录”登陆/a/p%包括footer.html %路由及页面我们都写好了,快去网站上试试吧。
7.会议使用
从刚来的例子上面看,执行出口时,如果用户名和密码正确,我们使用再直接的方法跳转到的家
RES .重定向('/home ');
执行出口。国内时,我们又用提出渲染页面,并把用户对象传给home.html页面
res.render('home ',{ title: 'Home ',user : user });
为什么不能在多洛金时,就把用户对象赋值给会话,每个页面就不再传值了。
会议这个问题,其实是涉及到服务器的底层处理方式。
像爪哇的网服务器,是多线程调用模型。每用户请求会打开一个线程,每个线程在内容中维护着用户的状态。
像服务器端编程语言(专业超文本预处理器的缩写)的网服务器,是交行公共网关接口的程序处理,CGI是无状态的,所以一般用甜饼干在客户的浏览器是维护用户的状态。但甜饼干在客户端维护的信息是不够的,所以公共网关接口应用要模仿用户会话,就需要在服务器端生成一个会议文件存储起来,让原本无状态的公共网关接口应用,通过中间文件的方式,达到会议的效果。
Nodejs的网服务器,也是公共网关接口的程序无状态的,与服务器端编程语言(专业超文本预处理器的缩写)不同的地方在于,单线程应用,所有请求都是异步响应,通过回收方式返回数据。如果我们想保存会议数据,也是需要找到一个存储,通过文件存储,redis,Mongdb都可以。
接下来,我将演示如何通过mongodb来保存会话,并实现登陆后用户对象传递。
app.js文件
在相应位置添加下面代码:
var session=require(' express-session ');var connect=require(' connect ');var session store=require(' session-mongose ')(connect);var store=新会话存储({ URL : ' MongoDB ://localhost/session ',间隔: 120000 });app。使用(session({ secret : ' test。com ',store: store,cookie : { max age :10000 }//10秒后终止会话});//用于把登录用户设置到res。本地人里面,在home.html里显示app.use(function(req,res,next){ RES . locals。用户=请求。会话。用户;console.log('Session is=',req。会话。用户);next();});需要添加中间件连接、会话-猫鼬。
其中会话-猫鼬是用于连接mongodb数据库。然后自动写入会议信息到数据库中(也可以用猫鼬中间件,但是要自己实现会议的写入)
app.use(session(…).)) 这里是全局设置了会议的信息及会议信息存储的方式。
注:app.js文件有顺序要求,一定要注意!
安装会话-猫鼬依赖库
国家预防机制安装连接
国家预防机制安装会话-猫鼬
国家预防机制安装会话-猫鼬
安装有错误但是没关系。
访问:http://localhost:3000/login,正常
修改routes/index.js文件
出口方法
exports.doLogin=function(req,RES){ var user={ username : ' admin ',password : ' admin ' } if(req。尸体。用户名===用户。用户名请求。尸体。密码===用户。密码){ req。会话。用户=用户;返回RES . redirect('/home ');} else { return RES . redirect('/log in ');}};导出。注销方法
exports.logout=function(req,RES){ req。会话。用户=nullRES . redirect('/');};出口。国内方法
出口。Home=函数(req,res){ res.render('home ',{ title : ' Home ' });};这个时候会议已经起作用了出口。家庭的用户显示传值已经被去掉了。是通过app.js中app.use的res。本地人变量,通过框架进行的赋值。
app.use(function(req,res,next){ RES . locals。用户=请求。会话。用户;next();});注:这个会议是express4.10.4的写法,与express4之前的版本是不一样的。
访问页面可以查看mongodb有没有数据:
nodejs-mongodbnodejs-mongodb
由于上面配置的cookie : { max age :10000 }//10秒后会话到期过期时间,因此你会看到mongodb里面的数据过一段时间就被清除了。参考:
mongose:http://mongosejs。com/
关于express4.2.0与express3.x操作的区别:http://博客。csdn。net/u 013758116/article/details/38758351
8.页面提示
登陆的大体我们都已经讲完了,最后看一下登陆失败的情况。
我们希望如果用户登陆时,用户名或者密码出错了,会给用户提示,应该如何去实现。
打开app.js的,增加res.locals.message
登陆的大体我们都已经讲完了,最后看一下登陆失败的情况。
我们希望如果用户登陆时,用户名或者密码出错了,会给用户提示,应该如何去实现。
打开app.js的,增加res.locals.message
app.use(function(req,res,next){ RES . locals。用户=请求。会话。用户;var err=req。会话。错误;删除请求。会话。错误;本地人。消息=' ';如果是本地人。message=' div class=' alert alert-danger ' ' err '/div ';next();});修改login.html页面,%-消息%
%包含header.html % div class=' container-fluid ' form class=' form-卧式'方法='post'fieldsetlegend用户登陆/legend %-message % div class=' control-group ' label class=' control-label ' for=' username '用户名/label div class=' controls '输入类型=' text ' class=' input-xlarge ' id=' username ' name=' username '值=' admin '/div/div class=' control-group ' label class=' control-label ' for=“密码”密码/label div class=' controls '输入类型=' password ' class=' input-xlarge ' id=' password ' name=' password ' value=' admin '/div/div class=' form-actions '按钮类型=' submit ' class=' BTN BTN-primary '登陆/button/div/fieldset/form/div%包括footer.html %修改routes/index.js,增加req.session。 错误
exports.doLogin=function(req,RES){ var user={ username : ' admin ',password : ' admin ' } if(req。尸体。用户名===用户。用户名请求。尸体。密码===用户。密码){ req。会话。用户=用户;返回RES . redirect('/home ');} else { req.session.error='用户名或密码不正确;返回RES . redirect(“/log in”);}};让我们来看看效果:http://localhost :3000/登录输入错误的和密码,用户名:爸爸,密码:da
boostrap-nodejs
9.页面访问控制
网站登陆部分按照我们的求已经完成了,但网站并不安全。
localhost:3000/home,页面本来是登陆以后才访问的,现在我们不要登陆,直接在浏览器输入也可访问。
页面报错了,提示%=user.username %变量出错。