Deno 静态文件CSS或图片

Deno 静态页面或图片

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

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

  1. 沿用之前的工程代码
  2. 新增Login页面和响应的controller
  3. 添加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 Codingtitle>
    <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">        <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="#">Registera>  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 })   

你可能感兴趣的:(Deno)