VUE+Express+MongoDB前后端分離實現(xiàn)一個便簽墻

更新時間：2021年04月18日 10:07:33 作者：登樓痕

這篇文章主要介紹了VUE+Express+MongoDB前后端分離實現(xiàn)一個便簽墻,需要的朋友可以參考下

計劃來實現(xiàn)一個便簽墻系列，這個東西做簡單也簡單，往復(fù)雜了做功能也很多，記錄一下從零到有的開發(fā)過程吧，希望最后能把這個項目做得很完善。

首先是前后端分離架構(gòu)，前端用vue，后臺我們就用express，數(shù)據(jù)庫用mongodb吧。

在腦袋里過一下，最最開始，要完成一個怎樣的雛形呢？先把用戶登錄管理放在一邊，當(dāng)然是便簽的增刪改查+顯示??！

那么，我們就來實現(xiàn)“初號機”，一張張便簽的顯示，增加，修改，刪除。

1、怎么說也得先把樣式畫出來

先別管接口，先把純前端的問題解決先，我們先來一個像模像樣的“黑板”，對了，這里推薦一個網(wǎng)站https://www.transparenttextures.com/，可以生成你喜歡的壁紙素材，于是就有了：

好了，我們要在這塊黑板上“貼上”我們的便簽了，這一塊就是css的東西了，這個就看大家的美術(shù)設(shè)計功底了，我隨意了：

那么重要的一點是，在這塊背景板上，便簽就應(yīng)該是可以隨意貼在你想要的位置，所以對于便簽，用戶應(yīng)該可以拖拽并記錄位置。

所以將便簽div采取position: absolute，然后用top: y px和left: x px來實現(xiàn)定位。

于是我們考慮單個便簽對象包含的屬性有：

x: 便簽距容器左側(cè)距離, left的值

y: 便簽距容器上邊界距離, top得值

txt: 便簽的內(nèi)容

title: 標(biāo)題

color: {

bg: "", // 背景色

pin: "" // 回形針顏色

}

接下來我們就來實現(xiàn)便簽的拖動：

（1）在便簽的div上綁定鼠標(biāo)點擊函數(shù)：

@mousedown="mousedown($event)"

（2）實現(xiàn)拖動：

mousedown: function(event) {
      let _this = this;
      if (!this.isEdit) {
        this.startX = event.x;
        this.startY = event.y;
        this.note.moving = true;
        document.onmousemove = event => {
          if (!_this.note.moving) return false;
 
          let dx = event.x - _this.startX;
          let dy = event.y - _this.startY;
 
          if (
            _this.note.x + dx <= 0 ||
            _this.note.x + dx >= _this.width - 250 ||
            _this.note.y + dy <= 60
          ) {
            return false;
          }
 
          _this.note.x1 = _this.note.x + dx;
          _this.note.y1 = _this.note.y + dy;
        };
        document.onmouseup = () => {
          if (!this.isEdit) {
            this.note.moving = false;
            this.note.x = this.note.x1;
            this.note.y = this.note.y1;
            this.saveNote();
            document.onmousemove = null;
            document.onmouseup = null;
          }
        };
      }
    }

初始記錄x和y的副本為x1,y1。用startX和startY記錄下最開始鼠標(biāo)按下的位置，然后在拖動過程中和原始值計算偏移量，賦值給x1和y1進行定位，在鼠標(biāo)抬起時更新x,y為最終值。

這里有個關(guān)鍵點就是，如果用@mousemove，會導(dǎo)致在鼠標(biāo)拖動過快的情況下，便簽不能及時跟隨鼠標(biāo)，鼠標(biāo)就會移出div，造成拖動失效。

所以這里只把mousedown綁定在目標(biāo)上，而把mousemove和mouseup綁定在document上，這樣就不會擔(dān)心鼠標(biāo)移快后出了便簽導(dǎo)致便簽卡住了。

2、對于便簽的內(nèi)容，該怎么編輯

這里設(shè)計一個按鈕，鼠標(biāo)hover上去后，顯示按鈕；點擊編輯按鈕，讓便簽內(nèi)容變成可編輯的狀態(tài)，當(dāng)內(nèi)容區(qū)域blur的時候自動保存。

由于div便簽沒有blur事件，所以在編輯狀態(tài)下，將內(nèi)容區(qū)域變?yōu)閠extarea：

 <div
      class="note-content"
      v-if="!isEdit"
      v-html="content"
      :ref="'note' + index"
    ></div>
    <el-input
      v-else
      class="note-content my-textarea"
      type="textarea"
      placeholder="請輸入內(nèi)容"
      :autosize="{ minRows: 10 }"
      v-model="content"
      :ref="'note' + index"
      @blur="handleChange"
    ></el-input>

很明顯，這里的內(nèi)容得用innerHTML結(jié)果保存，因為我們要保存換行回車空格這些樣式，使顯示保持一致，所以在獲取編輯的字符串我們要用正則進行替換：

this.content = this.content

.replace(/\r\n/g, "<br/>")

.replace(/\n/g, "<br/>")

.replace(/\s/g, " ");

變成編輯狀態(tài)時，我們要把形式再轉(zhuǎn)換一下給textarea:

this.content = this.content

.replace(/ /g, " ")

.replace(/<br\/>/g, "\r\n");

3、下面不就是調(diào)接口的時候了

express框架這里就不再贅述了，我們用mongoose連接mongodb數(shù)據(jù)庫，創(chuàng)建controller文件夾，增加note.js來實現(xiàn)數(shù)據(jù)庫操作:

// controller/note.js
const Notes = require("../model/notes");
var mongoose = require('mongoose');
module.exports = {
  updateNote(obj) {
    if (!obj.params._id) {
      obj.params._id = new mongoose.mongo.ObjectID();
    }
    return Notes.findByIdAndUpdate(
      obj.params && obj.params._id,
      {
        $set: obj.body
      },
      {
        upsert: true,
        new: true,
        setDefaultsOnInsert: true
      }
    )
      .then(function (newobj) {
        return Promise.resolve({
          status: 200,
          messgae: "OK"
        });
      })
      .catch((err) => {
        return Promise.reject(err);
      });
  },
  getNotes() {
    return new Promise(function (resolve, reject) {
      Notes.find()
        .then(function (newobj) {
          resolve(newobj);
        })
        .catch((err) => {
          reject(err);
        });
    });
  },
  deleteNoteById(_id) {
    return Notes.findByIdAndDelete(_id)
      .then(function (newobj) {
        return Promise.resolve({
          status: 200,
          messgae: "OK"
        });
      })
      .catch((err) => {
        return Promise.reject(err);
      });
  }
};

這里先簡單寫寫，還可以進一步封裝好返回結(jié)果。

創(chuàng)建model文件夾，增加note.js存放Schema:

// model/note.js
var mongoose = require("mongoose");
var Schema = mongoose.Schema;
 
// 聲明一個數(shù)據(jù)集 對象
var noteSchema = new Schema({
  txt: {
    type: String,
    required: false
  },
  x: {
    type: Number
  },
  y: {
    type: Number
  },
  color: {
    type: Object
  },
  title:{
    type: String,
    default: "未命名"
  },
  createTime: {
    type: Date,
    default: Date.now
  }
});
mongoose.set("useCreateIndex", true);
mongoose.set('useFindAndModify', false);
// 將數(shù)據(jù)模型暴露出去
module.exports = mongoose.model("Notes", noteSchema, "notes");

所以，在拖動結(jié)束時、便簽blur時都要自動保存。

于是數(shù)據(jù)庫里就會保存我們的便簽了：