您的位置:

首页 >

网络编程 >

nodejs教程 安装express及配置app.js文件的详细步骤 >

nodejs教程 安装express及配置app.js文件的详细步骤

2016-12-05 04:12:37

分类:网络编程

安装express.js如果你安装了npm,安装变得很简单,只需要在终端中运行下面的代码即可:复制代码 代码如下:npm install express -gd-g代表安装到NODE_PATH的lib里面,而-d代表把相依性套件也一起安装。如果沒有-g的话会安装目前所在的目录(会建立一个node_modules的文件夹),你可以透过以下指令来比较两者的不同:复制代码 代码如下:npm list -gnpm list如果没有npm,那么我可以使用github来git下来最新的express。好了,现在你可以通过express testapp来建立express实例。以下是示例:复制代码 代码如下:cd ~express testappcd testappnode app.js这样就建立了一个testapp的nodejs应用,而app.js是默认的应用主js。下面来详细的说说app.js中的各项配置。引入模块复制代码 代码如下:var express = require('express'); var app = module.exports = express.createServer();require()是node.js提供的函数,可以让你引入其他模块以调用模块的函数和变量,默认下node.js会在$NODE_PATH和目前js所在目录下的node_modules文件夹下去寻找模块。require也可以用来载入自己写的模块哦~这样涉及到node.js的模块机制,后面有机会就在介绍。第二行的express.createServer()就是在建立server,而中间的module.exports也是涉及到node.js的模块机制,以后再说。express的app.js的详细配置说明express.js继承自connect模块,所以如果你的node_modules文件夹下没有connect模块也是不行的。设置views路径和模板我们再来看下面两行:复制代码 代码如下:app.set('views', __dirname + '/views');app.set('view engine', 'jade');上面两行是设置views文件夹,即模板文件夹,__dirname是node.js里面的全局变量,即取得执行的js所在的路径,另外__filename是目前执行的js文件名。所以,app.set(‘views', __dirname + ‘/views');是设置views的文件夹。而app.set('view engine', 'jade');是设置express.js所使用的render engine。除了Jade之外,express.js还支持EJS(embedded javascript)、Haml、CoffeScript和jQuery template等js模板。app.use配置复制代码 代码如下:app.use(express.bodyParser());app.use(express.methodOverride());app.use(app.router);app.use(express.static(__dirname + '/public'));express.bodyParser()是Connect內建的middleware,设置此处可以将client提交过来的post请求放入request.body中。express.methodOverride()也是Connect內建的,可以协助处理POST请求伪装PUT、DELETE和其他HTTP methods。app.router()是route requests,但express.js的官方文件是这句可有可无,并且经过测试还真的是这样,不过还是写上吧。express.static()也是一个Connect內建的middleware来处理静态的requests,例如css、js、img文件等。所以static()里面指定的文件夹中的文件会直接作为静态资源吐出来。app.configure设置复制代码 代码如下:app.configure('development', function(){  app.use(express.errorHandler({ dumpExceptions: true, showStack: true }));});app.configure('production', function(){  app.use(express.errorHandler());});express.errorHandler()是Connect內建的middleware来協助處理例外。這裡也揭露了app.configure()的令一个用法,第一个參數是node.js的環境設定,如此我們就可以設定在不同的執行環境使用不同程度的dump。PS:node.js是透過NODE_ENV這个環境變數来取得環境設定,e.g.:在命令列,NODE_ENV=production node app.js就可以進入production環境。路由和request的处理ok,下面是nodejs处理request的内容:复制代码 代码如下:app.get('/', function(req, res){  res.render('index', {    title: 'Express'  });});上面的代码意思是,get请求根目录则调用views文件夹中的index模板,并且传入参数title为“Express”,这个title就可以在模板文件中直接使用。在express中要处理post请求,需要使用app.post()。如下面的代码:复制代码 代码如下:app.post('/add', function(req,res){  res.render('add', {    sum: req.body.a + req.body.b  });});前面我们提到了req.body是express.bodyParser()把POST参数处理后的结果。另外除了get和post方法,还有app.all()意思就是所有的请求处理。添加listen,启动nodejs服务器复制代码 代码如下:app.listen(3000);console.log(    "Express server listening on port %d in %s mode",    app.address().port,     app.settings.env);到目前为止,我们就基本全明白了express配置了,也就不会像以前那样跟别人都写个hello world却不知道各行代码的含义了。

1显示的页面:复制代码 代码如下:<!DOCTYPE html>< html><head><title>js_pageusers.html</title><meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><meta http-equiv="description" content="this is my page"><meta http-equiv="content-type" content="text/html; charset=UTF-8"><!--<link rel="stylesheet" type="text/css" href="./styles.css">--><script type="text/javascript" src="./js/pageuser.js"></script></head><body><div id="one" align="center"><div>用户名:<input type="text" id="userName" />性别:<input type="text" id="userSex" />职业:<input type="text" id="userRole" /><br /><br /><input type="button" id="addUsers" value="添加用户" /><input type="button" id="updateUsers" value="更新用户" /></div><br /><br /><div><table border="1px" cellpadding="0" cellspacing="0" width="500px;"><thead><th>用户名</th><th>性别</th><th>职业</th></thead><tbody id="showUsers"></tbody></table><div><input type="button" id="firstPage" value="首页"/><input type="button" id="backPage" value="上一页"/><input type="button" id="nextPage" value="下一页"/><input type="button" id="lastPage" value="末页"/><span id="msg"></span></div></div></div></body></html>2.复制代码 代码如下:window.onload =function(){var pagesize = 3;//每页显示的记录数var recondsize = 0;//总记录数var countpage = 0;//总页数var nowpage= 1;var users = new Array();//存放所有的记录var start = 0; //保存当前页开始的记录var end = 0 ;//保存当前页结束的记录var domUserName = $("userName");var domUserSex = $("userSex");var domUserRole = $("userRole");var domshowUsers = $("showUsers");var addBtn = $("addUsers");//为按钮注册事件addBtn.onclick = function() {//创建user对象var user = new User(domUserName.value, domUserSex.value,domUserRole.value);//把user对象存放数组中users.push(user);recondsize = users.length; //得出总记录数//计算出总页数countpage = recondsize % pagesize == 0 ? recondsize / pagesize : Math.ceil(recondsize / pagesize);if (recondsize > pagesize) { //当总记录大于pagezie 思路 从后往前数3个数start = recondsize-pagesize;end=recondsize;}else{ // pagesize start =1;start=0;end=recondsize; //end=实际的个数 就是 recondsize} //调用显示user的方法 showUser(users,start,end,recondsize,countpage,domshowUsers);} //获取分页相关的按钮var firstPage = $("firstPage");var backPage = $("backPage");var nextPage = $("nextPage");var lastPage = $("lastPage");firstPage.onclick = function() {nowpage = 1;if (recondsize<= pagesize && recondsize > 0) {start = 0;end = recondsize;}else{start=0;end=pagesize;}showUser(users,start,end,recondsize,countpage,domshowUsers);}backPage.onclick = function() {nowpage = nowpage-1;//重新赋值if(nowpage<=1){nowpage=1;}if (recondsize <= pagesize && recondsize > 0) {start = 0;end = recondsize;}else{start=(nowpage-1)*pagesize;end = (nowpage-1)*pagesize+pagesize;}showUser(users,start,end,recondsize,countpage,domshowUsers);}nextPage.onclick = function() {nowpage = nowpage+1;//重新赋值if(nowpage>=countpage){nowpage=countpage;}if (recondsize <= pagesize && recondsize > 0) {start = 0;end = recondsize;}else{start=(nowpage-1)*pagesize;if((nowpage-1)*pagesize+pagesize>=recondsize){ end = recondsize;}else{end =(nowpage-1)*pagesize+pagesize;}}showUser(users,start,end,recondsize,countpage,domshowUsers);}lastPage.onclick = function() {nowpage = countpage;//重新赋值if (recondsize <= pagesize && recondsize > 0) {start = 0;end = recondsize;}else{  start=(nowpage-1)*pagesize; end = recondsize;}showUser(users,start,end,recondsize,countpage,domshowUsers);}} //创建一个Function函数 函数是保存User对象数据的function User(name, sex, role) {this.name = name;this.sex = sex;this.role = role;}function $(id) {return document.getElementById(id);}function showUser(users,start,end,recondsize,countpage,domshowUsers){//清空数据for ( var jj = 0; jj < domshowUsers.childNodes.length;) {domshowUsers.removeChild(domshowUsers.childNodes[jj]);} //for循环添加的 for(var i=start;i<end;i++){ var user = users[i];//考虑 //创建一行var tr = document.createElement("tr");//创建列var td1 = document.createElement("td");//创建文本节点var td1TextNode = document.createTextNode(user.name);//文本节点添加到td中td1.appendChild(td1TextNode);//创建列var td2 = document.createElement("td");//创建文本节点var td2TextNode = document.createTextNode(user.sex);//文本节点添加到td中td2.appendChild(td2TextNode);//创建列var td3 = document.createElement("td");//创建文本节点var td3TextNode = document.createTextNode(user.role);//文本节点添加到td中td3.appendChild(td3TextNode);//把列添加到行中tr.appendChild(td1);tr.appendChild(td2);tr.appendChild(td3);//把行添加到tbody中if(domshowUsers.hasChildNodes()){domshowUsers.insertBefore(tr,domshowUsers.firstChild);//再最后一个数据之前添加数据}else{ domshowUsers.appendChild(tr);//添加到末尾}} document.getElementById("msg").innerHTML = "总共:{" + recondsize+ "}条记录,

如何解决js中单引与双引冲突,想下面的这段代码:复制代码 代码如下:html += ' <a onclick="return removeOpenCss('+e.point.lng+e.point.lat+')">取消</a>'; 这是js中的代码,如果这里这样写的话,会提示js错误,是因为removeOpenCss方法里的参数没有单引或者双引,如果这里,这样写的话:复制代码 代码如下:html += ' <a onclick="return removeOpenCss(“'+e.point.lng+e.point.lat+'”)">取消</a>'; 直接会报错,因为这里单引和双引冲突,所以我只通过这样解决的:复制代码 代码如下:html += ' <a onclick="return removeOpenCss("'+e.point.lng+e.point.lat+'")">取消</a>'; 在JS当嵌套两层双引号时一般会出错可用以下办法解决将内层单引号替换为'双引号替换为"如下面的例子就可以了复制代码 代码如下:

1、 JavaScript 复制代码 代码如下:var oSel=document.form1.DropDownCity; while(oSel.options.length>0){ oSel.removeChild(oSel.options[0]); } 2、 JavaScript 复制代码 代码如下:<SCRIPT LANGUAGE="JavaScript"> function del1(){ var obj = document.getElementById("s"); var count = obj.options.length; for(var i = 0;i<count;i++){ obj.options.remove(0);//每次删除下标都是0 } } </SCRIPT> 3、 JavaScript 复制代码 代码如下:<script language="javascript"> function del() { for (var i = s.options.length - 1; i >= 0; i --) s.options[i] = null; } </script> 4、 JavaScript 复制代码 代码如下:

复制代码 代码如下:   //无参数的   (function(){      alert('hello');   })();   //有参数的   (function(name){      alert('Hello ' + name);   })('world');     这个闭包有什么用呢?一眼望去就是括号围着,局部变量想跑也不出来到处捣乱,这是其中一个主要用途,当然了,封装一些javascript库也离不开它。

焦点访谈

最新最热的文章

更多 >

COPYRIGHT (©) 2017 Copyright ©2017 5060网址大全 网站地图

联系我们

827570882

扫描二维码分享到微信