Deno 靜態頁面或圖片
視頻講解 https://www.bilibili.com/video/BV1BT4y1E7Nh/?p=7
我們一起來完成以下步驟:
沿用之前的工程代碼 新增Login頁面和響應的controller 添加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">×</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 })