NodeJS+koa搭建网站服务环境的基本流程

以此文来记录学习NodeJS以及其相关知识。

什么是koa

koa是一个基于node环境的,更小、更富有表现力、更健壮的Web框架。

koa应用是一个包含一系列中间件generator函数的对象。这些中间件函数基于request请求以一个类似于栈的结构组成,并依次来执行。

koa的核心设计思路是为中间件提供高级语法糖封装,使得编写中间件变得有趣。

在kao中包含了content-negotiation(内容协商)、cache freshness(缓存刷新)、proxy support(代理支持)和redirection(重定向)等常用任务方法。与提供庞大的函数支持不同的是,koa只包含很小的一部分,因为koa并不绑定任何中间件。

    var koa = require('koa');//require koa模块
    var app = koa();//新建koa实例

    app.use(function *(){
        this.body = 'Hello World';
    });//监听服务

    app.listen(3000);//监听服务在3000端口

基于nodeJS服务端的搭建和开发

工程目录结构

  • mock 伪造的数据,(接口联调:服务端给定数据,根据数据格式,将数据渲染到页面上)
  • node_modules 放npm的包
  • service 文件夹下放服务相关的文件
    1. 返回数据,来自本地mock
    2. 对接口进行调用,调用线上真实的接口,返回的数据用来渲染页面
  • static 文件夹下放css,img,script等静态资源和静态文件
  • view 将要开发项目的模板文件
  • app.js 项目启动的入口文件

使用koa中间件构建网站雏形

在项目根目录下,新建app.js文件作为整个项目的入口。在node环境下,在命令行中输入node app.js来启动项目。

    var koa = require('koa');
    var controller = require('koa-route');
    var app = koa();

    //使用app.use()来调用中间件
    app.use(controller.get('/route_test',function*(){
        this.set('Cache-Control','no-cache');//设置页面不缓存

        this.body = 'hello koa!';//body是返回体,返回的是html内容,可以是文本也可以是内容

    }));//koa接收的第二个函数不是callback函数,而是一个generator,相当于一个异步执行的函数

    app.listen(3001);

在命令行中输入node app.js启动项目,在地址栏中输入127.0.0.1:3001/route_test,页面将会显示hello koa!

以上就成功的搭建了一个最简单的web服务器,通过url和固定的route返回特定的内容。

如何渲染模板


    var koa = require('koa');
    var controller = require('koa-route');
    var app = koa();
    var views = require('co-views');//具有模板渲染能力的中间件
    var render = views('./view',{
        map : { html :'ejs' }  //指定模板渲染类型,接收map的key值,key值中选择模板引擎
    });//实例化,调用这个方法,返回一个对象,接收两个参数,第一个是模板的存放路径,

    app.use(controller.get('/route_test',function*(){
        this.set('Cache-Control','no-cache');
        this.body = 'hello koa!';

    }));

    app.use(controller.get('/ejs_test',function*(){
        this.set('Cache-Control','no-cache');
        this.body = yield render('test',{title:'title_test'});
    }));


    app.listen(3001);

this.body = yield render('test',{title:'title_test'});

render()接收两个参数,第一个为模板的名字,“{}”为传递到模板中的参数。

新建test.html文件,在test.html文件中写代码<%=title%>

这里的“=”号代表数据绑定,绑定的是title这个字段。

如何理解yield

这里了解ES6。

co-views是对通用模板引擎渲染平台consolidate的封装。根据对co-views源码的分析,它把consolidate统一的api有封装成return function(done){…}的形态,这样源代码中的yield render(view,model)就能够融入generator的逻辑之中。

总的来说,是使用koa的co-views中间件来渲染模板生成render实例。

如何访问静态文件


    var koa = require('koa');
    var controller = require('koa-route');
    var app = koa();
    var views = require('co-views');
    var render = views('./view',{
        map : { html :'ejs' }
    });
    var koa_static = require('koa-static-server');

    app.use(koa_static({
        rootDir:'./static/',//整个项目工程的目录,注意前面有"."
        rootPath:'/static/',//在url地址里访问静态文件目录用的路径
        maxage : 0 //文件的过期时间,缓存
    }));


    app.use(controller.get('/route_test',function*(){
        this.set('Cache-Control','no-cache');
        this.body = 'hello koa!';

    }));

    app.use(controller.get('/ejs_test',function*(){
        this.set('Cache-Control','no-cache');
        this.body = yield render('test',{title:'title_test'});
    }));


    app.listen(3001);

以上就基本搭建好了一个网站的框架,可以访问静态资源文件,有路由来指定访问内容,同时有模板渲染。

接下来介绍如何调用后端服务的接口。

为网站添加Mock接口

在service目录下,新建service.js。该文件并不直接提供数据,而是将后端提供的原始数据进行处理,转换成为json的数据格式,最后传递给前端。

模拟数据

在mock目录下新建test.json文件,存放测试数据

{
    msg: 0,
    data:'test data'
 }

测试数据一般有两个域,一个是状态域msg,用来标明返回数据状态,另一个是data域标明数据类型和格式。

点击这里了解JSON

当数据格式为mock时,使用以下代码来将数据暴露成接口。


    var fs = require('fs');//使用mock格式的文件时,需要访问文件系统,使用node中的fs模块


    exports.get_test_data = function() {
        var content = fs.readFileSync('./mock/test.json','utfd-8');
        //读取test.json文件
        return content;
        //把数据暴露出来
    }

暴露出来的数据需要访问的接口,接口在app.js中暴露。在app.js中写


    var service = require('./service/service.js')

    app.use(controller.get('api_test',function*(){
        this.set('Cache-Control','no-cache');
        this.body = service.get_test_data();
    }));

线上接口的调用

在service.js中


    exports.get_search_data = function(start,end,keyword){
        return function(cb){
            var http = require('http');
            var qs = require('querystring');//将object转换成http的查询参数
            //{a : '1'}转换成http://127.0.0.1/api?=1
            var data = {
                s: keyword,
                start: start,
                end: end
            };

            var content = qs.stringify(data);//将data转换成http的查询参数
            var http_request = {
                hostname: '',//主机地址
                port: 80, //指定端口
                path: '' + content//接口路由的位置
            }

            //发送请求
            req_ojb = http.request(http_quest,function(_res){
                var content = '';
                _res.setEncoding('utf8');

                //触发data事件后返回chunk
                _res.on('data',function(chunk){
                    content += chunk;
                });

                //监听end事件,当触发end事件后才会返回所有数据
                _res.on('end',function(){
                    cb(null,content);
                });
            });

            //监听error事件
            req_obj.on('error',function(){

            });
            //发送请求
            req_obj.end();
        }
    }

之后在app.js中调用,先加入一个路由接口

       app.use(controller.get('/ajax/search',function*(){
            this.set('Cache-Control','no-cache');
            var querysting = require('querystring');
            var params = querystring.parse(this.req._parseUrl.query);
            var  start = params.start;
            var  end = params.end;
            var  keyword = params.keyword;
            this.body = yield service.get_search_data(start,end,keyword);
        }));

到此就是使用NodeJS+koa搭建网站服务环境的大致流程。

本文参考了

作者:hayato
文章版权:本站所有文章版权依赖于 CC BY-NC-SA 3.0 Unported License

本文链接:https://blog.axis-studio.org/2017/02/14/NodeJS-koa搭建网站服务环境的基本流程/