VUE+Express+MongoDB 앞 뒤 분리 메모지 벽 구현

메모 벽 시 리 즈 를 실현 할 계획 입 니 다.이 물건 은 간단 하면 서도 간단 합 니 다.복잡 하면 기능 도 많 습 니 다.0 에서 있 는 개발 과정 을 기록 하 세 요.마지막 으로 이 프로젝트 를 완벽 하 게 할 수 있 기 를 바 랍 니 다.
우선 앞 뒤 단 분리 구조 입 니 다.앞 단 은 vue 를 사용 하고 배경 은 express 를 사용 합 니 다.데이터 베 이 스 는 mongodb 를 사용 합 니 다.
머 릿 속 을 지나 가면 처음에 어떤 모양 을 완성 해 야 합 니까?먼저 사용자 로그 인 관 리 를 제 쳐 두 세 요.당연히 메모지 의 첨삭 검사+표시 입 니 다!
그러면 우 리 는'초호 기'를 실현 하고 메모지 한 장의 표시,증가,수정,삭 제 를 실현 합 니 다.
1、아무래도 먼저 스타일 을 그 려 야 한다
우선 인 터 페 이 스 를 상관 하지 말고 순 전단 의 문 제 를 먼저 해결 합 시다.우 리 는 먼저 그럴듯 한'칠판'을 하 겠 습 니 다.참,여기 서 사 이 트 를 추천 합 니 다.https://www.transparenttextures.com/당신 이 좋아 하 는 벽지 소 재 를 만 들 수 있 기 때문에:

자,우 리 는 이 칠판 에 우리 의 메 모 를 붙 여야 합 니 다.이것 은 바로 css 의 물건 입 니 다.이것 은 여러분 의 미술 디자인 기 초 를 보 겠 습 니 다.저 는 마음대로 하 겠 습 니 다.

그렇다면 중요 한 것 은 이 배경 판 에 메 모 는 원 하 는 위치 에 마음대로 붙 일 수 있어 야 하기 때문에 메 모 는 사용자 가 끌 어 당 겨 서 위 치 를 기록 할 수 있어 야 한 다 는 것 이다.
그래서 메모 div 를 position:absolute 를 사용 한 다음 에 top:y px 와 left:x px 로 포 지 셔 닝 을 실현 합 니 다.
그래서 우 리 는 하나의 메모지 대상 에 포 함 된 속성 을 고려 합 니 다.
x:메모 거리 용기 왼쪽 거리,left 값
y:메모 용기 경계 거리,top 값
메모 내용
제목:제목
color: {
bg:",/배경 색
클립 색상
}
이어서 우 리 는 메모지 의 드래그 를 실현 할 것 이다.
(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
          ) {
            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 로 처음 마우스 가 누 른 위 치 를 기록 한 다음 드래그 과정 에서 원본 값 과 오프셋 을 계산 하고 x1 과 y1 에 값 을 부여 하여 위 치 를 정 합 니 다.마우스 가 들 어 올 릴 때 x,y 를 최종 값 으로 업데이트 합 니 다.
여기 서 관건 적 인 것 은@mousemove 를 사용 하면 마우스 가 너무 빨리 끌 리 는 상황 에서 메모 가 마 우 스 를 따라 가지 못 하면 마우스 가 div 를 옮 겨 드래그 가 효력 을 잃 는 다 는 것 이다.
그래서 여 기 는 mousedown 만 목표 에 연결 하고 mousemove 와 mouseup 을 document 에 연결 하면 마우스 가 빨리 이동 한 후에 메모 가 나 와 메모 가 걸 릴 까 봐 걱정 하지 않 습 니 다.
2.메모 내용 에 대해 어떻게 편집 해 야 하나 요
마우스 hover 를 올 려 놓 고 단 추 를 표시 합 니 다.편집 단 추 를 누 르 면 메모 내용 을 편집 가능 한 상태 로 만 들 고 내용 영역 blur 시 자동 으로 저장 합 니 다.

div 메모 에 blur 이벤트 가 없 기 때문에 편집 상태 에서 내용 영역 을 textarea 로 변경 합 니 다.

 <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="     "
      :autosize="{ minRows: 10 }"
      v-model="content"
      :ref="'note' + index"
      @blur="handleChange"
    ></el-input>

분명히 이 내용 은 innerHTML 결과 로 저장 해 야 합 니 다.줄 을 바 꾸 고 빈 칸 으로 돌아 가 는 스타일 을 저장 해 야 하기 때문에 디 스 플레이 를 일치 하 게 유지 해 야 합 니 다.따라서 편집 한 문자열 을 가 져 오 려 면 정규 로 교체 해 야 합 니 다.
this.content = this.content
.replace(/\r/g, "
")
.replace(//g, "
")
.replace(/\s/g, " ");
편집 상태 가 되 었 을 때,우 리 는 형식 을 textarea 에 다시 바 꿔 야 한다.
this.content = this.content
.replace(/ /g, " ")
.replace(//g, "\r");

3.아래 는 인 터 페 이 스 를 바 꿀 때 가 아니다.
express 프레임 워 크 는 더 이상 군말 하지 않 습 니 다.우 리 는 mongoose 로 mongodb 데이터 베 이 스 를 연결 하고 controller 폴 더 를 만 들 며 note.js 를 추가 하여 데이터 베 이 스 를 실현 합 니 다.

// 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);
      });
  }
};

여기에 먼저 간단하게 쓰 고 결 과 를 되 돌려 줄 수 있다.
모델 폴 더 를 만 들 고 note.js 저장 스키 마 를 추가 합 니 다.

// model/note.js
var mongoose = require("mongoose");
var Schema = mongoose.Schema;
 
//           
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);
//          
module.exports = mongoose.model("Notes", noteSchema, "notes");

따라서 드래그 가 끝 날 때,메모 블 러 는 자동 으로 저 장 됩 니 다.
그래서 데이터베이스 에 우리 의 메 모 를 저장 할 것 이다.

그래서 초보 적 인 초기 형태 가 완성 되 었 습 니 다.우 리 는 메 모 를 만 들 고 드래그,편집,삭제 합 니 다.이것들 은 모두 실시 간 으로 저 장 된 것 입 니 다.페이지 를 새로 고 친 후에 메모지 의 위 치 는 모두 보존 할 수 있 습 니 다.
다음은 효과 보기:

그 다음 에 아직도 많은 작업 목록 을 하지 않 았 습 니 다.마음대로 생각해 보면 기능 이 완 선 될 수 있 는 것 이 많 습 니 다.예 를 들 어 사용자 관리,시간 분류,다 중 조건 조회,메모 내용 지원 부 텍스트,메모 지원 사용자 정의 스타일,메모 알림 기능 등 이 있 습 니 다.
더욱 분발 하여 임 무 는 무 겁 고 갈 길 은 멀다~~~
여러분 도 Cavans 미니 게임 시리즈 에 관심 을 가 져 보 세 요.
<VUE:플 래 피 버드 하나 실현~~>
《VUE+Canvas,데스크 톱 당구 벽돌 제거 미니 게임 실현》
《VUE+Canvas 뇌 정전 기 타자 류 미니 게임 실현》
여기에 VUE+Express+MongoDB 의 앞 뒤 가 분리 되 어 하나의 메모지 벽 을 실현 하 는 것 에 관 한 글 을 소개 합 니 다.vue 앞 뒤 가 분리 되 어 있 는 메모지 벽 에 관 한 내용 은 예전 의 글 을 검색 하거나 아래 의 관련 글 을 계속 찾 아 보 세 요.앞으로 많은 응원 부 탁 드 리 겠 습 니 다!