koa static静态资源

我会带着你远行 2021-07-25 00:37 445阅读 0赞

1、安装
    	cnpm install koa-static --save
    	
    2、引入
    	const static=require('koa-static');
    	
    3、配置中间件
    	可配置多个静态资源
    	app.use(static('static')); 即外部文件可直接写static下的路径引入
    
    4、使用
    	引入static下的路径,而非绝对路径

代码示例:  
![在这里插入图片描述][2020052209175797.png]  
server.js:

const Koa=require('koa');
    const Router=require('koa-router');
    const views=require('koa-views');
    const commonm=require('./public/common');
    const bodyParser=require('koa-bodyparser');
    const static=require('koa-static');
    
    
    const app=new Koa();
    const router=new Router();
    
    //配置模板引擎
    // app.use(views('views',{extension:"ejs" })); //文件后缀必须为.ejs
    app.use(views('views',{ map:{ html:'ejs'}}));
    
    //配置static
    app.use(static('static'));
    
    app.use(router.routes())
        .use(router.allowedMethods());
    
    
    //公共数据
    app.use(async(ctx,next)=>{ 
        ctx.state={ 
            username:'jeff2'
        };
        await next();
    })
    
    app.use(bodyParser());
    
    router.get('/',async(ctx,next)=>{ 
        await ctx.render("index",{ 
            title:'jeff',
            info:"<h2 style='color:red'>渲染</h2>"
        });
    })
    
    router.get('/news',async(ctx,next)=>{ 
        
        await ctx.render('news',{ 
            arr:[1,2,3,4]
        })
    })
    
    //路由中间件
    router.get('/det',async(ctx,next)=>{ 
        // ctx.body='det1';
        console.log('aaa');
        await next();
    })
    
    router.get('/det',async(ctx,next)=>{ 
        ctx.body='det2';
      
    })
    
    router.post('/info',async (ctx,next)=>{ 
        // var data=await commonm.Posts(ctx);
        var data=ctx.request.body.name;
        ctx.body=data;
    })
    
    router.get('/msg',async(ctx,next)=>{ 
        ctx.body=ctx.query.id;
    })
    
    //动态路由
    router.get('/home/:aid/:aic',async(ctx,next)=>{ 
        ctx.body=ctx.params.aid+ctx.params.aic;
    })
    
    app.listen(3000,()=>{ 
        console.log('this koa server is running at http://localhost:3000/');
    })

index.html:

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <link rel="stylesheet" href="css/index.css">
    </head>
    <body>
        <div>
            ejs模板
            <h2 class='tit'><%=title%></h2>
            <%- include('../public/test.html'); %>
            <h3 class='tit'>jefff</h3>
            <%-info%>
            <img src="img/1.jpg" alt="">
        </div>
    </body>
    </html>

[2020052209175797.png]: /images/20210724/9db93183e229418ab5cdcc5fbe6d5ea8.png

发表评论取消回复

表情：

评论列表（有 0 条评论，445人围观）

还没有评论，来说两句吧...

相关阅读

相关 Koa2 中如何处理静态资源？

Koa2 中如何处理静态资源？当使用Koa2处理静态资源时，可以使用`koa-static`中间件。下面是一个更详细的示例，演示了如何在Koa2中处理静态资源。首先

╰+攻爆jí腚メ/ 2024年03月08日 08:00/ 0 赞/ 63 阅读

相关 koa设置静态资源以加载html页面

koa是express之后又一个node框架，它可以很方便的构建http服务。一般，我们看到的koa是配合koa-router路由来做服务端请求控制，大部分是

冷不防/ 2023年01月17日 07:45/ 0 赞/ 110 阅读

相关 static静态变量与static静态方法

什么是静态变量最初接触main方法，它用static修饰，用static修饰方法叫静态方法，用static修饰变量叫静态变量。静态变量与成员变量一样都是定义在方法外

痛定思痛。/ 2022年10月29日 13:21/ 0 赞/ 210 阅读

相关 springboot 读取静态资源static优先级问题

1、发现问题在项目开发中，或许我们需要存放相关静态资源到springboot 项目中，我们一般都习惯存放在 resources/static 目录下，通过http://

冷不防/ 2022年10月09日 15:20/ 0 赞/ 127 阅读

相关 SpringMVC static静态资源访问

学习参考自[易百教程][Link 1] 1、程序目录如下： ![70][] 2、web.xml <?xml version="1.0" encoding="UT

Dear 丶/ 2022年05月18日 09:41/ 0 赞/ 268 阅读

相关 koa框架会用也会写—(koa-view、koa-static)

Koa中常用的中间件： koa-session：让无状态的http拥有状态，基于cookie实现的后台保存信息的session koa-mysql:封装了需要

Bertha 。/ 2022年04月23日 02:36/ 0 赞/ 238 阅读

相关如何使用Koa搭建静态资源文件服务器

1.node.js Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境，执行Javascript的速度非常快，性能非常好。 Nod

朴灿烈づ我的快乐病毒、/ 2022年04月22日 16:24/ 0 赞/ 957 阅读

相关 app.use(express.static('目录'))静态资源文件

1.首先要理解什么是静态资源文件？通俗点来说，静态资源文件就是，不同用户访问到的都是同一份内容，不管是张三，李四，王五，访问到的内容都是一样的， // 静态资源文

怼烎@/ 2022年04月22日 06:38/ 0 赞/ 213 阅读

相关 koa2中静态资源的配置

安装koa-static [https://www.npmjs.com/package/koa-static][https_www.npmjs.com_package_k

ゝ一纸荒年。/ 2021年12月02日 01:34/ 0 赞/ 232 阅读

相关 koa static静态资源

1、安装 cnpm install koa-static --save 2、引入 const static=require('k

我会带着你远行/ 2021年07月25日 00:37/ 0 赞/ 446 阅读