koa【07】Koa2-static静态资源

 目录概览：

 

 

 

app.js

/*
  koa 静态资源中间件/静态web服务 koa-static 的使用：
  1、安装 ： npm i --save koa-static
  2、引入 ： const static = require("koa-static")
  3、配置中间件 ：  app.use(static("static" ));
 */

var Koa = require("koa");
var router = require("koa-router")();
var views = require("koa-views");
var common = require("./model/common.js");
const static = require("koa-static");

app = new Koa();

// 引用ejs模板引擎
app.use(views("views", { extension: "ejs" }));

// 配置静态web服务的中间件,
// 例如我们访问 http://127.0.0.1:3004/css/basic.css ,首先去 static 找，找到就返回相对于的文件并不再继续往下找，如果找不到就继续 next() 执行;
app.use(static("./static"));

// 静态目录可以配置多个，上一个目录找不到就找下一个已配置的目录，在 static 找不到就往下 public 找。
app.use(static("./public"));

// 或者这样写
// app.use(static(__dirname+"/static"))

router.get("/", async (ctx) => {
  await ctx.render("index");
});
router.get("/news", (ctx) => {
  ctx.body = "news ye";
});

router.post("/doAdd", async (ctx) => {
  //   原生 nodejs 中获取 koa 表单的数据
  var data = await common.getPostData(ctx);
  console.log(data);
  ctx.body = data;
});

app.use(router.routes()).use(router.allowedMethods());
app.listen(3004);
console.log("http://localhost:3004");

 

views/index.ejs 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/basic.css">
    <link rel="stylesheet" href="css/common.css">
    <title>index.ejs 文件</title>
</head>

<body>
    <form action="/doAdd" method="post">
        <h2 class="title">登录</h2>
        用户名：<input type="text" name="username" id="username">
        <br><br>
        密　码：<input type="password" name="password" id="password">
        <br><br>
        <input type="submit" value="提交">
        <br><br>
        <h3 class="h3">测试文字</h3>
        <img src="images/a11.jpg" alt="">
        <br>
        <img src="images/a14.jpg" alt="">
    </form>
</body>


</html>

 

 

 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/basic.css">
    <link rel="stylesheet" href="css/common.css">
    <title>index.ejs 文件</title>
</head>

<body>
    <form action="/doAdd" method="post">
        <h2 class="title">登录</h2>
        用户名：<input type="text" name="username" id="username">
        <br><br>
        密　码：<input type="password" name="password" id="password">
        <br><br>
        <input type="submit" value="提交">
        <br><br>
        <h3 class="h3">测试文字</h3>
        <img src="images/a11.jpg" alt="">
        <br>
        <img src="images/a14.jpg" alt="">
    </form>
</body>


</html>
posted @ 2021-01-26 16:12  半遮  阅读(424)  评论(0)  编辑  收藏  举报