Deno静态文件CSS或图片

  • Z时代
  • 2024-01-10
  • 分类：综合

编程

Deno 静态页面或图片

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

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

  1. 沿用之前的工程代码

  2. 新增Login页面和响应的controller

  3. 添加CSS资源文件,然后预览页面

#controllers/controller.ts

const { cwd } = Deno;
classController{
staticasync getData(ctx: any){
//cwd获取当前工程目录 
//注意 " ！== ` ctx.render(`${cwd()}/views/index.ejs`,{ title:"Testing", data:{name:"deepincoding"}  });  } //登录页面staticasync login(ctx: any){  ctx.render(`${cwd()}/views/login.ejs`);  } } exportdefault 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); exportdefault router;

#views/login.ejs

<html>
<head>
<title>Deep In Coding</title>
<metacharset="utf-8">
<metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><metaname="description"content="Deep In Code"><linkrel="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">  --><!--页面并不显示成功--><linkrel="stylesheet"href="/login.css"></head><divclass="wrapper fadeInDown"><divid="formContent"><divclass="fadeIn first"><imgsrc="http://alpha-one.oss-cn-shenzhen.aliyuncs.com/static2/img/favicon.ico"id="icon"alt="User Icon" /></div><form><inputtype="text"id="userName"name="userName"class="fadeIn second"placeholder="email"><inputtype="password"id="password"name="password"class="fadeIn third"placeholder="password"><inputtype="button"class="fadeIn fourth"value="Log In"id="login-btn"></form><divstyle="margin-bottom: 10px"><ahref="#">Register</a></div><div><ahref="#">Forgot Password?</a></div><divclass="alert alert-warning alert-dismissible fade"id="warning"><buttontype="button"class="close"data-dismiss="alert">&times;</button><span>Warning!</span>请确认邮箱或密码 </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静态文件CSS或图片 的全部内容， 来源链接： utcz.com/z/517265.html

回到顶部