Express와 함께 완전한 MVC 웹 사이트를 구축하십시오
- Jennifer Aniston원래의
- 2025-03-14 09:33:11407검색
Express는 무엇입니까?
Express는 Node.js의 최고의 프레임 워크 중 하나입니다. 그것은 훌륭한 지원과 많은 유용한 기능을 가지고 있습니다. 모든 기본 사항을 다루는 훌륭한 기사가 많이 있습니다. 그러나 이번에는 조금 더 깊이 파고 전체 웹 사이트를 만들기 위해 워크 플로를 공유하고 싶습니다. 일반적 으로이 기사는 Express뿐만 아니라 노드 개발자가 사용할 수있는 다른 훌륭한 도구와 함께 사용하는 것입니다.
이 튜토리얼을 따라 가려면 노드에 대해 다소 익숙하고 시스템에 이미 설치했다고 가정합니다.
Express의 미들웨어 이해
Express의 핵심은 연결됩니다. 이것은 많은 유용한 것들이 함께 제공되는 미들웨어 프레임 워크입니다. 미들웨어가 정확히 무엇인지 궁금하다면 다음은 다음과 같습니다.
const connect = require ( 'connect'),<br> http = 요구 ( 'http');<br><br> const app = connect ()<br> .use (function (req, res, next) {<br> Console.log ( "내 첫 번째 미들웨어");<br> 다음();<br> })<br> .use (function (req, res, next) {<br> Console.log ( "내 두 번째 미들웨어");<br> 다음();<br> })<br> .use (function (req, res, next) {<br> Console.log ( "End");<br> Res.end ( "Hello World");<br> });<br><br> http.createserver (app) .listen (3000);<br>
미들웨어는 기본적으로 응답 객체와 응답 객체를 받아들이거나 두 번째 미들웨어에서 다음 () 메소드 호출을 호출하여 다음 함수로 전달하는 기능입니다. 그리고 쿠키 이름으로 키를 쓴 개체가있는 req.cookies.
Express는 실제로 연결하고 라우팅 로직과 같은 새로운 기능을 추가하여 프로세스를 훨씬 부드럽게 만듭니다. 다음은 Express에서 GET 요청을 처리하는 예입니다.
app.get ( '/hello.txt', function (req, res) {<br> var body = 'Hello World';<br> res.setheader ( 'content-type', 'text/plain');<br> Res.SetHeader ( 'Content-Length', Body.length);<br> res.end (Body);<br> });<br>
소스 코드
우리가 만든이 샘플 사이트의 소스 코드는 Github에서 사용할 수 있습니다. 그것을 자유롭게 포크하고 가지고 놀십시오. 사이트를 실행하기위한 단계는 다음과 같습니다.
- 소스 코드를 다운로드하십시오
- NPM 설치로 이동하십시오
- Mongodb 데몬을 실행하십시오
- NPM 설치를 실행하십시오.
{<br> "이름": "mywebsite",<br> "설명": "내 웹 사이트",<br> "버전": "0.0.1",<br> "의존성": {<br> "Express": "5.x"<br> }<br> }<br>프레임 워크의 코드는 node_modules 에 배치되며 인스턴스를 만들 수 있습니다. 그러나 명령 줄 도구를 사용하여 대체 옵션을 선호합니다. NPX Express-Generator 명령을 사용하여 :
사용법 : Express [옵션] [DIR]<br><br> 옵션 :<br><br> -Version 출력 버전 번호<br> -e, -ejs는 EJS 엔진 지원을 추가합니다<br> -퍼그 퍼그 엔진 지원을 추가하십시오<br> -HBS 핸들 바 엔진 지원을 추가합니다<br> -h, -hogan add hogan.js 엔진 지원<br> -v, -view <engine>보기 지지대 추가 (Dust | ejs | hbs | hjs | jade | pug | twig | vash) (jade에 대한 기본값)<br> -아니오 뷰 뷰 엔진 대신 정적 HTML을 사용하십시오<br> -c, -css <engine> 스타일 시트 추가 지원 (Less | Stylus | Compass | Sass) (기본체에 대한 기본값)<br> -git add .gitignore<br> -f,-비어있는 디렉토리의 포스 힘<br> -h, -help 출력 사용 정보<br></engine></engine>
보시다시피, 사용할 수있는 몇 가지 옵션이 있지만 나에게는 충분합니다. 일반적으로 CSS 전 처리기 및 핸들 바로 템플릿 엔진으로 덜 사용합니다. 이 예에서는 세션 지원이 필요하므로 NPM 설치 및 NODE_MODULES 폴더가 나타납니다.
위의 접근 방식이 항상 적절한 것은 아니라는 것을 알고 있습니다. 경로 핸들러를 다른 디렉토리 또는 이와 유사한 것에 배치 할 수 있습니다. 그러나 다음 몇 가지 섹션에서 볼 수 있듯이 이미 생성 된 구조를 변경하고 매우 쉽습니다. 따라서 새로운 파일 구조로 작업하려면 App.js 만 생각해야합니다. 이 두 줄을 제거해야합니다.
const usersRouter = require ( "./ lours/user");<br> ...<br> app.use ( "/user", usersrouter);<br>
2 단계. 구성
이제 구성을 설정해야합니다. 우리의 작은 사이트는 로컬 서버, 스테이징 서버 및 프로덕션 서버의 세 가지 다른 장소에 배포되어야한다고 상상해 봅시다. 물론, 모든 환경의 설정은 다르며, 우리는 충분히 유연한 메커니즘을 구현해야합니다. 아시다시피, 모든 노드 스크립트는 콘솔 프로그램으로 실행됩니다. 따라서 현재 환경을 정의 할 명령 줄 인수를 쉽게 보낼 수 있습니다. 나중에 테스트를 작성하기 위해 해당 부분을 별도의 모듈로 래과했습니다. 다음은 /config/index.js 파일입니다.
const config = {<br> 현지의: {<br> 모드 : '로컬',<br> 포트 : 3000<br> },<br> 준비 : {<br> 모드 : '준비',<br> 포트 : 4000<br> },<br> 생산: {<br> 모드 : '생산',<br> 포트 : 5000<br> }<br> }<br> module.exports = function (모드) {<br> 반환 구성 [모드 || process.argv [2] || '로컬'] || config.local;<br> }<br>두 가지 설정 만 있습니다 (현재). 포트. 추측 한 바와 같이, 응용 프로그램은 다른 서버에 다른 포트를 사용합니다. 그렇기 때문에 App.js 에서 사이트의 진입 점을 업데이트해야합니다.
const config = require ( './ config') ();<br> process.env.port = config.port;<br>
구성을 전환하려면 끝에 환경을 추가하십시오. 예를 들어:
NPM 스테이징을 시작합니다<br>
포트 4000에서 서버를 실행합니다.
이제 우리는 모든 설정을 한 곳에 가지고 있으며 쉽게 관리 할 수 있습니다.
3 단계. 테스트 프레임 워크를 만듭니다
나는 테스트 중심 개발 (TDD)의 열렬한 팬입니다. 이 기사에 사용 된 모든 기본 클래스를 다루려고 노력하겠습니다. 물론, 절대적으로 모든 것을 테스트하면이 글이 너무 오래 걸리지만 일반적으로 자신만의 앱을 만들 때 진행해야합니다. 테스트에 가장 좋아하는 프레임 워크 중 하나는 UVU입니다. 사용하기가 매우 쉽고 빠르기 때문입니다. 물론 NPM 레지스트리에서 사용할 수 있습니다.
NPM 설치-사본 디브 UVU<br>
그런 다음 NPM 테스트 내에서 새 스크립트를 작성하면 다음을 볼 수 있습니다.
config.js<br> • • • (3 / 3)<br><br> 총 : 3<br> 통과 : 3<br> 건너 뛰기 : 0<br> 기간 : 0.81ms<br>
이번에는 먼저 구현과 테스트를 두 번째로 썼습니다. 그것은 정확히 일을하는 TDD 방법은 아니지만 다음 몇 섹션에서는 그 반대를 할 것입니다.
나는 많은 시간을 쓰는 데 많은 시간을 보내는 것이 좋습니다. 완전히 테스트 된 응용 프로그램보다 더 좋은 것은 없습니다.
몇 년 전, 나는 매우 중요한 것을 깨달았으므로 더 나은 프로그램을 제작하는 데 도움이 될 수 있습니다. 새 클래스, 새로운 모듈 또는 새로운 논리를 작성하기 시작할 때마다 스스로에게 물어보십시오.
이것을 어떻게 테스트 할 수 있습니까?
이 질문에 대한 답은 훨씬 더 효율적으로 코딩하고, 더 나은 API를 만들고, 모든 것을 잘 분리 된 블록에 넣는 데 도움이됩니다. 스파게티 코드에 대한 테스트를 작성할 수 없습니다. 예를 들어, 위의 구성 파일 ( /config/index.js )에서 프로덕션 구성을 보낼 가능성을 추가했지만 NPM 설치 MongoDB와 함께 노드 스크립트가 실행됩니다.
다음으로, 우리는 MongoDB 서버가 실행되는지 확인하는 테스트를 작성합니다. 다음은 /tests/mongodb.js 파일입니다.
const {test} = 요구 ( "UVU");<br> const {mongoclient} = 요구 ( "mongodb");<br><br> test ( "MongoDB Server Active", Async function () {<br> const client = new mongoclient ( "mongodb : //127.0.0.1 : 27017/fastdelivery");<br> 클라이언트를 기다립니다 .connect ();<br> });<br><br> test.run ();<br><br>MongoDB 클라이언트의 .connect 메소드를 추가 할 필요는 없습니다. 데이터베이스에 요청해야 할 때마다 Mongodb 클라이언트가 거상형 객체를 수신합니다. 이 때문에 초기 서버 생성에서 데이터베이스에 연결해야합니다. 이를 위해, 각 요청 전에 미들웨어가 자동으로 실행되기 때문에 사용 가능한 req.db 속성에서.
4. Express로 MVC 패턴을 설정하십시오
우리는 모두 MVC 패턴을 알고 있습니다. 문제는 이것이 표현에 적용되는 방법입니다. 다소 해석의 문제입니다. 다음 몇 단계에서는 모델,보기 및 컨트롤러 역할을하는 모듈을 만들겠습니다.
1 단계. 모델
모델은 응용 프로그램에있는 데이터를 처리하는 것입니다. 예술가에 접근 할 수 있어야합니다. 우리의 모델에는 다른 유형의 모델을 만들고 싶을 수도 있기 때문에 우리 모델에는 확장 방법이 있어야합니다. 예를 들어, ContactSmodel을 원할 수도 있습니다. 따라서이 두 가지 모델 기능을 테스트하기 위해 새 사양 /tests/base.model.js 를 작성해야합니다. 구현 코딩을 시작하기 전에 이러한 기능을 정의함으로써 모듈이 원하는 작업 만 수행 할 수 있음을 보장 할 수 있습니다.
const {test} = 요구 ( "UVU");<br> const assert = 요구 사항 ( "UVU/Assert");<br> const modelclass = require ( "../ models/base");<br> const dbmockup = {};<br> test ( "모듈 생성", Async function () {<br> const model = new ModelClass (dbmockup);<br> assert.ok (model.db);<br> assert.ok (model.setdb);<br> assert.ok (model.collection);<br> });<br> test.run ();<br>실제 DB 객체 대신 데이터베이스 뷰 디렉토리를위한 getter 대신 Base View 클래스로 변경됩니다. 이 작은 변화는 이제 또 다른 변화가 필요합니다. 우리는 템플릿 파일이 이제 다른 디렉토리에 배치되어 있음을 표현해야합니다.
app.set ( "views", path.join (__ dirname, "templates"));<br>
먼저 필요한 것을 정의하고 테스트를 작성한 다음 구현을 작성합니다. 다음 규칙과 일치하는 모듈이 필요합니다.
- 생성자는 응답 객체와 템플릿 이름을 받아야합니다.
- View 클래스가 있어야합니다. 예를 들어 JSON 데이터를 제공하는 것과 같이 응답 객체를 호출하지 않습니까?
const data = {개발자 : "Krasimir tsonev"};<br> 응답 .ContentType ( "Application/JSON");<br> 응답 .send (json.stringify (data));<br>매번이 작업을 수행하는 대신 JSONVIEW 클래스 또는 테스트 디렉토리를 갖는 것이 좋을 것입니다. 위의 예에서 실제로 컨트롤러 인 경로를 실행 한 후 '/'를 실행하는 경우 (1) 명령 줄 도구는 (1) 명령 줄 도구를 사용하여 런 메소드라는 디렉토리를 생성합니다.
- 자체 논리와 함께 실행 방법이 있어야합니다.
5. FastDelivery 웹 사이트를 만듭니다
좋아, 우리는 MVC 아키텍처를위한 좋은 클래스 세트를 가지고 있으며, 새로 만든 모듈을 테스트로 다루었습니다. 이제 우리는 가짜 회사 인 FastDelivery 사이트를 계속할 준비가되었습니다.
이 사이트에는 프론트 엔드와 관리 패널의 두 부분이 있다고 상상해 봅시다. 프론트 엔드는 데이터베이스에 작성된 정보를 최종 사용자에게 표시하는 데 사용됩니다. 관리자 패널은 해당 데이터를 관리하는 데 사용됩니다. 관리자 (컨트롤) 패널부터 시작하겠습니다.
1 단계. 제어판
먼저 관리 페이지 역할을하는 간단한 컨트롤러를 만들어 봅시다. 다음은 /routes/admin.js 파일입니다.
const basecontroller = require ( "./ base"),<br> View = require ( "../ views/base");<br> module.exports = new (클래스 AdminController 확장베이스 컨트롤러 {<br> 생성자 () {<br> Super ( "admin");<br> }<br> run (req, res, next) {<br> if (this.authorize (req)) {<br> req.session.fastDelivery = true;<br> req.session.save (function (err) {<br> var v = new View (res, "admin");<br> v.render ({<br> 제목 : "관리",<br> 내용 : "제어판에 오신 것을 환영합니다",<br> });<br> });<br> } 또 다른 {<br> const v = new View (res, "admin-login");<br> v.render ({<br> 제목 : "제발 로그인",<br> });<br> }<br> }<br> 인증 (req) {<br> 반품 (<br> (Req.session &&<br> req.session.fastDelivery &&<br> req.session.fastDelivery === true) ||<br> (Req. Body &&<br> req.body.username === this.username &&<br> req.body.password === this.password)<br> );<br> }<br> }) ();<br>컨트롤러 및 뷰에 사전 작성된 기본 클래스를 사용하면 제어판의 진입 점을 쉽게 만들 수 있습니다. admin.run 메소드는 미들웨어로 직접입니다. 그것은 우리가 맥락을 유지하기를 원하기 때문입니다. 우리가 이것을한다면 :
app.all ( '/admin*', admin.run);<br>
admin이라는 단어는 다른 것을 가리킬 것입니다.
관리 패널 보호
/관리자 로 시작하는 모든 페이지는 보호되어야합니다. 이를 달성하기 위해 Express의 미들웨어 : 세션을 사용할 것입니다. 단순히 두 가지 추가 작업을 수행하기 위해 관리자 컨트롤러라는 요청에 객체를 첨부합니다.
- 사용 가능한 세션이 있는지 확인해야합니다. 그렇지 않은 경우 로그인 양식을 표시하십시오.
- 로그인 양식으로 전송 된 데이터를 수락하고 사용자 이름과 비밀번호가 일치하는 경우 사용자를 승인해야합니다.
다음은 이것을 달성하는 데 사용할 수있는 작은 도우미 기능입니다.
인증 (req) {<br> 반품 (<br> (Req.session &&<br> req.session.fastDelivery &&<br> req.session.fastDelivery === true) ||<br> (Req. Body &&<br> req.body.username === this.username &&<br> req.body.password === this.password)<br> );<br> }<br>먼저, 세션 객체를 통해 사용자를 인식하려는 진술이 있습니다. 둘째, 양식이 제출되었는지 확인합니다. 그렇다면 양식의 데이터는 BodyParser Middleware에서 사용할 수 있습니다. 그런 다음 사용자 이름과 비밀번호가 일치하는지 확인합니다.
이제 제목, 그림 및 유형 속성은 레코드의 소유자를 결정합니다. 예를 들어 연락처 페이지는 관리자 컨트롤러를 사용한 한 레코드 만 필요합니다. 작업을 단순화하기 위해 추가 된 레코드 목록과 추가/편집 양식을 결합하기로 결정했습니다. 아래 스크린 샷에서 볼 수 있듯이 페이지의 왼쪽 부분은 목록과 양식의 오른쪽 부분에 예약되어 있습니다.
한 페이지에 모든 것이 있으면 페이지를 렌더링하는 부분에 집중하거나 템플릿으로 보내는 데이터에 집중해야합니다. 그렇기 때문에 여러 가지 도우미 기능을 만들었습니다.
this.del (req, function () {<br> this.form (req, res, function (formmarkup) {<br> this.list (function (listMarkup) {<br> v.render ({<br> 제목 : "관리",<br> 내용 : "제어판에 오신 것을 환영합니다",<br> 목록 : ListMarkup,<br> 양식 : Formmarkup,<br> });<br> });<br> });<br> });<br> const v = new View (res, "admin");<br>조금 추악 해 보이지만 내가 원하는대로 작동합니다. 첫 번째 도우미는 action = delete & id = [레코드의 ID]이며 컬렉션에서 데이터를 제거합니다. 두 번째 함수는 List Method가 정보를 가져오고 HTML 테이블을 준비하며 나중에 템플릿으로 전송됩니다. 이 세 가지 조력자의 구현은이 튜토리얼의 소스 코드에서 찾을 수 있습니다.
여기서는 admin.js 에서 파일 업로드를 처리하는 기능을 보여 주기로 결정했습니다.
handleFileUpload (req) {<br> if (! req.files ||! req.files.picture ||! req.files.picture.name) {<br> retur req.body.currentPicture || "";;<br> }<br> const data = fs.readfilesync (req.files.picture.path);<br> const filename = req.files.picture.name;<br> const uid = crypto.randombytes (10) .tostring ( "hex");<br> const dir = __dirname "/../public/uploads/"uid;<br> fs.mkdirsync (dir, "0777");<br> fs.writefilesync (dir "/"filename, data);<br> 반환 "/업로드/"uid "/"filename;<br> }<br>파일이 제출되면 노드 스크립트 req.files.picture. 위의 코드 스 니펫에서 readfilesync, writefilesync.
3 단계. 프론트 엔드
이제 열심히 일이 완료되었습니다. 관리 패널이 작동하고 있으며 블로그에 DB 객체의 유형이있는 집과 4 개의 레코드가 있지만 다른 /블로그 /: id 문자열에 전화하십시오. 이 경로는 req.params.id와 같은 URL과 일치합니다. 다시 말해, 동적 매개 변수를 정의 할 수 있습니다. 우리의 경우, 그것은 레코드의 ID입니다. 이 정보가 있으면 모든 기사에 대한 고유 한 페이지를 만들 수 있습니다.
두 번째 흥미로운 부분은 서비스, 경력 및 연락처 페이지를 구축 한 방법입니다. 데이터베이스에서 하나의 레코드 만 사용한다는 것은 분명합니다. 모든 페이지마다 다른 컨트롤러를 만들어야한다면 동일한 코드를 복사/붙여 넣고 NPM 설치 명령에서 유형을 변경하려면 새 종속성 (있는 경우)을 설치하려면 실행해야합니다.
- 그런 다음 기본 스크립트를 다시 실행해야합니다.
노드는 여전히 상당히 젊기 때문에 모든 것이 예상대로 작동하지는 않지만 항상 개선이 이루어지고 있습니다. 예를 들어, Node.js 프로그램이 지속적으로 실행되도록 영원히 보장합니다. 다음 명령을 발행하여이를 수행 할 수 있습니다.
영원히 youapp.js를 시작하십시오<br>
이것이 제가 서버에서 사용하는 것입니다. 멋진 작은 도구이지만 큰 문제를 해결합니다. 영원히 앱을 실행하면 응용 프로그램을 다시 시작합니다.
이제 저는 시스템 관리자가 아니지만 노드 앱을 Apache 또는 Nginx와 통합 한 경험을 공유하고 싶었습니다. 왜냐하면 이것이 어떻게 든 개발 워크 플로우의 일부라고 생각하기 때문입니다.
아시다시피, Apache는 일반적으로 포트 80에서 실행됩니다. 즉, http : // localhost : 80을 열면 Apache 서버에서 제공되는 페이지가 표시되며 대부분 노드 스크립트가 다른 포트에서 듣고있을 가능성이 높습니다. 따라서 요청을 수락하고 오른쪽 포트로 보내는 가상 호스트를 추가해야합니다. 예를 들어, 호스트 파일 아래 로컬 Apache 서버에서 방금 구축 한 사이트를 호스팅하고 싶다고 가정 해 봅시다.
127.0.0.1 ExpressCompleTewebsite.dev<br>
그런 다음 Apache Configuration 디렉토리에서 httpd-vhosts.conf 파일을 편집하고 추가해야합니다.
# ExpressCompleTewebsite.dev<br> <virtualhost><br> ServerName ExpressCompleTeweBsite.dev<br> Serveralias www.expresscompletewebsite.dev<br> 근위 퀘스트<br> <br> 주문 거부, 허용<br> 모두에게 허용합니다<br> <br> <br> proxypass http : // localhost : 3000/<br> proxypassreverse http : // localhost : 3000/<br> 위치><br> </virtualhost><br>
서버는 여전히 포트 80에서 요청을 수락하지만 노드가 듣고있는 포트 3000으로 전달합니다.
Nginx 설정은 훨씬 쉽고 솔직히 말해서 Node.js 기반 앱을 호스팅하는 데 더 나은 선택입니다. 여전히 호스트 파일에 도메인 이름을 추가해야합니다. 그런 다음 Nginx 설치하에 /사이트 지원 디렉토리에 새 파일을 만듭니다. 파일의 내용은 다음과 같습니다.
서버 {<br> 80;<br> Server_name ExpressCompleTeweBsite.dev<br> 위치 / {<br> proxy_pass http://127.0.0.1:3000;<br> proxy_set_header 호스트 $ http_host;<br> }<br> }<br>위의 호스트 설정으로 Apache와 Nginx를 모두 실행할 수 없습니다. 또한 포트 80이 필요하기 때문입니다. 또한 프로덕션 환경에서 위의 코드 스 니펫을 사용하려는 경우 더 나은 서버 구성에 대한 약간의 추가 연구를 원할 수도 있습니다. 내가 말했듯이, 나는이 분야의 전문가가 아닙니다.
결론
Express는 훌륭한 프레임 워크로 응용 프로그램 구축을 시작하기에 좋은 출발점을 제공합니다. 보시다시피, 그것은 당신이 그것을 확장하는 방법과 당신이 그것을 만들기 위해 사용할 것인지에 대한 선택의 문제입니다. 훌륭한 미들웨어를 사용하여 지루한 작업을 단순화하고 재미있는 부품을 개발자에게 맡깁니다.
이 게시물은 Jacob Jackson의 기여로 업데이트되었습니다. Jacob은 웹 개발자, 기술 작가, 프리랜서 및 오픈 소스 기고자입니다.
위 내용은 Express와 함께 완전한 MVC 웹 사이트를 구축하십시오의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!