VUE+Express+MongoDBのフロントエンドとバックエンドの分離によるノートウォールの実現

VUE+Express+MongoDBのフロントエンドとバックエンドの分離によるノートウォールの実現

付箋紙の壁シリーズを実現しようと思っています。シンプルなものはシンプル、複雑なものは多機能です。開発の過程を一から記録していきます。このプロジェクトが最終的に完成することを願っています。

まず、フロントエンドとバックエンドを分離したアーキテクチャを採用しています。フロントエンドには Vue、バックエンドには Express、データベースには MongoDB を使用しています。

最初にどのようなプロトタイプを完成させたいか、心の中で考えてみましょう。ユーザーのログイン管理は今は脇に置いておきましょう。もちろん、メモの追加、削除、変更、確認、表示に重点を置きます。

次に、ノートを一つずつ表示、追加、変更、削除する「Unit-01」を実装します。

1. まずスタイルを描く必要があります。

まずはインターフェースについて心配せず、純粋なフロントエンドの問題を解決しましょう。きちんとした「黒板」を作りましょう。ちなみに、お気に入りの壁紙素材を生成できるウェブサイト https://www.transparenttextures.com/ がありますので、それを使っています。

さて、この黒板に付箋を「貼り付け」ます。これは CSS に関するものです。これは、あなたのアート デザイン スキルに依存します。私は、単に気軽にやってみます。

重要な点は、この背景ボードでは、付箋を好きな場所に貼り付けることができる必要があるため、付箋については、ユーザーがドラッグして場所を記録できる必要があるということです。

したがって、ノートの div を position: absolute に設定し、top: y px と left: x px を使用して配置を実現します。

そこで、単一のノート オブジェクトのプロパティを検討します。

x: 付箋とコンテナの左側の間の距離、左の値

y: 付箋とコンテナの上端の間の距離、topの値

txt: メモの内容

タイトル: タイトル

色:

bg: "", // 背景色

ピン: "" // ペーパークリップの色

}

次に、付箋のドラッグを実装します。

(1)マウスクリック機能をノートのdivにバインドします。

@mousedown="mousedown($event)"

(2)ドラッグの実装:

マウスダウン: 関数(イベント) {
      _this = this とします。
      if (!this.isEdit) {
        イベントの開始X = イベント.x;
        イベントの開始Y = イベント.y;
        this.note.movi​​ng = true;
        document.onmousemove = イベント => {
          if (!_this.note.movi​​ng) が false を返す;
 
          dx = event.x - _this.startX とします。
          dy = event.y - _this.startY とします。
 
          もし (
            _this.note.x + dx <= 0 ||
            _this.note.x + dx >= _this.width - 250 ||
            _this.note.y + dy <= 60
          ){
            false を返します。
          }
 
          _this.note.x1 = _this.note.x + dx;
          _this.note.y1 = _this.note.y + dy;
        };
        ドキュメント.onmouseup = () => {
          if (!this.isEdit) {
            this.note.movi​​ng = false;
            this.note.x = this.note.x1;
            メモ:
            this.saveNote();
            ドキュメント.onmousemove = null;
            ドキュメント.onmouseup = null;
          }
        };
      }
    }

初期レコード x と y のコピーは x1、y1 です。 startX と startY を使用してマウスの押下時の初期位置を記録し、ドラッグ処理中に元の値でオフセットを計算し、位置決めのために x1 と y1 に割り当て、マウスが持ち上げられたときに x と y を最終値に更新します。

ここで重要な点は、@mousemove を使用すると、マウスを速くドラッグすると付箋が間に合わず、マウスが div から外れてドラッグが失敗するということです。

したがって、ここでは、mousedown をターゲットにバインドし、mousemove と mouseup をドキュメントにバインドするだけで、マウスの動きが速すぎて付箋が動かなくなることを心配する必要がなくなります。

2. メモの内容を編集するにはどうすればいいですか?

ここではボタンをデザインします。マウスを合わせるとボタンが表示されます。編集ボタンをクリックすると、ノートの内容を編集できるようになります。コンテンツ領域がぼやけている場合は自動的に保存されます。

div ノートにはブラー イベントがないため、編集状態ではコンテンツ領域をテキスト領域に変更します。

 <div
      クラス="note-content"
      v-if="!isEdit"
      v-html="コンテンツ"
      :ref="'メモ' + インデックス"
    </div>
    <el-入力
      v-else
      クラス="note-content my-textarea"
      タイプ="テキストエリア"
      placeholder="コンテンツを入力してください"
      :autosize="{ 最小行数: 10 }"
      v-model="コンテンツ"
      :ref="'メモ' + インデックス"
      @blur="ハンドル変更"
    </el-input> ...

当然、ここでのコンテンツは innerHTML の結果とともに保存する必要があります。表示の一貫性を保つために、改行、復帰、ス​​ペースなどのスタイルを保存する必要があるため、編集された文字列を取得するときに、それを正規表現で置き換える必要があります。

this.content = このコンテンツ

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

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

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

編集可能になったら、フォーマットをテキストエリアに変換する必要があります。

this.content = このコンテンツ

.replace(/&nbsp;/g, " ")

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


3. インターフェースを調整する

ここでは Express フレームワークについては説明しません。mongoose を使用して mongodb データベースに接続し、コントローラー フォルダーを作成し、note.js を追加してデータベース操作を実装します。

// コントローラー/note.js
const Notes = require("../model/notes");
var mongoose = require('mongoose');
モジュール.エクスポート = {
  更新ノート(obj) {
    _id が _id である場合
      obj.params._id = 新しい mongoose.mongo.ObjectID();
    }
    Notes.findByIdAndUpdate() を返します。
      obj.params && obj.params._id,
      {
        $set: オブジェクト本体
      },
      {
        アップサート: true、
        新規: 真、
        挿入時にデフォルトを設定する: true
      }
    )
      .then(関数(newobj) {
        Promise.resolve({ を返す
          ステータス: 200、
          メッセージ: "OK"
        });
      })
      .catch((エラー) => {
        Promise.reject(err) を返します。
      });
  },
  メモを取得する() {
    新しいPromise(function(resolve,reject))を返す{
      ノート.find()
        .then(関数(newobj) {
          解決(newobj);
        })
        .catch((エラー) => {
          拒否(エラー);
        });
    });
  },
  メモIDで削除(_id) {
    Notes.findByIdAndDelete(_id) を返します
      .then(関数(newobj) {
        Promise.resolve({ を返す
          ステータス: 200、
          メッセージ: "OK"
        });
      })
      .catch((エラー) => {
        Promise.reject(err) を返します。
      });
  }
};

ここでは、まず簡単なものを書いて、返された結果をさらにカプセル化することができます。

モデル フォルダーを作成し、スキーマを保存するための note.js を追加します。

// モデル/note.js
var mongoose = require("mongoose");
var スキーマ = mongoose.Schema;
 
//データセットオブジェクトを宣言する var noteSchema = new Schema({
  TXT: {
    タイプ: 文字列、
    必須: false
  },
  x: {
    タイプ: 数値
  },
  年: {
    タイプ: 数値
  },
  色:
    タイプ: オブジェクト
  },
  タイトル:{
    タイプ: 文字列、
    デフォルト: "名前なし"
  },
  作成時間: {
    タイプ: 日付、
    デフォルト: Date.now
  }
});
mongoose.set("useCreateIndex", true);
mongoose.set('useFindAndModify', false);
// データ モデルを公開します module.exports = mongoose.model("Notes", noteSchema, "notes");

そのため、ドラッグ終了時や付箋がぼやけた時に自動的に保存されるはずです。

すると、メモがデータベースに保存されます。

こうして予備的なプロトタイプが完成しました。メモを作成し、ドラッグして編集し、削除しました。これらはすべてリアルタイムで保存され、ページを更新した後もメモの位置は保持されました。

効果を見てみましょう:

次に、まだできていないタスクリストがたくさんあります。ユーザー管理、時間分類、複数条件クエリ、リッチテキストのメモコンテンツサポート、カスタムスタイルのメモサポート、メモリマインダー機能など、ざっと考えてみると、改善できる機能がたくさんあります。

頑張ってください、まだまだ道のりは長いですよ~~~~

Cavans ミニゲーム シリーズにも注目してください:

《VUEがFlappy Birdを実装しました〜〜〜》

《VUE+Canvas がデスクトップ ピンボール ブロック崩しゲームを実現》

《VUE+Canvasでサンダーファイターのタイピングゲームを実装》

VUE+Express+MongoDB フロントエンドとバックエンドを分離して付箋ウォールを実現する方法についての記事はこれで終わりです。Vue フロントエンドとバックエンドを分離した付箋ウォールの関連コンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • フロントエンドとバックエンドを分離する際の Vue+springboot クロスドメインセッション+Cookie 無効化の問題を解決する
  • Vue WeChat認証ログインのフロントエンドとバックエンドを分離するエレガントなソリューションの詳細な説明
  • SpringBoot+Vue.jsでフロントエンドとバックエンド分離のファイルアップロード機能を実現
  • nginx+vue.jsを使用してフロントエンドとバックエンドを分離するサンプルコード
  • Vue+springboot フロントエンドとバックエンドの分離により、シングルサインオンのクロスドメイン問題解決を実現

<<:  Centos7.4 サーバーへの Apache のインストールとインストール プロセス中に発生した問題の解決策

>>:  MySQLインデックスの簡単な分析

推薦する

JS でクリップボード API を使用する方法

目次1. Document.execCommand() メソッド(1)コピー操作(2)貼り付け操作(...

ウェブサイトのフッター沈下現象に対する3つの解決策を詳しく解説

背景多くのウェブサイトのデザインは、一般的にコンテンツ+フッターの2つの部分で構成されています。コン...

mysqlは2つ以上のフィールドがNULLであるレコードを見つける問題を解決します

コアコード /*-------------------------------- 2つ以上のフィール...

MySQLユーザー削除バグを解決する

著者が MySQL を使用してユーザーを追加していたところ、ユーザー名が間違って記述されていることに...

React における useEffect と useLayoutEffect の違い

目次前提条件使用効果コミット前ミューテーション効果コミットミューテーション効果コミットレイアウト効果...

Vueは小さな天気予報アプリケーションを実装します

これは私が Vue フレームワークを独学していたときに真似したウェブサイトです。いくつかの都市の天気...

DockerでSpring Bootアプリケーションを実行する方法

ここ数日、dockerでSpring Bootアプリケーションを実行する方法を勉強してきました。以前...

NavicatがMySQLに接続すると、10060、1045エラーとmy.iniの場所が報告されます。

Navicat は、データベースに接続するときにエラー 10060 および 1045 を報告します...

Vue ターンテーブル抽選の簡単な実装

この記事では、ホイール抽選を簡単に実装するためのVueの具体的なコードを参考までに共有します。具体的...

MySQLユーザー権限テーブルについての簡単な説明

MySQL はインストール時に自動的に mysql という名前のデータベースを作成します。mysql...

MySQL InnoDB ストレージ エンジンの詳細

序文MySQL では、InnoDB はストレージ エンジン レイヤーに属し、プラグインとしてデータベ...

DCL を使用して MySQL でユーザーを管理し、権限を制御する方法

DCL (データ制御言語): データベースのアクセス権とセキュリティ レベルを定義し、ユーザーを作成...

MySQL 8.0.11 の新機能の紹介

MySQL 8.0 for Windows v8.0.11 公式無料バージョン 64 ビット1. デ...

Mysql クエリの結果セットを JSON データに変換するサンプル コード

Mysql はクエリ結果セットを JSON データに変換します 序文 学生テーブル 学生スコアテーブ...

CentOS7 インストール Zabbix 4.0 チュートリアル (イラストとテキスト)

SeLinuxを無効にするsetenforce 0永久に閉店: vi /etc/selinux/c...