채용 공고 웹 사이트: 게시물 항목 편집

목차

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

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

게시물 항목을 편집하려면 MongoDB 데이터베이스에서 해당 게시물을 가져와 post.jsx 템플릿 페이지에 항목을 먼저 표시해야 합니다. 이렇게 하면 원하는 대로 모든 항목을 편집할 수 있습니다. 결과적으로 데이터베이스에서 해당 게시물을 가져오려면 게시물의 ID를 매개변수로 사용하여 경로를 정의해야 합니다. 따라서 "/users/post/edit/:id"경로에서 HTTP GET 메서드를 사용할 수 있습니다. 게시물의 항목을 업데이트하려면 동일한 경로 "/users/post/edit/:id"에서 HTTP POST 메서드를 사용할 수 있습니다.

// routes/users/post.js

import { Router } from "../../deps.ts";
const router = new Router();

import post from "../../controllers/users/post.js"

router.get("/", async (req, res) => {
    if(await req.mysession.get("user")){
        post.getPage(req, res);
    }else{ 
        res.redirect("/users");
    }
});

router.post("/", async (req, res) => {
    if(await req.mysession.get("user")){
        post.createPost(req, res);
    }else{
        res.redirect("/users");
    }
});

router.get("/edit/:id", async (req, res) => {
    if(await req.mysession.get("user")){
        post.editPost(req, res);
    }else{
        res.redirect("/users");
    }
});

router.post("/edit/:id", async (req, res) => {
    if(await req.mysession.get("user")){
        post.updatePost(req, res);
    }else{
        res.redirect("/users");
    }
});


export default router;

// controllers/users/post.js

import post from "../../views/users/post.jsx";
import postdb from "../../models/post.ts";


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;
        config.type = "post";
        config.count = await postdb.count(req);
        config.items = await postdb.getPosts(req, config.dasPostAmount);

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

    async createPost(req, res){
        if((await req.mysession.get("user")).role in {'Admin':1,'Editor':1,'Author':1}){
            await postdb.createPost(req);
        }

        res.redirect("/users/post");
    }

    async editPost(req, res){
        const config = req.mysetting();
        config.page_title = "Post Page";
        config.route = "/users/post";
        config.username = (await req.mysession.get("user")).title;
        config.type = "post";
        config.count = await postdb.count(req);
        config.items = await postdb.getPosts(req, config.dasPostAmount);
        config.item = await postdb.editPost(req);

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

    async updatePost(req, res){
        const user_role = (await req.mysession.get("user")).role;
        const userid = (await req.mysession.get("user")).id;
        const post_userid = (await postdb.editPost(req)).userid;

        if((user_role === "Admin")||(userid === post_userid)){
            await postdb.updatePost(req);
        }

        res.redirect("/users/post");
    }
}


export default new Post();

// models/post.ts


interface PostSchema {
    _id: ObjectId;
    id: string; 
    title: string;
    content: string;
    categories: string[];
    location: string;
    payable: string;
    postdate: Date;
    closedate: string;
    userid: string;
    thumb: string;
}

class Post{
    async count(req, query={}){
        const posts = req.mydb.collection<PostSchema>("posts");
        return await posts.countDocuments(query);
    }

    async createPost(req){
        const id = crypto.randomUUID();

        let categories: string[];

        if(req.body.categories.includes(',')){
            categories = req.body.categories.split(',');
        }else{
            categories = [req.body.categories]
        }

        const new_post = {
            id: id, 
            title: req.body.title,
            content: req.body.content,
            categories: categories,
            location: req.body.location,
            payable: req.body.payable,
            postdate: new Date(),
            closedate: req.body.datetime,
            userid: (await req.mysession.get("user")).id,
            thumb: req.body.thumb,
        }

        const posts = req.mydb.collection<PostSchema>("posts")
        await posts.insertOne(new_post)
    }

    async getPosts(req, amount, query={}){
        const posts = req.mydb.collection<PostSchema>("posts");
        return await posts.find(query).sort({date:-1,_id:-1}).limit(amount).toArray();
    }

    async editPost(req){
        const posts = req.mydb.collection<PostSchema>("posts");
        return await posts.findOne({id: req.params.id});
    }

    async updatePost(req){
        let categories: string[];

        if(req.body.categories.includes(',')){
            categories = req.body.categories.split(',');
        }else{
            categories = [req.body.categories]
        }

        const edited_post = {$set:{
            title: req.body.title,
            content: req.body.content,
            categories: categories,
            location: req.body.location,
            payable: req.body.payable,
            closedate: req.body.datetime,
            thumb: req.body.thumb,
        }}

        const posts = req.mydb.collection<PostSchema>("posts");
        await posts.updateOne({id: req.params.id}, edited_post);
    }
}

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="/users/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>ES6</option>
                        <option>Python</option>
                        <option>PHP</option>
                        <option>Video</option>
                    </select>
                    <input type="text" name="location" value="${item.location}" required placeholder="Location" />
                    <input type="text" name="payable" value="${item.payable}" required placeholder="Payable" />
                    <input type="datetime-local" value="${item.closedate}" name="datetime" required />
                    <input type="submit" value="Publish" />
                </div>
                <input type="text" name="thumb" value="${item.thumb}" required placeholder="Thumb" />
            </form>
        `
    }else{
        editor = `
            <form action="/users/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="location" required placeholder="Location" />
                    <input type="text" name="payable" required placeholder="Payable" />
                    <input type="datetime-local" name="datetime" required />
                    <input type="submit" value="Publish" />
                </div>
                <input type="text" name="thumb" required placeholder="Thumb" />
            </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 }`;
}