머리말

오늘은 간단한 보도자료 시스템을 만들어 보겠습니다. 시스템의 첫 번째 단계는 크게 어렵지 않아도 됩니다.

① 뉴스 유형 관리

② 뉴스 관리(이미지 업로드 기능 포함)

3뉴스 열람

기능은 많지 않지만 기본적인 작업도 많이 다루고 첨부파일 추가, 삭제, 확인, 업로드만 하면 충분합니다. 그럼 오늘부터 공부를 시작하겠습니다

준비

어제의 어려움 끝에 이미 nodeJS 및 mongoDB 환경이 생겼습니다. 이제 새 프로젝트 파일과 데이터베이스 파일을 직접 생성할 수 있습니다

첫 번째 단계는 명령 프롬프트를 열고 D 드라이브로 전환한 후

를 입력하는 것입니다.

코드 복사 코드는 다음과 같습니다.

D:>express -e news

그러면 시스템이 자동으로 기본 환경을 즐겁게 구축해 줍니다

분명히 많은 모듈 종속성이 없습니다. 지금은 어제의 package.json을 테스트해 보세요.

코드 복사 코드는 다음과 같습니다.

{

"name": "응용 프로그램 이름",

"버전": "0.0.1",

"비공개": 사실,

"스크립트": {

"시작": "노드 app.js"

},

"종속성": {

"익스프레스": "3.4.8",

"ejs": "*",

"mongodb": "*"

}

}

그런 다음 프로젝트 디렉토리로 전환하세요:

코드 복사 코드는 다음과 같습니다.

nmp install

모든 종속 파일을 다운로드한 후

를 입력합니다.

코드 복사 코드는 다음과 같습니다.

D:뉴스>노드 앱

포트 3000에서 수신 대기하는 Express 서버

그래서 저희 프로그램은 문제 없이 실행되었습니다.

PS: 여기에 주의가 필요한 문제가 있습니다. 우리가 다운로드한 파일이 UTF-8로 인코딩되지 않아 중국어가 깨질 수 있습니다. 파일 인코딩을 직접 통일해야 합니다.

프로그램 실행시 데이터베이스 관련 설정이 필요합니다

① 먼저 mongoDB 디렉터리에 새 뉴스 폴더를 만듭니다.

② 프로젝트에 settings.js 구성 파일 추가

코드 복사 코드는 다음과 같습니다.

module.exports = {

cookieSecret: 'myNews',

db: '뉴스',

호스트: 'localhost'

};

③ 새 모델 디렉토리를 생성하고 새 db.js를 생성합니다

코드 복사 코드는 다음과 같습니다.

var 설정 = require('../settings'),

Db = require('mongodb').Db,

연결 = require('mongodb').Connection,

서버 = require('mongodb').Server;

module.exports = new Db(settings.db, new Server(settings.host, Connection.DEFAULT_PORT), { safe: true });

④ 데스크탑에 새로운 news.bat 프로그램을 생성하세요

코드 복사 코드는 다음과 같습니다.

d:mongodbbinmongod.exe -dbpath d:mongodbnews

향후 데이터베이스를 시작하려면 실행만 하면 됩니다. 이렇게 하면 기본적으로 사전 준비가 완료됩니다.

근데 두 가지 귀찮은 점이 하나 있는데, 하나는 뉴스 프로그램을 매번 시작하기 귀찮고, 다른 하나는 수정하려면 다시 시작해야 한다는 점인데, 여기서 먼저 이 두 가지 문제를 해결하겠습니다

① 데스크탑에 새로운 news_app.bat를 생성하고 나중에 실행하여 프로그램을 시작합니다

코드 복사 코드는 다음과 같습니다.

node d:newsapp

② Supervisor는 프로그램을 다시 시작하는 데 도움을 주는 프로세스 보호 프로그램입니다. 그런 다음 node_app.bat를 조정하세요.

코드 복사 코드는 다음과 같습니다.

supervisor d:newsapp

물론 먼저 설치해야 합니다.

코드 복사 코드는 다음과 같습니다.

npm install -gsupervisor

이후에는 파일 수정 후 수동으로 재시작할 필요가 없으므로(news_app은 프로젝트 디렉토리에 위치해야 함) 준비작업은 여기서 끝

프로젝트 구조

첫 번째 단계 이후에는 프로젝트 구조에 대해 생각해 봐야 합니다

① 홈페이지는 색인이며 모든 뉴스 유형과 뉴스 항목이 나열됩니다

② 각 뉴스 항목에는 편집/삭제/보기의 세 가지 버튼이 있습니다

③ 홈페이지에 뉴스 추가 버튼이 있습니다. (추가 시 사진 업로드 가능)

기본 기능은 위와 같습니다

그래서 앱에서 라우팅 기능을 제거하고 모든 경로를 색인에 넣었습니다

코드 복사 코드는 다음과 같습니다.

//라우팅 함수를 인덱스에 넣습니다

//app.get('/', Routes.index);

//app.get('/users', user.list);

경로(앱);

코드 복사 코드는 다음과 같습니다.

module.exports = 함수(앱) {

//홈페이지, 이제 홈페이지도

app.get('/', 함수(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('뉴스 요청 수정');

});

};

첫 번째 단계는 이렇게 간단합니다. 뉴스를 추가하면 별도의 페이지가 있어야 하고 추가 버튼을 클릭하면 다른 처리가 필요하므로 각 요청을 내부적으로 분류해야 하기 때문입니다.

/ 모든 장르와 뉴스가 표시되고 삭제 버튼이 있는 기본 페이지

/add 뉴스 추가 페이지로 이동

/addNews 뉴스별 게시물 요청 주소 추가(버튼 클릭 시 응답)

/delete 뉴스 삭제 요청

/특정 뉴스 검색어 보기

그래서 위의 경로를 약간 수정했습니다.

코드 복사 코드는 다음과 같습니다.

module.exports = 함수(앱) {

//홈페이지, 이제 홈페이지도

app.get('/', 함수(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와 동일하게 작동하는 두 개의 템플릿 파일 add 및 view를 추가하고 탐색을 수정했습니다.

코드 복사 코드는 다음과 같습니다.

module.exports = 함수(앱) {

//홈페이지, 이제 홈페이지도

app.get('/', 함수(req, res) {

res.render('index', { title: 'Express' });

});

app.get('/add', function (req, res) {

res.render('add', { title: '뉴스 페이지 추가' });

});

app.post('/addNews', function (req, res) {

res.send('뉴스 추가 요청 처리 중');

});

app.get('/delete', function (req, res) {

res.send('뉴스 요청 삭제');

});

app.get('/view', function (req, res) {

res.render('view', { title: '뉴스 요청 보기' });

});

};