[轉]分別使用Node.js Express 和 Koa 作簡單的登陸頁

時間 2019-11-09

標籤分別使用 node.js node express koa 簡單登陸欄目 Node.js 简体版

原文原文鏈接

本文轉自：https://blog.csdn.net/weixin_38498554/article/details/79204240node

剛剛學了Koa2，因爲學的不是很深，並無感覺到網上所說的Koa比Express好用多少，今天作了一個登陸小demo，比較了一下兩種框架的用法，作出記錄。
HTML代碼用了簡單的form表單，提交數據採用的是ajax，接口用的就是本地node接口，先上代碼啦：
HTML部分：ajax

<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);
}express

})
})
</script>

Node.js代碼—express.js跨域

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

//跨域方法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.jscors

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());koa

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

展現一下實現效果：async

在終端裏這樣輸入，這裏我使用的編輯器是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 版權聲明：本文爲博主原創文章，轉載請附上博文連接！

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。