您好,登錄后才能下訂單哦!
學習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進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。