필자의 개발 경험

저 자신도 개발 업무는 거의 미경험입니다만, N예비교의 Web 어플리케이션 코스나 Node.js 초입문 라고 하는 참고서를 바탕으로 서버 측을 공부하고 있습니다.
그래도 형태만으로도 구현할 수 있었습니다.

구현 환경

OS
서버측
프레임워크


macOS
Node.js
Express

express-generator로 조속히 병아리 만들기

모든 디렉토리에서 다음 명령 실행

npm install -g [email protected]
express --view=pug app-name

주의해야 할 것은 "express --view=◯◯ △△"로 ◯◯에는 사용하는 HTML 템플릿을 △△에는 임의의 이름을 붙여 주십시오. (△△는 디렉토리명이 만들어집니다)

generator로 작성되는 템플릿의 구조 등을 자세히 알고 싶은 분은
express-generator 사용
Express 입문 ~express-generator 사용법~
를 참고해 보세요.

이 시점에서 기본적으로 할당됩니다 http://localhost:3000/


가 표시되는 레벨까지 병아리를 만들 수 있으므로 나중에는 폼 기능을 구현합시다!

app.js 설정

var helloRouter = require('./routes/hello');

그리고

app.use('/hello', helloRouter);

병아리에 추가하십시오.
나중에 http://localhost:3000/hello이 표시되도록 helloRouter를 설정합니다.

routes 설정

매우 기초적인 양식을 만듭니다.
우선은 routes 디렉토리의 hello.js로부터 써 갑니다.

hello.js

var express = require('express');
var router = express.Router();

router.get('/', function(req, res, next){
  var data = {
    title: '会員登録情報の確認',
    content: '会員確認のため、お名前をご記入ください'
  }
  res.render('hello', data);
});

router.post('/confirm', (req, res, next) => {
  var name = req.body['userName'];
  var data = {
    title: '登録情報の確認完了！',
    content: name + 'さんの会員登録情報が確認できました。'
  }
  res.render('hello', data);
})

module.exports = router;

처음 두 줄은 익스프레스 모듈을 읽고 Router로서 기능하게 한다고 하는 템플리라든지 어리석은 것 같은 것(이라는 인식)
"router.get('/', (req, res, next) => {})"를 사용하여 서버에 액세스할 수 있으면 현재 디렉토리를 상대 경로로 표시하고 data(속성) 상자에 변수 title 및 content 라는 이름으로 문장을 저장합니다.
"res.render('hello', data);"는 data 속성에 있는 데이터를 view 디렉토리에 있는 pug 파일을 지정하여 렌더링해 줍니다.
"router.post('/confirm', (req, res, next) => {})"에서는 데이터를 보낼 위치에서 무엇을 할지 지정합니다.
var name = req.body['userName'];
data 프로퍼티에는, 에서 get 때와 같이, 표시시키고 싶은 정보를 줍니다.
"module.exports = router;"는 지금의 단계에서 낫지 않을 것이라고 생각합니다.

Views 설정

hello.pug

extends layout

block content
  h1= title
  p #{content}
  form(method="post" action="hello/confirm")
    input(type="text" name="userName")
    input(type="submit" name="送信")

"extends layout과 block content"는 별로 없습니다. (n회략)
hello.js에서 데이터를 저장한 title과 content를 각각 표시합니다.
그리고는 form 태그로 input 태그를 묶어, 텍스트 폼과 제출 폼을 작성합니다.
텍스트 양식의 데이터(userName)를 "http://localhost:3000/hello/confirm"로 표시할 수 있도록 구현하고 있습니다.

pug는 괄호 닫기라든지의 번거로움이 없어지므로 어느 정도 사용중에 익숙해져 옵니다.
단, 들여 쓰기가 조금이라도 이상하면 오류가되므로주의를.

pug의 독특한 쓰기 방법에 관해서는 이 기사 , 어쨌든 구현만 하고 싶은 분은 html에서 pug로 변환하는 서비스

이상으로 완성!

구현이 잘 진행되면


양식을 작성하고,


처럼 양식이 구현되었다고 생각합니다!

감상

N예비교의 커리큘럼을 통해 예정-군 라는 스케줄 공유 서비스를 만들었습니다만, 재차 자력으로 Node+Express를 구현해, 간단한 폼을 만들 때까지도 따뜻하게 했습니다.
이번, 기사로 한 내용은 서버 측, 특히 Node+Express를 사용하는데 있어서 초초기본이므로 빠짐없이 기억하고 싶습니다.

본 기사에 관해서, 「여기가 빠져 있다!」 「원래 다르다!」등의 의견이 있으면 코멘트인가 Twitter (@watuyo_2) 까지 보내 주세요.