异步调用

103 阅读1分钟

app:

const Koa = require('koa');
const Router =require('koa-router');
const koaBody = require('koa-body');
const koaCors=require('koa-cors');
const tagRouter =require("./routers/tag.router");
const userrouter =require("./routers/user.router");
const contentrouter =require("./routers/content.router");
const jwtrouter=require("./routers/jwt.router");
//引入内部方法或属性
//const{方法或属性名} =require('koa');

//创建对象
const app = new Koa();
app.use(koaCors());
app.use(koaBody(
 { strict:false}
));

const router =new Router();
// tagrouter调用
tagRouter(router);
userrouter(router);
contentrouter(router);
jwtrouter(router);

app.use(router.routes());
app.use(router.allowedMethods({}));

app.listen(3000,()=>{
  console.log("http://localhost:3000")
});

tag.html:

const {tagmodel} = require("../mongodb");
const {success,fail}=require("../joast");
module.exports = function (router) {
    // 查询
    router.get("/tag", async ctx => {
        try{
            const data=await tagmodel.find({})
            return success(ctx,data);
        }catch(error){
            return fail(ctx,error)
        }
    })
    // 添加
    router.post("/tag", async ctx => {
        try{
            const data=await tagmodel.create(ctx.request.body);
            return success(ctx,data);
        }catch(error){
            return fail(ctx,error)
        }
    })
    // 删除
    router.delete("/tag",async ctx=>{
        try{
            const data=await tagmodel.deleteOne(ctx.request.body);
            return success(ctx,data);
        }catch(error){
            return fail(ctx,error)
        }
    })
}

数据存在于http://localhost:3000/tag

异步调用: tag.html页面:

<html lang="Zn-cn">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>标签管理</title>
<link rel="stylesheet" href="./css/normalize.css">      <!--重置  --> 
<link rel="stylesheet" href="./css/bootstrap.min.css">
<link rel="stylesheet" href="./css/tag.css">
</head>
<body> 
<!-- 顶部导肮 -->
<!-- 。。。。。。。。。。 -->
<!-- 顶部导肮 -->

<div class="container">
    <div class="row">
    <span>Tag标签管理</span>
    <hr>

    </div>
    <div class="row">
      <form action="" class="form-inline">
          <div class="col-md-10">
     <input type="text" name="" id="" class="form-control">
          </div>
          <div class="col-md-2">
     <button>添加</button>
          </div>
      </form>    
    </div>
    <div class="row">
      <div class="col-xs-12">

      </div>
    </div>
</div>
<script src="./js/jquery-3.3.1.min.js"></script>
<script src="./js/bootstrap.min.js"></script>
<script >
    $(function(){
        $.ajax({
            url:"http://localhost:3000/tag",
            type:"GET",
            success:function(res){
            //正确信息
              console.log(res);
              if(res.status===200){
                const data=res.data;
                let html="";
                //循环遍历出来
                for (let index = 0; index < data.length; index++) {
                    const element = data[index];
                    html+=element.text+"&nbsp  &nbsp";
                }

                $(".col-xs-12").html(html);
              }
            },
            error:function(err){
            //错误信息
                  console.log(err);
            }
        })
    })
</script>
</body>
</html>

异步调用效果:

2.webp