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

posted on 2019-03-08 16:33  freeliver54  阅读(257)  评论(0)  编辑  收藏  举报

导航