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+"   ";
}
$(".col-xs-12").html(html);
}
},
error:function(err){
//错误信息
console.log(err);
}
})
})
</script>
</body>
</html>
异步调用效果: