美文网首页Koa
Koa(一、get传值,路由,中间件,洋葱图,ejs)

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

作者: 强某某 | 来源:发表于2018-06-12 15:50 被阅读412次

回调相关案例

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

相关文章

网友评论

    本文标题:Koa(一、get传值,路由,中间件,洋葱图,ejs)

    本文链接:https://www.haomeiwen.com/subject/zgfreftx.html