Node. js 웹 구축

Express
Express 는 전체 Node. js 에서 가장 흔히 볼 수 있 는 프레임 워 크 (개발 패키지) 로 WEB 프로젝트 를 신속하게 구축 하 는 데 도움 을 줄 수 있 습 니 다.（http://expressjs.com）
1. F 판 에 nodejsdemo, cd 새로 만 들 기 nodejsdemo, 실행

npm install express

F: odejsdemo, Eclipse 의 작업 공간 이 라 고 상상 할 수 있 습 니 다. 하나의 작업 공간 은 여러 항목 을 정의 할 수 있 습 니 다.
2. express 프로젝트 만 들 기 F: odejsdemo 에 my projuect 폴 더 가 있 습 니 다. 디 렉 터 리 는 아래 와 같 습 니 다.

F:
odejsdemo>express -e myproject

   create : myproject
   create : myproject/package.json
   create : myproject/app.js
   create : myproject/public
   create : myproject/public/javascripts
   create : myproject/public/images
   create : myproject/public/stylesheets
   create : myproject/public/stylesheets/style.css
   create : myproject/routes
   create : myproject/routes/index.js
   create : myproject/routes/user.js
   create : myproject/views
   create : myproject/views/index.ejs

   install dependencies:
     $ cd myproject && npm install

   run the app:
     $ node app

app. js 는 전체 프로그램 이 실행 하 는 주 파일 입 니 다. 즉, 실행 하기 만 하면 HTTP Server 를 실행 할 수 있 습 니 다.

app.set('port', process.env.PORT || 3000);

http.createServer(app).listen(app.get('port'), function(){
  console.log('Express server listening on port ' + app.get('port'));
});

이때 Http 서 비 스 는 3000 포트 에서 사용자 요청 을 감청 합 니 다.서버 시작 방식 은 다음 과 같 습 니 다.

F:
odejsdemo\myproject>node app.js
Express server listening on port 3000

브 라 우 저 입력 열기:http://localhost:3000/Http 서비스 오류 에 ejs 가 부족 한 것 을 발견 할 수 있 습 니 다. ejs 는 app. js 에서 정의 되 고 ejs 를 다운로드 합 니 다.

F:
odejsdemo>npm install ejs

다시 열기http://localhost:3000/기본 페이지 my procject / views 중.
node_modules 모든 항목 의 의존 라 이브 러 리 저장
package.json 프로젝트 의존 설정 및 개발 자 정보
app.js 프로그램 시작 파일
public 정적 파일 (css, js, img)
routes 루트 파일 (MVC 의 C, controller)
views 페이지 파일 (ejs 템 플 릿)
2. 감독자 설치
개발 을 편리 하 게 하기 위해 app. js 를 수정 할 때마다 다시 시작 하지 않 고 슈퍼 바 이 저 를 설치 하여 슈퍼 바 이 저 app. js 를 실행 하면 새로운 app. js 를 자동 으로 불 러 옵 니 다.

F:
odejsdemo>npm install -g supervisor

3.ejs
ejs 는 웹 의 템 플 릿 엔진 중 하나 로 EJS 는 Javascript 템 플 릿 라 이브 러 리 로 JSon 데이터 에서 HTML 문자열 을 생 성 합 니 다.사용자 에 게 명확 하고 유지 보수 성 이 좋 은 HTML 구 조 를 편리 하 게 제공 할 수 있 습 니 다.
모든 페이지 를 views 에 저장 합 니 다. 이 때 index. ejs 는 HTML 페이지 입 니 다. html 형식 으로 변경 하려 면 템 플 릿 을 설정 해 야 합 니 다.
1) app. js 에서 불 러 오 는 모듈 을 정의 하고 관련 설정 을 추가 합 니 다.

var ejs = require('ejs');
app.engine('html',ejs.__express);
app.set('view engine', 'html');    //   app.set('view engine', 'html');

2) index. ejs 이름 을 index. html 로 변경
로그 인 기능 만 들 기: login. html, welcome. html, 주의: 모든 파일 형식 은 UTF - 8 이 어야 합 니 다.
index.html

DOCTYPE html>
<html>
  <head>
    <title>= title %>title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
  head>
  <body>
    <p><a href="login">    a>p>    
  body>
html>

DOCTYPE html>
<html>
  <head>
    <title>= title %>title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
  head>
  <body>
   <h1>= title %>h1>
<form method="post">
       ：<input type="text" name="userid" id="userid"><br>
       ：<input type="password" name="password" id="password"><br>
    <input type="submit" value="  ">
    <input type="reset" value="  ">
form>
body>
html>

welcome.html

DOCTYPE html>
<html>
  <head>
    <title>= title %>title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
  head>
  <body>
    <h1>  =user.userid%>  ！h1>
    <h1><a href="logout">  a>h1>
  body>
html>

Node. js 때문에 모든 페이지 에 직접적인 링크 가 정의 되 지 않 았 습 니 다. 여전히 MVC 디자인 모델 범주 에 속 하기 때문에 MVC 의 실현 에 대해 작 성 된 모든 것 은 맵 이름 에 속 합 니 다. 모든 맵 경 로 는 app. js 를 통 해 해당 하 는 경로 설정 이 필요 합 니 다.
app. js 설정

app.get('/', routes.index);            //    
app.get('/login', routes.login);    //       routes/index.js 
app.post('/login', routes.doLogin);    //post  ，    。
app.get('/logout', routes.logout);    //    (  logout  routes/index.js exports.logout，      。)
app.get('/welcome', routes.welcome);//

routes/index.js 관련 반전 함수 설정

exports.index = function(req, res){
  res.render('index', { title: '  ' });
};
exports.login = function(req, res){
  res.render('login', { title: '  ' });    //res.render--   login  
};
exports.doLogin = function(req, res){
    var user = {userid:'admin',password:'123456'};    //       
    if(req.body.userid==user.userid && req.body.password==user.password){
        res.redirect('welcome?uid='+user.userid);    //        res.redirect--app.js    /welcome(app.get('/welcome', routes.welcome))
    }else{
        res.render('login', { title: '    ' });
    }
};
exports.logout = function(req, res){
  res.render('index', { title: '  ' });
};
exports.welcome = function(req, res){
  //          req.query.       
  var user = {userid:req.query.uid};
  res.render('welcome', { title: '  ', user: user });
};

전체 기초 과정 에서 가장 중요 한 절 차 는 app. js 의 경 로 를 설정 하 는 것 입 니 다. 경로 의 최종 통 제 는 routes / index. js 설정 을 통 해 Servlet 과 유사 하 게 점프 를 담당 합 니 다.
다음으로 전송:https://www.cnblogs.com/xuekyo/p/3469994.html

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

다양한 언어의 JSON

JSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

Node. js 웹 구축

좋은 웹페이지 즐겨찾기