คำนำ
วันนี้เราจะสร้างระบบข่าวง่าย ๆ ขั้นตอนแรกของระบบไม่จำเป็นต้องยากเกินไป ส่วนใหญ่มีฟังก์ชั่นต่อไปนี้
①การจัดการประเภทข่าว
②การจัดการข่าว (พร้อมฟังก์ชั่นอัปโหลดรูปภาพ)
③การเรียกดูข่าว
แม้ว่าจะมีฟังก์ชั่นไม่มากนัก แต่ก็ครอบคลุมการดำเนินการขั้นพื้นฐานมากมาย โปรแกรมจะถูกเพิ่ม, ลบ, ตรวจสอบและแก้ไขเท่านั้นและเพียงพอที่จะเพิ่มและอัปโหลดไฟล์แนบ มาเริ่มการศึกษาของเรากันวันนี้
การตระเตรียม
หลังจากปัญหาเมื่อวานนี้เรามีสภาพแวดล้อม NodeJS และ MongoDB อยู่แล้ว ตอนนี้เราสามารถสร้างไฟล์โครงการและไฟล์ฐานข้อมูลใหม่ได้โดยตรง
ขั้นตอนแรกคือการเปิดอักขระคำสั่งและเปลี่ยนเป็น D Disk เพื่อป้อน
คัดลอกรหัสดังต่อไปนี้: D:/> ข่าวด่วน
ดังนั้นระบบจะสร้างสภาพแวดล้อมพื้นฐานโดยอัตโนมัติอย่างมีความสุข
เห็นได้ชัดว่าโมดูลจำนวนมากไม่มีการพึ่งพา ในเวลานี้ฉันจะใช้แพ็คเกจเมื่อวานนี้โดยตรง json:
การคัดลอกรหัสมีดังนี้:
-
"ชื่อ": "แอปพลิเคชันชื่อ",
"เวอร์ชัน": "0.0.1"
"ส่วนตัว": จริง
"สคริปต์": {
"เริ่ม": "Node App.js"
-
"การพึ่งพา": {
"ด่วน": "3.4.8"
"EJS": "*",
"MongoDB": "*"
-
-
จากนั้นเปลี่ยนไปใช้ไดเรกทอรีโครงการ:
คัดลอกรหัสดังนี้: การติดตั้ง NMP
การพึ่งพาทั้งหมดเสร็จสิ้นแล้วเราก็เข้าสู่
การคัดลอกรหัสมีดังนี้:
D:/ข่าว> แอพโหนด
Express Server ฟังบนพอร์ต 3000
ดังนั้นโปรแกรมของเราเริ่มทำงานอย่างมีความสุข เมื่อเราเปิด URL เราพบว่าไม่มีปัญหา
PS: มีปัญหาที่นี่ที่ต้องสังเกต ไฟล์ที่เราดาวน์โหลดไม่ใช่การเข้ารหัส UTF-8 ดังนั้นอาจมีรหัสที่อ่านไม่ออกเป็นภาษาจีนและการเข้ารหัสไฟล์จะต้องรวมกันเป็นหนึ่งเดียว
เมื่อโปรแกรมเริ่มทำงานจะต้องมีการกำหนดค่าที่เกี่ยวข้องกับฐานข้อมูล
①ก่อนสร้างโฟลเดอร์ข่าวใหม่ในไดเรกทอรี MongoDB
②เพิ่มการตั้งค่าไฟล์ configuration.js ในโครงการ
การคัดลอกรหัสมีดังนี้:
module.exports = {
Cookiesecret: 'MyNews',
DB: 'ข่าว',
โฮสต์: 'localhost'
-
③สร้างไดเรกทอรีโมเดลใหม่และสร้าง db.js ใหม่
การคัดลอกรหัสมีดังนี้:
การตั้งค่า var = ต้องการ ('../ การตั้งค่า')
db = ต้องการ ('mongoDb'). db,
การเชื่อมต่อ = ต้องการ ('MongoDB') การเชื่อมต่อ
เซิร์ฟเวอร์ = ต้องการ ('mongoDB') เซิร์ฟเวอร์;
module.exports = new db (settings.db, เซิร์ฟเวอร์ใหม่ (settings.host, connection.default_port), {ปลอดภัย: true});
④สร้างโปรแกรม News.bat ใหม่บนเดสก์ท็อป
คัดลอกรหัสดังต่อไปนี้: D: /mongoDb/bin/mongod.exe -dbpath D:/MongoDB/ข่าว
ในอนาคตเราต้องเริ่มฐานข้อมูลเพียงแค่เรียกใช้ ด้วยวิธีนี้การเตรียมการเบื้องต้นของเรานั้นจบลงแล้ว
แต่มีอีกสองสิ่งที่น่ารำคาญที่นี่ หนึ่งคือว่ามันน่ารำคาญมากที่จะเริ่มรายการข่าวทุกครั้งและอื่น ๆ คือคุณต้องรีสตาร์ทเมื่อแก้ไขอะไร ดังนั้นมาแก้ปัญหาทั้งสองนี้ก่อน
①สร้าง news_app.bat บนเดสก์ท็อปแล้วเรียกใช้เพื่อเริ่มโปรแกรม
คัดลอกรหัสดังต่อไปนี้: Node D:/News/App
②หัวหน้างานเป็นตัวป้องกันกระบวนการ เราสามารถใช้มันเพื่อช่วยเรารีสตาร์ทโปรแกรมติดตามก่อนจากนั้นปรับ node_app.bat ของเรา
คัดลอกรหัสดังต่อไปนี้: หัวหน้างาน D:/News/App
แน่นอนคุณต้องติดตั้งก่อน:
คัดลอกรหัสดังต่อไปนี้: NPM Install -G Supervisor
หลังจากนี้คุณไม่จำเป็นต้องรีสตาร์ทด้วยตนเองหลังจากแก้ไขไฟล์ (NEWS_APP จำเป็นต้องวางไว้ในไดเรกทอรีโครงการ) ดังนั้นการเตรียมการจะอยู่ที่นี่
โครงสร้างโครงการ
หลังจากขั้นตอนแรกสิ้นสุดลงเราต้องคิดถึงโครงสร้างโครงการ
①โฮมเพจเป็นดัชนีและทุกประเภทข่าวและรายการข่าวจะถูกระบุไว้ที่นี่
②แต่ละรายการข่าวมีสามปุ่มสำหรับการแก้ไข/ลบ/ดู
③หน้าแรกมีปุ่มข่าว (สามารถอัปโหลดรูปภาพได้เมื่อเพิ่ม)
ฟังก์ชั่นพื้นฐานอยู่ข้างต้น
ดังนั้นเราจึงลบฟังก์ชั่นการกำหนดเส้นทางในแอพและใส่เส้นทางทั้งหมดลงในดัชนี
การคัดลอกรหัสมีดังนี้:
// ใส่ฟังก์ชันการกำหนดเส้นทางลงในดัชนี
//app.get('/ ', route.index);
//app.get('/users ', user.list);
เส้นทาง (แอพ);
การคัดลอกรหัสมีดังนี้:
module.exports = function (แอป) {
// โฮมเพจตอนนี้ยังโฮมเพจ
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.get ('/', function (req, res) {
res.render ('index', {title: 'express'});
-
app.get ('/add', function (req, res) {
Res.Send ('เพิ่มหน้าข่าว');
-
app.post ('/addNews', ฟังก์ชั่น (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.get ('/', function (req, res) {
res.render ('index', {title: 'express'});
-
app.get ('/add', function (req, res) {
res.render ('เพิ่ม', {title: 'เพิ่มหน้าข่าว'});
-
app.post ('/addNews', ฟังก์ชั่น (req, res) {
Res.Send ('จัดการเพิ่มคำขอข่าว');
-
app.get ('/delete', function (req, res) {
Res.Send ('ลบคำขอข่าว');
-
app.get ('/view', function (req, res) {
res.render ('ดู', {title: 'ดูคำขอข่าว'});
-
-
โครงสร้างโครงการสิ้นสุดลง
การดำเนินการข้อมูล
หลังจากโครงสร้างโดยรวมออกมาเราจำเป็นต้องดำเนินการข้อมูล:
①เพิ่มข้อมูล (เพิ่มข่าว)
②แสดงข้อมูล (แสดงข่าว)
③ลบข้อมูล (ลบข่าว)
เดิมทีเกี่ยวข้องกับการดำเนินงานประเภท แต่ก็เสร็จแล้วและมันก็หายไป อย่าสนใจเรื่องนี้เพราะมันเป็นเรื่องง่ายที่จะสับสนเมื่อทำเป็นครั้งแรก
เพิ่มข่าวสาร
ที่นี่เราไม่ได้ใช้การส่งแบบฟอร์มเราใช้ Ajax ... ที่นี่เราแนะนำไลบรารี Zepto ดังนั้นหน้าของเราจะกลายเป็นเช่นนี้
การคัดลอกรหัสมีดังนี้:
<! doctype html>
<html>
<head>
<title>
< %= title %> </title>
<link rel = 'stylesheet' href = '/stylesheets/style.css'/>
<script src = "javascripts/zepto.js" type = "text/javascript"> </script>
</head>
<body>
<H1>
< %= title %> </h1>
<div>
Title: <input type = "text" id = "title" />
</div>
<div>
เนื้อหา: <textarea id = "content"> </textarea>
</div>
<div>
<อินพุต type = "ปุ่ม" type = "ปุ่ม" id = "ตกลง" value = "เพิ่มข่าว" />>
</div>
<script type = "text/javascript">
$ (เอกสาร) .ready (function () {
$ ('#ok') คลิก (ฟังก์ชัน () {
var param = {};
param.title = $ ('#title'). val ();
param.content = $ ('#content'). val ();
$ .post ('/addNews', param, function () {
console.log ('เพิ่มสำเร็จ');
-
-
-
</script>
</body>
</html>
แม้ว่าจะยังไม่มีโปรแกรมการตอบสนองคำขอข้อมูลจะไม่ถูกประมวลผลและไม่มีไฟล์แนบที่นี่ (ไฟล์แนบได้รับอนุญาตสำหรับหนึ่งเดียว) ดังนั้นฉันจึงแก้ไขรหัสและเพิ่มรูปภาพ:
PS: สิ่งที่ลำบากมากขึ้นคือภาพนั้นค่อนข้างลำบากหลังจากการประมวลผล AJAX ดังนั้นลองเปลี่ยนกลับไปใช้การดำเนินการแบบฟอร์มที่นี่มิฉะนั้นจะใช้เวลานานแค่ไหนในการทำ ...
การคัดลอกรหัสมีดังนี้:
<html>
<head>
<title>
< %= title %> </title>
<link rel = 'stylesheet' href = '/stylesheets/style.css'/>
</head>
<body>
<H1>
< %= title %> </h1>
<รูปแบบ enctype = "multipart/form-data" method = "post" action = "/addNews">
<div>
Title: <input type = "text" id = "title" name = "title" />>
</div>
<div>
รูปภาพ: <อินพุต type = "file" id = "pic" name = "pic" />>
</div>
<div>
เนื้อหา: <textarea id = "content" name = "content"> </textarea>
</div>
<div>
<อินพุต type = "ส่ง" id = "ตกลง" value = "เพิ่มข่าว" />
</div>
</form>
</body>
</html>
ไม่จำเป็นต้องพิจารณาปัญหาไฟล์แนบมากเกินไป ตอนนี้มาทำกันเถอะ ตอนนี้เราจะดำเนินการโปรแกรมคำขอก่อน ที่นี่เราจะสร้างโฟลเดอร์ข่าวใหม่ในที่สาธารณะเพื่อเก็บรูปภาพ
แบบอย่าง
เพิ่มไฟล์ news.js ใหม่ลงในโฟลเดอร์โมเดลสร้างเอนทิตีสำหรับมันและให้การดำเนินการที่เกี่ยวข้องกับการสืบค้นใหม่:
การคัดลอกรหัสมีดังนี้:
var mongoDb = reghed ('./ db');
Function News (ชื่อ, เนื้อหา, pic) {
this.title = title;
this.content = เนื้อหา;
this.pic = pic; // บันทึกเส้นทางการจัดเก็บข้อมูล
-
module.exports = ข่าว;
// ข้อมูลการจัดเก็บข้อมูล
news.prototype = {
บันทึก: ฟังก์ชั่น (โทรกลับ) {
วันที่ var = วันที่ใหม่ ();
var time = {
วันที่: วันที่
ปี: date.getlyear (),,
เดือน: date.getulyear () + "-" + (date.getMonth () + 1)
วัน: date.getulyear () + "-" + (date.getMonth () + 1) + "-" + date.getDate (),
นาที: date.getulyear () + "-" + (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 (ฟังก์ชั่น (err, db) {
// ออกหากเกิดข้อผิดพลาด
ถ้า (err) {
ส่งคืนการโทรกลับ (เอ่อ);
-
// เปิดคอลเลกชันข่าว
db.collection ('News', ฟังก์ชั่น (err, collection) {
ถ้า (err) {
MongoDb.close ();
ส่งคืนการโทรกลับ (เอ่อ);
-
// เขียนไปยังคอลเลกชัน (เขียนไปยังฐานข้อมูล)
collection.insert (ข่าว, {safe: true}, ฟังก์ชั่น (err) {
ส่งคืนการโทรกลับ (เอ่อ);
-
การโทรกลับ (null); // err เป็น null
-
-
-
-
ดังนั้นจึงมีโปรแกรมที่จะเขียนลงในฐานข้อมูล ที่นี่เราจะพยายามแทรกฐานข้อมูล แน่นอนเราต้องแก้ไขโปรแกรมที่สำนักงานเส้นทาง
PS: แน่นอนการกำหนดเส้นทางไม่สามารถเขียนโค้ดตรรกะมากเกินไปไฟล์นี้จะต้องคั่นในอนาคต
ในเวลานี้จำเป็นต้องเปลี่ยนตรรกะใน /addNews
การคัดลอกรหัสมีดังนี้:
app.post ('/addNews', ฟังก์ชั่น (req, res) {
title var = req.body.title;
var content = req.body.content;
var pic = req.body.pic;
var news = ข่าวใหม่ (ชื่อ, เนื้อหา, pic)
news.save (ฟังก์ชั่น (err, data) {
Res.Send (ข้อมูล);
-
-
หลังจากสอบถามแล้วไม่มีปัญหาใหญ่ตอนนี้ปัญหาสิ่งที่แนบมาคือปัญหา
อัปโหลดรูปภาพ
ฟังก์ชั่นการอัปโหลดของ Express นั้นรองรับ แสดงการแยกวิเคราะห์ตัวตนผ่าน bodyparser แล้วอัปโหลดไฟล์ผ่าน ใช้งานได้ภายใน
ที่นี่เปลี่ยน app.use (express.bodyparser ()) ใน app.js เป็น:
การคัดลอกรหัสมีดังนี้: app.use (express.bodyparser ({keepextensions: true, uploaddir: './public/news'}));
เปิด index.js และเพิ่มบรรทัดของรหัสด้านหน้า:
คัดลอกรหัสดังนี้: fs = reghed ('fs')
แก้ไขไฟล์ดัชนี:
การคัดลอกรหัสมีดังนี้:
app.post ('/addNews', ฟังก์ชั่น (req, res) {
สำหรับ (var i ใน 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 = ข่าวใหม่ (ชื่อ, เนื้อหา, pic)
// news.save (ฟังก์ชั่น (err, data) {
// res.send (ข้อมูล);
-
-
ในเวลานี้หลังจากเลือกไฟล์คลิกเพิ่มข่าวและไฟล์ของเราจะถูกอัปโหลด
ในเวลานี้ฉันแค่ต้องบันทึกชื่อไฟล์ในฐานข้อมูลและมีรูปภาพในไดเรกทอรีไฟล์
การคัดลอกรหัสมีดังนี้:
app.post ('/addNews', ฟังก์ชั่น (req, res) {
var pic = null;
สำหรับ (var i ใน 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;
-
title var = req.body.title;
var content = req.body.content;
var news = ข่าวใหม่ (ชื่อ, เนื้อหา, pic)
news.save (ฟังก์ชั่น (err, data) {
Res.Send (ข้อมูล);
-
Res.Send ('<a href = "./"> คำขอสำเร็จกลับไปที่หน้าแรก </a>');
-
มีข้อมูลในฐานข้อมูลและไดเรกทอรีของเราก็มีไฟล์ด้วย ตอนนี้เราต้องอ่านข้อมูลเท่านั้น
PS: พี่น้องกระตุ้นให้ฉันออกไปดื่มในช่วงวันหยุด
อ่านข้อมูล
ขั้นตอนที่สองคือการอ่านข้อมูลและขั้นแรกคือการอ่านข้อมูลในหน้าแรก:
การคัดลอกรหัสมีดังนี้:
var mongoDb = reghed ('./ db');
Function News (ชื่อ, เนื้อหา, pic) {
this.title = title;
this.content = เนื้อหา;
this.pic = pic; // บันทึกเส้นทางการจัดเก็บข้อมูล
-
module.exports = ข่าว;
// ข้อมูลการจัดเก็บข้อมูล
news.prototype = {
บันทึก: ฟังก์ชั่น (โทรกลับ) {
วันที่ var = วันที่ใหม่ ();
// วัตถุการจัดเก็บข้อมูล
var news = {
ชื่อเรื่อง: this.title,
เนื้อหา: this.content,
Pic: this.pic, // ในที่สุดเมื่อพูดถึงการประมวลผลภาพให้บันทึกก่อน
วันที่: วันที่
-
// เปิดการเชื่อมต่อข้อมูลเปิดเป็นการโทรกลับ ...
mongoDb.open (ฟังก์ชั่น (err, db) {
// ออกหากเกิดข้อผิดพลาด
ถ้า (err) {
ส่งคืนการโทรกลับ (เอ่อ);
-
// เปิดคอลเลกชันข่าว
db.collection ('News', ฟังก์ชั่น (err, collection) {
ถ้า (err) {
MongoDb.close ();
ส่งคืนการโทรกลับ (เอ่อ);
-
// เขียนไปยังคอลเลกชัน (เขียนไปยังฐานข้อมูล)
collection.insert (ข่าว, {safe: true}, ฟังก์ชั่น (err) {
ส่งคืนการโทรกลับ (เอ่อ);
-
การโทรกลับ (null); // err เป็น null
-
-
-
-
// อ่านบทความและข้อมูลที่เกี่ยวข้อง
news.get = function (id, callback) {
// เปิดฐานข้อมูล
mongoDb.open (ฟังก์ชั่น (err, db) {
ถ้า (err) {
ส่งคืนการโทรกลับ (เอ่อ);
-
db.collection ('News', ฟังก์ชั่น (err, collection) {
ถ้า (err) {
MongoDb.close ();
ส่งคืนการโทรกลับ (เอ่อ);
-
var query = {};
ถ้า (id) {
query.id = id;
-
// บทความสอบถามตามวัตถุแบบสอบถาม
collection.find (คำถาม) .sort ({
วันที่: -1
}). toarray (ฟังก์ชั่น (err, data) {
MongoDb.close ();
ถ้า (err) {
ส่งคืนการโทรกลับ (เอ่อ); //ล้มเหลว! กลับไปที่ Err
-
การโทรกลับ (null, data); //ความสำเร็จ! ส่งคืนผลลัพธ์ของการสืบค้นเป็นอาร์เรย์
-
-
-
-
news.js
การคัดลอกรหัสมีดังนี้:
<! doctype html>
<html>
<head>
<title>
< %= title %> </title>
<link rel = 'stylesheet' 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 = "ข่าว/<%= data [k] .pic%>"/> </div>
</div>
<div>
<a href = "/ลบ? id = < %= data [k] %>"> ลบ </a>
</div>
<HR/>
</li>
-
</ul>
</body>
</html>
บทสรุป
โอเคให้หยุดที่นี่เพื่อการผลิตระบบการเผยแพร่บทความ ในอนาคตเราจะค่อยๆเพิ่มฟังก์ชั่นและทำให้สวยงาม