Koa(一、get传值,路由,中间件,洋葱图,ejs)

回调相关案例

async function test(){
    return "测试";
}
console.log(test()) //Promise { '测试' }

function test(){
    return "测试";
}
console.log(test()) //'测试' 

async function test(){
    return "测试";
}
let p=test();
p.then((data)=>{
    console.log(data)//测试
})
let fs=require("fs");
async function readTxt(){
   let info=await new Promise((resolve,reject)=>{
        fs.readFile('./package.json',function(err,data){
            resolve(data.toString());
        })
   })
   console.log(info);//输出文件内容
}
readTxt();
说明:await必须使用在async中,async返回的是一个promise。被async修饰的函数,是异步函数,不会阻塞下面代码的执行。

Koa

获取get传值

  • 接收get传值,ctx有query(格式话好的参数对象)和querystring(请求字符串)两种方式,两种都是属性不是方法
  • 也可以通过ctx.requset.query/querystring获取
  • 还可以通过ctx.url/ctx.request.url间接获取('/?aid=30&name=zhangsan')

动态路由

router.get('/news/:aid',async(ctx)=>{
    //http://127.0.0.1:3000/news/asfnca
    console.log(ctx.params);//{ aid: 'asfnca' }
    ctx.body="新闻页面"+ctx.params.aid;
})
router.get('/news/:aid/:cid',async(ctx)=>{
    //http://127.0.0.1:3000/news/asfnca/asdfsa
    console.log(ctx.params);//{ aid: 'asfnca', cid: 'asdfsa' }
    ctx.body="新闻页面"+ctx.params.aid+".."+ctx.params.cid;
})

中间件

  • 应用级中间件代码位置不论在哪里,都是先执行完应用级中间件才开始走路由和路由级中间件
  • 匹配路由之前或匹配之后所完成的一系列的操作。
const koa = require('koa'),
    router = require('koa-router')(),
    app = new koa();

//只写一个参数,表示匹配所有路由
app.use(async (ctx, next) => {
    console.log(Date.now())
    //应用级中间件
     next();
     //错误处理中间件
     if(ctx.status==404){
         ctx.status=404;
         ctx.body="404";
     }
})
//配置路由
router.get('/', async (ctx,next) => {
    ctx.body = "首页";
    //路由级中间件
    await next();
})
router.get('/news/:aid', async (ctx) => {
    ctx.body = "新闻页面";
})


app.use(router.routes())
    .use(router.allowedMethods());
app.listen(3000);

洋葱图

koa洋葱图.png

ejs模板

  • 所有模板引擎使用都需要预先安装koa-views
  • cnpm i koa-views --save
  • cnpm i ejs --save

模板引擎引入有两种方式

方式一:
views=require('koa-views')
app.use(views('views',{
    extension:'ejs'
}));
说明:该种方式设置模板引擎必须设置模板文件后缀名为.ejs
方式二:
app.use(views('views',{map:{html:'ejs'}}));
说明:该种方式配置模板,后缀名是.html

ejs模板语法

index.ejs:
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <!-- 引入外部头部 -->
    <% include public/header.ejs %>
        <ul>
            <% for(let a=0;a<arr.length;a++){%>
                <li>
                    <%=arr[a]%>
                </li>
                <%}%>
        </ul>
        <!-- 绑定html字符串 -->
        <%-htmls%>
            判断语句
            <%if(flag) { %>
                <div>true</div>
                <%}else{%>
                    <div>false</div>
                    <%}%>

        <!-- 公共数据 -->
        <%=names%>
        <%=age%>
</body>
</html>

header.ejs:
<h2><%=title%></h2>

index.js中的数据配置:
全局数据:
//ejs渲染公共数据
app.use(async(ctx,next)=>{
    ctx.state={
        names:"qiang",
        age:12
    }
    await next();
})
局部数据:
//渲染界面并且传递
await ctx.render('index',{
        title:"标题信息",
        arr:["a","b","c","d"],
        htmls:"<h2>H2标签</h2>",
        flag:true
});
ejs截图.png
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Koa2-blog 2018-1-5 更新教程(新增上传头像、新增分页、样式改版、发布文章和评论支持markdow...
    wclimb阅读 13,047评论 1 53
  • 框架提出的背景 ES6/7带来的变革 自ES6确定和ES7中async/await开始普及,Node的发展变得更加...
    宫若石阅读 12,701评论 1 14
  • 1.简书 koa是由Express原班人马打造,致力于成为一个更小、更富有表现力、更健壮的Web框架。使用koa编...
    不去解释阅读 7,570评论 0 11
  • 主动改变,比被动选择重要,不要被宿命奴役,永远不要丧失在生活里的自主权。无论什么途径,我们都不应该懦弱,应该让灵魂...
    有趣又有料阅读 1,625评论 0 1
  • 将素材新建合成,然后就要创建蒙版 对复制的新素材应用效果 首先应用风格化特效下的CC Threshold RGB ...
    Adosen阅读 2,990评论 0 1

友情链接更多精彩内容