【node】13、koa路由get请求post请求案例

效果图如下：
在这里插入图片描述
新建文件夹初始化: 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>

舜岳

发布了218 篇原创文章 · 获赞 35 · 访问量 13万+

私信关注

【node】13、koa路由get请求post请求案例

猜你喜欢