VUE+Express+MongoDB前后端分离,实现一个便签墙(一)

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

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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

首先是前后端分离架构,前端用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 
评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值