Node.js教程 express框架详解
沉沙 2018-09-20 来源 : 阅读 691 评论 0

摘要:本篇教程介绍了Node.js教程 express框架详解,希望阅读本篇文章以后大家有所收获,帮助大家对Node.js的理解更加深入。

本篇教程介绍了Node.js教程 express框架详解,希望阅读本篇文章以后大家有所收获,帮助大家对Node.js的理解更加深入。

<

学习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官网上

//www.nodejs.cn/或//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>里添加一下代码:

前端代码:

    <h1>我的博客</h1>

     <div class="showMess"></div>

  <script src="//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(‘//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端口了

//127.0.0.1:3000/index    

本文由职坐标整理并发布,希望对同学们有所帮助。了解更多详情请关注WEB前端Node.js频道!

本文由 @沉沙 发布于职坐标。未经许可,禁止转载。
喜欢 | 0 不喜欢 | 0
看完这篇文章有何感觉?已经有0人表态,0%的人喜欢 快给朋友分享吧~
评论(0)
后参与评论

您输入的评论内容中包含违禁敏感词

我知道了

助您圆梦职场 匹配合适岗位
验证码手机号,获得海同独家IT培训资料
选择就业方向:
人工智能物联网
大数据开发/分析
人工智能Python
Java全栈开发
WEB前端+H5

请输入正确的手机号码

请输入正确的验证码

获取验证码

您今天的短信下发次数太多了,明天再试试吧!

提交

我们会在第一时间安排职业规划师联系您!

您也可以联系我们的职业规划师咨询:

小职老师的微信号:z_zhizuobiao
小职老师的微信号:z_zhizuobiao

版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
 沪公网安备 31011502005948号    

©2015 www.zhizuobiao.com All Rights Reserved

208小时内训课程