Deno 静态文件CSS或图片 - HelloWorld开发者社区

Deno 静态页面或图片

视频讲解 https://www.bilibili.com/video/BV1BT4y1E7Nh/?p=7

我们一起来完成以下步骤:

沿用之前的工程代码
新增Login页面和响应的controller
添加CSS资源文件,然后预览页面

Deno 静态文件CSS或图片

controllers/controller.ts

const { cwd } = Deno;

class Controller {
    static async getData(ctx: any){
        //cwd获取当前工程目录 
        //注意 ' ！== `
        ctx.render(`${cwd()}/views/index.ejs`,{
            title:"Testing",
            data:{name:"deepincoding"}
        }); 
    }

    //登录页面
    static async login(ctx: any){
        ctx.render(`${cwd()}/views/login.ejs`);
    }
}

export default Controller;

routers/index.ts

import { Router } from "https://deno.land/x/oak/mod.ts";
import Controller from "../controllers/Controller.ts";

const router = new Router();

router.get("/",Controller.getData);

router.get("/login",Controller.login);

export default router;

views/login.ejs


<html>
<head>
    <title>Deep In Coding</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Deep In Code">
    <link rel="shortcut icon" href="http://alpha-one.oss-cn-shenzhen.aliyuncs.com/static2/img/favicon.ico">
    <!--现在我们的CSS文件是在远程，要把它放到本地的工程里面-->
    <!--
    <link rel="stylesheet" href=" http://alpha-one.oss-cn-shenzhen.aliyuncs.com/static2/css/login.css">
    -->
    <!--页面并不显示成功-->
    <link rel="stylesheet" href="/login.css">
   

</head>


<div class="wrapper fadeInDown">
    <div id="formContent">
        <div class="fadeIn first">
            <img src="http://alpha-one.oss-cn-shenzhen.aliyuncs.com/static2/img/favicon.ico" id="icon" alt="User Icon" />
        </div>

        <form>
            <input type="text" id="userName" name="userName" class="fadeIn second"  placeholder="email">
            <input type="password" id="password" name="password" class="fadeIn third"  placeholder="password">
            <input type="button" class="fadeIn fourth" value="Log In" id="login-btn">
        </form>

        <div style="margin-bottom: 10px">
            <a href="#">Register</a>
        </div>
        <div>
            <a href="#">Forgot Password?</a>
        </div>
        <div class="alert alert-warning alert-dismissible fade" id="warning">
            <button type="button" class="close" data-dismiss="alert">&times;</button>
            <strong>Warning!</strong>请确认邮箱或密码
        </div>

    </div>


</div>

</html>

main.ts



import { Application,send} from "https://deno.land/x/oak/mod.ts"
import {viewEngine,engineFactory,adapterFactory} from "https://deno.land/x/view_engine/mod.ts";
import router from "./routers/index.ts";

const ejsEngine = engineFactory.getEjsEngine();
const oakAdapter = adapterFactory.getOakAdapter();

const app = new Application();
app.use(viewEngine(oakAdapter,ejsEngine));
app.use(router.routes());
app.use(router.allowedMethods());

app.use(async ctx =>{
    await send(ctx,ctx.request.url.pathname,{
        root:`${Deno.cwd()}/static`
    });
});

await app.listen({port: 8000 })