웹 프론트엔드 JS 튜토리얼 Nodejs의 기본 단계에 있는 express_node.js

Nodejs의 기본 단계에 있는 express_node.js

May 16, 2016 pm 03:30 PM

이전 글"Node.js 첫 경험"도 잘 쓰여 있으니 관심 있는 친구들은 확인해 보세요.

Node와 NPM 설치는 충분히 편리합니다. 자세히 설명하지 않아도... 몇 가지 기본 사항을 언급해 보겠습니다.

1. 설치 명령의 “-g”는 전역을 의미합니다.

2. Express 버전은 일반적인 “-v”가 아니라 “-V”로 봅니다

3. Express 프로젝트를 설치하는 명령어는 다음과 같습니다

express -e nodejs-product
-e, --ejs add ejs engine support 
-J, --jshtml add jshtml engine support (defaults to jade)
로그인 후 복사

PS: 템플릿 엔진은 당분간 손댈 필요가 없지만 Node Express를 처음 배울 때 ejs를 사용해서 계속 사용했어요

 노드의 꼬마친구 감독관

코드를 수정할 때마다 자동으로 다시 시작됩니다. 게으른 프로그래머는 생존을 위해 이런 종류의 문제 해결 도구에 의존합니다. :)

설치: npm install -g 감독자

실행: Supervisor app.js

또 하나의 영원한 게이 친구

노드 서비스는 가상 머신이 종료되는 즉시 종료됩니다. 그러나 노드 서비스가 영원히 중지되지 않을 수 있습니다. 소개는 다음과 같습니다. 너무 게으르다:

Forever는 앱 애플리케이션을 시작, 중지 및 다시 시작할 수 있는 간단한 필수 nodejs 데몬입니다. Forever는 전적으로 명령줄 작업을 기반으로 하며, 영원히 프로세스에서는 노드의 하위 프로세스가 생성되고, 파일이 업데이트되거나 프로세스가 중단되면 노드 하위 프로세스의 실행 상태가 자동으로 모니터링됩니다. 애플리케이션의 정상적인 작동을 보장하려면 노드 서버를 다시 시작하십시오.

 익스프레스 프로젝트 디렉토리 


위 사진은 Express 프로젝트 구조를 간단히 살펴보겠습니다.

app.js: 프로젝트 입구. Express는 어쨌든 app.js라고 부르는 것을 선호합니다. index.js 또는 main.js로 변경할 수 있습니다. PHP 프로젝트의 index.php, index.html
과 동일 node_modules: 프로젝트 종속성 라이브러리를 저장합니다
package.json: 프로젝트 종속성 구성 및 개발자 정보(말하기에는 너무 많은 내용이므로 문서를 읽는 것이 더 좋으므로 다른 사람을 오해하지 않을 것입니다. 다음 호에서는 Node 모듈에 대해 짧은 단락으로 이야기하겠습니다. )
public: css, js, img와 같은 정적 파일 (PS: 저는 실제로 static이라고 부르는 데 익숙합니다.)
Routes : 라우팅 파일 (중요한 학습대상입니다. 사업이 잘되든 안되든 라우팅이 핵심입니다)
보기: 페이지 파일(Ejs 또는 jade 템플릿, 기본값은 jade, 여기서는 Ejs를 사용합니다. 가장 중요한 것은 처음에 연습하는 것이므로 시도해 볼 수 있습니다)

View 파일을 열어보니 index.ejs가 익숙하지 않아서 app.js에 약간의 변경을 가했습니다.

<…


이전 줄에 나타나는 ejs 변수에는 require ejs 모듈이 필요합니다. "var ejs = require('ejs');" 코드를 추가하세요.


최종 app.js는 다음과 같습니다.


코드 설명:


입문을 목표로 하고 있기 때문에 계속해서 express를 활용하고 Node:

방식을 사용하겠습니다.

require()는 현재 모듈에 다른 모듈을 로드하고 사용하는 데 사용됩니다. 이 방법은 모듈의 기본이며 경로 개념으로 충분합니다. 추신: JS 파일은 ".js" 접미사를 제거할 수 있습니다


내보내기는 모듈의 속성과 공개 메서드를 내보내는 데 사용되는 모듈의 내보내기 개체를 나타냅니다. 프로젝트 경로 폴더 아래에는 index.js 및 users.js가 있으며(라우팅은 자세히 설명되어 있음) 둘 다 내보내기 객체를 사용하여 33행의 Routes.index 및 34행의 user.list와 같은 객체를 내보냅니다.

 

PS: 모듈의 코드는 모듈을 처음 사용할 때만 실행되며, 여러 번 요구하기 때문에 여러 번 초기화되지 않습니다.

Express()는 Express 애플리케이션을 만드는 것을 의미합니다. 실제로 다음과 같이 몇 줄의 코드만으로 애플리케이션을 만들 수 있습니다.

  var express = require('express'); 
  var app = express(); 
  app.get('/', function(req, res){ 
   res.send('hello world'); 
   console.log('hello world');
  }); 
  app.listen('8808');
로그인 후 복사

app.listen() 就是在给定的主机和端口上监听请求,这个和node中http模块的http.createServer(function(){...}).listen()效果一致;
app.set(name, value)和app.get(name)就是你想的那样,set()为设置 name 的值设为 value,get()为获取设置项 name 的值。如俺app.js的图片16行中的一句“app.set('port', process.env.PORT || 3000)”就是设置项目的port,在下面使用http.createServer时就可以使用app.get('port')来获取,只是俺偷懒没用来着;

了解app.engine()方法之前先看看express应用的安装命令:“express -e nodejs-product”,其中的 -e 和 -J 我们一开始已经提到,表示ejs和jade模板。

如果想把模板后缀改成“.html”时就会用到app.engine方法,来重新设置模板文件的扩展名,比如想用ejs模板引擎来处理“.html”后缀的文件:app.engine('.html', require('ejs').__express);

app.engine(ext, callback) 注册模板引擎的 callback 用来处理ext扩展名的文件。

   PS:__express不用去care,其实就是ejs模块的一个公共属性,表示要渲染的文件扩展名。

app.use([path], function) 使用中间件 function,可选参数path默认为"/"。使用 app.use() “定义的”中间件的顺序非常重要,它们将会顺序执行,use的先后顺序决定了中间件的优先级(经常有搞错顺序的时候);

最后介绍个很有用的express API:

app.render(view, [options], callback) 渲染 view, callback 用来处理返回的渲染后的字符串。

  路由实战:  

路径代码应该是项目中最本机的一部分了。express中创建一个或者一套新的handle非常简单,先看看express现有的,一会儿我们创建俩个实际的规则。

变量 routes 和 user 都是刚才require的模块,他们各自exports了index方法和list方法;其中Response.render()表示渲染view,同时传进对应的数据,Response.send()为发送一个响应;在设置路由时index和list方法作为回调函数最终执行。 

   流程大概了解啦,俺们也就实际搞一把,最easy的一种方式,简单俩步:

第一种方式就是在当前的routes/index.js或者routes/test.js中加几行代码如下

 exports.test = function(req, res){
 res.send('test welcome.');
};
로그인 후 복사

在app.js文件设置路由那块加上app.get('/test', routes.test);

   第二种方式就是多了两步,先新建一个模块如test.js文件,输出然后exports对应的方法;在app.js中require这个模块,再加一行设置路由即完成了。

  快速炫起来,集成Bootstrap: 

JS工程师使用Nodejs上手还是以快速搭建网站为主,所以才会介绍Express,那么为了让网站更快的体面起来,集成使用Bootstrap就是上佳选择,非常喜欢其响应式布局和整体系的脚手架。

PS:因为Bootstrap的JS插件都依赖jQeury,所以jQuery也一并引入了。

   前文已经说到了,静态文件都放在public文件夹中,切文件夹内已经帮我们把类目都分好了,images、 javascripts、 stylesheets。

   分别引入bootstrap.min.css文件至stylesheets目录下;jquery-1.x.x.min.js和bootstrap.min.js放到javascripts文件夹下。
   然后俺们修改view/index.html把文件引入使用即可,下面放出俺在bootstrap demo的基础改的index.html,大家随意拿去使用和修改。

<!DOCTYPE html>
<html lang="zh-cn">
 <head>
 <title><%= title %></title>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <link href="/stylesheets/bootstrap.min.css" rel="stylesheet">
 <!--<link href="/stylesheets/base.css" rel="stylesheet">-->
 <!--<link href="/stylesheets/common.css" rel="stylesheet">-->
 <!--<link href="/stylesheets/page.css" rel="stylesheet">-->
 <!-- 建议在项目中把CSS分好level,好维护和管理 -->
 <style>
  html, body { overflow-x: hidden;}
  body { padding-top: 70px;background:#f1f1f1; }
  footer { padding:20px 0 10px;text-align:center;font-weight:bold;border-top:1px solid #ddd;margin-top:30px;}
  .header-navbar-style {
   filter:alpha(opacity=90);
   -moz-opacity:0.9;
   -khtml-opacity: 0.9;
   opacity: 0.9;
   background: linear-gradient(45deg, rgb(60, 8, 34) 0%, rgb(49, 79, 117) 100%);
   border:1px solid #aaa;
   font-size:16px;
  }
  .beige {background:beige;}
  .bisque {background:bisque;}
  .darkseagreen{ background:darkseagreen;}
 </style>
 </head>
 <body>
 <div class="navbar navbar-fixed-top header-navbar-style navbar-inverse" role="navigation">
  <div class="container">
  <div class="navbar-header">
   <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
   <span class="sr-only">Toggle navigation</span>
   <span class="icon-bar"></span>
   <span class="icon-bar"></span>
   <span class="icon-bar"></span>
   </button>
   <a class="navbar-brand" href="/">Product</a>
  </div>
  <div class="collapse navbar-collapse">
   <ul class="nav navbar-nav">
   <li class="active"><a href="/">Home</a></li>
   <li class=""><a href="/contactus">Contact</a></li>
   <li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
    <ul class="dropdown-menu beige">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li class="divider"></li>
    <li><a href="#">Separated link</a></li>
    <li class="divider"></li>
    <li><a href="#">One more separated link</a></li>
    </ul>
   </li>
   <li class=""><a href="/faq">FAQ</a></li>
   </ul>
  </div><!-- /.nav-collapse -->
  </div><!-- /.container -->
 </div><!-- /.navbar -->
 <!-- 以上位置建议创建个header.html维护起来 -->
 <style>
  @media screen and (max-width: 767px) {
  .row-offcanvas { position: relative;
  -webkit-transition: all 0.25s ease-out;
  -moz-transition: all 0.25s ease-out;
  transition: all 0.25s ease-out;
  }
  .row-offcanvas-right .sidebar-offcanvas { right: -50%; /* 6 columns */ }
  .row-offcanvas-left .sidebar-offcanvas { left: -50%; /* 6 columns */ }
  .row-offcanvas-right.active { right: 50%; /* 6 columns */ } 
  .row-offcanvas-left.active { left: 50%; /* 6 columns */ } 
  .sidebar-offcanvas { position: absolute; top: 0; width: 50%; /* 6 columns */ } }
 </style>
 <div class="container">
  <div class="row row-offcanvas row-offcanvas-right">
  <div class="col-xs-12 col-sm-9">
   <p class="pull-right visible-xs">
   <button type="button" class="btn btn-primary btn-xs" data-toggle="offcanvas">Toggle nav</button>
   </p>
   <div class="jumbotron bisque">
   <h1>Welcome <%= title %>!</h1>
   <p>This is an example to show the potential of an offcanvas layout pattern in Bootstrap. Try some responsive-range viewport sizes to see it in action.</p>
   </div>
   <div class="row">
   <div class="col-6 col-sm-6 col-lg-4">
    <h2>Heading</h2>
    <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
    <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
   </div><!--/span-->
   <div class="col-6 col-sm-6 col-lg-4">
    <h2>Heading</h2>
    <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
    <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
   </div><!--/span-->
   <div class="col-6 col-sm-6 col-lg-4">
    <h2>Heading</h2>
    <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
    <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
   </div><!--/span-->
   <div class="col-6 col-sm-6 col-lg-4">
    <h2>Heading</h2>
    <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
    <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
   </div><!--/span-->
   <div class="col-6 col-sm-6 col-lg-4">
    <h2>Heading</h2>
    <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
    <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
   </div><!--/span-->
   <div class="col-6 col-sm-6 col-lg-4">
    <h2>Heading</h2>
    <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
    <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
   </div><!--/span-->
   </div><!--/row-->
  </div><!--/span-->
  <div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar" role="navigation">
   <div class="list-group">
   <a target="_blank" href="#" class="list-group-item">Link</a>
   <a href="#" class="list-group-item">Link</a>
   <a href="#" class="list-group-item">Link</a>
   <a href="#" class="list-group-item">Link</a>
   <a href="#" class="list-group-item">Link</a>
   <a href="#" class="list-group-item">Link</a>
   <a href="#" class="list-group-item">Link</a>
   <a href="#" class="list-group-item">Link</a>
   <a href="#" class="list-group-item">Link</a>
   <a href="#" class="list-group-item">Link</a>
   </div>
  </div><!--/span-->
  </div><!--/row-->
 </div><!--/.container-->
 <!-- 从header.html之后到此可分为page层 -->
 <footer class="darkseagreen">
  <p>Copyright &copy; 2014. Designed by nieweidong.</p>
 </footer>
 <script src="/javascripts/jquery-1.11.0.min.js"></script>
 <script src="/javascripts/bootstrap.min.js"></script>
 <script>
  $(document).ready(function() {
  $('[data-toggle=offcanvas]').click(function() {
   $('.row-offcanvas').toggleClass('active');
  });
  });
 </script>
 </body>
</html>
로그인 후 복사

   如果样式有问题请检查下bootstrap的路径是否正确引入。

   启动项目之后觉得高大上很简单,有木有!!

  FAQ&总结: 

     俺们的express项目暂时,且express也并没有涉及到任何数据库,这个事情需要第三方node模块,比如mysql或者MongoDB,后续俺会有一章单独介绍这块。

   express也不是Node中web框架的唯一选择,不过由于其文档较全,所以才以其为示例为大家介绍,其原理和实现其实细化之后并不复杂,也希望更多的JS工程师折腾出自己的Web框架。 

好了,今天先给大家絮叨到这里,希望本文分享大家喜欢。

본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

JavaScript로 문자열 문자를 교체하십시오 JavaScript로 문자열 문자를 교체하십시오 Mar 11, 2025 am 12:07 AM

JavaScript 문자열 교체 방법 및 FAQ에 대한 자세한 설명 이 기사는 JavaScript에서 문자열 문자를 대체하는 두 가지 방법 인 내부 JavaScript 코드와 웹 페이지의 내부 HTML을 탐색합니다. JavaScript 코드 내부의 문자열을 교체하십시오 가장 직접적인 방법은 대체 () 메소드를 사용하는 것입니다. str = str.replace ( "find", "replace"); 이 메소드는 첫 번째 일치 만 대체합니다. 모든 경기를 교체하려면 정규 표현식을 사용하고 전역 플래그 g를 추가하십시오. str = str.replace (/fi

사용자 정의 Google 검색 API 설정 자습서 사용자 정의 Google 검색 API 설정 자습서 Mar 04, 2025 am 01:06 AM

이 튜토리얼은 사용자 정의 Google 검색 API를 블로그 또는 웹 사이트에 통합하는 방법을 보여 주며 표준 WordPress 테마 검색 기능보다보다 세련된 검색 경험을 제공합니다. 놀랍게도 쉽습니다! 검색을 Y로 제한 할 수 있습니다

자신의 Ajax 웹 응용 프로그램을 구축하십시오 자신의 Ajax 웹 응용 프로그램을 구축하십시오 Mar 09, 2025 am 12:11 AM

그래서 여기 당신은 Ajax라는이 일에 대해 배울 준비가되어 있습니다. 그러나 정확히 무엇입니까? Ajax라는 용어는 역동적이고 대화식 웹 컨텐츠를 만드는 데 사용되는 느슨한 기술 그룹을 나타냅니다. 원래 Jesse J에 의해 만들어진 Ajax라는 용어

예제 색상 JSON 파일 예제 색상 JSON 파일 Mar 03, 2025 am 12:35 AM

이 기사 시리즈는 2017 년 중반에 최신 정보와 새로운 예제로 다시 작성되었습니다. 이 JSON 예에서는 JSON 형식을 사용하여 파일에 간단한 값을 저장하는 방법을 살펴 봅니다. 키 값 쌍 표기법을 사용하여 모든 종류를 저장할 수 있습니다.

8 멋진 jQuery 페이지 레이아웃 플러그인 8 멋진 jQuery 페이지 레이아웃 플러그인 Mar 06, 2025 am 12:48 AM

손쉬운 웹 페이지 레이아웃에 대한 jQuery 활용 : 8 에센셜 플러그인 jQuery는 웹 페이지 레이아웃을 크게 단순화합니다. 이 기사는 프로세스를 간소화하는 8 개의 강력한 JQuery 플러그인을 강조합니다. 특히 수동 웹 사이트 생성에 유용합니다.

' this ' 자바 스크립트로? ' this ' 자바 스크립트로? Mar 04, 2025 am 01:15 AM

핵심 포인트 JavaScript에서는 일반적으로 메소드를 "소유"하는 객체를 말하지만 함수가 호출되는 방식에 따라 다릅니다. 현재 객체가 없으면 글로벌 객체를 나타냅니다. 웹 브라우저에서는 창으로 표시됩니다. 함수를 호출 할 때 이것은 전역 객체를 유지하지만 객체 생성자 또는 그 메소드를 호출 할 때는 객체의 인스턴스를 나타냅니다. call (), apply () 및 bind ()와 같은 메소드를 사용 하여이 컨텍스트를 변경할 수 있습니다. 이 방법은 주어진이 값과 매개 변수를 사용하여 함수를 호출합니다. JavaScript는 훌륭한 프로그래밍 언어입니다. 몇 년 전,이 문장은있었습니다

소스 뷰어와의 jQuery 지식을 향상시킵니다 소스 뷰어와의 jQuery 지식을 향상시킵니다 Mar 05, 2025 am 12:54 AM

JQuery는 훌륭한 JavaScript 프레임 워크입니다. 그러나 어떤 도서관과 마찬가지로, 때로는 진행 상황을 발견하기 위해 후드 아래로 들어가야합니다. 아마도 버그를 추적하거나 jQuery가 특정 UI를 달성하는 방법에 대해 궁금한 점이 있기 때문일 것입니다.

모바일 개발을위한 10 개의 모바일 치트 시트 모바일 개발을위한 10 개의 모바일 치트 시트 Mar 05, 2025 am 12:43 AM

이 게시물은 Android, BlackBerry 및 iPhone 앱 개발을위한 유용한 치트 시트, 참조 안내서, 빠른 레시피 및 코드 스 니펫을 컴파일합니다. 개발자가 없어서는 안됩니다! 터치 제스처 참조 안내서 (PDF) Desig를위한 귀중한 자원

See all articles