zoukankan      html  css  js  c++  java
  • 从入门到不放弃系列之Koa2

    一.Koa2入门

      本来是想Express入门的,但是既然都是要学,干嘛不学最新的呢?
      其实我想说,我本来只是想学个小程序开发,现在已经陆陆续续开了好多坑了。。
      本文参考廖雪峰教程

    二.Async
      最新的Koa2已经使用async来作为中间件(middleware)了,具体用法这里不赘述,可以参考阮一峰老师的Es6教程
      之前使用的Generator函数

      使用async时,要求node的版本大于等于7.6.0
      因此如果发现错误,可以使用nvm(window系统),n(mac系统)来切换node版本

      mac系统的n已经用的很多了,这里放出window系统下的nvm的一些介绍:下载nvm使用说明

    三.实例
    1. 使用npm init命令初始化package.json

    2. 使用npm install --save-dev koa koa-bodyparser koa-router安装koa2
    其中koa和koa-router毋庸置疑字面含义已经很清楚了,koa-bodyparser是因为无论是原生的node还是koa都无法直接解析request的body,因此需要引用这个插件

    3. 在根目录创建文件夹:controllers,在该文件夹中保存所有的路由文件

    4. 在controllers文件夹中新增一个名为index.js的文件,内容如下:

    var fn_index = async (ctx, next) => { 
        // let appID = 'wx5db51f3c5c381ed2', 
        // appsecret = '4c797335101c71a01c1713b3f83fd26d', 
        // Token = 'xiaoyebaomemeda'; 
        console.log(ctx.querystring); 
        ctx.response.body = `<h1>Index </h1><h3>koa1</h3><h4>${ctx.querystring}</h4>`; 
    }; 
    
    var fn_hello = async (ctx, next) => { 
        var name = ctx.params.name; 
        ctx.response.type = 'text/html'; 
        ctx.response.body = `<h3>Hello ${name}</h3>`; 
    }; 
    
    module.exports = { 
        'Get /': fn_index, 
        'Get /hello/:name': fn_hello 
    };

            可以看出,这个文件输出的对象中包含两个”路由“,分别是"Get /"和"Get /hello/:name"
      "Get"表示method是"get","/"是url路径
      关于ctx的介绍详见官网
    5. 在controllers文件夹再新建一个名为user.js的文件,内容如下:

    var fn_get_register = async (ctx, next) => { 
        var html = ` 
        <!DOCTYPE html> 
        <html> 
        <head> 
        <title>register</title> 
        </head> 
        <body> 
        <form action="/register" method="post"> 
        姓名:<input type="text" name='name' value=''> 
        年龄:<input type="" name="age"> 
        <button type="submit">submit</button> 
        </form> 
        </body> 
        </html> 
        `; 
        ctx.response.type = 'text/html'; 
        ctx.response.body = html; 
    }; 
    
    var fn_post_register = async (ctx, next) => { 
        console.log(`name:${ctx.request.body.name} 
            age: ${ctx.request.body.age}`); 
        ctx.response.body = `<span>submited!</span> 
        name:${ctx.request.body.name} 
        age:${ctx.request.body.age}`; 
    }; 
    
    module.exports = { 
        'Get /register': fn_get_register, 
        'Post /register': fn_post_register 
    };

      这次分别创建了"Get"和"Post"方法的路由

    6.在根目录创建controller.js,用来读取controller文件夹中的所有路由文件,反射出路由,内容如下:

    // 返回path路径下的所有js文件 
    var readFile = function (path) { 
        var fs = require('fs'); 
        var files = fs.readdirSync('./'+path); 
        var jsFiles = files.filter((f) => { 
            return f.endsWith('.js'); 
        }); 
        return jsFiles; 
    }; 
    
    // 根据.js文件反射路由 
    var SetRouter = function (path) { 
        // 声明路由 
        var router = require('koa-router')();
        var jsFiles = readFile(path); 
        for (var js of jsFiles) {
            let mapping = require(__dirname + '/' + path + '/' + js); //分别引入每个js文件 
            for (var url in mapping) { 
                // 遍历每个controller文件中的路由
                if(url.startsWith('Get')) { 
                    // method: get 
                    router.get(url.replace('Get ',''), mapping[url]); 
                } else if (url.startsWith('Post'),mapping[url]) { 
                    // method: post 
                    router.post(url.replace('Post ',''), mapping[url]); 
                } else { 
                    // 非路由的 
                    console.log('this is not router file'); 
                } 
            } 
        } 
        return router.routes(); 
    }; 
    
    module.exports = function (path) { 
        return SetRouter( path || 'controllers'); 
    };

    7.在根目录新建app.js,内容如下:

    var Koa = require('koa'); 
    var app = new Koa(); 
    var router = require('./controller.js')(); 
    var sha1 = require('sha1'); 
    var bodyParser = require('koa-bodyparser'); 
    
    app.use(async (ctx,next) => { 
        console.log(new Date()); 
        await next (); 
    }); 
    
    app.use(bodyParser()); 
    app.use(router); 
    
    app.listen(3000); 
    console.log('listening port 3000');

    8.在命令行使用命令:node app.js即可启动服务

    9.在浏览器输入:localhost:3000即可访问

            输入如下URL,页面展示如下所示:

      输入注册URL,页面展示如下所示:

            输入姓名和年龄,点"submit”,显示如下:

    小结一下koa2安装:

    1.使用npm init命令初始化package.json
    2.使用npm install --save-dev koa koa-bodyparser koa-router安装koa2

    3.koa2的官方文档资料详见http://www.koacn.com/#contexthttps://koa.bootcss.com/#

    文章来源:https://www.imooc.com/article/18246

  • 相关阅读:
    高仿富途牛牛-组件化(三)-界面美化
    高仿富途牛牛-组件化(二)-磁力吸附
    高仿富途牛牛-组件化(一)-支持页签拖拽、增删、小工具
    Cef3 学习资料
    QCustomplot使用分享(八) 绘制图表-加载cvs文件
    Electron桌面应用:环境搭建
    Qt疑难问题-模态窗口父类被析构
    Qt线程实现分析-moveToThread vs 继承
    基础连接已经关闭: 未能为 SSL/TLS 安全通道建立信任关系。
    asp.net中的ListBox控件添加双击事件
  • 原文地址:https://www.cnblogs.com/flyingeagle/p/9164194.html
Copyright © 2011-2022 走看看