效果图如下:
新建文件夹初始化: npm init -y
安装koa服务模块:
npm install koa -S
安装koa静态路由模块:
npm install koa-static -S
安装koa解析post数据模块:
npm install koa-bodyparser -S
安装path路径模块:
npm install path -S
安装koa-ejs模块:
npm install koa-ejs -S
创建app.js主执行文件:
app.js文件如下
const Koa = require('koa'); //koa服务模块
const static = require('koa-static'); //静态路由模块
const router = new require('koa-router')(); //路由模块
const bodyparser = require('koa-bodyparser'); //解析post数据模块
const path = require('path'); //路径模块
const render = require('koa-ejs'); //koa-ejs模块
const app = new Koa(); //开启服务
const fs = require('fs'); //文件处理模块
//配置koa-ejs模板引擎
render(app,{
root:path.join(__dirname, 'view'),
layout:'template', //设置view目录中模板
viewExt: 'html', //设置view目录中的后缀名 默认是html
})
//解析post数据
app.use(bodyparser());
//配置路由
app.use(router.routes()).use(router.allowedMethods());
//为public目录中的静态资源目录public自动配置路由
app.use(static('./public'));
//点击订餐的逻辑
router.post('/dingcan',async cxt=>{
//获取post传递的数据
const {phone,food} = cxt.request.body
//保存数据到data目录中
cxt.body = await new Promise(res=>{
fs.writeFile(`./data/${phone}.txt`,JSON.stringify({phone,food}),(err)=>{
if(err)return
res('订单成功,请耐心等待')
})
})
});
router.get('/all',async cxt=>{
const result = await new Promise(resolve=>{
//查询data内所有的文件
fs.readdir(`./data`,(err,data)=>{
if(err)return
data = data.map(item=>item.split('.')[0])
resolve(data)
})
})
//渲染showAll.html页面,传递查询到的数据result
await cxt.render('showAll',{result})
});
router.get('/all/:phone',async cxt=>{
//获取get传递的数据
const {phone} = cxt.params
const result = await new Promise(resolve=>{
//查询data内对应的txt文件
fs.readFile(`./data/${phone}.txt`,(err,data)=>{
if(err)return
resolve(JSON.parse(data.toString()))
})
})
//渲染showOne.html页面,传递查询到的数据result
await cxt.render('showOne',result)
});
app.listen(5000,()=>{
console.log('5000端口成功运行')
})
public目录文件夹如下:
index.html
发送post请求
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>订餐</title>
<link rel="stylesheet" href="/css/index.css">
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<div class="box">
<h2>微型订餐系统</h2>
客户:<input type="text" id="isphone"><br>
美食:<input type="text" id="food"><br>
<input type="submit" value='点我订餐' id="btn"><br>
<a href="/all">查看所有订单</a>
<script>
var oBtn = document.getElementById('btn'),
oPhone = document.getElementById('isphone'),
oFood = document.getElementById('food');
oBtn.onclick = function () {
//jquery向后台发起post请求 把手机号和美食 传给后端
$.post(
"/dingcan",
{phone: oPhone.value,food: oFood.value},
(data)=>{
alert(data)
oPhone.value = ''
oFood.value = ''
}
);
}
</script>
</div>
</body>
</html>
/css/index.css
.box{
width:400px;
height: 250px;
margin: 10px;
padding:20px;
background-color: #ebff94;
box-shadow: 0 0 20px 0 #ccc;
}
input{
margin:5px 0;
}
view组件模块如下
template.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>订单详情</title>
<link rel="stylesheet" href="/css/index.css">
</head>
<body>
<%- body %>
</body>
</html>
showAll.html
<div class="box">
<h2>所有订单</h2>
<ul>
<% for(let i=0;i<result.length;i++){ %>
<li>用户 <a href="/all/<%= result[i] %>"><%= result[i] %></a> 的用户已订餐</li>
<% } %>
</ul>
</div>
showOne.html
<div class="box">
<h2>用户“ <%= phone %> ”的订单</h2>
<p>你点的菜是:<%= food %></p>
<a href="/">点击返回首页</a>
</div>