本文转自：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
版权声明：本文为博主原创文章，转载请附上博文链接！

[转]分别使用Node.js Express 和 Koa 做简单的登录页的更多相关文章

  1. KoaHub平台基于Node.js开发的Koa的简单包装到请求库的类似接口

    co-request co-request promisify wrapper for request co-request Simple wrapper to the request library ...

  2. Node.js Express 的安装和简单使用

    Express的安装: 1.命令行窗口 //--> npm install 组件名 @版本号 --> npm install express @4   //这里安装最新的版本 也可以这样: ...

  3. 前端使用node.js+express+mockjs+mysql实现简单服务端，2种方式模拟数据返回

    今天,我教大家来搭建一个简单服务端 参考文章: https://www.jianshu.com/p/cb89d9ac635e https://www.cnblogs.com/jj-notes/p/66 ...

  4. node.js+express+jade系列五：ajax登录

    本文通过jquery实现简单的无刷新登录 1:首先要在router中配置登录请求,因为登录需要传user和pwd考虑到安全需用post请求 {        path:'/',        meth ...

  5. Node.js进阶篇-koa、钩子函数、websocket、嵌入式开发

    代码地址如下:http://www.demodashi.com/demo/12932.html 一.简介     koa是由Express原班人马打造的,致力于成为一个更小.更富有表现力.更健壮的We ...

  6. Node.js Express 框架学习

    转载:http://JavaScript.ruanyifeng.com/nodejs/express.html#toc0 感觉很牛的样子,不过觉得对初学者没太大用,里面很多例子用的api都没有详细的说 ...

  7. Node.js Express 框架

    Node.js Express 框架 Express 简介 Express 是一个简洁而灵活的 node.js Web应用框架, 提供了一系列强大特性帮助你创建各种 Web 应用,和丰富的 HTTP ...

  8. Windows下Node.js+Express+WebSocket 安装配置

    Linux参考: Linux安装Node.js 使用Express搭建Web服务器 Node.js是一个Javascript运行环境(runtime).实际上它是对Google V8引擎进行了封装.V ...

  9. Nodejs学习笔记（六）--- Node.js + Express 构建网站预备知识

    目录 前言 新建express项目并自定义路由规则 如何提取页面中的公共部分? 如何提交表单并接收参数? GET 方式 POST 方式 如何字符串加密? 如何使用session? 如何使用cookie ...

随机推荐

  1. can't open the mysql.plugin table. please run mysql_upgrade to create it.

    To initialize a fresh data directory, you basically (after setting your config file) just have to ru ...

  2. 画PCB之电流与线宽的关系

    来源:(多图) 超强整理!PCB设计之电流与线宽的关系http://www.51hei.com/bbs/dpj-39134-1.html 关于PCB线宽和电流的经验公式,关系表和软件网上都很多,本文把 ...

  3. 133. leetcode-Clone Graph

    拷贝图,可以一边遍历一边拷贝 DFS class Solution { public: Node* cloneGraph(Node* node) { unordered_map<int, Nod ...

  4. scrapy爬虫之断点续爬和多个spider同时爬取

    from scrapy.commands import ScrapyCommand from scrapy.utils.project import get_project_settings #断点续 ...

  5. 【javascript】谈谈HTML5: Web-Worker、canvas、indexedDB、拖拽事件

    前言:作为一名Web开发者,可能你并没有对这个“H5”这个字眼投入太多的关注,但实际上它早已不知不觉进入到你的开发中,并且总有一天会让你不得不正视它,了解它并运用它   打个比方:<海贼王> ...

  6. [深入学习Web安全](11)之XSS玩法

    [深入学习Web安全](11)之XSS玩法 本文转自:i春秋社区 前言这篇paper,我们将学习如何优雅的调戏XSS.我们会教大家一些不常用的,但很实用的XSS姿势.我们在正式进入主题之前,先来说一下 ...

  7. Java面试题精选，大型网站系统架构你不得不懂的10个问题

    作者:JavaGuide(公众号) 下面这些问题都是一线大厂的真实面试问题,不论是对你面试还是说拓宽知识面都很有帮助.之前发过一篇8 张图读懂大型网站技术架构 可以作为不太了解大型网站系统技术架构朋友 ...

  8. Android自定义控件总结

    自定义控件分类: 1.使用系统控件,实现自定义的效果 2.自己定义一个类继承View ,如textView.ImageView等,通过重写相关的方法来实现新的效果 3.自己定义一个类继承ViewGro ...

  9. webpack严格模式!!!忽略

    1. babel5 babel: { options: { blacklist: ["useStrict"], // ... }, // ... } 2. babel6 修改.ba ...

  10. 微信小程序快捷键（Mac和windows）

    最近因为有点闲暇时间,所以抽空简单了解了小程序,因为小程序是使用微信开发者工具编码,不能使用其它编辑器,比如,Sublime,Hubilder等. 所以就百度了一下小程序快捷键,但总觉得不全,所以就去 ...