1. 개방 분석
안녕하세요 여러분, Big Bear가 다시 여기 있습니다. 어제, 나는 개인적인 무언가 때문에 블로그를 쓰지 않았기 때문에 오늘 다시 나왔습니다. 이 기사는 주로 메모장에 대한 작은 신청서 (이전 기사)에 관한 것입니다.
또한 "Connect"미들웨어 사용 및 "MongoDB"의 사용을 소개했습니다. 오늘 저는이 두 개의 미들웨어를 결합하여 실용적인 예를 작성하고 지속적으로 개선하고 리팩터링하며 "성실한"의 목표를 달성했습니다.
완전한 학습의 목적. 좋아, 말도 안되는 말을 그만두겠습니다. 그냥 주제로 바로 가십시오.
2. 요구 사항 분석
(1) 사용자 등록 및 로그인 기능 (복잡한 상호 작용 시나리오가 관여하지 않으며 사용자가 등록 할 때 이미 존재하는지 여부를 결정합니다).
(2) 사용자는 성공적으로 로그인하고 노트 관리 시스템의 배경 (메모 모듈의 추가, 삭제, 수정 및 확인 기능)을 입력했습니다.
(3) 사용자는 간단한 권한 부서 (관리자, 등록 된 사용자)를 가질 수 있습니다.
(4) 인터페이스는 비교적 간단하며 학습에 중점을 둡니다.
3. 설계 및 응용 프로그램 시작 (1 부)
(1), 사용자 로그인 페이지를 작성하면 코드는 다음과 같습니다.
코드 사본은 다음과 같습니다.
<! doctype html>
<html>
<헤드>
<title> Bigbear 메모장 응용 프로그램 로그인 </title>
<meta content = "ie = 8"http-equiv = "x-ua-catible"/>
<meta http-equiv = "content-type"content = "text/html; charset = utf-8">
<스타일 유형 = "텍스트/CSS">
. 노트 타이틀 {
마진 바닥 : 45px;
배경 : #6699cc;
글꼴 크기 : 14px;
글꼴 중량 : 대담한;
색상 : #ffff;
글꼴 패밀리 : arial;
높이 : 24px;
라인 높이 : 24px;
}
A {
색상 : #336699;
글꼴 패밀리 : arial;
글꼴 크기 : 14px;
글꼴 중량 : 대담한;
}
</스타일>
<script src = "js/index.js"> </script>
</head>
<body>
<div> Bigbear 메모장 응용 프로그램 로그인 </div>
<form action = "/login"method = "post">
<span> 사용자 이름 : </span> <입력 유형 = "text"name = "name"/> <br/> <br/>
<span> 비밀번호 : < /span> <입력 유형 = "password"name = "password" />
<입력 유형 = "제출"값 = "로그인" />
<a href = "reg.html"> 등록하고 싶습니다 </a>
</form>
</body>
</html>
생식 이미지 :
(2) 사용자 등록 페이지를 작성하면 코드는 다음과 같습니다.
코드 사본은 다음과 같습니다.
<! doctype html>
<html>
<헤드>
<title> Bigbear 메모장 응용 프로그램 등록 </title>
<meta content = "ie = 8"http-equiv = "x-ua-catible"/>
<meta http-equiv = "content-type"content = "text/html; charset = utf-8">
<스타일 유형 = "텍스트/CSS">
. 노트 타이틀 {
마진 바닥 : 45px;
배경 : #FF3300;
글꼴 크기 : 14px;
글꼴 중량 : 대담한;
색상 : #ffff;
글꼴 패밀리 : arial;
높이 : 24px;
라인 높이 : 24px;
}
</스타일>
<script src = "js/index.js"> </script>
</head>
<body>
<div> Bigbear 메모장 응용 프로그램 등록 </div>
<form action = "/reg"method = "post">
<span> 사용자 이름 : </span> <입력 유형 = "text"name = "name"/> <br/> <br/>
<Span> 비밀번호 : </span> <input type = "password"name = "password"/> <br/> <br/>
<입력 유형 = "제출"값 = "레지스터" />
</form>
</body>
</html>
생식 이미지 :
(3) 다음과 같이 "MongoDB"연결 코드를 설정하십시오.
코드 사본은 다음과 같습니다.
var mongodb = 요구 ( "mongodb");
var server = new mongodb.server ( "localhost", 27017, {
auto_reconnect : true
});
var conn = new mongodb.db ( "bb", 서버, {
안전 : 사실
});
conn.open (function (error, db) {
if (오류) 던지기 오류;
console.info ( "Mongodb Connected!");
});
Exports = module.exports = conn;
(4) 다음과 같이 모델 엔티티 클래스 "사용자"를 만듭니다.
코드 사본은 다음과 같습니다.
var conn = require ( "../ conn");
기능 사용자 (사용자) {
this.name = user [ "name"];
this.password = user [ "password"];
};
user.prototype.save = function (콜백) {
var that = this;
conn.collection ( "사용자", {
안전 : 사실
}, 함수 (오류, 수집) {
if (error) reture conn.close ();
collection.findone ({//이 사용자가 존재하는지 여부를 결정합니다
이름 : that.name
}, function (오류, 사용자) {
if (error) reture conn.close ();
if (! user) {
collection.insert ({
이름 : that.name + "",
비밀번호 : that.password + ""
}, {
안전 : 사실
}, function (오류, 사용자) {
if (error) reture conn.close ();
콜백 && 콜백 (사용자);
conn.close ();
});
}
또 다른{
콜백 ( "사용자가 등록되었습니다!");
}
});
});
};
user.login = function (이름, 암호, 콜백) {
conn.collection ( "사용자", {
안전 : 사실
}, 함수 (오류, 수집) {
if (error) reture conn.close ();
collection.findone ({
이름 : 이름,
비밀번호 : 비밀번호
}, function (오류, 사용자) {
if (error) reture conn.close ();
콜백 && 콜백 (사용자);
conn.close ();
});
});
};
Exports = module.exports = 사용자;
생식 이미지 :
(5), 다음과 같이 응용 프로그램 "앱"을 만듭니다.
코드 사본은 다음과 같습니다.
// app.js
var connect = require ( "./ lib/connect");
var user = require ( "./ models/user");
var app = connect.createserver ();
app .use (connect.logger ( "dev"))
.use (connect.query ())
.use (connect.bodyparser ())
.use (connect.cookieparser ())
.use (connect.static (__ dirname + "/views"))))
.use (connect.static (__ dirname + "/public")))
.use ( "/login", function (요청, 응답, 다음) {
var name = request.body [ "name"];
var password = request.body [ "password"];
user.login (이름, 암호, 함수 (사용자) {
if (사용자) {
response.end ( "오신 것을 환영합니다 :" + user [ "name"] + " ^ _ ^ ... ...");
}
또 다른{
response.end ( "사용자 :" + name + "등록되지 않음!");
}
});
})
.use ( "/reg", function (요청, 응답, 다음) {
var name = request.body [ "name"];
var password = request.body [ "password"];
새로운 사용자 ({
이름 : 이름,
비밀번호 : 비밀번호
}). 저장 (function (user) {
if (user && user [ "name"]) {
response.end ( "사용자 :" + name + "register!");
}
또 다른{
response.end ( "사용자 :" + name + "가 등록되었습니다!");
}
});
})
.Listen (8888, function () {
Console.log ( "포트에서 실행되는 웹 서버 ---> 8888.");
});
설명하겠습니다 :
(1) "connect.query ()"------- "get"요청의 구문 분석을 처리합니다.
(2) "connect.bodyparser ()"------ "Post"요청의 구문 분석을 처리합니다.
(3) "connect.static (__ dirname +"/views "), connect.static (__ dirname +"/public ")" "
템플릿보기 "HTML"및 "JS, CSS, JPG, GIF"와 같은 정적 리소스의 리소스 디렉토리를 나타냅니다.
다음은이 응용 프로그램의 디렉토리 구조입니다.
4, 요약합시다
(1) NodeJS 운영 데이터베이스의 기본 작동 문을 마스터하십시오.
(2), 모델, 뷰 및 경로와 같은 계층 구조를 나눕니다.
(3)이 기사의 예제를 지속적으로 최적화하고 수정합니다 (예 : 사용자가 존재하는지 확인하기 위해 등록하면 독립적으로 "사용자 관리자"를 생성하여 사용자 확인 및 저장 작업을 작성할 수 있음).
(4) 내일 후속 기능을 계속 완료하려면 기대하십시오.