머리말
오늘 우리는 간단한 뉴스 릴리스 시스템을 구축 할 것입니다. 시스템의 첫 번째 단계는 너무 어려울 필요는 없습니다. 주로 다음 기능이 있습니다
① 뉴스 유형 관리
② 뉴스 관리 (사진 업로드 기능 포함)
③ 뉴스 탐색
기능은 많지 않지만 많은 기본 작업도 포함합니다. 이 프로그램은 추가, 삭제, 확인 및 수정되며 첨부 파일을 추가하고 업로드하기에 충분합니다. 오늘 우리의 공부를 시작합시다
준비
어제 문제가 발생한 후 이미 NodeJS 및 MongoDB 환경이 있습니다. 이제 새 프로젝트 파일과 데이터베이스 파일을 직접 만들 수 있습니다.
첫 번째 단계는 명령 문자를 열고 D 디스크로 전환하여 입력하는 것입니다.
다음과 같이 코드를 복사하십시오. D :/> Express -e News
따라서 시스템은 기본 환경을 자동으로 행복하게 구축 할 것입니다.
많은 모듈에 종속성이 없다는 것은 분명합니다. 이때, 나는 어제의 package.json을 직접 가져갈 것입니다.
코드 사본은 다음과 같습니다.
{
"이름": "Application-Name",
"버전": "0.0.1",
"개인": 사실,
"스크립트": {
"시작": "노드 app.js"
},
"의존성": {
"Express": "3.4.8",
"ejs": "*",
"Mongodb": "*"
}
}
그런 다음 프로젝트 디렉토리로 전환하십시오.
다음과 같이 코드를 복사하십시오. NMP 설치
모든 종속성이 완료된 다음 입력합니다
코드 사본은 다음과 같습니다.
D :/News> 노드 앱
포트 3000에서 서버 청취를 특징으로하십시오
그래서 우리의 프로그램은 행복하게 실행되기 시작했습니다. URL을 열었을 때 문제가 없다는 것을 알았습니다.
추신 : 여기에 주목해야 할 문제가 있습니다. 우리가 다운로드 한 파일은 UTF-8 인코딩이 아니므로 중국어로 된 코드가있을 수 있으며 파일 인코딩은 모든 사람이 통합해야합니다.
프로그램이 실행되기 시작하면 데이터베이스 관련 구성이 필요합니다
mongodb 디렉토리에서 먼저 새 뉴스 폴더 생성
project 프로젝트에 구성 파일 설정을 추가합니다
코드 사본은 다음과 같습니다.
module.exports = {
Cookiesecret : 'Mynews',
DB : '뉴스',
호스트 : 'localhost'
};
③ 새 모델 디렉토리를 만들고 새 DB.JS를 만듭니다.
코드 사본은 다음과 같습니다.
var settings = require ( '../ settings'),
db = require ( 'mongodb'). db,
Connection = require ( 'mongodb'). Connection,
Server = require ( 'mongodb'). 서버;
module.exports = new db (settings.db, new Server (settings.host, connection.default_port), {safe : true});
desktop 데스크탑에서 새로운 News.bat 프로그램을 만듭니다
다음과 같이 코드를 복사하십시오
앞으로 데이터베이스를 시작하고 실행해야합니다. 이런 식으로, 우리의 예비 준비는 기본적으로 끝났습니다.
그러나 여기에는 두 가지 더 성가신 것들이 있습니다. 하나는 매번 뉴스 프로그램을 시작하는 것이 매우 성가신 것입니다. 다른 하나는 무엇이든 수정할 때 다시 시작해야한다는 것입니다. 이 두 가지 문제를 먼저 해결해 봅시다.
① 데스크탑에서 News_app.bat을 생성 한 다음 프로그램을 시작하기 위해 실행하십시오.
코드를 다음과 같이 복사하십시오. Node D :/News/App
supervisor는 프로세스 보호자입니다. 우리는이를 사용하여 프로그램을 다시 시작하고 먼저 팔로우 한 다음 node_app.bat을 조정하는 데 도움이됩니다.
다음과 같이 코드를 복사하십시오 : 감독자 D :/News/App
물론 전에 설치해야합니다.
다음과 같이 코드를 복사하십시오. NPM Install -G Supervisor
그런 다음 파일을 수정 한 후 수동으로 다시 시작할 필요가 없습니다 (News_app는 프로젝트 디렉토리에 배치해야 함).
프로젝트 구조
첫 번째 단계가 끝나면 프로젝트 구조에 대해 생각해야합니다.
home 홈페이지는 색인이며 모든 뉴스 유형 및 뉴스 항목은 여기에 나열됩니다.
각 뉴스 항목에는 편집/삭제/보기를위한 3 개의 버튼이 있습니다
∎ 홈페이지에는 뉴스 버튼이 있습니다 (추가 할 때 사진을 업로드 할 수 있음)
기본 기능은 위와 같습니다
따라서 앱의 라우팅 기능을 제거하고 모든 경로를 인덱스에 넣습니다.
코드 사본은 다음과 같습니다.
// 라우팅 함수를 색인에 넣습니다
//app.get('/ ', routes.index);
//app.get('/users ', user.list);
경로 (앱);
코드 사본은 다음과 같습니다.
module.exports = function (app) {
// 홈페이지, 이제 홈페이지
app.get ( '/', function (req, res) {
res.render ( 'index', {title : 'express'});
});
app.get ( '/add', function (req, res) {
Res.Send ( '뉴스 요청 추가');
});
app.get ( '/delete', function (req, res) {
Res.Send ( '뉴스 요청 삭제');
});
app.get ( '/view', function (req, res) {
Res.Send ( '뉴스 요청보기');
});
app.get ( '/update', function (req, res) {
Res.Send ( '뉴스 요청 수정');
});
};
첫 번째 단계는 간단합니다. 뉴스 추가를위한 별도의 페이지가 있어야하고 추가 버튼을 클릭하면 다른 처리가 발생하므로 내부 요청이 세분화되어야합니다. 다음 규정은 이제 다음과 같습니다.
/ 모든 유형과 뉴스를 표시하는 기본 페이지, 삭제 버튼으로 뉴스를 표시합니다.
/뉴스 페이지를 추가하려면 추가하십시오
/AddNews 뉴스 특정 게시물 요청 주소 추가 (버튼을 클릭 할 때 응답)
/뉴스 요청 삭제 삭제
/특정 뉴스 문의보기
따라서 위의 경로를 약간 수정하십시오.
코드 사본은 다음과 같습니다.
module.exports = function (app) {
// 홈페이지, 이제 홈페이지
app.get ( '/', function (req, res) {
res.render ( 'index', {title : 'express'});
});
app.get ( '/add', function (req, res) {
Res.Send ( '뉴스 페이지 추가');
});
app.post ( '/addnews', function (req, res) {
Res.Send ( '뉴스 요청 핸들');
});
app.get ( '/delete', function (req, res) {
Res.Send ( '뉴스 요청 삭제');
});
app.get ( '/view', function (req, res) {
Res.Send ( '뉴스 요청보기');
});
};
따라서 웹 페이지를 구성하려면 몇 가지 새 템플릿을 만들어야합니다. 여기서 우리는 첫 페이지와 마지막 페이지를 분리하지 않습니다.
index.ejs와 일치하는 일시적으로 수행되고 내비게이션 수정과 관련된 두 개의 템플릿 파일 추가 및보기
코드 사본은 다음과 같습니다.
module.exports = function (app) {
// 홈페이지, 이제 홈페이지
app.get ( '/', function (req, res) {
res.render ( 'index', {title : 'express'});
});
app.get ( '/add', function (req, res) {
res.render ( 'add', {제목 : '뉴스 페이지 추가'});
});
app.post ( '/addnews', function (req, res) {
Res.Send ( '뉴스 요청 핸들');
});
app.get ( '/delete', function (req, res) {
Res.Send ( '뉴스 요청 삭제');
});
app.get ( '/view', function (req, res) {
res.render ( '보기', {제목 : '뉴스 요청보기'});
});
};
프로젝트 구조가 끝납니다
데이터 작동
전반적인 구조가 나오면 데이터 작업을 수행해야합니다.
① 데이터 추가 (뉴스 추가)
② 표시 데이터 (디스플레이 뉴스)
③ 데이터 삭제 (뉴스 삭제)
원래 유형 작업과 관련이 있었지만 완료되었고 사라졌습니다. 처음으로 할 때 혼란스러워지기 쉽기 때문에 당분간은 신경 쓰지 마십시오.
뉴스 추가
여기서 우리는 양식 제출을 사용하지 않고 Ajax를 사용합니다 ... 여기에 Zepto 라이브러리를 소개하므로 페이지가 다음과 같이됩니다.
코드 사본은 다음과 같습니다.
<! doctype html>
<html>
<헤드>
<title>
< %= title %> </title>
<link rel = '스타일 시트'href = '/Stylesheets/Style.css'/>
<script src = "javascripts/zepto.js"type = "text/javaScript"> </script>
</head>
<body>
<H1>
< %= title %> </h1>
<div>
제목 : <입력 유형 = "text"id = "title" />
</div>
<div>
내용 : <TextArea id = "Content"> </textRea>
</div>
<div>
<input type = "button"type = "button"id = "ok"value = "News Add" />
</div>
<script type = "text/javaScript">
$ (document) .ready (function () {
$ ( '#ok'). 클릭 (function () {
var param = {};
param.title = $ ( '#title'). val ();
param.content = $ ( '#content'). val ();
$ .post ( '/addnews', param, function () {
Console.log ( '성공적으로 추가');
});
});
});
</스크립트>
</body>
</html>
아직 요청 응답 프로그램은 없지만 데이터는 처리되지 않으며 여기에는 첨부 파일이 없습니다 (첨부 파일 만 허용됩니다). 따라서 코드를 수정하고 그림을 추가했습니다.
추신 : Ajax 처리 후 이미지가 약간 번거롭다는 것입니다. 따라서 여기에서 양식 작업으로 다시 전환하겠습니다. 그렇지 않으면 얼마나 오래 걸릴 것인가 ...
코드 사본은 다음과 같습니다.
<html>
<헤드>
<title>
< %= title %> </title>
<link rel = '스타일 시트'href = '/Stylesheets/Style.css'/>
</head>
<body>
<H1>
< %= title %> </h1>
<form enctype = "multipart/form-data"method = "post"action = "/addnews">
<div>
제목 : <input type = "text"id = "title"name = "title" />
</div>
<div>
사진 : <input type = "file"id = "pic"name = "pic" />
</div>
<div>
내용 : <TextArea id = "Content"name = "Content"> </textRea>
</div>
<div>
<입력 유형 = "제출"id = "OK"value = "뉴스 추가" />
</div>
</form>
</body>
</html>
첨부 문제를 너무 많이 고려할 필요가 없습니다. 지금은 해보자. 이제 우리는 먼저 요청 프로그램을 처리합니다. 여기서는 사진을 저장하기 위해 공개적으로 새로운 뉴스 폴더를 만들 것입니다.
모델
모델 폴더에 새 News.js 파일을 추가하고 엔티티를 빌드 한 다음 새 쿼리 관련 작업을 제공합니다.
코드 사본은 다음과 같습니다.
var mongodb = 요구 ( './ db');
기능 뉴스 (제목, 내용, 그림) {
this.title = 제목;
this.content = 내용;
this.pic = pic; // 저장 경로를 저장합니다
};
Module.exports = 뉴스;
// 스토리지 데이터
News.prototype = {
저장 : 함수 (콜백) {
var date = 새 날짜 ();
var time = {
날짜 : 날짜,
연도 : 날짜 .getlyear (),
월 : 날짜 .getlyear () + "-" + (date.getmonth () + 1),
날 : date.getLyEar () + "-" + (date.getMonth () + 1) + "-" + date.getDate (),
분 : date.getLyEar () + "-" + (date.getMonth () + 1) + "-" + date.getDate () + "" +
date.gethours () + ":" + (date.getMinutes () <10? '0' + date.getMinutes () : date.getMinutes ())
}
// 데이터 저장 개체
var News = {
제목 : this.title,
내용 : this.content,
PIC : this.pic, // 마지막으로 이미지 처리와 관련하여 먼저 저장하십시오.
시간 : 시간
};
// 데이터 연결을 열고 콜백입니다 ...
mongodb.open (function (err, db) {
// 오류가 잘못되면 종료합니다
if (err) {
리턴 콜백 (err);
}
// 뉴스 컬렉션을 엽니 다
db.collection ( 'News', 함수 (err, collection) {
if (err) {
mongodb.close ();
리턴 콜백 (err);
}
// 컬렉션에 쓰기 (데이터베이스에 쓰기)
collection.insert (News, {Safe : True}, function (err) {
리턴 콜백 (err);
});
콜백 (null); // err는 null입니다
});
});
}
};
따라서 데이터베이스에 쓸 프로그램이 있습니다. 여기에서 데이터베이스를 삽입하려고합니다. 물론 라우팅 사무실에서 프로그램을 수정해야합니다.
추신 : 물론 라우팅은 너무 많은 논리 코드를 쓸 수 없으며,이 파일은 향후 분리되어야합니다.
현재 로직 /추가 사항을 변경해야합니다.
코드 사본은 다음과 같습니다.
app.post ( '/addnews', function (req, res) {
var title = req.body.title;
var content = req.body.content;
var pic = req.body.pic;
var News = 새로운 뉴스 (제목, 내용, 그림)
News.save (함수 (err, data) {
Res.Send (데이터);
})
});
쿼리 후 큰 문제가 없으며 이제 첨부 문제가 문제입니다.
사진 업로드
Express 자체의 업로드 기능이 지원합니다. Express는 BodyParser를 통해 요청 본문을 구문 분석 한 다음 파일을 통해 파일을 업로드합니다. 내부적으로 형식을 사용합니다.
여기에서는 app.js에서 app.use (express.bodyparser ())를 변경합니다.
코드 사본은 다음과 같습니다.
index.js를 열고 그 앞에 코드 줄을 추가하십시오.
다음과 같이 코드를 복사하십시오. fs = require ( 'fs'),
인덱스 파일 수정 :
코드 사본은 다음과 같습니다.
app.post ( '/addnews', function (req, res) {
for (var i in req.files) {
if (req.files [i] == 0) {
// 동기화에서 파일을 삭제합니다
fs.unlinksync (req.files [i] .path);
console.log ( '성공적인 파일 제거');
} 또 다른 {
var path = './public/news/' + req.files [i] .name;
// 동기 메소드를 사용하여 파일 이름을 바꿉니다
fs.renamesync (req.files [i] .path, path);
Console.log ( 'SunCcess는 파일로 이름이 변경됨');
}
}
// var title = req.body.title;
// var content = req.body.content;
// var pic = req.body.pic;
// var News = 새로운 뉴스 (제목, 내용, 그림)
// news.save (함수 (err, data) {
// res.Send (데이터);
//})
});
현재 파일을 선택한 후 뉴스 추가를 클릭하면 파일이 업로드됩니다.
현재 데이터베이스에 파일 이름을 녹음하면 파일 디렉토리에 사진이 있습니다.
코드 사본은 다음과 같습니다.
app.post ( '/addnews', function (req, res) {
var pic = null;
for (var i in req.files) {
if (req.files [i] == 0) {
// 동기화에서 파일을 삭제합니다
fs.unlinksync (req.files [i] .path);
console.log ( '성공적인 파일 제거');
} 또 다른 {
var path = './public/news/' + req.files [i] .name;
// 동기 메소드를 사용하여 파일 이름을 바꿉니다
fs.renamesync (req.files [i] .path, path);
Console.log ( 'SunCcess는 파일로 이름이 변경됨');
}
pic = req.files [i] .name;
}
var title = req.body.title;
var content = req.body.content;
var News = 새로운 뉴스 (제목, 내용, 그림)
News.save (함수 (err, data) {
Res.Send (데이터);
})
res.send ( '<a href = "./"> 요청 성공, 홈페이지로 돌아 가기 </a>');
});
데이터베이스에는 데이터가 있으며 디렉토리에도 파일도 있습니다. 이제 데이터 만 읽어야 만하면됩니다.
추신 : 형제들은 휴가 중에 술을 마시라고 촉구했습니다.
데이터를 읽습니다
두 번째 단계는 물론 데이터를 읽는 것입니다. 첫 번째는 홈페이지의 데이터를 읽는 것입니다.
코드 사본은 다음과 같습니다.
var mongodb = 요구 ( './ db');
기능 뉴스 (제목, 내용, 그림) {
this.title = 제목;
this.content = 내용;
this.pic = pic; // 저장 경로를 저장합니다
};
Module.exports = 뉴스;
// 스토리지 데이터
News.prototype = {
저장 : 함수 (콜백) {
var date = 새 날짜 ();
// 데이터 저장 개체
var News = {
제목 : this.title,
내용 : this.content,
PIC : this.pic, // 마지막으로 이미지 처리와 관련하여 먼저 저장하십시오.
날짜 : 날짜
};
// 데이터 연결을 열고 콜백입니다 ...
mongodb.open (function (err, db) {
// 오류가 잘못되면 종료합니다
if (err) {
리턴 콜백 (err);
}
// 뉴스 컬렉션을 엽니 다
db.collection ( 'News', 함수 (err, collection) {
if (err) {
mongodb.close ();
리턴 콜백 (err);
}
// 컬렉션에 쓰기 (데이터베이스에 쓰기)
collection.insert (News, {Safe : True}, function (err) {
리턴 콜백 (err);
});
콜백 (null); // err는 null입니다
});
});
}
};
// 기사 및 관련 정보를 읽습니다
news.get = function (id, 콜백) {
// 데이터베이스를 엽니 다
mongodb.open (function (err, db) {
if (err) {
리턴 콜백 (err);
}
db.collection ( 'News', 함수 (err, collection) {
if (err) {
mongodb.close ();
리턴 콜백 (err);
}
var query = {};
if (id) {
query.id = id;
}
// 쿼리 객체를 기반으로 쿼리 기사
collection.find (query) .sort ({{
날짜 : -1
}). toArray (함수 (err, data) {
mongodb.close ();
if (err) {
리턴 콜백 (err); //실패한! Err로 돌아갑니다
}
콜백 (NULL, 데이터); //성공! 쿼리 결과를 배열로 반환하십시오
});
});
});
};
News.js
코드 사본은 다음과 같습니다.
<! doctype html>
<html>
<헤드>
<title>
< %= title %> </title>
<link rel = '스타일 시트'href = '/Stylesheets/Style.css'/>
</head>
<body>
<H1>
< %= title %> </h1>
<ul>
< %(데이터의 var k) { %>
<li>
<div>
제목 : < %= data [k] .Title %> </div>
<div>
내용 : <%= data [k] .Content%> </div>
<div>
첨부 파일 : <img src = "News/<%= data [k] .pic%>"/> </div>
</div>
<div>
<a href = "/delete? id = < %= data [k] %>"> delete </a>
</div>
<hr/>
</li>
< %} %>
</ul>
</body>
</html>
결론
좋아, 기사 출판 시스템 제작을 위해 여기서 멈추자. 앞으로 우리는 점차적으로 기능을 추가하고 아름답게 할 것입니다.