学习nodejs,对于前端人员来说,不懂后台技术,也是不太容易的。当然,nodejs的唯一好处貌似就是其代码编写编译等风格上的JavaScript相同,可以说,其就是通过JavaScript进行后台代码的编写。这对于JavaScript语言来说,有了新的突破和革新(革新有点大了,突破是肯定的)呵呵。
鉴于很多前端人员不懂后台语言,学习nodejs,学会通过nodejs下的开源框架express来搭建完整的项目框架还是很有必要的。
express是一个nodejs里的开源框架,在网上可以说前前后后,已经有许多前辈们通过自己的实例讲解了,如何通过express搭建项目框架了。指引前端“纯”们如何搭建有着http服务器server代码和路由router代码的框架(前端进行数据请求ajax时,遵循一个路由对应一个请求)。理清了前端“纯”们在开发独立项目中要如何管理自己的代码——尤其是分清了“纯”前端代码和后端代码。告知了作为前端“纯”们,都需要怎么做和维护自己的代码,才能够让自己的项目跑起来!!
当然,学习nodejs或者想通过nodejs独立开发项目,就必须下载和安装配置nodejs开发环境。其中包括node.js、npm及express。在新的nodejs安装包里包含了npm和配置文件等功能,所以,对于node菜鸟们有了打开方便之门了。只需在nodejs官网上
http://www.nodejs.cn/或http://nodejs.org/直接下载最新版本,按照安装过程简单操作安装就完成了nodejs开发环境的配置了。
剩下的就是学习如何在node环境上进行项目开发。当然,前期最好是在某些初级教程上把node包含的模块和包的功能学习一下。
npm作为node的包管理器,地位超然。要学会通过命令进行所需包的安装和调用。express的使用,就是通过命令进行项目框架搭建。
步骤:
1.在项目所在磁盘的根目录下,通过CMD命令窗口执行express -e myProject 来创建myProject文件夹(命令中的 -e 是文件名ejs的缩写,若不加该字段,则默认为jade)作为项目跟文件。myProject文件里会自动配置好项目所需基本框架内容。然后再通过npm
install命令配置项目所需包等。
2.在项目主体目录框架搭建好后,剩下的就是代码的编写及服务器及路由配置问题了。需要注意的就是node模块或包的输出(exports.xxx = xxx;或 module.export = xxx)和引入(var xxx = require("./文件名也叫模块名");xxx.xxx();或xxx();).
下面贴出代码:
由于express新建目录的时候命令里有了 -e 所以views文件夹下的文件后缀名为.ejs。
所以需要编辑views下index.ejs。在改文件<body>里添加一下代码:
前端代码:
<h2>我的博客</h2>
<div class="showMess"></div>
<script src="http://cdn.bootcss.com/zepto/1.0rc1/zepto.min.js"></script>
<script>
$.ajax({
data:{page:1},
dataType:"json",
type:"get",
url:"/router",
success:function(data){
//console.log(data)
var html = "";
for(var i=0;i<data.blogs.length;i++){
var blog =
data.blogs[i];
html += "<p><a href='"+blog.src+"' target='_blank'>"+blog.title+"</a><br>"
+"<div class='break'>"+blog.content+"</div><div class='moreMess' style='text-align:right'>"+
blog.time+" "+blog.read+" "+blog.say+"</div></p>"
}
$(".showMess").html(html);
},
error:function(){
alert("错误")
}
})
</script>
后端代码:
在routes文件下可以新建自定义js文件,我就取名creeper.js了。内容为:
var http = require("http"),
cheerio = require("cheerio");
exports.getBlog = function(req , res){
var page = req.param("page")||1;
var _res = res;
http.get('http://www.cnblogs.com/axes/default.html?page='+page, function(res){
var chunks = [],
size = 0;
res.on("data" , function(chunk){
chunks.push(chunk);
size += chunk.length;
});
res.on("end" , function(){
//拼接buffer
var data = Buffer.concat(chunks , size);
var html = data.toString();
var $ = cheerio.load(html);
var blogs = [];
for(var i=0;i<$('.postTitle2').length;i++){
var blog = {};
blog.title = $('.postTitle2').eq(i).text();
blog.src = $('.postTitle2').eq(i).attr("href");
blog.content = $(".c_b_p_desc").eq(i).text();
var mess = $(".postDesc").eq(i).text().split("<a")[0].split(" ");
blog.time = mess[2]+" "+mess[3];
blog.read = mess[5];
blog.say = mess[6];
blogs.push(blog);
}
_res.json({
blogs:blogs
})
})
}).on('error' , function(e){
console.log("error:"+e.message)
});
};
该文件中的exports.getBlog值的注意。
然后在建立任意自定义js文件,我就取名为router.js了。内容为:
var http = require("http");
var cheerio = require("cheerio");
var express = require('express');
var router = express.Router();
var creeper = require("./creeper.js");
/* GET home page. */
router.get('/',creeper.getBlog);
router.get('/index', function(req , res){
res.render('index',{ title: 'Tobi' });
});
module.exports = router;
该文件为引入路由文件(即上面创建的那个creeper.js文件中exports的内容)获取后台返
回的数据(一个路由对应一个请求)及views文件下的index.ejs文件,用于前端渲染。
下面就是在app.js文件里配置好对应的路由了,
var router = require('./routes/router');
app.use('/router',router);
我们会在bin文件下看到www文件,里面定义了服务器端口号为3000.
理清以上文件和代码后,我们就需要在项目根目录文件下打开命令窗口直接启动服务了
启动服务命令:node start
接下来就在本地访问3000端口了
http://127.0.0.1:3000/index
以上所有均是小码哥在学习node后,通过express框架编写的小实例网络爬虫。是借鉴前辈
W·Axes的博文再串上自己的理解。
声明:本文非转载,如需转载请注明出处,谢谢。
借鉴博文:http://www.tuicool.com/articles/67zYfiy
原文:http://www.cnblogs.com/axes/p/3668051.html
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。