• [转]分别使用Node.js Express 和 Koa 做简单的登录页


    本文转自:https://blog.csdn.net/weixin_38498554/article/details/79204240

    刚刚学了Koa2,由于学的不是很深,并没有感受到网上所说的Koa比Express好用多少,今天做了一个登录小demo,比较了一下两种框架的用法,做出记录。
    HTML代码用了简单的form表单,提交数据采用的是ajax,接口用的就是本地node接口,先上代码啦:
    HTML部分:

    <body>
    <form type='get' onsubmit="return false">
    用户名:
    <input type="text" id='username' name="username"><br> 密码:
    <input type="password" id='pass' name="password"><br>
    <input type="submit" value="提交" id='submit'>
    </form>
    </body>
    <script>
    $('#submit').click(function() {
    var username = $('#username').val();
    var password = $('#pass').val();
    $.ajax({
    'url': 'http://127.0.0.1:3000/login?username=' + username + '&password=' + password,
    'type': 'get',
    success: function(data) {
    console.log(data);
    },
    error: function(err) {
    console.log(err);
    }

    })
    })
    </script>

    Node.js代码—express.js

    const express = require('express');
    var app = express();

    //跨域方法1
    app.all('*', function(req, res, next) {
    res.header('Access-Control-Allow-Origin', '*');
    res.header('Access-Control-Allow-Headers', 'Content-Type');
    res.header('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE, OPTIONS'); 
    next(); 
    });
    app.use('/login', (req, res) => {
    //跨域方法2
    //res.header("Access-Control-Allow-Origin", "*");
    let query = req.query;
    console.log(query)
    res.send(query);
    });
    app.listen('3000', () => {
    console.log('3000 请求成功')
    });

    Node.js代码—koa.js

    const Koa = require('koa');
    const Router = require('koa-router');
    const cors = require('koa2-cors'); //允许跨域的插件
    const app = new Koa();
    const router = new Router();
    //跨域
    app.use(cors());

    router.get('/login', async(ctx) => {
    let query = ctx.query;
    //let query = ctx.request.query;
    console.log(query);
    ctx.body = {
    query
    };
    });
    //把router 挂载到app
    app.use(router.routes())
    .use(router.allowedMethods());

    app.listen('3000', () => {
    console.log('[demo] 3000 port is success');
    });

    展示一下实现效果:


    在终端里这样输入,这里我使用的编辑器是vscode

    总结:以上需要注意的地方:

    HTML中form表单要注意添加 onsubmit="return false" 属性,要不然ajax会受到影响。
    express 和 koa 跨域的方法:
    在以上代码中我有标记,express跨域 我写了两种方法,Koa 跨域我采用的是 koa2-cors 这个插件
    express 和 koa 路由的区别:
    前者 直接采用以下的方法就可以实现路由,
    app.use('/login', (req, res) => {
    ....
    });

    而后者 还需要引入koa-router路由插件,最后还得挂载在app上,自我觉得有点复杂...(一个node新手的感叹)
    ---------------------
    作者:京城女女-
    来源:CSDN
    原文:https://blog.csdn.net/weixin_38498554/article/details/79204240
    版权声明:本文为博主原创文章,转载请附上博文链接!

  • 相关阅读:
    JSP----获取表单参数
    application 从web.xml中获取初始化参数
    使用定时器分解任务
    无阻塞加载外部js(动态脚本元素,XMLHttpRequest注入,LazyLoad)
    ReactJs 入门DEMO(转自别人)
    带你一分钟理解闭包--js面向对象编程(转载他人)
    使用SqlBulkCopy进行批量数据插入
    AngularJsDEMO
    ECharts
    C#发送邮件DEMO
  • 原文地址:https://www.cnblogs.com/freeliver54/p/10496654.html
Copyright © 2020-2023  润新知