温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

初入nodeJs express框架

发布时间:2020-07-27 23:00:08 来源:网络 阅读:1756 作者: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