مقدمة
اليوم سنبني نظام نشر صحفي بسيط. المرحلة الأولى من النظام لا تحتاج إلى أن تكون صعبة للغاية. لديها بشكل أساسي الوظائف التالية
① إدارة نوع الأخبار
② إدارة الأخبار (مع وظيفة تحميل الصورة)
③ تصفح الأخبار
على الرغم من عدم وجود العديد من الوظائف ، فإنه يغطي أيضًا العديد من العمليات الأساسية. تتم إضافة البرنامج وحذفه وفحصه وتعديله فقط ، وهو يكفي لإضافة وتحميل المرفقات. لذلك دعونا نبدأ دراستنا اليوم
تحضير
بعد مشكلة الأمس ، لدينا بالفعل بيئات NodeJS و MongoDB. الآن يمكننا إنشاء ملفات مشروع وملفات قاعدة البيانات مباشرة مباشرة
الخطوة الأولى هي فتح حرف الأمر والتبديل إلى D Disk للدخول
انسخ الرمز على النحو التالي: D:/> Express -e News
لذلك سيقوم النظام تلقائيًا ببناء البيئة الأساسية بسعادة
من الواضح أن العديد من الوحدات ليس لديها تبعيات. في هذا الوقت ، سوف آخذ مباشرة حزمة الأمس. json:
نسخة الكود كما يلي:
{
"الاسم": "اسم التطبيق" ،
"الإصدار": "0.0.1" ،
"خاص": صحيح ،
"البرامج النصية": {
"ابدأ": "عقدة app.js"
} ،
"التبعيات": {
"Express": "3.4.8" ،
"EJS": "*" ،
"Mongodb": "*"
}
}
ثم قم بالتبديل إلى دليل المشروع:
انسخ الرمز على النحو التالي: تثبيت NMP
يتم الانتهاء من جميع التبعيات ، ثم ندخل
نسخة الكود كما يلي:
D:/News> APP NODE
Express Server الاستماع على المنفذ 3000
لذلك ، بدأ برنامجنا يعمل بسعادة. عندما فتحنا عنوان URL ، وجدنا أنه لا توجد مشكلة.
ملاحظة: هناك مشكلة هنا يجب الإشارة إليها. الملف الذي قمنا بتنزيله ليس ترميز UTF-8 ، لذلك قد يكون هناك رمز مشوه باللغة الصينية ، ويجب توحيد ترميز الملف من قبل الجميع.
عندما يبدأ البرنامج في التشغيل ، يتطلب تكوين قواعد البيانات
① قم أولاً بإنشاء مجلد أخبار جديد في دليل MongoDB
② أضف إعدادات ملف التكوين.
نسخة الكود كما يلي:
module.exports = {
cookiesecret: 'mynews' ،
DB: "الأخبار" ،
المضيف: "المضيف المحلي"
} ؛
③ قم بإنشاء دليل نموذج جديد وإنشاء DB.JS جديد
نسخة الكود كما يلي:
إعدادات VAR = مطلوب ('../ الإعدادات ") ،
DB = طلب ('mongodb'). db ،
اتصال = مطلوب ('mongodb'). الاتصال ،
Server = require ('mongodb'). الخادم ؛
module.exports = new db (Settings.db ، server new (Settings.host ، connection.default_port) ، {safe: true}) ؛
④ قم بإنشاء برنامج News.Bat جديد على سطح المكتب
انسخ الرمز كما يلي: d: /mongodb/bin/mongod.exe -dbpath d:/mongodb/news
في المستقبل ، نحتاج إلى بدء قاعدة البيانات ، فقط تشغيلها. وبهذه الطريقة ، انتهت الاستعدادات الأولية لدينا بشكل أساسي.
ولكن هناك شيئان مزعجان آخران هنا. أحدهما هو أنه من المزعج للغاية بدء البرنامج الإخباري في كل مرة ، والآخر هو أنك تحتاج إلى إعادة التشغيل عند تعديل أي شيء. لذلك دعونا نحل هاتين المشكلتين أولاً.
① إنشاء news_app.bat على سطح المكتب ، ثم قم بتشغيله لبدء البرنامج.
انسخ الرمز على النحو التالي: العقدة D:/الأخبار/التطبيق
② المشرف هو حامي العمليات. يمكننا استخدامه لمساعدتنا على إعادة تشغيل البرنامج ، والمتابعة أولاً ، ثم ضبط node_app.bat
انسخ الرمز على النحو التالي: المشرف D:/News/APP
بالطبع ، تحتاج إلى تثبيته من قبل:
انسخ الرمز على النحو التالي: NPM Install -G Supervisor
بعد ذلك ، لا تحتاج إلى إعادة التشغيل يدويًا بعد تعديل الملف (يجب وضع news_app في دليل المشروع) ، وبالتالي فإن الاستعدادات موجودة هنا
هيكل المشروع
بعد انتهاء الخطوة الأولى ، نحتاج إلى التفكير في بنية المشروع
① الصفحة الرئيسية هي فهرس ، وسيتم سرد جميع أنواع الأخبار وإدخالات الأخبار هنا
② يحتوي كل عنصر إخباري على ثلاثة أزرار للتحرير/الحذف/العرض
③ تحتوي الصفحة الرئيسية على زر أخبار (يمكن تحميل الصور عند الإضافة)
الوظائف الأساسية على النحو الوارد أعلاه
لذلك ، نقوم بإزالة وظيفة التوجيه في التطبيق ونضع جميع الطرق في الفهرس
نسخة الكود كما يلي:
// ضع وظيفة التوجيه في الفهرس
//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 ('Delete News Report') ؛
}) ؛
app.get ('/view' ، function (req ، res) {
Res.Send ('View News request') ؛
}) ؛
app.get ('/update' ، function (req ، res) {
Res.Send ("Modify News Report") ؛
}) ؛
} ؛
الخطوة الأولى بسيطة ، لأنه يجب أن تكون هناك صفحة منفصلة لإضافة الأخبار ، والنقر فوق الزر "إضافة" سيؤدي إلى معالجة أخرى ، لذلك يجب تقسيم الطلب الداخلي. اللوائح التالية هي الآن على النحو التالي:
/ الصفحة الافتراضية ، التي تعرض جميع الأنواع وكذلك الأخبار ، مع زر حذف
/أضف لإضافة صفحة إخبارية
/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 ("Handle Add Address News Report") ؛
}) ؛
app.get ('/delete' ، function (req ، res) {
Res.Send ('Delete News Report') ؛
}) ؛
app.get ('/view' ، function (req ، res) {
Res.Send ('View News request') ؛
}) ؛
} ؛
لذلك نحن بحاجة إلى إنشاء العديد من القوالب الجديدة لتنظيم صفحات الويب لدينا. هنا لا نفصل الصفحات الأولى والأخيرة.
إضافة ملفين من القالب إضافة وعرض ، والتي تنفذ مؤقتًا بما يتوافق مع 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' ، {title: 'add news page'}) ؛
}) ؛
app.post ('/addNews' ، function (req ، res) {
Res.Send ("Handle Add Address News Report") ؛
}) ؛
app.get ('/delete' ، function (req ، res) {
Res.Send ('Delete News Report') ؛
}) ؛
app.get ('/view' ، function (req ، res) {
Res.Render ('View' ، {title: 'View News request'}) ؛
}) ؛
} ؛
ينتهي هيكل المشروع
تشغيل البيانات
بعد ظهور الهيكل العام ، نحتاج إلى إجراء عمليات البيانات:
① إضافة البيانات (إضافة أخبار)
② عرض البيانات (أخبار العرض)
③ حذف البيانات (حذف الأخبار)
لقد تضمنت في الأصل عمليات الكتابة ، لكنها تم ذلك وذهب. لا تهتم بذلك في الوقت الحالي ، لأنه من السهل أن تخلط عند القيام بذلك لأول مرة.
أضف الأخبار
هنا ، لا نستخدم تقديم النموذج ، نستخدم 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>
<viv>
العنوان: <إدخال type = "text" id = "title" />
</div>
<viv>
المحتوى: <textarea id = "content"> </filectarea>
</div>
<viv>
<type type = "button" type = "button" id = "ok" value = "إضافة أخبار" />
</div>
<script type = "text/javaScript">
$ (وثيقة). ready (function () {
$ ('#ok'). انقر فوق (function () {
var param = {} ؛
param.title = $ ('#title'). val () ؛
param.content = $ ('#content'). val () ؛
$ .post ('/addNews' ، param ، function () {
console.log ("تمت إضافة بنجاح") ؛
}) ؛
}) ؛
}) ؛
</script>
</body>
</html>
على الرغم من عدم وجود برنامج استجابة للطلب حتى الآن ، فلن تتم معالجة البيانات ، ولا يوجد أي مرفق هنا (المرفق مسموح به فقط لواحد) ، لذلك قمت بتعديل الكود وأضفت الصورة:
ملاحظة: كلما كان الشيء الأكثر إثارة للقلق هو أن الصورة مزعجة بعض الشيء بعد معالجة Ajax ، لذلك دعونا نؤدي مرة أخرى إلى تكوين عمليات هنا ، وإلا إلى المدة التي سيستغرقها القيام بذلك ...
نسخة الكود كما يلي:
<html>
<head>
<title>
<٪ = title ٪> </title>
<Link Rel = 'Stylesheet' Href = '/STYLESHEETS/Style.CSS'/>
</head>
<body>
<H1>
<٪ = title ٪> </h1>
<form enctype = "multipart/form-data" method = "post" Action = "/AddNews">
<viv>
العنوان: <إدخال type = "text" id = "title" name = "title" />
</div>
<viv>
الصورة: <إدخال type = "file" id = "pic" name = "pic" />
</div>
<viv>
المحتوى: <textarea id = "content" name = "content"> </swestarea>
</div>
<viv>
<type type = "إرسال" id = "ok" value = "إضافة أخبار" />
</div>
</form>
</body>
</html>
ليست هناك حاجة للنظر في قضية التعلق كثيرًا. دعونا نفعل ذلك الآن. الآن سنقوم بمعالجة برنامج الطلب أولاً. سنقوم هنا بإنشاء مجلد أخبار جديد في الأماكن العامة لتخزين صوره.
نموذج
أضف ملف News.js جديد إلى مجلد النماذج ، وإنشاء كيان له ، وإعطاء عمليات جديدة متعلقة بالاستعلام:
نسخة الكود كما يلي:
var mongodb = require ('./ db') ؛
أخبار الوظيفة (العنوان ، المحتوى ، الموافقة المسبقة عن علم) {
this.title = title ؛
this.content = المحتوى ؛
this.pic = pic ؛ // احفظ مسار التخزين
} ؛
module.exports = news ؛
// بيانات التخزين
news.prototype = {
حفظ: وظيفة (رد الاتصال) {
var date = new date () ؛
var time = {
التاريخ: التاريخ ،
السنة: Date.getlyar () ،
الشهر: date.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 ،
الموافقة المسبقة عن علم: this.pic ، // أخيرًا ، عندما يتعلق الأمر بمعالجة الصور ، احفظه أولاً
الوقت: الوقت
} ؛
// افتح اتصال البيانات ، فتحه هو رد اتصال ...
mongodb.open (وظيفة (err ، db) {
// الخروج إذا كان الخطأ خطأ
إذا (خطأ) {
إرجاع رد الاتصال (ERR) ؛
}
// افتح مجموعة الأخبار
db.collection ('News' ، function (err ، collection) {
إذا (خطأ) {
mongodb.close () ؛
إرجاع رد الاتصال (ERR) ؛
}
// اكتب إلى المجموعة (اكتب إلى قاعدة البيانات)
collection.insert (News ، {Safe: True} ، function (err) {
إرجاع رد الاتصال (ERR) ؛
}) ؛
رد الاتصال (NULL) ؛ // err هو فارغ
}) ؛
}) ؛
}
} ؛
لذلك ، هناك برنامج للكتابة إلى قاعدة البيانات. سنحاول هنا إدراج قاعدة البيانات. بالطبع ، نحتاج إلى تعديل البرنامج في مكتب التوجيه.
ملاحظة: بالطبع ، لا يمكن أن يكتب التوجيه الكثير من التعليمات البرمجية المنطقية ، ويجب فصل هذا الملف في المستقبل
في هذا الوقت ، يجب تغيير المنطق /addNews
نسخة الكود كما يلي:
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 (وظيفة (خطأ ، البيانات) {
Res.Send (البيانات) ؛
})
}) ؛
بعد الاستعلام ، لا توجد مشكلة كبيرة ، والآن مشكلة التعلق هي المشكلة
تحميل الصور
وظيفة التحميل لـ Express نفسها تدعمها. Express يوسع جسم الطلب من خلال BodyParser ، ثم يقوم بتحميل الملف من خلاله. ويستخدم التنسيق داخليًا.
هنا ، قم بتغيير app.use (express.bodyparser ()) في app.js إلى:
نسخة الكود كما يلي: app.use (express.bodyParser ({keepextensions: true ، exploaddir: './public/news'})) ؛
افتح index.js وأضف سطرًا من الكود أمامه:
انسخ الرمز كما يلي: fs = require ('fs') ،
تعديل ملف الفهرس:
نسخة الكود كما يلي:
app.post ('/addNews' ، function (req ، res) {
لـ (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 (وظيفة (خطأ ، البيانات) {
// res.send (البيانات) ؛
//})
}) ؛
في هذا الوقت ، بعد تحديد الملف ، انقر فوق إضافة أخبار ، وسيتم تحميل ملفنا
في هذا الوقت ، أحتاج فقط إلى تسجيل اسم الملف في قاعدة البيانات ، وهناك صور في دليل الملفات
نسخة الكود كما يلي:
app.post ('/addNews' ، function (req ، res) {
var pic = null ؛
لـ (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 (وظيفة (خطأ ، البيانات) {
Res.Send (البيانات) ؛
})
Res.Send ('<a href = "./"> ينجح طلب ، العودة إلى الصفحة الرئيسية </a>') ؛
}) ؛
هناك بيانات في قاعدة البيانات ، كما أن دليلنا يحتوي أيضًا على ملفات. الآن نحتاج فقط إلى قراءة البيانات.
ملاحظة: حثني الإخوة على الخروج لتناول مشروب خلال العطلة
قراءة البيانات
الخطوة الثانية هي بالطبع قراءة البيانات ، والأول هو قراءة البيانات على الصفحة الرئيسية:
نسخة الكود كما يلي:
var mongodb = require ('./ db') ؛
أخبار الوظيفة (العنوان ، المحتوى ، الموافقة المسبقة عن علم) {
this.title = title ؛
this.content = المحتوى ؛
this.pic = pic ؛ // احفظ مسار التخزين
} ؛
module.exports = news ؛
// بيانات التخزين
news.prototype = {
حفظ: وظيفة (رد الاتصال) {
var date = new date () ؛
// كائن تخزين البيانات
var news = {
العنوان: this.title ،
المحتوى: this.content ،
الموافقة المسبقة عن علم: this.pic ، // أخيرًا ، عندما يتعلق الأمر بمعالجة الصور ، احفظه أولاً
التاريخ: التاريخ
} ؛
// افتح اتصال البيانات ، فتحه هو رد اتصال ...
mongodb.open (وظيفة (err ، db) {
// الخروج إذا كان الخطأ خطأ
إذا (خطأ) {
إرجاع رد الاتصال (ERR) ؛
}
// افتح مجموعة الأخبار
db.collection ('News' ، function (err ، collection) {
إذا (خطأ) {
mongodb.close () ؛
إرجاع رد الاتصال (ERR) ؛
}
// اكتب إلى المجموعة (اكتب إلى قاعدة البيانات)
collection.insert (News ، {Safe: True} ، function (err) {
إرجاع رد الاتصال (ERR) ؛
}) ؛
رد الاتصال (فارغ) ؛ // err هو لاغ
}) ؛
}) ؛
}
} ؛
// قراءة المقالات والمعلومات ذات الصلة
news.get = function (id ، callback) {
// افتح قاعدة البيانات
mongodb.open (وظيفة (err ، db) {
إذا (خطأ) {
إرجاع رد الاتصال (ERR) ؛
}
db.collection ('News' ، function (err ، collection) {
إذا (خطأ) {
mongodb.close () ؛
إرجاع رد الاتصال (ERR) ؛
}
var query = {} ؛
if (id) {
Query.id = id ؛
}
// مقالات الاستعلام على أساس كائن الاستعلام
collection.find (Query) .Sort ({
التاريخ: -1
}). tararray (وظيفة (خطأ ، البيانات) {
mongodb.close () ؛
إذا (خطأ) {
إرجاع رد الاتصال (ERR) ؛ //فشل! العودة إلى ERR
}
رد الاتصال (NULL ، البيانات) ؛ //نجاح! أعد نتيجة الاستعلام كصفيف
}) ؛
}) ؛
}) ؛
} ؛
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>
<viv>
العنوان: <٪ = البيانات [k] .Title ٪> </viv>
<viv>
المحتوى: <٪ = البيانات [k]. content ٪> </viv>
<viv>
المرفق: <img src = "news/<٪ = data [k] .pic ٪>"/> </div>
</div>
<viv>
<a href = "/delete؟ id = <٪ = data [k] ٪>"> حذف </a>
</div>
<hr/>
</li>
<٪} ٪>
</ul>
</body>
</html>
خاتمة
حسنًا ، دعنا نتوقف هنا لإنتاج نظام نشر المقالة. في المستقبل ، سنضيف وظائف تدريجيا ونقوم بتجميلها.