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 })
来源:oschina
链接:https://my.oschina.net/u/3270570/blog/4306043