（一）使用ctx.url判断路由并返回页面
通常我们会直接根据请求的路由地址，返回对应的页面，比如
const Koa = require('koa');
const app = new Koa();
app.use(async (ctx)=> {
if (ctx.url == '/') {
ctx.body = `
<form action="/sumit" method="post">
<p>First name: <input type="text" name="fname" /></p>
<p>Last name: <input type="text" name="lname" /></p>
<input type="submit" value="Submit" />
</form>
`;
} else if (ctx.url == '/sumit') {
ctx.body = `<h1>success</h1>`;
} else {
ctx.body = `<h1>error</h1>`;
}
})
app.listen(3000, ()=>{console.log('[demo03] server is starting ...')})
在以上的例子中直接通过ctx.body返回html页面，这样的结构极不利于维护，因此需要将后端代码和前端代码分离
（二）前后端分离
实现思路是：需要一个文件夹专门放Html页面；在js文件中，需要一个函数专门读取路由，一个函数根据路由读取页面，最后再由ctx.body返回
1.需要新建一个文件夹，存放html页面
image.png
2.新建js文件，引入fs
在函数体内使用await 调用route函数，并传入url
const Koa = require('koa');
const fs = require('fs');
const app = new Koa();
app.use(async (ctx)=> {
let html = await route(ctx.request.url)
ctx.body = html
})
app.listen(3000, ()=> {console.log('[demo04] server is starting ...')})
3.route函数判断路径
async function route(url) {
// 默认页面
let page = '404.html'
switch (url) {
case '/':
page = 'index.html';
break;
case '/submit':
page = 'submit.html';
}
return await render(page)
}
4.render函数读取html页面
function render(page) {
return new Promise((resolve, reject)=> {
let pageUrl = `./pages/${page}`;
fs.readFile(pageUrl, 'binary', (err, data) => {
if(err){
reject(err)
} else {
resolve(data)
}
})
})
}
（三）完整的代码
image.png
