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インデックスの簡単な分析

推薦する

Typescript+React でモバイルと PC でシンプルなドラッグ アンド ドロップ効果を実現

この記事では、モバイルとPCで簡単なドラッグアンドドロップ効果を実現するためのTypescript ...

MySQLのslave_exec_modeパラメータの詳細な説明

今日、slave_exec_modeというパラメータを偶然見ました。マニュアルの説明から、このパラメ...

テキストエリアのテキスト入力領域に改行を実装する方法

textarea 入力領域でテキストを折り返す場合は、<br/> と入力すると <...

VMWare ネットワーク アダプタの 3 つのモードの実装プロセスの分析

3つのモードブリッジ(ブリッジ モード)、NAT(ネットワーク アドレス変換モード)、ホストオンリー...

Tomcat および Web アプリケーションの Docker デプロイメントの実装

1.dockerをオンラインでダウンロードする yum インストール -y epel-release...

Docker で複数の MySQL コンテナを作成して実行する方法の例

1. mysql/mysql-server:latestイメージを使用してMySQLインスタンスを素...

Linux 上の Nginx に複数のバージョンの PHP をインストールする

サーバーの LNPM 環境をインストールして構成する場合、複数のバージョンの PHP の共存を考慮す...

ORM モデル フレームワークを使用して MySQL データベースを操作する方法

ORM とは何ですか? ORM は Object Relational Mapping の略で、オブ...

ウェブページの色特性の分類

色特性の分類あらゆる色は、赤、緑、青の三原色から構成されます。三原色の中で暖色なのは赤だけなので、作...

MySQL 5.7 および 8.0 データベースのルート パスワードを忘れた場合の解決策

注: MySQL5.7 で root パスワードをクラックするには、パスワード認証をスキップしてデー...

ホバー生成の境界線によって生じる要素の移動を解決する方法

序文hover疑似クラスが要素に境界線を追加すると、要素内のコンテンツがずれることがあります。box...

Navicat 8でMySQL用のデータベースを作成する方法

ウェブサイトを開発する場合、データを保存するためにデータベースを使用する必要があることがよくあります...

WeChatアプレットがログインインターフェースを実装

WeChatアプレットのログインインターフェースは参考までに実装されています。具体的な内容は次のとお...

Vue ローカルコンポーネントデータ共有 Vue.observable() の使用

コンポーネントが詳細になるにつれて、複数のコンポーネントが状態を共有する状況に遭遇するでしょう。Vu...

JavaScript は 3 つの一般的な Web 効果 (オフセット、クライアント、スクロール シリーズ) を実装します。

目次1. 要素オフセットシリーズ2. 要素表示領域クライアントシリーズ3. 要素スクロールシリーズ1...