채용 공고 웹사이트: 로그인 페이지 구축

19872 단어 opinejavascriptreactwebdev

목차

Sokhavuth TIN ・ 8월 11일 ・ 2분 읽기



GitHub: https://github.com/Sokhavuth/opine-job
데노 배치: https://khmerweb-job.deno.dev/users

Deno 호스팅 플랫폼 "Deno Deploy"는 React 템플릿 엔진 및 React와 유사한 다른 템플릿 엔진만 지원하므로 Nano JSX를 템플릿 엔진으로 사용하여 애플리케이션에 대한 모든 종류의 HTML 페이지를 빌드할 수 있습니다. Nano JSX를 사용하려면 deps.ts 모듈 내부의 패키지 목록에 이 패키지에 대한 링크를 포함해야 합니다.



// deps.ts

export {
    dirname,
    fromFileUrl,
    join,
} from "https://deno.land/[email protected]/path/mod.ts";

export {
    json,
    opine,
    Router,
    serveStatic,
    urlencoded,
} from "https://deno.land/x/[email protected]/mod.ts";

export { config } from "https://deno.land/[email protected]/dotenv/mod.ts";
export { Bson, MongoClient } from "https://deno.land/x/[email protected]/mod.ts";
export { connect } from 'https://deno.land/x/[email protected]/mod.ts';
export { OpineSession, RedisStore } from "https://deno.land/x/[email protected]/mod.ts";

export { h, renderSSR } from "https://deno.land/x/[email protected]/mod.ts";


로그인 페이지를 구축하려면 다음과 같이 해야 합니다.


// views/users/login.jsx

/** @jsx h */
import { h, renderSSR } from "../../deps.ts";
import Base from "../base.jsx";


function LoginJsx(props){
    return(
        <section class="Login" >
            <link rel="stylesheet" href="/css/users/login.css" />
            <div class="wrapper">
                <div class="title">Log into the Dashboard</div>
                <form action="/login" method="post" >
                    <a>Email:</a><input type="email" name="email" value="[email protected]" required />
                    <a>Password:</a><input type="password" name="password" value="rdagfyhows"  required />
                    <a></a><input type="submit" value="Submit" />
                    <a></a><div class="info">{props.data.message}</div>
                </form>
            </div>
        </section>
    )
}

export default function Login(props){
    props.page = LoginJsx;
    const html = renderSSR(<Base data={props} />);

    return `<!DOCTYPE html>${html}`;
}




// views/base.jsx

/** @jsx h */
import { h } from "../deps.ts";


export default function Base(props){
    const Page = props.data.page;
    return(
        <html>
            <head>
                <meta charSet="UTF-8"/>
                <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
                <title>{props.data.site_title} | {props.data.page_title}</title>
                <link href="/images/siteLogo.png" rel="icon" />
                <link href="/css/style.css" rel="stylesheet" />
                <link href="/fonts/setup.css" rel="stylesheet" />
                <script src="/js/jquery.js"></script>
            </head>
            <body>
                <Page data={props.data} />
            </body>
        </html>
    )
  }




/* public/css/users/login.css */

.Login{
    width: 400px;
    margin: 100px auto 0;
}

.Login .wrapper{
    background: var(--background);
    margin-bottom: 10px;
}

.Login .title{
    text-align: center;
    font: 20px/1.5 StardosStencil, Limonf3;
    padding: 5px;
    border-bottom: 1px solid lightgrey;
}

.Login form{
    padding: 20px;
    display: grid;
    grid-template-columns: 20% auto;
    grid-gap: 5px;
    align-items: center;
}

.Login form a{
    text-align: right;
    color: black;
}

.Login form input{
    font: var(--body-font);
    padding: 2px 5px;
}

.Login form .info{
    text-align: center;
    font: var(--body-font);
}




/* public/css/style.css */

:root{
  --background-light: lightgrey;
  --background: lavender;
  --background-dark: #272727;
  --body-font: 14px/1.5 Vidaloka, OdorMeanChey;
  --link: lavender;
  --color: black;
}

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
a{
  text-decoration: none;
  color: var(--link);
}
a:hover{
  opacity: .7;
}
.region{
  max-width: 1100px;
  margin: 0 auto;
}

body{
  color: var(--color);
  font: var(--body-font);
  background: var(--background-light);
}
Angular: 콘텐츠 프로젝션 엔드투엔드
SPO600 프로젝트 2부

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage