VUE+Express+MongoDB前后端分离，实现一个便签墙（一）

本文介绍了一个使用Vue、Express和MongoDB实现的前后端分离的便签墙应用。首先介绍了如何设计便签墙的样式，包括便签的拖动功能，接着讲解了如何实现便签内容的编辑和保存，最后提到了通过Express与MongoDB进行接口交互，实时保存和加载便签数据。

计划来实现一个便签墙系列，这个东西做简单也简单，往复杂了做功能也很多，记录一下从零到有的开发过程吧，希望最后能把这个项目做得很完善。

首先是前后端分离架构，前端用vue，后台我们就用express，数据库用mongodb吧。

在脑袋里过一下，最最开始，要完成一个怎样的雏形呢？先把用户登录管理放在一边，当然是便签的增删改查+显示啊！

那么，我们就来实现“初号机”，一张张便签的显示，增加，修改，删除。

1、怎么说也得先把样式画出来

2、对于便签的内容，该怎么编辑

3、下面不就是调接口的时候了

1、怎么说也得先把样式画出来

先别管接口，先把纯前端的问题解决先，我们先来一个像模像样的“黑板”，对了，这里推荐一个网站https://www.transparenttextures.com/，可以生成你喜欢的壁纸素材，于是就有了：

好了，我们要在这块黑板上“贴上”我们的便签了，这一块就是css的东西了，这个就看大家的美术设计功底了，我随意了：

那么重要的一点是，在这块背景板上，便签就应该是可以随意贴在你想要的位置，所以对于便签，用户应该可以拖拽并记录位置。

所以将便签div采取position: absolute，然后用top: y px和left: x px来实现定位。

于是我们考虑单个便签对象包含的属性有：

x: 便签距容器左侧距离, left的值

y: 便签距容器上边界距离, top得值

txt: 便签的内容

title: 标题

color: {

bg: "", // 背景色

pin: "" // 回形针颜色

}

接下来我们就来实现便签的拖动：

（1）在便签的div上绑定鼠标点击函数：

@mousedown="mousedown($event)"

（2）实现拖动：

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
          ) {