nodejs问世已经好几年了,一直没有用它开发过一个项目,即使是最简单的项目,实属遗憾。
最多只是create一个http服务器,一直好奇用node做api接口应该如何实现。
学习了下网上一些博客,原来就是使用 koa-router 注册路由,添加一些 get/post 的请求。
以下是主要流程:
首先,建个文件夹,然后进入文件夹目录下, npm init ,再下载依赖项:
npm i koa
npm i koa-router
npm i koa-bodyparser
复制代码
1.新建一个 controllers 文件夹,文件夹内是接口具体实现的js文件
// controllers/users/UserController.js
class UserController {
// 用户登录
async login(ctx, next) {
// 获取请求提交的数据
let name = ctx.request.body.name || '',
pwd = ctx.request.body.pwd || '';
console.log(name, pwd);
// do something
ctx.body = {
status: true,
token: '123'
}
}
// 用户信息
async userInfo(ctx, next) {
// do something
// 假设这是请求回来的数据
let data = {
name: 'jk',
age: 25
}
ctx.body = {
status: true,
data
};
}
}
module.exports = new UserController();
复制代码
2.再建一个 router 文件夹,文件夹有一个index.js, 声明一些用到的接口。
// router/index.js
// 加载依赖
const router = require('koa-router')();
const userctrl = require('../controllers/users/UserController');
router
// 用户模块
.post('/api/user/login', userctrl.login)
.get('/api/user/userinfo', userctrl.userInfo);
// .put('xxx')
// .delete('xxx')
module.exports = router;
复制代码
3.然后就是 app.js 了
// app.js
// 加载依赖
const koa = require('koa');
const router = require('koa-router')();
const bodyParser = require('koa-bodyparser');
const apiRouter = require('./router');
const app = new koa();
// 首页
const index = router.get('/', ctx => {
ctx.response.body = 'hello world';
}).routes();
app.use(index);
app.use(bodyParser());
app.use(apiRouter.routes());
app.listen(3000);
复制代码
好了,代码都敲完了,运行下看看吧
node app.js
复制代码
打开浏览器,键入
localhost:3000
复制代码
会看到 hello, world。
再输入
localhost:3000/api/user/userinfo
复制代码
能看到如下数据
{"status":true,"data":{"name":"jk","age":25}}
复制代码
这也算是一个get请求了。前端用 ajax 直接请求数据亦可。
测试post请求的话,需要一个表单页。
我们就新建一个 demos的文件夹,里面放一些模板吧
// demos/login.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>login</title>
</head>
<body>
<input type="text" id="name">
<input type="password" id="pwd">
<button id="submit_btn">提交</button>
<script>
const xhr = new XMLHttpRequest();
document.getElementById('submit_btn').addEventListener('click', login, false);
function login() {
let data = {
name: document.getElementById('name').value,
pwd: document.getElementById('pwd').value,
}
xhr.open('POST', '/api/user/login');
xhr.setRequestHeader('Content-type', 'application/json');
xhr.send(JSON.stringify(data));
}
</script>
</body>
</html>
复制代码
然后我们在 app.js 中,添加以下代码,
// 加载 fs 模块
const fs = require('fs');
// 其他照旧
// 读取login页面
const login = router.get('/login', ctx => {
ctx.response.type = 'html';
ctx.response.body = fs.createReadStream('./demos/login.html');
}).routes();
app.use(login);
复制代码
再执行一遍
node app.js
复制代码
打开网址
localhost:3000/login
复制代码
即可看到表单页,点提交,就可看到 ajax 请求发送啦。
整个项目的结构长这样的
谢谢您的阅览,如果文章中有错误的话,请看官批评以及提醒。
参考