（一）使用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)
            }
        })
    })
}