구인 공고 웹 사이트: 건물 게시물 페이지

17547 단어 opinjavascriptreactwebdev

목차

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



GitHub: https://github.com/Sokhavuth/opine-job
Deno 배포: https://khmerweb-job.deno.dev/users/post

게시물 페이지는 웹사이트에 게시될 채용 제안에 대한 게시물을 작성하는 곳입니다. 따라서 https://ckeditor.com/ckeditor-5/online-builder/에서 빌드하고 다운로드할 수 있는 CKEditor 5와 같은 리치 텍스트 편집기가 필요합니다.

클라이언트 측에서 약간의 상호 작용이 필요하므로 이 게시물 페이지를 수화하거나 CKEditor 5를 사용하여 양식을 문자열로 페이지에 포함할 수 있습니다. 이렇게 하면 양식이 클라이언트 측에 렌더링되고 바닐라 JavaScript를 사용하여 범주 입력 위젯에 포함할 범주를 드롭다운 위젯에서 선택할 수 있습니다.


// controllers/users/post.js

import post from "../../views/users/post.jsx";


class Post{
    async getPage(req, res){
        const config = req.mysetting();
        config.page_title = "Post Page";
        config.route = "/users/post";
        config.username = (await req.mysession.get("user")).title;

        const html = await post(config);
        res.send(html);
    }
}


export default new Post();




// views/users/post.jsx

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


function PostJsx(props){
    const item = props.data.item;
    let editor = ``

    if(item){
        editor = `
            <form action="/admin/post/edit/${item.id}" name="form" method="post" 
                onSubmit="submitForm(event)">
                <input type="text" name="title" value="${item.title}" required 
                placeholder="Post title" />
                <textarea id="editor" name="content" >${item.content}</textarea>
                <input type="text" name="categories" value="${item.categories.toString()}" required 
                placeholder="Categories" />
                <div class="wrapper"> 
                    <select id="category" onChange="getCategory()">
                        <option>Select a category</option>
                        <option>News</option>
                        <option>Movie</option>
                        <option>Entertainment</option>
                        <option>Sport</option>
                    </select>
                    <input type="text" name="thumb" value="${item.thumb}" required 
                    placeholder="Thumbnail" />
                    <input type="datetime-local" value="${item.date}" name="datetime" required />
                    <input type="submit" value="Publish" />
                </div>
            </form>
        `
    }else{
        editor = `
            <form action="/admin/post" name="form" method="post" onSubmit="submitForm(event)">
                <input type="text" name="title" required placeholder="Post title" />
                <textarea id="editor" name="content"></textarea>
                <input type="text" name="categories" required placeholder="Categories" />
                <div class="wrapper"> 
                    <select id="category" onChange="getCategory()">
                        <option>Slect a category</option>
                        <option>ES6</option>
                        <option>Python</option>
                        <option>PHP</option>
                        <option>Video</option>
                    </select>
                    <input type="text" name="thumb" required placeholder="Thumbnail" />
                    <input type="datetime-local" name="datetime" required />
                    <input type="submit" value="Publish" />
                </div>
            </form>
        `
    }

    return(
        <section class="Post">
            <script src="/js/ckeditor/ckeditor.js"></script>
            <script src="/js/addCategory.js"></script>
            <link rel="stylesheet" href="/css/users/post.css" />

            <div dangerouslySetInnerHTML={{__html: `
                ${editor}
            `}}/>

            <script src="/js/ckeditor/config.js"></script>
        </section>
    )
}

export default function Post(props){
    props.pageInner = PostJsx;
    const html = renderSSR(<Index data={ props } />);

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




/* public/css/users/post.css */

.Index .main .content form .ck-editor__editable{
    min-height: 305px;
}

.Index .main .content form .wrapper,
.Index .main .content .wrapper{
    display: grid;
    grid-template-columns: 20% 32.5% 32.5% 15%;
}

.Index .main .content form input,
.Index .main .content form select,
.Index .main .content .wrapper input,
.Index .main .content .wrapper select{
    width: 100%;
    font: var(--body-font);
    padding: 2px 5px;
}

.Index .main .content .wrapper div input{
    height: 100%;
}

.Index .main .content form .submit{
    background: lavender;
    text-align: center;
    color: black;
    border: 1px solid grey;
    padding: 5px;
}




// public/js/addCategory.js 

function getCategory(){
    const category = $('#category option:selected').text()
    $('select').prop('selectedIndex',0)
    let categories = $('[name=categories]').val()
    if(categories === ''){
        categories += category
    }else{
        categories += (`, ${category}`)
    }

    $('[name=categories]').val(categories)
}
어둡고 밝은 테마 토글러 + YT 채널
commitlint 소개

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

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