Comment les débutants peuvent-ils créer un blog personnel via Vue.js + Node.js

Cet article présente principalement comment les novices peuvent créer un blog personnel via Vue.js + Node.js. L'article le présente en détail à travers un exemple de code, qui a une certaine valeur de référence et d'apprentissage pour tout le monde. aider tout le monde.

Schéma

• Style d'interface utilisateur : faites principalement référence au style du blog de Randy, et ajoutez un peu de mes propres idées (principalement juste pour être paresseux).

• Page frontale : SPA réactif basé sur Vue2.0, ah ? Tu me demandes pourquoi ? Tout comme l'auto-présentation dans "À propos" : je me considère bon dans le développement de Vue SPA.

• Backend : un raccourci pour les ingénieurs front-end vers la pile complète : Node.js. Responsable de l'écriture des interfaces et du rendu des pages statiques.

• Base de données : Le plan initial était d'utiliser MongoDB, mais afin de respecter le calendrier, la base de données n'a pas été utilisée du tout. Faisons cela pour la première version.

• Article : reportez-vous à la méthode hexo pour rédiger un article en utilisant la syntaxe markdown, puis en le convertissant en html. Les articles au format md sont également édités localement et téléchargés sur le serveur. Node.js lit directement le fichier md, le convertit en HTML et le renvoie à la réception. C'est pourquoi une base de données n'est pas nécessaire pour le moment.

• Déploiement : AWS, gratuit pendant un an ! Vous me demandez ce que je ferai dans un an ? Dieu sait ! Peut-être qu’un an m’a permis de passer du début à l’abandon.

Naviguez ! mettre les voiles !

1. Mise en page : jetez un œil au blog de Cloud pour une brève introduction. Le premier écran est un fond d'écran dont la largeur et la hauteur couvrent toute la zone visible. Le contenu comprend le nom du blog, le sous-titre et trois liens sur le blogueur. Cliquez sur la flèche vers le bas pour faire défiler jusqu'au sujet principal du deuxième écran. divisé en quatre modules d'onglets : [Accueil], [Article], [Œuvres], [À propos]. La valeur par défaut est [Page d'accueil], qui contient les derniers détails de l'article, [Article] est la liste des articles, cliquez pour lire le contenu de l'article, [Works] est la liste de travail, cette partie n'est pas encore terminée, [À propos] est une introduction à propos du blogueur. PS : J'ai passé une matinée entière à chercher le fond d'écran du premier écran dans Google Images avant de trouver celui-ci, dont je suis assez satisfait étant donné que le fond d'écran du téléphone portable est centré et couvre toute la zone visible, j'ai réussi. pour en trouver une qui soit belle sur PC et sur téléphone portable, ce n'est vraiment pas facile de créer des images qui ne soient pas de trop mauvaise qualité, les blogueurs choisissent encore difficilement les patients.

2. Développement front-end : commencez avec l'échafaudage Vue

   
   

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

4. Ensuite, installez Vue-router pour le routage SPA et vue-resource ou axios pour Ajax.

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

   Ensuite, vous pouvez commencer à coder la page statique. Il ne devrait pas être difficile d'écrire la page statique en fonction de l'idée de mise en page dans la première étape. Vous devez appeler l'interface fournie par node.js. dans la troisième étape, ici je n’en dirai pas plus. Après avoir terminé la page statique, compilez

   $ npm run build

5. Développement back-end : créez la structure de répertoires du serveur et installez le framework express et marqué pour la conversion des fichiers md en html

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

   Interface d'écriture, il existe actuellement trois interfaces principales.

   Rendez une page statique, copiez les fichiers statiques compilés dans la deuxième partie et les fichiers d'article au format md dans le dossier public, et utilisez le middleware intégré d'Express pour spécifier le dossier public comme répertoire racine du fichier de ressources statique et mettez-le en cache. Puisqu'il s'agit d'une application d'une seule page, n'oubliez pas de gérer les erreurs 404.

   # 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. Obtenir l'interface de la liste d'articles. La méthode fs.readdir lit le dossier où se trouve le fichier md, renvoie les noms de fichiers de tous les fichiers md, c'est-à-dire le titre de l'article, l'heure de création et le chemin de l'article, et les trie par heure de création et les restitue sur le [ Article] page.

2. Interface de contenu des articles. En fonction du nom de fichier et du chemin renvoyés par la première interface, utilisez la méthode fs.readFile pour lire le contenu du fichier md et utilisez Marked pour le convertir en HTML et le renvoyer au client, et le restituer sur la page de contenu de l'article. .

3. Interface de contenu de la page d'accueil. Semblable à l'interface 2, lisez le dernier article et renvoyez-le. N'oubliez pas de gérer les problèmes inter-domaines.

   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. Déploiement

• Demander AWS (Amazon Cloud Host), essai gratuit d'un an, crédit informations requises par la carte. Instance d'un système EC2, Win ou Linux, Linux est recommandé. Ouvrez le port correspondant et installez node.js.

• Installez PM2, exécutez le service server.js dans la troisième étape et laissez PM2 démarrer avec le système.

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

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

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!