Vorwort
Heute werden wir ein einfaches Pressemitteilungssystem erstellen. Die erste Stufe des Systems muss nicht zu schwierig sein. Es hat hauptsächlich die folgenden Funktionen
① News Type Management
② Nachrichtenverwaltung (mit Bild -Upload -Funktion)
③ News Browsing
Obwohl es nicht viele Funktionen gibt, deckt es auch viele grundlegende Operationen ab. Das Programm wird nur hinzugefügt, gelöscht, geprüft und geändert. Es reicht aus, Anhänge hinzuzufügen und hochzuladen. Beginnen wir also noch heute unsere Studie
Vorbereitung
Nach dem gestrigen Ärger haben wir bereits NodeJs und MongoDB -Umgebungen. Jetzt können wir direkt neue Projektdateien und Datenbankdateien erstellen
Der erste Schritt besteht darin, den Befehlszeichen zu öffnen und auf D -Disk zu wechseln, um sie einzugeben
Kopieren Sie den Code wie folgt: D:/> Express -e News
Daher baut das System die grundlegende Umgebung automatisch glücklich auf
Es ist offensichtlich, dass viele Module keine Abhängigkeiten haben. Zu diesem Zeitpunkt werde ich das gestrige Paket direkt einnehmen. Json:
Die Codekopie lautet wie folgt:
{
"Name": "Anwendungsname",
"Version": "0.0.1",
"privat": wahr,
"Skripte": {{
"Start": "Node App.js"
},
"Abhängigkeiten": {{
"Express": "3.4.8",
"EJS": "*",
"MongoDB": "*"
}
}
Wechseln Sie dann zum Projektverzeichnis:
Kopieren Sie den Code wie folgt: NMP Installation
Alle Abhängigkeiten sind abgeschlossen, und dann geben wir ein
Die Codekopie lautet wie folgt:
D:/News> Knoten -App
Express Server, der Port 3000 anhört
Also begann unser Programm glücklich zu laufen. Als wir die URL öffneten, stellten wir fest, dass es kein Problem gab.
PS: Hier gibt es ein Problem, das beachtet werden muss. Die von uns heruntergeladene Datei ist keine UTF-8-Codierung, daher kann es in Chinesisch ein verstümmelter Code geben, und die Dateicodierung muss von allen vereinheitlicht werden.
Wenn das Programm ausgeführt wird, erfordert es eine datenbankbezogene Konfiguration
① Erstellen Sie zuerst einen neuen Nachrichtenordner im MongoDB -Verzeichnis
② Fügen Sie dem Projekt Konfigurationsdateieinstellungen hinzu
Die Codekopie lautet wie folgt:
module.exports = {
Cookiesecret: 'MyNews',
DB: 'Nachrichten',
Gastgeber: 'Localhost'
};
③ Erstellen Sie ein neues Modellverzeichnis und erstellen Sie ein neues db.js
Die Codekopie lautet wie folgt:
var Settings = Request ('../ Einstellungen'),
Db = erfordern ('mongoDb'). Db,
Connection = fordert ('mongoDB'). Verbindung,
Server = Request ('mongoDB'). Server;
module.exports = new db (setting.db, neuer server (setting.host, connection.default_port), {sicher: true});
④ Erstellen Sie ein neues News.bat -Programm auf dem Desktop
Kopieren Sie den Code wie folgt: d: /mongodb/bin/mongod.exe -dbpath d:/mongodb/news
In Zukunft müssen wir die Datenbank starten und sie einfach ausführen. Auf diese Weise sind unsere vorläufigen Vorbereitungen im Grunde genommen vorbei.
Aber hier gibt es zwei weitere nervige Dinge. Das eine ist, dass es sehr ärgerlich ist, jedes Mal die Nachrichtensendung zu starten, und der andere ist, dass Sie beim Ändern von irgendetwas neu starten müssen. Lassen Sie uns zuerst diese beiden Probleme lösen.
① Erstellen Sie News_App.bat auf dem Desktop und führen Sie es dann aus, um das Programm zu starten.
Kopieren Sie den Code wie folgt: Knoten d:/news/App
② Supervisor ist ein Prozessschutz. Wir können es verwenden, um das Programm neu zu starten, zuerst zu folgen und dann unseren node_app.bat anzupassen
Kopieren Sie den Code wie folgt: Supervisor D:/News/App
Natürlich müssen Sie es vorher installieren:
Kopieren Sie den Code wie folgt: NPM Installation -g -Supervisor
Danach müssen Sie nach der Änderung der Datei nicht manuell neu starten (News_App muss im Projektverzeichnis platziert werden), sodass die Vorbereitungen hier vorbei sind
Projektstruktur
Nachdem der erste Schritt vorbei ist, müssen wir über die Projektstruktur nachdenken
① Die Startseite ist Index, und alle Nachrichtentypen und Nachrichteneinträge werden hier aufgeführt
② Jede Nachricht enthält drei Schaltflächen zum Bearbeiten/Löschen/Anzeigen
③ Die Startseite hat eine Nachrichtenschaltfläche (Bilder können beim Hinzufügen hochgeladen werden)
Grundfunktionen sind wie oben
Daher entfernen wir die Routing -Funktion in der App und setzen alle Routen in den Index ein
Die Codekopie lautet wie folgt:
// Steck die Routing -Funktion in den Index
//app.get('/ ', Routes.index);
//app.get('/users ', user.list);
Routen (App);
Die Codekopie lautet wie folgt:
module.exports = function (App) {
// Homepage, jetzt auch Homepage
app.get ('/', Funktion (req, res) {
res.render ('index', {title: 'express'});
});
app.get ('/add', function (req, res) {
res.send ('Nachrichtenanfrage hinzufügen');
});
app.get ('/delete', function (req, res) {
Res.Send ('Nachrichtenanfrage löschen');
});
app.get ('/view', function (req, res) {
res.send ('Nachrichtenanfrage anzeigen');
});
app.get ('/update', function (req, res) {
res.send ('Nachrichtenanforderung modifizieren');
});
};
Der erste Schritt ist einfach, da eine separate Seite zum Hinzufügen von Nachrichten vorhanden sein sollte. Wenn Sie auf die Schaltfläche Hinzufügen hinzufügen, wird eine andere Verarbeitung verursacht, sodass die interne Anfrage unterteilt werden muss. Die folgenden Vorschriften sind jetzt wie folgt:
/ Standardseite, auf der sowohl alle Typen als auch Nachrichten angezeigt werden, mit einer Schaltfläche Löschen
/Hinzufügen, um eine Nachrichtenseite hinzuzufügen
/addnews hinzufügen Nachrichten spezifische Postanforderungsadresse (Antwort beim Klicken auf die Schaltfläche).
/Löschen Sie die Nachrichtenanfrage
/Spezifische Nachrichtenanfrage anzeigen
So leicht die obige Route ändern:
Die Codekopie lautet wie folgt:
module.exports = function (App) {
// Homepage, jetzt auch Homepage
app.get ('/', Funktion (req, res) {
res.render ('index', {title: 'express'});
});
app.get ('/add', function (req, res) {
res.send ('News -Seite hinzufügen');
});
app.post ('/addnews', Funktion (req, res) {
res.send ('Handlungsnachrichtenanfrage hinzufügen');
});
app.get ('/delete', function (req, res) {
Res.Send ('Nachrichtenanfrage löschen');
});
app.get ('/view', function (req, res) {
res.send ('Nachrichtenanfrage anzeigen');
});
};
Wir müssen also mehrere neue Vorlagen erstellen, um unsere Webseiten zu organisieren. Hier trennen wir die ersten und letzten Seiten nicht.
Fügen Sie zwei Vorlagendateien hinzu, die addieren und Ansicht sind, die vorübergehend mit index.ejs übereinstimmen und sich auf die Navigationsänderung beziehen
Die Codekopie lautet wie folgt:
module.exports = function (App) {
// Homepage, jetzt auch Homepage
app.get ('/', Funktion (req, res) {
res.render ('index', {title: 'express'});
});
app.get ('/add', function (req, res) {
res.render ('add', {title: 'fügen Sie eine Nachrichtenseite hinzu'});
});
app.post ('/addnews', Funktion (req, res) {
res.send ('Handlungsnachrichtenanfrage hinzufügen');
});
app.get ('/delete', function (req, res) {
Res.Send ('Nachrichtenanfrage löschen');
});
app.get ('/view', function (req, res) {
res.render ('Ansicht', {Titel: 'Nachrichtenanfrage anzeigen'});
});
};
Die Projektstruktur endet
Datenbetrieb
Nachdem die Gesamtstruktur herauskommt, müssen wir Datenvorgänge ausführen:
① Daten hinzufügen (Nachrichten hinzufügen)
② Daten anzeigen (Nachrichten anzeigen)
③ Daten löschen (Nachrichten löschen)
Es umfasste ursprünglich Typoperationen, aber es war fertig und war weg. Interessiert es sich vorerst nicht, denn es ist leicht, verwirrt zu werden, wenn es zum ersten Mal tut.
Nachrichten hinzufügen
Hier verwenden wir keine Einreichung von Formular, wir verwenden Ajax ... Hier stellen wir die Zepto -Bibliothek vor, also wird unsere Seite so wie diese
Die Codekopie lautet wie folgt:
<! DocType html>
<html>
<kopf>
<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>
Titel: <Eingabe type = "text" id = "title" />
</div>
<div>
Inhalt: <textarea id = "content"> </textArea>
</div>
<div>
<input type = "button" type = "button" id = "OK" value = "Nachrichten hinzufügen" />
</div>
<script type = "text/javaScript">
$ (Dokument) .Ready (function () {
$ ('#ok'). click (function () {
var param = {};
param.title = $ ('#title'). val ();
param.content = $ ('#content'). val ();
$ .post ('/addnews', param, function () {
console.log ('erfolgreich hinzugefügt');
});
});
});
</script>
</body>
</html>
Obwohl es noch kein Anfrage -Antwortprogramm gibt, werden die Daten nicht verarbeitet, und hier gibt es keinen Anhang (der Anhang ist nur für einen zulässig), daher habe ich den Code geändert und das Bild hinzugefügt:
PS: Je problematischer die Sache ist, dass das Bild nach der AJAX -Verarbeitung etwas problematisch ist. Wechseln wir also einfach zurück, um hier Operationen zu formen. Andernfalls dauert es, um es zu tun ...
Die Codekopie lautet wie folgt:
<html>
<kopf>
<title>
< %= title %> </title>
<link rel = 'stylesheet' href = '/stylesheets/style.css'/>
</head>
<body>
<h1>
< %= title %> </h1>
<form engTepe = "MultiPart/Form-Data" methode = "post" action = "/addnews">
<div>
Titel: <Eingabe type = "text" id = "title" name = "title" />
</div>
<div>
Bild: <Eingabe type = "Datei" id = "pic" name = "pic" />
</div>
<div>
Inhalt: <textarea id = "content" name = "content"> </textArea>
</div>
<div>
<Eingabe type = "Senden" id = "OK" value = "Nachrichten hinzufügen" />
</div>
</form>
</body>
</html>
Es ist nicht erforderlich, das Anhangsproblem zu sehr zu berücksichtigen. Lass es uns vorerst tun. Jetzt werden wir das Anfrageprogramm zuerst verarbeiten. Hier erstellen wir in der Öffentlichkeit einen neuen Nachrichtenordner, um seine Bilder zu speichern.
Modell
Fügen Sie dem Modelsordner eine neue News.js-Datei hinzu, erstellen Sie eine Entität dafür und geben Sie neue Abfragen-Operationen an:
Die Codekopie lautet wie folgt:
var mongoDB = required ('./ db');
Funktionsnachrichten (Titel, Inhalt, Bild) {
this.title = title;
this.content = content;
this.pic = pic; // Speichern Sie den Speicherpfad
};
module.exports = news;
// Speicherdaten
News.prototype = {
Speichern: Funktion (Rückruf) {
var date = new Date ();
var time = {
Datum: Datum,
Jahr: Datum.Getinging (),,
Monat: Datum.Getingulyear () + "-" + (Datum.GetMonth () + 1),
Tag: Datum.Getingulyear () + "-" + (Date.getMonth () + 1) + "-" + Date.getDate (),,
Minute: Datum.Getingfullyear () + "-" + (Datum.getMonth () + 1) + "-" + Date.getDate () + "" +
Datum.Gethours () + ":" + (Datum.getminutes () <10? '0' + Datum.getminutes (): Datum.getminutes ())
}
// Datenspeicherobjekt
var news = {
Titel: this.title,
Inhalt: this.content,
Bild: this.pic, // Schließlich speichern Sie es zuerst, wenn es um die Bildverarbeitung geht
Zeit: Zeit
};
// Öffnen Sie die Datenverbindung und öffnen Sie es ist ein Rückruf ...
mongodb.open (Funktion (err, db) {
// Beenden Sie, wenn der Fehler falsch ist
if (err) {
Rückruf zurückgeben (arr);
}
// Öffne die Nachrichtensammlung
DB.Collection ('News', Funktion (Err, Sammlung) {
if (err) {
mongoDB.close ();
Rückruf zurückgeben (arr);
}
// Schreiben Sie in die Sammlung (schreiben Sie in die Datenbank)
Collection.insert (news, {safe: true}, function (err) {
Rückruf zurückgeben (arr);
});
Rückruf (NULL); // ERR IS NULL
});
});
}
};
Es gibt also ein Programm zum Schreiben in die Datenbank. Hier werden wir versuchen, die Datenbank einzufügen. Natürlich müssen wir das Programm im Routing -Büro ändern.
PS: Natürlich kann das Routing nicht zu viel logischer Code schreiben, diese Datei muss in Zukunft getrennt sein
Zu diesem Zeitpunkt muss die Logik in /addnews geändert werden
Die Codekopie lautet wie folgt:
app.post ('/addnews', Funktion (req, res) {
var title = req.body.title;
var content = req.body.content;
var pic = req.body.pic;
var News = neue Nachrichten (Titel, Inhalt, Bild)
news.save (Funktion (err, data) {
Res.Send (Daten);
})
});
Nach der Abfrage gibt es kein großes Problem, jetzt ist das Problem des Anhangs das Problem
Laden Sie Bilder hoch
Die Hochladenfunktion von Express selbst unterstützt es. Express spricht den Anforderungskörper durch Bodyparser und lädt dann die Datei durch sie hoch. Es verwendet innen formatierbar.
Ändern Sie hier die App.use (Express.Bodyparser ()) in App.js in:
Die Codekopie lautet wie folgt: app.use (express.bodyparser ({tenextensions: true, uploadDir: './public/news'}));
Öffnen Sie index.js und fügen Sie eine Codezeile vor diesem hinzu:
Kopieren Sie den Code wie folgt: FS = Request ('FS'),
Ändern Sie die Indexdatei:
Die Codekopie lautet wie folgt:
app.post ('/addnews', Funktion (req, res) {
für (var i in req.files) {
if (req.files [i] == 0) {
// eine Datei in der Synchronisation löschen
fs.unlinkSync (req.files [i] .Path);
console.log ('Erfolg eine leere Datei entfernt');
} anders {
var path = './public/news/' + req.files [i] .name;
// Benennen Sie eine Datei mithilfe der synchronen Methode um
fs.Renamesync (req.files [i] .Path, Pfad);
console.log ('sunccess umbenannt in eine Datei');
}
}
// var title = req.body.title;
// var content = req.body.content;
// var pic = req.body.pic;
// var news = neue Nachrichten (Titel, Inhalt, Bild)
// News.save (Funktion (Err, Daten) {
// Res.Send (Daten);
//})
});
Nachdem Sie die Datei ausgewählt haben, klicken Sie zu diesem Zeitpunkt auf Nachrichten hinzufügen, und unsere Datei wird hochgeladen
Zu diesem Zeitpunkt muss ich nur den Dateinamen in der Datenbank aufzeichnen, und es gibt Bilder im Dateiverzeichnis
Die Codekopie lautet wie folgt:
app.post ('/addnews', Funktion (req, res) {
var pic = null;
für (var i in req.files) {
if (req.files [i] == 0) {
// eine Datei in der Synchronisation löschen
fs.unlinkSync (req.files [i] .Path);
console.log ('Erfolg eine leere Datei entfernt');
} anders {
var path = './public/news/' + req.files [i] .name;
// Benennen Sie eine Datei mithilfe der synchronen Methode um
fs.Renamesync (req.files [i] .Path, Pfad);
console.log ('sunccess umbenannt in eine Datei');
}
pic = req.files [i] .name;
}
var title = req.body.title;
var content = req.body.content;
var News = neue Nachrichten (Titel, Inhalt, Bild)
news.save (Funktion (err, data) {
Res.Send (Daten);
})
res.send ('<a href = "./"> Anfrage erfolgreich, kehre zur Homepage zurück </a>');
});
In der Datenbank befinden sich Daten, und unser Verzeichnis enthält auch Dateien. Jetzt müssen wir nur die Daten lesen.
PS: Die Brüder forderten mich auf, während des Urlaubs etwas zu trinken gehen
Daten lesen
Der zweite Schritt ist natürlich das Lesen der Daten, und das erste Lesen der Daten auf der Startseite:
Die Codekopie lautet wie folgt:
var mongoDB = required ('./ db');
Funktionsnachrichten (Titel, Inhalt, Bild) {
this.title = title;
this.content = content;
this.pic = pic; // Speichern Sie den Speicherpfad
};
module.exports = news;
// Speicherdaten
News.prototype = {
Speichern: Funktion (Rückruf) {
var date = new Date ();
// Datenspeicherobjekt
var news = {
Titel: this.title,
Inhalt: this.content,
Bild: this.pic, // Schließlich speichern Sie es zuerst, wenn es um die Bildverarbeitung geht
Datum: Datum
};
// Öffnen Sie die Datenverbindung und öffnen Sie es ist ein Rückruf ...
mongodb.open (Funktion (err, db) {
// Beenden Sie, wenn der Fehler falsch ist
if (err) {
Rückruf zurückgeben (arr);
}
// Öffne die Nachrichtensammlung
DB.Collection ('News', Funktion (Err, Sammlung) {
if (err) {
mongoDB.close ();
Rückruf zurückgeben (arr);
}
// Schreiben Sie in die Sammlung (schreiben Sie in die Datenbank)
Collection.insert (news, {safe: true}, function (err) {
Rückruf zurückgeben (arr);
});
Rückruf (NULL); // err ist null
});
});
}
};
// Artikel und verwandte Informationen lesen
News.get = Funktion (ID, Rückruf) {
// Öffnen Sie die Datenbank
mongodb.open (Funktion (err, db) {
if (err) {
Rückruf zurückgeben (arr);
}
DB.Collection ('News', Funktion (Err, Sammlung) {
if (err) {
mongoDB.close ();
Rückruf zurückgeben (arr);
}
var query = {};
if (id) {
query.id = id;
}
// Artikel basierend auf dem Abfrageobjekt basieren
Collection.find (Abfrage) .sort ({{
Datum: -1
}). TOARRAY (Funktion (err, data) {
mongoDB.close ();
if (err) {
Rückruf zurückgeben (arr); //Fehlgeschlagen! Kehren Sie zu ERR zurück
}
Rückruf (NULL, Daten); //Erfolg! Geben Sie das Ergebnis der Abfrage als Array zurück
});
});
});
};
news.js
Die Codekopie lautet wie folgt:
<! DocType html>
<html>
<kopf>
<title>
< %= title %> </title>
<link rel = 'stylesheet' href = '/stylesheets/style.css'/>
</head>
<body>
<h1>
< %= title %> </h1>
<ul>
< %für (var k in Daten) { %>
<li>
<div>
Titel: < %= Daten [k] .Title %> </div>
<div>
Inhalt: <%= Daten [k] .Content%> </div>
<div>
Anhang: <img src = "news/<%= data [k] .pic%>"/> </div>
</div>
<div>
<a href = "/delete? id = < %= data [k] %>"> delete </a>
</div>
<hr/>
</li>
< %} %>
</ul>
</body>
</html>
Abschluss
Okay, lassen Sie uns hier für die Produktion des Artikelsverlagungssystems anhalten. In Zukunft werden wir nach und nach Funktionen hinzufügen und sie verschönern.