VUE+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