中文字幕av专区_日韩电影在线播放_精品国产精品久久一区免费式_av在线免费观看网站

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

初入nodeJs express框架

發布時間:2020-07-27 23:00:08 來源:網絡 閱讀:1758 作者:web郭樂 欄目:開發技術

學習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


向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

定西市| 响水县| 永善县| 上犹县| 阿城市| 台北市| 宜宾市| 盐津县| 全椒县| 阜新| 三穗县| 开封市| 岳普湖县| 祁东县| 四子王旗| 贵定县| 宣武区| 江油市| 唐海县| 高邮市| 连江县| 天长市| 原阳县| 徐闻县| 兰州市| 贵南县| 镇安县| 盐津县| 乳山市| 长岛县| 磐石市| 灌南县| 玛曲县| 伊春市| 日喀则市| 汉沽区| 罗田县| 准格尔旗| 柏乡县| 云安县| 金川县|