notes de développement du projet de blog node.js

Cet article résume les étapes et les points de connaissances pertinents pour le développement d'un projet de blog node.js. Les amis intéressés peuvent s'y référer.

Modules qui doivent être installés

• body-parser analyse les demandes de publication

• cookies Lire et écrire des cookies

• serveur de build express

• générateur d'analyse de syntaxe Markdown Markdown

• opération mangouste Base de données Mongodb

• moteur d'analyse de modèles swig
  

Structure des répertoires

• répertoire de stockage de la base de données db

• répertoire des fichiers de modèles de base de données modèles

• répertoire de fichiers publics (css, js, img)

• répertoire des fichiers de routage des routeurs

• fichier de structure de base de données de schémas

• fichier de vue de modèle de vues répertoire

• fichier de démarrage app.js

• package.json

fichier app.js

1. Créer des applications et des ports d'écoute

const app = express();

app.get('/',(req,res,next) => {
  res.send("Hello World !");
});
app.listen(3000,(req,res,next) => {
  console.log("app is running at port 3000");
});

2. Configurer les modèles d'application

• Définir le moteur de modèle utilisé app.engine('html',swig.renderFile) Paramètre 1 : Le nom du moteur de modèle, qui est également le suffixe du fichier modèle Paramètre 2 : Indique la méthode utilisée pour analyser et traiter le contenu du modèle

• Définissez le répertoire dans lequel les fichiers de modèle sont stockés app.set('views','./views')

• S'inscrire le moteur de modèle a utilisé app.set('view engine','html')

3. Utilisez le moteur de modèle pour analyser le fichier

/**
 * 读取views目录下的指定文件，解析并返回给客户端 
 * 参数1：模板文件
 * 参数2：给模板传递的参数 
 */
 
res.render('index',{
  title:'首页 ',
  content: 'hello swig'
});

4. Pendant le processus de développement, il est nécessaire d'annuler la restriction de la mise en cache des modèles

swig.setDefaults({
 cache: false
});
app.set('view cache', false);

5. jusqu'à l'hébergement de fichiers statiques

 // 当用户访问的是/public路径下的文件，那么直接返回
app.use('/public',express.static(__dirname + '/public'));

Modules divisés

• Module frontal

• Module back-end

• Module API

// 根据不同的功能划分模块
app.use('/',require('./routers/main'));
app.use('/admin',require('./routers/admin'));
app.use('/api',require('./routers/api'));

Pour le module d'administration admin.js

var express = require('express');
var router = express.Router();

// 比如访问 /admin/user
router.get('/user',function(req,res,next) {
  res.send('User');
});
module.exports = router;

Routage front-end + modèle

module principal
/page d'accueil
/afficher la page de contenu

module API

/page d'accueil
/enregistrer l'enregistrement de l'utilisateur
/login Connexion utilisateur
/comment Commentaire Obtenir
/comment/post Commentaire Soumettre

Routage backend (administrateur) + modèle

Page d'accueil

/ Page d'accueil des coulisses

Gestion des utilisateurs

/user Liste des utilisateurs

Gestion des catégories

/category Liste des catégories
/category/add Ajout de catégorie
/category /edit Modification de catégorie
/caterory/delete Suppression de catégorie

Gestion du contenu des articles

/article nei content list
/article/add Ajout de contenu
/article/edit Modification de contenu
/article/delete Suppression de contenu

Contenu du commentaire gestion

/comment Liste des commentaires
/comment/delete Suppression des commentaires

Séquence de développement des fonctions

Séquence de développement des modules de fonctions

• Utilisateur

• Colonne

• Contenu

• Commentaires

Ordre d'encodage

• Définir la structure de stockage des données de conception via Schema

• Logique fonctionnelle

• Affichage de la page

Connectez-vous à la base de données (mongoDB)

Démarrez le serveur MongoDB :

mongod --dbpath=G:datadb --port=27017

Démarrer les paramètres du service L'adresse de stockage et le port de la base de données

var mongoose = require('mongoose');
// 数据库链接
mongoose.connect("mongodb://localhost:27017/blog",(err) => {
  if(err){
    console.log("数据库连接失败");
  }else{
    console.log("数据库连接成功");
   // 启动服务器，监听端口 
   app.listen(3000,(req,res,next) => {
      console.log("app is running at port 3000");
    });
  }
});

Définir la structure et le modèle de la table de données

Pour les utilisateurs La table de données (users.js) se trouve dans le dossier schéma :

var mongoose = require('mongoose');
module.exports = new mongoose.Schema({
  // 用户名
  username:String,
  // 密码
  password:String
});

Créez la classe de modèle user.js

dans le répertoire des modèles

var mongoose = require('mongoose');
var userSchema = require('../schemas/users');
module.exports = mongoose.model('User',userSchema);

Traitement enregistrement des utilisateurs

Le front-end soumet le nom d'utilisateur et le mot de passe via ajax

url : /api/register

Analyse des données back-end pour soumission frontale (POST)

var bodyParser = require('body-parser');
// bodyParser 配置
// 通过使用这一方法，可以为req对象添加一个body属性
app.use( bodyParser.urlencoded({extended:true}));

// 在api模块中：
// 1.可以定义一个中间件，来统一返回格式
var responseData;
router.use( function(req,res,next){ // path默认为'/',当访问该目录时这个中间件被调用
  responseData = {
     code:0,
    message:''
  };
  next();
});

router.post('/register',(req,res,next) => {
  console.log(req.body);
  // 去判断用户名、密码是否合法
  // 判断是否用户名已经被注册
  // 通过 res.json(responseData) 给客户端返回json数据
  
  // 查询数据库
  User.findOne({  // 返回一个promise对象
      username: username
  }).then(function( userInfo ) {
      if( userInfo ){ // 数据库中有该条记录
      ...
     res.json(responseData);
     return;
    }
    // 给数据库中添加该条信息
    var user = new User({ username:username,password:password });
    return user.save(); // 返回promise对象
  }).then(function( newUserInfo ){
      console.log(newUserInfo);
    res.json(responseData); // 数据保存成功 
  });
});

Utilisation du module cookies

Utilisations d'enregistrement globales (app.js)

// 设置cookie
// 只要客户端发送请求就会通过这个中间件
app.use((req, res, next) => {
  req.cookies = new cookies(req, res);

  /**
   * 解析用户的cookies信息
   * 查询数据库判断是否为管理员 isAdmin
   * 注意：查询数据库是异步操作，next应该放在回调里边
   */
  req.userInfo = {};
  if (req.cookies.get("userInfo")) {
    try {
      req.userInfo = JSON.parse(req.cookies.get("userInfo"));
      // 查询数据库判断是否为管理员
      User.findById(req.userInfo._id).then(function (result) {
        req.userInfo.isAdmin = Boolean(result.isAdmin);
        next();
      });
    } catch (e) {
      next();
    }
  } else {
    next();
  }
});

// 当用户登录或注册成功之后，可以为其设置cookies
req.cookies.set("userInfo",JSON.stringify({
   _id:result._id,
  username:result.username 
}));

moteur de modèles swig

1. Variables

   {{ nom }}
   

2. Attributs

{{ student.name }}

3.if jugement

{ % if name === 'Guo Jing' % }

bonjour frère Jing

{ % endif % }

4.for boucle

// arr = [1, 2, 3]

{ % pour la clé, val dans l'arr % }

{ { key } } -- { { val } }

{ % endfor % }

La commande 5.set

est utilisée pour définir une variable, Réutiliser dans le contexte actuel

{% set foo = [0, 1, 2, 3, 4, 5] %}

{% extends 'layout.html' %} // Hériter d'un certain modèle HTML
{% include 'page. html' %} // Inclure un modèle à l'emplacement actuel
{% block main %} xxx {% endblock %} // Réécrire un certain bloc

6.encodage automatique autoescape

Lorsque vous souhaitez afficher le code HTML généré par le backend dans un certain p, il sera automatiquement encodé lors du rendu du modèle, et
sera affiché sous la forme d'une chaîne. Cette situation peut être évitée par :

<p id="article-content" class="content">
  {% autoescape false %}
  {{ data.article_content_html }}
  {% endautoescape %}
</p>

Gestion des utilisateurs et pagination

CRUD用户数据

const User = require('../models/user');

// 查询所有的用户数据
User.find().then(function(users){

});

// 根据某一字段查询数据
User.findOne({
  username:username
}).then(function(result){

});

// 根据用户ID查询数据
User.findById(id).then(function(user){

});

// 根据ID删除数据
User.remove({
  _id: id
}).then(function(){

});

// 修改数据
User.update({
  _id: id
},{
  username: name
}).then(function(){ 
});

数据分页管理

两个重要方法

limit(Number): 限制获取的数据条数

skip(Number): 忽略数据的条数 前number条

忽略条数：（当前页 - 1） * 每页显示的条数

// 接收传过来的page
let query_page = Number(req.query.page) || 1;
query_page = Math.max(query_page, 1); // 限制最小为1
query_page = Math.min(Math.ceil(count / limit), query_page); // 限制最大值 count/limit向上取整


var cur_page = query_page; // 当前页
var limit = 10; // 每页显示的条数
var skip = (cur_page - 1) * limit; //忽略的条数

User.find().limit(limit).skip(skip).then(function(users){
  ...
 // 将当前页 page 传给页面
 // 将最大页码 maxPage 传给页面
});

文章的表结构

// 对于content.js
var mongoose = require('mongoose');
var contentSch = require('../schemas/contentSch');

module.exports = mongoose.model('Content',contentSch);


// contentSch.js
module.exports = new mongoose.Schema({
  
  // 关联字段 - 分类的id
  category:{
    // 类型
    type:mongoose.Schema.Types.ObjectId,
    // 引用
    ref:'Category' 
  },
  
  // 内容标题
  title: String,
  
  // 简介
  description:{
    type: String,
    default: '' 
  },
  
  // 内容
  content:{
    type:String,
    default:''
  }
});

// 文章查询时关联category字段
Content.find().populate('category').then(contents => {
  // 那么通过这样的方式，我们就可以找到Content表中的
  // 关联信息   content.category.category_name 
});

MarkDown语法高亮

在HTML中直接使用

<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/default.min.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>

<script src="https://cdn.bootcss.com/marked/0.3.17/marked.min.js"></script>

// marked相关配置
marked.setOptions({
  renderer: new marked.Renderer(),
  gfm: true,
  tables: true,
  breaks: false,
  pedantic: false,
  sanitize: true,
  smartLists: true,
  smartypants: false,
  highlight: function (code) {
    return hljs.highlightAuto(code).value;
  }
});

// MarkDown语法解析内容预览
$(&#39;#bjw-content&#39;).on(&#39;keyup blur&#39;, function () {
  $(&#39;#bjw-previous&#39;).html(marked($(&#39;#bjw-content&#39;).val()));
});

node环境中使用

// 在模板页面引入默认样式
<!--语法高亮-->
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/default.min.css">

const marked = require(&#39;marked&#39;);
const hljs = require(&#39;highlight.js&#39;);

// marked相关配置
marked.setOptions({
  renderer: new marked.Renderer(),
  gfm: true,
  tables: true,
  breaks: false,
  pedantic: false,
  sanitize: true,
  smartLists: true,
  smartypants: false,
  highlight: function (code) {
    return hljs.highlightAuto(code).value;
  }
});

// 对内容进行markdown语法转换
data.article_content_html = marked(article.content);

使文本域支持Tab缩进

$('#bjw-content').on('keydown',function(e){
  if(e.keyCode === 9){ // Tab键
     var position = this.selectionStart + 2; // Tab === 俩空格
    this.value = this.value.substr(0,this.selectionStart) + " " + this.value.substr(this.selectionStart);
    this.selectionStart = position;
    this.selectionEnd = position;
    this.focus();
    e.preventDefault();
  }
});

layer 弹框

// 显示弹框
function showDialog(text, icon, callback) {
  layer.open({
    time: 1500,
    anim: 4,
    offset: 't',
    icon: icon,
    content: text,
    btn: false,
    title: false,
    closeBtn: 0,
    end: function () {
      callback && callback();
    }
  });
});

随机用户头像生成

// 引入对应的库
const crypto = require('crypto');
const identicon = require('identicon.js');

// 当用户注册时，根据用户的用户名生成随机头像
let hash = crypto.createHash('md5');
hash.update(username);
let imgData = new identicon(hash.digest('hex').toString());
let imgUrl = 'data:/image/png;base64,'+imgData;

orm表单提交的小问题

当使用form表单提交一些代码的时候，会出现浏览器拦截的现象，原因是：浏览器误以为客户进行xss攻击。所以呢解决这个问题也很简单，就是对提交的内容进行base64或者其他形式的编码，在服务器端进行解码，即可解决。

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

javascript实现文件拖拽事件

vue文件树组件使用详解

vue全局组件与局部组件使用方法详解

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!