基于node的前后端分离初识

久闻node的大名,先后也看过node的文档,但是,总是碍于没有挑起我的G点,所以实际codeing的例子都没有。最近,突然很有兴致,想把原有用页面ajax渲染的页面采用服务端node来渲染,研究了两天终于有点眉目了。

先来按我的理解来解释一遍node,node是服务端语言,只是用的JavaScript,所以非常适合前端的工程师去研究这个后端语言,node本身就能够实现整个站点或者服务的全部。从页面渲染到数据存储,如同php和javaweb等其他web开发一样,而且node很适合并发量大的访问服务,至于具体的原因,还是问度娘比较好。

但是,今天我说的这件事情,仅仅是为了前后端分离。所以我们没有必要处理具体的业务逻辑,因为前端的职责本就是html和js,css,所有的工作就为了页面的渲染和交互。所以,这里我们仅仅只用node去帮助我们获取接口数据,然后利用模板渲染成html就好。

先来说下这样做与之前ajax获取接口数据渲染有什么不同,我们可以先来看下ajax方式渲染的源码,打开之前的项目

这是一个新闻列表,我们可以打开源码看看内部dom,注意是打开源码。

我们看到了,新闻列表内其实只有一个容器,并没有新闻列表的内容。这种方式其实就是在ajax获取到数据之后,动态的插入dom中。

我们再来看node的方式渲染的页面。同样是一个新闻列表页。

其实,这里的调用的是同一个javaAPI,所以内容是一样的,这一次我们打开源码看看与之前有什么不一样的地方。

很明显,这一次我们的新闻列表,是直接html渲染好的。这里面的妙处,自然不言而喻,其他的不说,对于seo自然是友好的不行啊,其次是首屏体验,这种方式渲染的页面是没有白屏时间的,ajax在获取数据之前,白屏时间还是能够感受到的。

说了这么多,我们正式进入正题,现有前后端分离,后端一般只提供api,也就是数据,后端工程师大哥是很不想去套你的html模板的。因为他们不知道怎么样去闭合标签哦,更不想去改你的CSS了,js那就更不用多说了。所以后端的大哥负责提供接口是个明智的合作方式,至于页面怎么显示,交互的js怎么写,还是交给前端比较靠谱。

但是,那又有人会说,为什么前端不能去写写jsp呢?我想说的是,后端的那个java环境,前端的同学想去搭吗?就算会搭环境,会写jsp,而且本身就会后端开发,但是前后端联调的时候要傻眼了吧。所以说,这种事情还是分开的比较好,不仅效率高,而且术业专攻,大家心里都爽的不行不行的。

那么,现在我们就来动手搞起我们的node服务吧,首先node环境是要有的,node安装很简单,去node官网看看就会了。其次就是个要有个编辑器,本人用的是hbuiler,需要集成node开发插件,需要一点耐心。
好,工具准备好了,动手就快了,首先新建一个node项目,选择Express模板。

再选择ejs模板页面,点击完成后就是以个完整的项目了,运行app.js就可以启动服务了。

在浏览器中打开127.0.0.1:3000就能访问index页面了。
好,现在我们有了才正式开始动手写代码,打开index.js,只有一个输出语句,这里是数处理请求的方式,我们要把之前需要在ajax中调用接口再这里调用就好了,拿到接口数据,请求接口的方法很简单,用http模块的request方法:

exports.index = function(req, res){
    var page = req.params.page||1;

    if(isNaN(parseInt(page))){
        page=parseInt(1);
    }

    if(page<1){
        page=1;
    }
    page = parseInt(page);

    console.log(page);

    var http = require(‘http‘);
    //http://120.27.137.16/wangda/news/queryAll.action?page=1&rows=10
    // 用于请求的选项

    var options = {
       host: ‘szwdtx.cn‘,
       port: ‘80‘,
       path: ‘/wangda/news/queryAll.action?page=‘+page+‘&rows=10‘
    };

    // 处理响应的回调函数
    var callback = function(response){
        response.setEncoding(‘utf8‘);
       // 不断更新数据
       var body = ‘‘;
       response.on(‘data‘, function(data) {
          body += data;
       });

       response.on(‘end‘, function() {
          // 数据接收完成
          console.log(body);
          var next = page+1;
          var data = JSON.parse(body);
          if(page >= Math.ceil(data.total/10)){
              //page = Math.ceil(data.total/10);
              page = Math.ceil(data.total/10);
              next = page;
          }

          res.render(‘index‘, { title: ‘旺达资讯‘,data:data,page:{page:page,all:Math.ceil(data.total/10),prve:page-1,next:next}});
       });
    };
    // 向服务端发送请求
    var req = http.request(options,callback);
    req.end();
};

其实和ajax调用的接口的方式很像,然后我们只需要在response.on(‘end‘, function() {})中将数据交给idnex.ejs模板渲染就ok了。

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
    <link rel=‘stylesheet‘ href=‘/stylesheets/style.css‘ />
  </head>
  <body>
    <h1 style="text-align: center;"><%= title %></h1>
    <ul>
        <%for(var i = 0; i < data.rows.length; i++){%>
            <li>
                <img src="<%=data.rows[i].img%>" style="width:200px;"/>
                <p><a href="/news/<%=data.rows[i].id%>"><%=data.rows[i].title%></a></p>
            </li>
        <%}%>
    </ul>
     <p style="text-align: center;"><a href="/<%=page.prve%>">上一页</a><%=page.page%>/<%= page.all %><a href="/<%=page.next%>">下一页</a></p>
  </body>
</html>

ejs模板和html很接近,上手会非常快。现在我们在看看入口文件app.js中需要做些什么?

/**
 * Module dependencies.
 */

var express = require(‘express‘)
  , routes = require(‘./routes‘)
  , user = require(‘./routes/user‘)
  , news = require(‘./routes/news‘)
  , http = require(‘http‘)
  , path = require(‘path‘);

var app = express();

// all environments
app.set(‘port‘, process.env.PORT || 3000);
app.set(‘views‘, __dirname + ‘/views‘);
app.set(‘view engine‘, ‘ejs‘);
app.use(express.favicon());
app.use(express.logger(‘dev‘));
app.use(express.bodyParser());
app.use(express.methodOverride());
app.use(app.router);
app.use(express.static(path.join(__dirname, ‘public‘)));

// development only
if (‘development‘ == app.get(‘env‘)) {
  app.use(express.errorHandler());
}

app.get(‘/‘, routes.index);
app.get(‘/:page‘, routes.index);
app.get(‘/users‘, user.list);
app.get(‘/news/:id‘,news.getnews);

http.createServer(app).listen(app.get(‘port‘), function(){
  console.log(‘Express server listening on port ‘ + app.get(‘port‘));
});

其实我们,只需要做一下分页就ok,app.get(‘/:page‘, routes.index);这样就可以实现访问不带参数和带pege参数的页面都跳转到index页面,如果不带page参数,就默认是第一页,带参数就返回当前页。

运行app.js就能显示新闻列表了,见上面的图3
项目git地址:http://git.oschina.net/zss01/node

时间: 2024-09-30 19:10:06

基于node的前后端分离初识的相关文章

也谈基于NodeJS的全栈式开发(基于NodeJS的前后端分离)

随着不同终端(Pad/Mobile/PC)的兴起,对开发人员的要求越来越高,纯浏览器端的响应式已经不能满足用户体验的高要求,我们往往需要针对不同的终端开发定制的版本.为了提升开发效率,前后端分离的需求越来越被重视,后端负责业务/数据接口,前端负责展现/交互逻辑,同一份数据接口,我们可以定制开发多个版本. 这个话题最近被讨论得比较多,阿里有些BU也在进行一些尝试.讨论了很久之后,我们团队决定探索一套基于NodeJS的前后端分离方案,过程中有一些不断变化的认识以及思考,记录在这里,也希望看到的同学参

基于NodeJS进行前后端分离

1.什么是前后端分离 传统的SPA模式:所有用到的展现数据都是后端通过异步接口(AJAX/JSONP)的方式提供的,前端只管展现. 从某种意义上来说,SPA确实做到了前后端分离,但这种方式存在两个问题: WEB服务中,SPA类占的比例很少.很多场景下还有同步/同步+异步混合的模式,SPA不能作为一种通用的解决方案. 现阶段的SPA开发模式,接口通常是按照展现逻辑来提供的,而且为了提高效率我们也需要后端帮我们处理一些展现逻辑,这就意味着后端还是涉足了view层的工作,不是真正的前后端分离. 现阶段

基于NodeJS的全栈式开发(基于NodeJS的前后端分离)

也谈基于NodeJS的全栈式开发(基于NodeJS的前后端分离) 前言 为了解决传统Web开发模式带来的各种问题,我们进行了许多尝试,但由于前/后端的物理鸿沟,尝试的方案都大同小异.痛定思痛,今天我们重新思考了“前后端”的定义,引入前端同学都熟悉的NodeJS,试图探索一条全新的前后端分离模式. 随着不同终端(Pad/Mobile/PC)的兴起,对开发人员的要求越来越高,纯浏览器端的响应式已经不能满足用户体验的高要求,我们往往需要针对不同的终端开发定制的版本.为了提升开发效率,前后端分离的需求越

基于 koajs 的前后端分离实践

一.什么是前后端分离? 前后端分离的概念和优势在这里不再赘述,有兴趣的同学可以看各个前辈们一系列总结和讨论: 系列文章:前后端分离的思考与实践(1-6) slider: 淘宝前后端分离实践 知乎提问: 如何评价淘宝 UED 的 Midway Framework 前后端分离? Web 前后端分离的意义大吗? 尤其是<前后端分离的思考与实践>系列文章非常全面的阐述了前后端分离的意义和技术实现.如果不想看上面的文章,可以在脑海里留下这样一个轮廓就好: 本文主要阐述趣店团队基于Koajs的前后端分离实

前后端分离(二)淘宝基于NODEJS的前后端分离

FRONT-END SKILLS 中间件定制平台 "中间件定制平台"项目中用到的SKILLS 前端工程 1,纯静态的前台工程,不依赖web server,可独立工程.独立开发 2.开发过程使用JSON file/MockJS,通过配置切换Angular Service数据源 12345 window.__service.factory('templateRES',function($resource) {var url = framework.getFinalURL('api/temp

基于Vue的前后端分离项目实践

一.为什么需要前后端分离 1.1什么是前后端分离  前后端分离这个词刚在毕业(15年)那会就听说过,但是直到17年前都没有接触过前后端分离的项目.怎么理解前后端分离?直观的感觉就是前后端分开去做,即功能和职责上的一种划分,前端负责页面的渲染,部分页面交互的逻辑,然后通过网络请求与后端进行数据的交互:后端则着重关注业务逻辑的处理,直接操控数据库. 1.2前后端未分离前(1)jsp + servlet 开发模式: JSP页面:负责视图层的渲染及交互,内部可以嵌入java 代码,在某些场景下开发起来比

[原创]基于VueJs的前后端分离框架搭建之完全攻略

首先请原谅本文标题取的有点大,但并非为了哗众取宠.本文取这个标题主要有3个原因,这也是写作本文的初衷: (1)目前国内几乎搜索不到全面讲解如何搭建前后端分离框架的文章,讲前后端分离框架思想的就更少了,而笔者希望在本文中能够全面.详细地阐述我们团队在前后端分离的摸索中所得到的搭建思路.最佳实践以及架构思想: (2)我们团队所搭建的前后端分离框架,并非只是将网上传播的知识碎片简单拼装,而是一开始就从全局出发,按照整个系统对前后端分离框架的最高期望进行设计,到目前为止,可以说我们的框架完全实现了对我们

前后端分离实践【转】

前言 为了解决传统Web开发模式带来的各种问题,我们进行了许多尝试,但由于前/后端的物理鸿沟,尝试的方案都大同小异.痛定思痛,今天我们重新思考了“前后端”的定义,引入前端同学都熟悉的NodeJS,试图探索一条全新的前后端分离模式. 随着不同终端(Pad/Mobile/PC)的兴起,对开发人员的要求越来越高,纯浏览器端的响应式已经不能满足用户体验的高要求,我们往往需要针对不同的终端开发定制的版本.为了提升开发效率,前后端分离的需求越来越被重视,后端负责业务/数据接口,前端负责展现/交互逻辑,同一份

前后端分离的思考与实践(一)

原文出处: 淘宝UED - 常胤 也谈基于NodeJS的全栈式开发(基于NodeJS的前后端分离) 前言 为了解决传统Web开发模式带来的各种问题,我们进行了许多尝试,但由于前/后端的物理鸿沟,尝试的方案都大同小异.痛定思痛,今天我们重新思考了"前后端"的定义,引入前端同学都熟悉的NodeJS,试图探索一条全新的前后端分离模式. 随着不同终端(Pad/Mobile/PC)的兴起,对开发人员的要求越来越高,纯浏览器端的响应式已经不能满足用户体验的高要求,我们往往需要针对不同的终端开发定制