nodejs 도해 express+supervisor+ejs 의 용법(추천)

5858 단어 nodejsexpressejssupervisor
node js 자체 가 가지 고 있 는 http 모듈 을 통 해 간단 하고 쉬 운 서버 를 만 들 었 습 니 다.실제 개발 에서 보통 express 프레임 워 크 를 사용 합 니 다.본 고 는 프로젝트 개발 에 있어 없어 서 는 안 될 몇 가지 것들 을 이야기 하 겠 습 니 다.
•서버(express)
•경로(express.Router)
템 플 릿 엔진
•물론 데이터 베 이 스 를 더 하면 뮤 직 비디오 c 의 웹 응용 을 완성 할 수 있 습 니 다.데이터 뱅 크 의 용법,후기 에 저 는 프로젝트 를 쓸 것 입 니 다.
첫째,우선 프로젝트 폴 더(ghostwu)를 새로 만 들 고 명령 행 에서 이 디 렉 터 리 로 전환 합 니 다.npm init--yes 로 package.json 파일 을 초기 화 합 니 다.

express 설치:npm install express--save
2.index.js 파일 을 새로 만 들 고 다음 코드 를 입력 하 십시오.

var express = require('express');
var app = express();

app.get('/', function(req, res) {
 res.send( 'welcome to study express -by ghostwu' );
}).listen( 8080 );
첫 번 째 줄,express 모듈 불 러 오기
두 번 째 줄,웹 서버 오픈
세 번 째 줄,웹 서버 감청 8080 포트,브 라 우 저 를 통 해 입력(http://localhost:8080 welcome to study express-by ghostwu
3.만약 에 node 서버 를 쓴 적 이 있다 면 문 제 를 발견 할 수 있 습 니 다.매번 수정 한 후에 서버 를 다시 시작 해 야 합 니 다.일반적으로 우 리 는 파일 을 수정 한 후에 저장 하고 웹 페이지 를 새로 고침 하면 수정 을 볼 수 있 습 니 다.이런 효 과 를 얻 으 려 면 슈퍼 바 이 저 를 설치 해 야 합 니 다.이것 은 webpack 의 핫 로드 에 해당 합 니 다.우 리 는 전체 설 치 를 사용 합 니 다.npm install -g supervisor， ， ： supervisor --harmony index
이후 index.js 파일 을 수정 하여 저장 하면 웹 페이지 를 새로 고치 면 바로 수 정 된 결 과 를 볼 수 있 습 니 다.
4.경로 처 리 를 추가 하고 index.js 파일 을 수정 하 며 코드 를 다음 과 같이 수정 합 니 다.

var express = require('express');
var app = express();
app.get('/', function(req, res) {
 res.send('hello, express');
});
app.get('/user/:name', function(req, res) {
 res.send('hello, ' + req.params.name);
});
app.get('/user/:name/age/:age', function(req, res) {
 res.send('info: user:' + req.params.name + ', age:' + req.params.age );
});
app.listen( 8080 );
http://localhost:8080/ hello,express 표시
http://localhost:8080/user/ghostwu -->hello,ghostwu 표시
http://localhost:8080/user/ghostwu/age/22 --->표시 정보:user:ghostwu,age:22
:name 자리 표시 자:user 뒤의 값 을 받 는 데 사 용 됩 니 다.age 자리 표시 자 는 age 뒤의 값 을 받 는 데 사 용 됩 니 다.req.params 뒤에서 가 져 온 키 이름 이 바로 이 자리 표시 자 입 니 다.
만약 당신 이 phop 을 배 운 적 이 있다 면,아래 의 get 수신 매개 변수 방식 에 해당 합 니 다.
xxx.php?user=ghostwu&age=22 -----> $_REQUEST['user'] $_REQUEST['age']
5.일반적으로 프로젝트 에서 길 은 따로 분리 되 어야 하고 유지 와 확장 에 편리 합 니 다.
새 routers 를 만 든 다음 index.js 와 info.js 파일 을 만 듭 니 다.
index.js 코드:

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

router.get('/', function(req, res) {
 res.send('hello, express');
});

module.exports = router;
info.js 코드:

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

router.get('/:name', function(req, res) {
 res.send('hello, ' + req.params.name);
});
router.get('/:name/age/:age2', function(req, res) {
 res.send('info: user:' + req.params.name + ', age:' + req.params.age2 );
});

module.exports = router;
ghostwu 이 디 렉 터 리 아래 index.js 파일 코드 는:

var express = require('express');
var app = express();
var indexRouter = require('./routers/index');
var infoRouter = require('./routers/info');

app.use('/', indexRouter);
app.use('/user', infoRouter);

app.listen(8080);

이상 의 코드 를 통 해 경로 의 분 리 를 완 료 했 습 니 다.index.js,info.js 파일 에 각각 놓 고 router 대상 을 내 보 내 고 app.use 를 통 해 해당 하 는 경 로 를 찾 습 니 다.
6.ejs 템 플 릿 의 응용
설치:npm install ejs--save
index.js 파일:

var path = require('path');
var express = require('express');
var app = express();
var indexRouter = require('./routers/index');
var infoRouter = require('./routers/info');

//      : views
app.set('views', path.join(__dirname, 'views'));

//      : ejs
app.set('view engine', 'ejs');
app.use('/', indexRouter);
app.use('/user', infoRouter);
app.listen(8080);
info.js 파일

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

router.get('/:name', function(req, res) {
 res.render( 'info', {
 name : 'ghostwu',
 age : 22,
 sex : 'man'
 });
});
module.exports = router;
다섯 번 째 줄 res.render 렌 더 링 템 플 릿 파일 info.ejb,두 번 째 매개 변 수 는 데이터 입 니 다.
info.ejs 파일

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
 </head>
 <body>
      :
  <hr>
  <ul>
   <li>   : <%=name%></li>
   <li>  : <%=age%></li>
   <li>  : <%=sex%></li>
  </ul>
 </body>
</html>
<%=변수 이름%>데이터 읽 기
<%code%>:자 바스 크 립 트 코드 를 실행 하고 출력 하지 않 음
<%=code%>:전의 html 태그
<%-code%>:뜻 을 바 꾸 지 않 는 html 태그
기타 ejs 용법


이상 의 nodejs 도해 express+supervisor+ejs 의 용법(추천)은 바로 편집장 이 여러분 에 게 공유 한 모든 내용 입 니 다.여러분 께 참고 가 되 어 주시 고 많은 응원 부 탁 드 리 겠 습 니 다.
React 는 어떻게 구성 요 소 를 지정 한 DOM 노드 에 렌 더 링 하 는 지 설명 합 니 다.
원생 js 간단 한 모드 상자 예제 실현

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage