글 수정 UI 만들기

ㅋㅋㅋㅋㅋㅋ 

이번에는 웹페이지에 글 수정 UI를 만드는 법을 알아보겠습니다.

egoing 님의 생활코딩 nodejs 수업을 참고했습니다.

 

---

많은 내용의 수업이 앞에 있었지만 저는 여기서부터 시작하겠습니다.

 

일단 제 웹페이지에는 글을 쓸 수 있는

'create' UI는 존재합니다.

 

하지만 작성한 글을 수정하려면 코드 에디터를 켠 후

일일이 글 내용이 적힌 파일을 찾은 후

내용 또는 제목을 바꿔야하죠.

 

코드를 작성해봅시다.

---

일단 else if 를 이용해 웹페이지 수정 기능이 요구될 때 

해당 코드로 이동해야겠죠?

 

이를 위해서 웹페이지에서 어떤 기능을 요구하는지 받아와야합니다.

 

    var app = http.createServer(function(request,response){
    var _url = request.url;
    var queryData = new URL('http://localhost:3000' + _url).searchParams;
    var pathname = url.parse(_url, true).pathname;

 

이렇게 해주면 변수 pathname을 이용하여

웹페이지에서 어떤 기능을 원하는지 받아 올 수 있습니다.

 

이젠 pathname이 update 일때 실행될 코드를 작성해봅시다.

 

else if(pathname = '/update'){
//pathname이 update 일때 아래 코드를 실행한다.
    fs.readdir('./data', function(error, filelist){
    //fs 모듈 속 파일을 불러오는 기능을 사용해 파일 속 제목, 내용을 가져온다.
      fs.readFile(`data/${queryData.get('id')}`, 'utf8', function(err, description){
        var list = templatList(filelist);
        var title = queryData.get('id');
        var template = templateHTML(title, list,
          `
          <form action="/update_process" method = "post">
            <p><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>
			//웹페이지에 update 버튼, 수정 내용, 수정 대상을 지정하는 기능을 만든다.
          `,
          `<a href="/create">create</a> <a href="/update?id=${title}">updata</a>`
        );
        response.writeHead(200);
        response.end(template);
      });
    });
  } else {
    response.writeHead(404);
    response.end('Not Found');

길죠?

 

정밀하게 코드를 살펴볼 필요는 없습니다. 

 

문제가 발생합니다.

 

글의 제목(파일명)을 바꾸고 싶은데,

 

파일명이 뜨는곳을 수정하면

 

제 코드가 수정된 파일명을 갖고 데이터를 뒤져서

 

어떤 파일을 바꾸려하는지 찾지를 못합니다.

 

그래서

 

 <input type = "hidden" name = "id" value = "${title}">

 

이 코드를 

<form action="/update_process" method = "post">

다음 줄에 추가해줍니다.

 

여기까지 하면 

수정된 데이터를 node js에 전송하는데 성공한겁니다.

 

다음에는 전송한 데이터를 저장하는 방법을 알아보겠습니다.