初入nodeJs express框架

学习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>里添加一下代码:

前端代码:

    <h1>我的博客</h1>

     <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

时间: 2024-08-05 15:10:37

初入nodeJs express框架的相关文章

Nodejs Express框架

ctrl + h Nodejs Express框架

基于nodeJs express 框架的图片上传和编辑(引用美图编辑工具)上传小示例

唉,由于近期工作中对于新知识的运用相对较少,也导致小码哥少有更新鄙人心得的机会.还望路过的基友们不要抱怨,勿喷,,,,, 本篇文章,是基于NodeJs Express框架完成的一个用于项目中图片上传和编辑上传的小示例,当然,由于项目工期不禁,都是在非工作时间慢慢完成的,导致至今该图片上传功能也未能插入项目中真正的验证最终效果.不过就小码哥感觉,基本思路及基本功能算是完成了. 下面便由小码哥来给基友们稍微讲解改功能的实现过程及其中用到的一些技术等等. 首先,说说NodeJs Express框架的搭

React第六篇: 搭建React + Router + antd + nodejs + express框架搭建(nodejs做前后端server)

前提: nodejs >= 10.0;  这里不推荐用官网的yarn安装antd的模块,因为后续会出错,错误如图: 也不推荐用npx方法来搭建react骨架,也会出错,让我们开始吧!!   前端React+Antd框架搭建 1.安装并启动create-react-app骨架应用 打开cmd按顺序执行以下指令: npm install -g create-react-app   (全局安装create-react-app, 默认会安装在C盘个人用户下) create-react-app my-ap

nodeJS express框架 中文乱码解决办法

最近在研究javascript 的服务端应用 node,之所以想要研究node,是因为前几个月一直在前端挣扎,从javascript入门到在项目中实际使用javascript,确实感悟颇深.javascript的书籍看了<javascript权威指南>,这本书确实对javascript的入门很不错,之后看了<JavaScript设计模式与开发实践>,这本书我当做是边学javascript知识,边学一下设计模式,也很不错.废话少说,这几天看了一下nodejs,发现虽然是新的知识,当感

nodejs express 框架 上传文件

web 项目应用express4.0框架 html 表单post 文件上传失败,后端无法获取提交文件 express不支持文件上传. 方式一 若是图片,可以将图片转码为BASE64上传 前端框架angularjs代码 转换代码如下 $scope.filechange=function(index){ var file = this.files[0]; var url = webkitURL.createObjectURL(file); /* 生成图片 * --------------------

Centos 编译安装nodejs&amp;express框架

一. 下载nodejs 版本 wget http://nodejs.org/dist/v0.10.28/node-v0.10.28.tar.gz 二. 编译安装 cp node-v0.10.28.tar.gz /usr/src/ cd /usr/src tar zxvf node-v0.10.28.tar.gz cd node-v0.10.28/ ./configuration --prefix=/usr/local/node make&make install 设置环境变量 vi /etc/p

NodeJS:Express 框架实战解析视频教程

一.Node.js是一个Javascript运行环境,简单的说 Node.js 就是运行在服务端的 JavaScript.Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台.Node.js是一个事件驱动I/O服务端JavaScript环境,基于Google的V8引擎,V8引擎执行Javascript的速度非常快,性能非常好.Express 是一个简洁而灵活的 node.js Web应用框架, 提供一系列强大特性帮助你创建各种Web应用. 二.node.js运行原理

nodejs express框架一个工程中同时使用ejs模版和jade模版

在某些项目中,比如你接手了一个别人的项目然后你不想用蛋疼的ejs,或者你不想用蛋疼的jade.你有不想重写之前的页面,那么你现在可能需要新引入ejs或者jade模块,你仅仅需要做下面两步也许就能完成使用两个模版的工作 1.consolidate.js cd 到项目目录: npm install consolidate --save 打开项目的app.js(也许你的叫其他名字) 把app.js的形如下面的代码片段 app.set('view engine', 'jade'); 改为 var eng

初入nodejs -- response.write对象时报错

在学习nodejs时,习惯使用 write() 在浏览器输出结果,但是在输出内容为对象(object)时,却遇到了点麻烦. 代码 var http = require('http'); http.createServer(function(request,response){ response.writeHead(200,{"Content-Type":"text/html;charset=utf-8"}); if (request.url != '/favicon