Wie können Neulinge über Vue.js + Node.js ein persönliches Blog erstellen?

Dieser Artikel stellt hauptsächlich vor, wie Anfänger über Vue.js + Node.js ein persönliches Blog erstellen können. Der Artikel stellt es detailliert anhand von Beispielcode vor, der für jeden einen gewissen Referenz- und Lernwert hat Helfen Sie allen.

Schema

• UI-Stil: Bezieht sich hauptsächlich auf den Stil von Randys Blog und füge ein paar meiner eigenen Ideen hinzu (hauptsächlich, um faul zu sein).

• Frontend-Seite: Responsive SPA basierend auf Vue2.0, ah? Du fragst mich warum? Genau wie die Selbstvorstellung in „About“: Ich halte mich für gut in der Vue SPA-Entwicklung.

• Backend: Eine Verknüpfung für Front-End-Ingenieure zum vollständigen Stack: Node.js. Verantwortlich für das Schreiben von Schnittstellen und das Rendern statischer Seiten.

• Datenbank: Der ursprüngliche Plan war, MongoDB zu verwenden, aber um mit dem Zeitplan Schritt zu halten, wurde die Datenbank überhaupt nicht für die erste Version verwendet.

• Artikel: Sehen Sie sich die Methode von Hexo an, einen Artikel mithilfe der Markdown-Syntax zu schreiben und ihn dann in HTML zu konvertieren. Artikel im MD-Format werden ebenfalls lokal bearbeitet und auf den Server hochgeladen. Node.js liest die MD-Datei direkt, konvertiert sie in HTML und sendet sie an die Rezeption zurück.

• Bereitstellung: AWS, ein Jahr lang kostenlos! Du fragst mich, was ich in einem Jahr machen werde? Gott weiß! Vielleicht hat es mir ein Jahr ermöglicht, vom Anfang bis zum Aufgeben zu kommen.

Segeln! Setz die Segel!

1. Seitenlayout: Werfen Sie einen Blick auf Clouds Blog für eine kurze Einführung. Der erste Bildschirm ist ein Hintergrundbild mit 100 % Breite und Höhe, das den gesamten sichtbaren Bereich abdeckt. Der Inhalt umfasst den Blognamen, den Untertitel und drei Links zum Blogger. Klicken Sie auf den Abwärtspfeil, um zum Hauptthema des zweiten Bildschirms zu scrollen unterteilt in vier Tab-Module: [Startseite], [Artikel], [Werke], [Über]. Die Standardeinstellung ist [Homepage], das sind die neuesten Artikeldetails, [Artikel] ist die Artikelliste, klicken Sie, um den Artikelinhalt zu lesen, [Werke] ist die Arbeitsliste, dieser Teil ist noch nicht abgeschlossen, [Über] ist eine Einführung über den Blogger. PS: Ich habe einen ganzen Morgen damit verbracht, in Google Bilder nach dem Hintergrundbild auf dem ersten Bildschirm zu suchen, mit dem ich recht zufrieden bin, wenn man bedenkt, dass das Hintergrundbild auf dem Mobiltelefon zentriert ist und den gesamten sichtbaren Bereich abdeckt Es ist wirklich nicht einfach, Bilder zu erstellen, die nicht zu minderwertig sind, da es für Blogger immer noch schwierig ist, Bilder zu finden, die auf dem PC und Mobiltelefonen gut aussehen.

2. Front-End-Entwicklung: Beginnen Sie mit Vue-Gerüst

   
   

3. # 全局安装 vue-cli
   $ npm install --global vue-cli
   # 创建一个基于 webpack 模板的新项目
   $ vue init webpack blog
   # 安装依赖，走你
   $ cd blog
   $ npm install
   $ npm run dev

4. Dann installieren Sie Vue-router für SPA-Routing und vue-resource oder axios für Ajax.

   $ npm install --save vue-router
   $ npm install --save axios
   # vue官方推荐的ajax库不再是vue-resource,而是axios

   Dann können Sie mit dem Codieren der statischen Seite beginnen. Im ersten Schritt sollte es nicht schwierig sein, die statische Seite basierend auf der Seitenlayoutidee zu schreiben Im dritten Schritt werde ich hier nicht mehr sagen. Nachdem Sie die statische Seite fertiggestellt haben, kompilieren Sie

   $ npm run build

5. Back-End-Entwicklung: Erstellen Sie die Serververzeichnisstruktur, installieren Sie das Express-Framework und markieren Sie es für die Konvertierung von MD-Dateien in HTML

   $ mkdir blog-server && cd blog-server
   $ mkdir public
   $ npm install --save express$ npm install --save marked

   Schreibschnittstelle, derzeit gibt es drei Hauptschnittstellen.

   Rendern Sie eine statische Seite, kopieren Sie die im zweiten Teil kompilierten statischen Dateien und die Artikeldateien im MD-Format in den öffentlichen Ordner und verwenden Sie die integrierte Middleware von Express, um den öffentlichen Ordner als Stammverzeichnis des anzugeben Erstellen Sie eine statische Ressourcendatei und speichern Sie sie im Cache. Da es sich um eine einseitige Anwendung handelt, denken Sie daran, 404-Fehler zu behandeln.

   # server.jsvar express = require('express');var app = express();
   app.use(express.static('public',{maxAge:60*60*24*30}));
   app.get('/',function(req,res){
    res.sendFile('/index.html',{root: __dirname + '/public/'});
   });
   app.listen(80);

1. Holen Sie sich die Artikellistenoberfläche. Die Methode fs.readdir liest den Ordner, in dem sich die MD-Datei befindet, gibt die Dateinamen aller MD-Dateien zurück, also den Artikeltitel, die Erstellungszeit und den Artikelpfad, sortiert sie nach Erstellungszeit und rendert sie auf dem [ Artikel]-Seite.

2. Artikelinhaltsoberfläche. Verwenden Sie entsprechend dem von der ersten Schnittstelle zurückgegebenen Dateinamen und Pfad die Methode fs.readFile, um den Inhalt der MD-Datei zu lesen, und konvertieren Sie sie mit markiert in HTML, geben Sie sie an den Client zurück und rendern Sie sie auf der Artikelinhaltsseite .

3. Homepage-Inhaltsschnittstelle. Lesen Sie ähnlich wie bei Schnittstelle 2 den neuesten Artikel und kehren Sie zurück. Denken Sie daran, domänenübergreifende Probleme zu behandeln.

   app.all('*', function(req, res, next) {
   res.header("Access-Control-Allow-Origin", "*");
   res.header("Access-Control-Allow-Headers", "X-Requested-With");
   res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
   res.header("X-Powered-By",' 3.2.1')
   res.header("Content-Type", "application/json;charset=utf-8");
   next();
   });

6. Bereitstellung

• Bewerben Sie sich für AWS (Amazon Cloud Host), einjährige kostenlose Testversion, Gutschrift Karte erforderliche Informationen. Instanz ein EC2-, Win- oder Linux-System, Linux wird empfohlen. Öffnen Sie den entsprechenden Port und installieren Sie node.js.

• Installieren Sie PM2, führen Sie im dritten Schritt den Dienst server.js aus und lassen Sie PM2 mit dem System starten.

  $ npm install -g PM2
  $ pm2 start server.js
  $ pm2 startup

  此时我们的博客系统已经运行在EC2上了。

  购买域名。在腾讯云上购买的xyz域名，第一年8块钱。解析到该EC2的公网IP上，即可通过域名访问。

Das obige ist der detaillierte Inhalt vonWie können Neulinge über Vue.js + Node.js ein persönliches Blog erstellen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!