NodeJS-Tutorial zum Erstellen eines einfachen Artikels zur Veröffentlichung von system_node.js

Vorwort

Wir werden heute ein einfaches Pressemitteilungssystem erstellen. Die erste Stufe des Systems muss nicht allzu schwierig sein. Es hat hauptsächlich die folgenden Funktionen

① Verwaltung von Nachrichtentypen

② Nachrichtenverwaltung (mit Bild-Upload-Funktion)

③ Durchsuchen von Nachrichten

Obwohl es nicht viele Funktionen gibt, deckt es auch viele grundlegende Vorgänge ab. Das Programm fügt nur Anhänge hinzu, löscht sie, prüft sie und lädt sie hoch, was ausreichend ist. Beginnen wir also noch heute mit unserer Studie

Vorbereitung

Nach den gestrigen Problemen haben wir bereits NodeJS- und MongoDB-Umgebungen. Jetzt können wir direkt neue Projektdateien und Datenbankdateien erstellen

Der erste Schritt besteht darin, die Eingabeaufforderung zu öffnen, zum Laufwerk D zu wechseln und

einzugeben

Code kopieren Der Code lautet wie folgt:

D:>express -e news

Dann baut das System automatisch und problemlos die Grundumgebung auf

Offensichtlich sind viele Modulabhängigkeiten nicht vorhanden. Machen Sie zu diesem Zeitpunkt einfach den Test der gestrigen package.json:

Code kopieren Der Code lautet wie folgt:

{
„name“: „Anwendungsname“,
„Version“: „0.0.1“,
„privat“: wahr,
„Skripte“: {
„start“: „node app.js“
},
„Abhängigkeiten“: {
„express“: „3.4.8“,
„ejs“: „*“,
„mongodb“: „*“
}
}

Anschließend wechseln Sie in das Projektverzeichnis:

Code kopieren Der Code lautet wie folgt:

nmp install

Nachdem alle abhängigen Dateien heruntergeladen wurden, geben wir

ein

Code kopieren Der Code lautet wie folgt:

D:news>node app
Express-Server überwacht Port 3000

Also lief unser Programm problemlos. Als wir die URL öffneten, stellten wir fest, dass es tatsächlich kein Problem gab

PS: Hier gibt es ein Problem, das Aufmerksamkeit erfordert. Die von uns heruntergeladene Datei ist nicht UTF-8-codiert, daher muss die Dateicodierung möglicherweise von Ihnen vereinheitlicht werden.

Wenn das Programm ausgeführt wird, ist eine datenbankbezogene Konfiguration erforderlich

① Erstellen Sie zunächst einen neuen News-Ordner im MongoDB-Verzeichnis

② Fügen Sie die Konfigurationsdatei „settings.js“ zum Projekt hinzu

Code kopieren Der Code lautet wie folgt:

module.exports = {
cookieSecret: 'myNews',
db: 'news',
Host: 'localhost'
};

③ Erstellen Sie ein neues Modellverzeichnis und eine neue db.js

Code kopieren Der Code lautet wie folgt:

var Settings = require('../settings'),
Db = require('mongodb').Db,
Connection = require('mongodb').Connection,
Server = require('mongodb').Server;
module.exports = new Db(settings.db, new Server(settings.host, Connection.DEFAULT_PORT), {safe: true });

④ Erstellen Sie ein neues news.bat-Programm auf dem Desktop

Code kopieren Der Code lautet wie folgt:

d:mongodbbinmongod.exe -dbpath d:mongodbnews

Um die Datenbank in Zukunft zu starten, müssen wir sie nur noch ausführen. Damit sind unsere vorbereitenden Vorbereitungen im Grunde abgeschlossen

Aber hier gibt es zwei ärgerliche Dinge: Zum einen ist es nervig, die Nachrichtensendung jedes Mal zu starten, und zum anderen muss man neu starten, um etwas zu ändern. Deshalb werden wir diese beiden Probleme hier zuerst lösen

① Erstellen Sie eine neue news_app.bat auf dem Desktop und führen Sie sie später aus, um das Programm zu starten

Code kopieren Der Code lautet wie folgt:

node d:newsapp

② Supervisor ist ein Prozessschutzprogramm. Wir können ihn verwenden, um das Programm neu zu starten und dann unsere node_app.bat anzupassen

Code kopieren Der Code lautet wie folgt:

Supervisor d:newsapp

Natürlich müssen Sie es vorher installieren:

Code kopieren Der Code lautet wie folgt:

npm install -g supervisor

Danach ist nach dem Ändern der Datei kein manueller Neustart erforderlich (news_app muss im Projektverzeichnis abgelegt werden), daher endet die Vorbereitungsarbeit hier

Projektstruktur

Nach dem ersten Schritt müssen wir über die Projektstruktur nachdenken

① Die Startseite ist ein Index, in dem alle Nachrichtentypen und Nachrichtenelemente aufgelistet werden

② Jede Nachricht verfügt über drei Schaltflächen: Bearbeiten/Löschen/Anzeigen

③ Auf der Startseite gibt es eine Schaltfläche zum Hinzufügen von Nachrichten (Sie können beim Hinzufügen Bilder hochladen)

Grundfunktionen sind wie oben

Also haben wir die Routing-Funktion in der App entfernt und alle Routen in den Index aufgenommen

Code kopieren Der Code lautet wie folgt:

//Füge die Routing-Funktion in den Index ein
//app.get('/',routes.index);
//app.get('/users', user.list);
Routen(App);

Code kopieren Der Code lautet wie folgt:

module.exports = Funktion (App) {
//Homepage, jetzt auch die Homepage
app.get('/', Funktion (req, res) {
res.render('index', { title: 'Express' });
});
app.get('/add', function (req, res) {
res.send('News-Anfrage hinzufügen');
});
app.get('/delete', function (req, res) {
res.send('Newsanfrage löschen');
});
app.get('/view', function (req, res) {
res.send('News-Anfrage anzeigen');
});
app.get('/update', function (req, res) {
res.send('Nachrichtenanfrage ändern');
});
};

Der erste Schritt ist so einfach, da das Hinzufügen von Nachrichten eine separate Seite haben sollte und das Klicken auf die Schaltfläche „Hinzufügen“ eine andere Verarbeitung zur Folge hat, sodass jede Anfrage intern aufgeschlüsselt werden muss. Die aktuellen Vorschriften lauten wie folgt:

/ Standardseite, die alle Genres und Nachrichten anzeigt, mit einer Schaltfläche zum Löschen

/add Rufen Sie die Seite zum Hinzufügen von Nachrichten auf

/addNews Nachrichtenspezifische Beitragsanfrageadresse hinzufügen (Antwort beim Klicken auf die Schaltfläche)

/delete Newsanfrage löschen

/spezifische Nachrichtenabfrage anzeigen

Also habe ich die obige Route leicht modifiziert:

Code kopieren Der Code lautet wie folgt:

module.exports = Funktion (App) {
//Homepage, jetzt auch die Homepage
app.get('/', Funktion (req, res) {
res.render('index', { title: 'Express' });
});
app.get('/add', function (req, res) {
res.send('Neuigkeitsseite hinzufügen');
});
app.post('/addNews', function (req, res) {
res.send('Anfrage zum Hinzufügen von Nachrichten wird bearbeitet');
});
app.get('/delete', function (req, res) {
res.send('Newsanfrage löschen');
});
app.get('/view', function (req, res) {
res.send('News-Anfrage anzeigen');
});
};

Wir müssen also mehrere neue Vorlagen erstellen, um unsere Webseiten zu organisieren. Hier trennen wir nicht den Kopf und das Ende, sondern nur die einfachste Seite

Zwei Vorlagendateien hinzugefügt, add und view, die sich vorübergehend genauso verhalten wie index.ejs, und Navigation geändert

Code kopieren Der Code lautet wie folgt:

module.exports = Funktion (App) {
//Homepage, jetzt auch die Homepage
app.get('/', Funktion (req, res) {
res.render('index', { title: 'Express' });
});
app.get('/add', function (req, res) {
res.render('add', { title: 'News-Seite hinzufügen' });
});
app.post('/addNews', function (req, res) {
res.send('Anfrage zum Hinzufügen von Nachrichten wird bearbeitet');
});
app.get('/delete', function (req, res) {
res.send('Newsanfrage löschen');
});
app.get('/view', function (req, res) {
res.render('view', { title: 'News-Anfrage anzeigen' });
});
};

Dies ist das Ende der Projektstruktur

Datenoperation

Nachdem die Gesamtstruktur fertig ist, müssen wir Datenoperationen durchführen:

① Daten hinzufügen (Nachrichten hinzufügen)

② Daten anzeigen (Nachrichten anzeigen)

③ Daten löschen (Nachrichten löschen)

Ursprünglich ging es auch um Typoperationen, aber als ich es tat, konnte ich es nicht herausfinden. Ich lasse es vorerst in Ruhe, weil man beim ersten Mal leicht verwirrt wird

Neuigkeiten hinzufügen

Hier verwenden wir keine Formularübermittlung, wir verwenden Ajax... Hier stellen wir die Zepto-Bibliothek vor, damit unsere Seite so aussieht

Code kopieren Der Code lautet wie folgt:

                                                                                                     

                                                                                               

Titel:

Inhalt:

           

Obwohl es noch kein Request-Response-Programm gibt, werden die Daten nicht verarbeitet und wir haben hier keine Anhänge (nur ein Anhang ist jetzt erlaubt), also ändern wir den Code und fügen Bilder hinzu:

PS: Das Schwierigere ist, dass die Ajax-Verarbeitung des Bildes etwas mühsam ist, also wechseln wir einfach zurück zur Formularoperation, sonst dauert es lange ...

Code kopieren Der Code lautet wie folgt:

   
        <%= title %>
   


   

        <%= title %>

   

   

        Hinweis:
   

   

        图片:
   

   

        内容:
   

   

       
   

   

这个样子就不需要过多的考虑附件问题, 先暂时如此吧, 现在先处理请求程序,这里先在public里面新建news文件夹用于存储其图片

Modell

在models文件夹新增news.js文件，为其构建实体，并赋予新增查询相关操作:

复制代码 代码如下:

var mongodb = require('./db');

Funktion News(Titel, Inhalt, Bild) {
  this.title = title;
  this.content = content;
  this.pic = pic;//保存存储路径
};
module.exports = Neuigkeiten;
//存储数据
News.prototype = {
  speichern: Funktion (Rückruf) {
    var date = new Date();
    var time = {
      Datum: Datum,
      Jahr: date.getFullYear(),
      Monat: date.getFullYear() "-" (date.getMonth() 1),
      Tag: date.getFullYear() "-" (date.getMonth() 1) "-" date.getDate(),
      Minute: date.getFullYear() "-" (date.getMonth() 1) "-" date.getDate() " "
      date.getHours() ":" (date.getMinutes() < 10 ? '0' date.getMinutes() : date.getMinutes())
    }
    //数据存储对象
    var news = {
      Titel: this.title,
      Inhalt: this.content,
      pic: this.pic, //图片处理最后来说，现在先乱存
      Zeit: Zeit
    };
    //打开数据连接，打开就是一个回调......
    mongodb.open(function (err, db) {
      //错误就退出
      if (irr) {
        Rückruf(err);
      }
      //打开news集合
      db.collection('news', function (err, Collection) {
        if (irr) {
          mongodb.close();
          Rückruf(err);
        }
        //写入集合（写入数据库）
        Collection.insert(news, {safe: true }, function (err) {
          Rückruf(err);
        });
        callback(null);//err为null
      });
    });
  }
};

Das Programm zum Schreiben in die Datenbank ist also da. Hier versuchen wir zu sehen, ob wir es in die Datenbank einfügen können. Natürlich müssen wir das Routing-Programm ändern

PS: Natürlich kann man in der Routing-Abteilung nicht zu viel Logikcode schreiben. Diese Datei muss in Zukunft getrennt werden

Zu diesem Zeitpunkt muss die Logik in /addNews geändert werden

Code kopieren Der Code lautet wie folgt:

app.post('/addNews', function (req, res) {
var title = req.body.title;
var content = req.body.content;
var pic = req.body.pic;
var news = neue News(Titel, Inhalt, Bild)
news.save(function (err, data) {
res.send(data);
})
});

Nach der Überprüfung ist das Problem nicht groß. Was jetzt gelöst werden muss, ist das Bindungsproblem

Bilder hochladen

Express selbst unterstützt die Bild-Upload-Funktion. Express analysiert den Anforderungstext über bodyParser und lädt dann intern Dateien darüber hoch.

Ändern Sie hier app.use(express.bodyParser()) in app.js in:

Code kopieren Der Code lautet wie folgt:app.use(express.bodyParser({ keepExtensions: true , uploadDir: './public/news' }));

Öffnen Sie index.js und fügen Sie vorne eine Codezeile hinzu:

Code kopieren Der Code lautet wie folgt:fs = require('fs'),

Ändern Sie die Indexdatei:

Code kopieren Der Code lautet wie folgt:

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

for (var i in req.files) {
If (req.files[i] == 0) {
//Eine Datei synchron löschen
         fs.unlinkSync(req.files[i].path);
console.log('Erfolg hat eine leere Datei entfernt');
} sonst {
var path = './public/news/' req.files[i].name;
//Eine Datei mit der synchronen Methode umbenennen
           fs.renameSync(req.files[i].path, path);
console.log('suncess hat eine Datei umbenannt');
}
}
// var title = req.body.title;
// var content = req.body.content;
// var pic = req.body.pic;
// var news = new News(title, content, pic)
// news.save(function (err, data) {
// res.send(data);
// })
});

Wählen Sie zu diesem Zeitpunkt die Datei aus und klicken Sie auf „Neuigkeiten hinzufügen“. Unsere Datei wird dann hochgeladen

Zu diesem Zeitpunkt muss ich nur den Dateinamen in der Datenbank aufzeichnen, und im Dateiverzeichnis befinden sich Bilder

Code kopieren Der Code lautet wie folgt:

app.post('/addNews', function (req, res) {
var pic = null;
for (var i in req.files) {
If (req.files[i] == 0) {
//Eine Datei synchron löschen
         fs.unlinkSync(req.files[i].path);
console.log('Erfolg hat eine leere Datei entfernt');
} sonst {
var path = './public/news/' req.files[i].name;
//Eine Datei mit der synchronen Methode umbenennen
           fs.renameSync(req.files[i].path, path);
console.log('suncess hat eine Datei umbenannt');
}
Pic = req.files[i].name;
}
var title = req.body.title;
var content = req.body.content;
var news = neue News(Titel, Inhalt, Bild)
news.save(function (err, data) {
res.send(data);
})
res.send('Anfrage erfolgreich, zurück zur Startseite');
});

Es gibt Daten in der Datenbank und es gibt Dateien in unserem Verzeichnis. Jetzt müssen wir nur noch die Daten auslesen

PS: Brüder drängen mich, während der Feiertage etwas trinken zu gehen

Daten lesen

Der zweite Schritt besteht natürlich darin, die Daten zu lesen. Der erste Schritt besteht darin, die Daten auf der Startseite zu lesen:

Code kopieren Der Code lautet wie folgt:

var mongodb = require('./db');
Funktion News(Titel, Inhalt, Bild) {
this.title = title;
this.content = content;
this.pic = pic;//Speicherpfad speichern
};
module.exports = Neuigkeiten;
//Speicherdaten
News.prototype = {
speichern: Funktion (Rückruf) {
var date = new Date();
//Datenspeicherobjekt
var news = {
Titel: this.title,
Inhalt: this.content,
Bild: this.pic, // Zum Schluss Bildbearbeitung, jetzt nach dem Zufallsprinzip speichern
Datum: Datum
};
//Öffne die Datenverbindung, das Öffnen ist ein Rückruf...
mongodb.open(function (err, db) {
//Beenden, wenn ein Fehler auftritt
Wenn (irrt) {
         Rückruf (err);
}
//Öffnen Sie die Nachrichtensammlung
db.collection('news', function (err, Collection) {
Wenn (irrt) {
             mongodb.close();
            Rückruf (err);
}
//Sammlung schreiben (in Datenbank schreiben)
        collection.insert(news, {safe: true }, function (err) {
            Rückruf (err);
});
         callback(null); //err ist null
});
});
}
};
//Lesen Sie den Artikel und die zugehörigen Informationen
News.get = Funktion (ID, Rückruf) {
//Datenbank öffnen
mongodb.open(function (err, db) {
Wenn (irrt) {
Rückruf(err);
}
db.collection('news', function (err, Collection) {
Wenn (irrt) {
          mongodb.close();
         Rückruf (err);
}
var query = {};
Wenn (id) {
​​​​ query.id = id;
}
//Artikel basierend auf dem Abfrageobjekt abfragen
Collection.find(query).sort({
Datum: -1
}).toArray(function (err, data) {
          mongodb.close();
Wenn (irrt) {
             Rückruf (err); //Fehlgeschlagen! Fehler zurückgeben
}
​​​​ callback(null, data); //Erfolg! Geben Sie die Ergebnisse der Abfrage in Form eines Arrays zurück
});
});
});
};
news.js

Code kopieren Der Code lautet wie folgt:

   
        <%= title %>
   


   

        <%= title %>

   

        <%for(var k in data) { %>
       
• 
             
  
                 标题: <%=data[k].title %>
  
             
  
                内容:  <%=data[k].content%>
  
               
  
                附件:
  
               

             

              删除
             

             

---

       
        <%} %>
   

结语

好了,文章发布系统的制作就先到这里了,以后我们再慢慢增加功能,慢慢做美化.