Node.js – MySQL – 라이브 코딩

수업 소개 이 수업은 Node.js와 MySQL을 사용하여 웹 애플리케이션을 구축하는 것에 관한 것입니다. 예를 들어, 1억 페이지로 구성된 웹 사이트에서 필요한 정보는 파일에 개별적으로 저장됩니다.

opentutorials.org

Life Coding Node.js – MySQL 토크를 듣고 쓴 글입니다. 그냥 그렇습니다.

쉬운 목차

1. JOIN 문을 이용한 디테일 뷰 구현

topic수업 author 각 기사가 작성자를 식별할 수 있도록 테이블을 결합하십시오.

`SELECT * FROM topic LEFT JOIN author ON topic.author_id= author.id WHERE topic.id=?`,

작성자를 표시하도록 HTML 코드 수정 p 태그를 추가합니다.

module.exports = {
  HTML: function (title, list, control, description) {
    return `
     <!DOCTYPE html>
     <html lang="en">
       <head>
         <meta charset="UTF-8" />
         <meta http-equiv="X-UA-Compatible" content="IE=edge" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <title>WEB - ${title}</title>
         <link rel="stylesheet" href="http://ramen4598.m/style.css">
         <script src="./lib/color.js"></script>
         <script src="./lib/crudBtn.js"></script>
       </head>
       <body>
         <div id="top">
           <h1><a href="/">Board</a></h1>
           <input type="button" value="night" onclick="nightDayHandler(this)"/> </div>
         <div id="grid">
          ${list}
          <div id="article">
            <div id="control">${control}</div>
            <h2>${title}</h2>
            ${description}
          </div>
        </div>
       </body>
      </html>
    `;
  },

에 추가 author접수된 인수 ${author}이름이 지정된 템플릿 리터럴을 추가합니다.

module.exports = {
  HTML: function (title, list, control, description, author) {
    return `

                    ...
                    <div id="article">
            <div id="control">${control}</div>
            <h2>${title}</h2>
            <p>
                            ${author}
            </p>
            <p>
              ${description}
            </p>
          </div>
                    ...

모든 관련 코드를 변경해야 합니다.

const author = `작성자 : ${topic(0).name}`;
readAndRes(title, description, control, author);

이렇게 하면 다른 값으로 판매할 수 있습니다.

2.만들기

가다. else if (경로명 === ‘/만들기’)

이제 게시물을 작성할 때 작성자에 대한 정보도 입력해야 합니다.

다만 아직 계정을 생성하고 관리하는 기능이 구현되지 않았기 때문에 콤보박스를 이용하도록 하겠습니다.

콤보 상자 사용 author 이미 테이블에 name그들에게 선택권을 주기 위해.

콤보박스에 URL이 있습니다. /create 또는 /update 때 사용됩니다

//template.js

    },authorSelect:function(authors){
    var tag = '';
    var i = 0;
    while(i < authors.length){
      tag += `<option value="${authors(i).id}">${authors(i).name}</option>`;
      i++;
    }
    return `
      <select name="author">
        ${tag}
      </select>
    `
    }
}

template.js에게 select 라벨을 만들다 authorSelect호출할 메서드 추가

} else if (pathname === "/create") {
    db.query(`SELECT * FROM author`,function(error, authors){
      let title = "create";
      let description = `
          <form action="/create_process" method="post">
              <p><input type="text" name="title" placeholder="title"></p>
              <p>
                  <textarea name="description" placeholder="description"></textarea>
              </p>
              <p>
                  <input type="submit">
              </p>
          </form>
        `;
      let control = ``;
      let author  = template.authorSelect(authors);
      readAndRes(title, description, control, author);
    });
  } else if (pathname === "/create_process") {

/create~ 안에 SELECT문을 통해 author 테이블에 대해 알아보고 다음 form선택할 수 있도록 template.authorSelect앞으로.

author자유

나. else if (경로명 === “/create_process”)

db.query(
    `INSERT INTO topic (title, description, created, author_id) 
    VALUES (?, ?, NOW(), ?)`,
    (sanitizedTitle, sanitizedDesc, post.author),
    function(error, result){ ... }
);

1붙어 author_id붓다 post.author변화

3. 업데이트

업데이트도 비슷합니다.

가다. else if (경로명 === “/업데이트”)

} else if (pathname === "/update") {
    db.query(`SELECT * FROM topic WHERE id=?`,(queryData.id),function (error, topic) {
        if (error) {
          throw error;
        }
        db.query(`SELECT * FROM author`,function(error2, authors){
          if (error2){
            throw error2
          }
          const title = topic(0).title;
          const description = topic(0).description;
          const id = queryData.id;
          let control = ``;
          const updateForm = `
            <form action="/update_process" method="post">
                <p>${template.authorSelect(authors)}</p>
                <p>
                <input type="hidden" name="id" value="${id}">
                <input type="text" name="title" placeholder="title" value="${title}"> </p>
                <p>
                     <textarea name="description" placeholder="description">${description}</textarea>
                </p>
                <p>
                     <input type="submit">
                </p>
            </form>
          `;
          const author = ``;
          readAndRes(title, updateForm, control, author);
        });
    });
  } else if (pathname === "/update_process") {

db.query(저자로부터 * 선택,function(error2, authors){
: author 테이블의 모든 값을 검색합니다.
<p>${template.authorSelect(authors)}</p>
: 찾고 있는 정보를 바탕으로 콤보 상자를 생성합니다.

/update 창의 콤보 상자에서 선택한 옵션이 기존 작성자와 일치하지 않습니다.

updateForm기존 작성자가 기본값으로 표시되도록 수정해 보겠습니다.

<p>${template.authorSelect(authors, topic(0).author_id)}</p>

template.authorSelect 메서드에 존재 author_id값을 함께 전달하십시오.

},authorSelect:function(authors, author_id){
    let tag = '';
    let i = 0;
    while(i < authors.length){
      let selected ='';
      if (authors(i).id === author_id){
        selected = 'selected';
      }
      tag += `<option value="${authors(i).id}" ${selected}>${authors(i).name}</option>`;
      i++;
    }

이전 작가처럼 id가치가 있다면 selected 속성 추가

나. else if (경로명 === “/update_process”)

db.query(`UPDATE topic SET title=?, description=?, author_id=? WHERE id=?`,
        (sanitizedTitle, sanitizedDesc, post.author, id),
        function (error, result) {...}

author_id에게 post.author로 업데이트하도록 쿼리 문을 변경합니다.