掲示板#6/Createの作成

20680 ワード
JavaScript Node mysql テキストリンク

🧐 概要


Node.js CRUD掲示板の作成を整理します.
Createから

📋 文章を書くページ

<!DOCTYPE html>
<html>
  <head>
    <title>새 글</title>
    <link rel='stylesheet' href='../../../css/style.css' />
  </head>
  <body>
    <div class="ContentField">
      <form action="/insert" method="post">
        <table frame=void>
          <tr>
             <td colspan="2" style="height:10%; padding-top:3vh;">
               <input type="text" name="title" placeholder="제목을 작성해주세요!" > 
            </td>
          </tr>
          <tr>
            <td>
              <input type="button" id = "<%=id%>" value="파일 업로드" onclick="openChild(this)">
              <span id="sInput"></span>
              <a href="/uploadedFileDelete/<%=id%>">
              <input type="button" value="업로드 취소" onclick="deleteFile()"></a>
            </td>
          </tr>
          <tr>
            <td colspan="2" style="padding-top:20px;">
               <textarea name="content" placeholder="내용을 작성해주세요!" required ></textarea>
            </td>
          </tr>
          <tr>
            <td colspan="2" style="text-align:right;">
                <button type="submit">글 쓰기</button>
            </td>
          </tr>
      </table>
      </form>
    </div>
  </body>
</html>
簡潔に書くhtml.
可読性を向上させるには、コンテンツの一部を削除して作成します.
中間テーブルタグで、[ファイルをアップロード](Upload File)ボタンをクリックすると、サブウィンドウが開きます.
このウィンドウにファイルをアップロードできます.
このロジックでは、POSTのIDでアップロードされるファイルの名前を変更する必要があります.
サーバ側から渡された最後の記事IDをパラメータとして使用します.
파일 업로드는 따로 다른 글에 작성합니다.
タイトルとコンテンツをサーバに送信する必要があります.
postを用いてformタグにmethodを作成した.
inputラベルの値は、各設定のname値で表され、サーバに渡されます.
현재 업로드된 파일 중 이미지가 있는 경우 사용자의 선택에 따라 보이거나,
보이지 않도록 해둔 상태입니다.
개선점으로는 velog처럼 복사/붙여넣기로 내용에 이미지를 첨부하는 것입니다.
지금은 수동으로 업로드 버튼을 눌러야하고, 사용자가 원하는 위치에
이미지를 삽입할 수 없습니다.

📋 ルータの接続

router.get('/board/write/:idx',function(req,res,next){
  if (typeof req.session.displayName!=='undefined'){ // 만약 로그인한 유저라면
    res.render('boardHTML/write.html',{id:req.params.idx});
    // 글 쓰기 html로 이동합니다.
  }else{ // 로그인을 하지 않았다면
    res.send("<script>alert('로그인을 해주시기 바랍니다.'); window.history.back();</script>")
    // alert를 발생시키고 이전 페이지로 이동합니다.
  }
})
:idxは上記の最後の文章IDです.
掲示板をレンダリングするときにサーバ側から渡された値.
画面で[書き込み](Write)ボタンをクリックすると、ID値がサーバにパラメータとして渡されます.
ログインしていない場合、セッションのdisplayNameのtypeは定義されていません.
ログインしていないアラートが表示され、windowが表示されます.history.back()関数を使用して前のページに戻ります.

📋 POSTルータ-DBへ値を渡す

router.post('/insert',(req,res)=>{
  if (typeof req.session.displayName!=='undefined'){
    // 로그인하지 않은 사용자가 URL을 직접 입력하여 접근하는 것을 방지합니다.
    
    const title = req.body.title;
    const content = req.body.content;
    // form 태그로부터 제목, 내용 값을 전달받습니다.
    
    const author = req.session.displayName;
    // 작성자는 로그인한 유저의 ID 입니다.
    
    let filepath = '';
    if (typeof req.session.filepath=='undefined'){
      filepath=null;
    }else{
      filepath=req.session.filepath;
    }
    // 작성 중인 글에 파일을 첨부할 때, 업로드 로직에서 파일 경로를 보냅니다.
    // 만약 첨부된 파일이 없다면 null값으로 초기화합니다.
    
    if (title.length==0 || content.length==0){
     res.send("<script>alert('제목 또는 내용에 아무것도 작성되지 않았습니다.'); window.history.back()</script>")
    } 
    // 작성된 내용이 없다면 이전 페이지로 돌아가게끔 합니다.
  
    else{
      const authSql = 'SELECT nick FROM users WHERE id=?';
      const insertSql = 'INSERT INTO board (title, content, name, regdate, modidate, nick, uploadfilepath) VALUES(?,?,?,NOW(),NOW(),?,?)'
      // 기본적으로 쿼리문은 하드코딩하고 있지 않습니다.
      // query 함수에 SQL 문을 직접 쓰지 않으며, 
      // 전달되어야할 값은 ? 처리로 넘기도록 하고 있습니다.
      
      conn.getConnection((err,connection)=>{
        if (err) throw err;
        const authQuery = connection.query(authSql,[author],function(err,rows){
          // 접속한 유저가 실제로 DB에 있는지 파악하여 부정한 글 쓰기를 방지합니다.
          
          if (err){
            throw err;
          }else{
            const insertQuery=connection.query(insertSql,[title,content,author,rows[0].nick,filepath],function(err,rows){
              if (err){
                throw err;
              }else{
                res.send("<script>alert('작성되었습니다.'); document.location.href='/board/list'</script>")
              }
            })
          }
          req.session.filepath='';
          connection.release();
        })
      })     
    }
  }else{
    res.send("<script>alert('비정상적인 접근입니다.'); document.location.href='/info'</script>")
    req.session.filepath='';
  }
})
まず,大きなif文を用いて,ログインしていないユーザがURLにアクセスすることを防止した.
非ログインユーザーの場合は、そのユーザーをホームページに送信します.
formラベルの値はreqです.body.(nameプロパティ).
これにより、タイトルとコンテンツが渡され、セッション値によってユーザIDが受信されます.
その後,現在の文書を作成しているユーザが実際にDBに属するユーザであることを確認する.
必要な値をデータベースに挿入します.
一番気になるのはハードコーディングをしないことです.
query関数はクエリ文を変数として渡します.値も?プロセッサに送信します.
이제와서 보니 auth 작업이 꼭 필요할까? 라는 생각이 드네요...
개선점은 async await 문법을 통한 가독성 향상이 있습니다.
auth 작업을 단순히 session 값을 통해 진행하는데, 더 확실한 방법이 있는지에
대한 고민이 필요한 것 같습니다.

🎯 構造図



🙄 ポスト


最初はデータベースに接続して値を渡すコードだけです.
自分でテストして...他の人のポスターを見ています.
いろいろと工夫して、文字を生成するだけで長くなります.
勉強するにつれて、コードはもっと長くなったり、もっと少なくなったりするかもしれません.😅😅😅
[Javaデザインモード]モノトーンモード
Android-Dialogダイアログ