zoukankan      html  css  js  c++  java
  • 基于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="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

  • 相关阅读:
    Linux修改root密码报错
    Python中的排序---冒泡法
    Python随机数
    Python中的深拷贝和浅拷贝
    Couldn’t download https://raw.githubusercontent.com/certbot/certbot/ 问题解决
    Python内置数据结构----list
    Python内置数据结构
    Vue指令
    computed 和 watch
    Vue的数据响应式
  • 原文地址:https://www.cnblogs.com/HDou/p/5102181.html
Copyright © 2011-2022 走看看