付箋紙の壁シリーズを実現しようと思っています。シンプルなものはシンプル、複雑なものは多機能です。開発の過程を一から記録していきます。このプロジェクトが最終的に完成することを願っています。 まず、フロントエンドとバックエンドを分離したアーキテクチャを採用しています。フロントエンドには Vue、バックエンドには Express、データベースには MongoDB を使用しています。 最初にどのようなプロトタイプを完成させたいか、心の中で考えてみましょう。ユーザーのログイン管理は今は脇に置いておきましょう。もちろん、メモの追加、削除、変更、確認、表示に重点を置きます。 次に、ノートを一つずつ表示、追加、変更、削除する「Unit-01」を実装します。 1. まずスタイルを描く必要があります。まずはインターフェースについて心配せず、純粋なフロントエンドの問題を解決しましょう。きちんとした「黒板」を作りましょう。ちなみに、お気に入りの壁紙素材を生成できるウェブサイト https://www.transparenttextures.com/ がありますので、それを使っています。 さて、この黒板に付箋を「貼り付け」ます。これは CSS に関するものです。これは、あなたのアート デザイン スキルに依存します。私は、単に気軽にやってみます。 重要な点は、この背景ボードでは、付箋を好きな場所に貼り付けることができる必要があるため、付箋については、ユーザーがドラッグして場所を記録できる必要があるということです。 したがって、ノートの div を position: absolute に設定し、top: y px と left: x px を使用して配置を実現します。 そこで、単一のノート オブジェクトのプロパティを検討します。
次に、付箋のドラッグを実装します。 (1)マウスクリック機能をノートのdivにバインドします。 @mousedown="mousedown($event)" (2)ドラッグの実装: マウスダウン: 関数(イベント) { _this = this とします。 if (!this.isEdit) { イベントの開始X = イベント.x; イベントの開始Y = イベント.y; this.note.moving = true; document.onmousemove = イベント => { if (!_this.note.moving) が 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.moving = 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 の結果とともに保存する必要があります。表示の一貫性を保つために、改行、復帰、スペースなどのスタイルを保存する必要があるため、編集された文字列を取得するときに、それを正規表現で置き換える必要があります。
編集可能になったら、フォーマットをテキストエリアに変換する必要があります。
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 をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: Centos7.4 サーバーへの Apache のインストールとインストール プロセス中に発生した問題の解決策
目次1. Document.execCommand() メソッド(1)コピー操作(2)貼り付け操作(...
背景多くのウェブサイトのデザインは、一般的にコンテンツ+フッターの2つの部分で構成されています。コン...
コアコード /*-------------------------------- 2つ以上のフィール...
著者が MySQL を使用してユーザーを追加していたところ、ユーザー名が間違って記述されていることに...
目次前提条件使用効果コミット前ミューテーション効果コミットミューテーション効果コミットレイアウト効果...
これは私が Vue フレームワークを独学していたときに真似したウェブサイトです。いくつかの都市の天気...
ここ数日、dockerでSpring Bootアプリケーションを実行する方法を勉強してきました。以前...
Navicat は、データベースに接続するときにエラー 10060 および 1045 を報告します...
この記事では、ホイール抽選を簡単に実装するためのVueの具体的なコードを参考までに共有します。具体的...
MySQL はインストール時に自動的に mysql という名前のデータベースを作成します。mysql...
序文MySQL では、InnoDB はストレージ エンジン レイヤーに属し、プラグインとしてデータベ...
DCL (データ制御言語): データベースのアクセス権とセキュリティ レベルを定義し、ユーザーを作成...
MySQL 8.0 for Windows v8.0.11 公式無料バージョン 64 ビット1. デ...
Mysql はクエリ結果セットを JSON データに変換します 序文 学生テーブル 学生スコアテーブ...
SeLinuxを無効にするsetenforce 0永久に閉店: vi /etc/selinux/c...