vue-nodejs-elementUI-mysql-express-demo
Vue+nodejs のフロントエンドとバックエンドの分離プロジェクト、基本的な入力操作などの使い方を学びます。プロジェクトの作成から最終的な展開までの実装プロセスと、そのプロセス中に発生したいくつかの問題の概要が含まれます。
プロジェクトのプレビュー アドレス: プレビュー アドレス--aixiaodou.cn
コメントおよびディスカッションのアドレス: 個人ブログ -- https://blog.csdn.net/qq_32442967/article/details/103459148
データベースアドレス：express-demo/doc/demo2.sql
MySQLデータベース
データベースはdemo2です
demo2 データベースを作成 > SQL ステートメントを実行
Express-demo プロジェクトの model/connDb.js データベース接続構成を変更します。
Express-demo-web: フロントエンド Web プロジェクト
# 安装依赖
npm install
# 运行项目
npm run dev
Express-demo: バックエンド Nodejs プロジェクト
# 安装依赖
npm install
# 运行项目
npm start
このプロジェクトは、フロント (vue) エンドとバック (nodejs) エンド分離モードを使用するエントリーレベルのプロジェクトです。
主に使用されているテクノロジー:
- フロントエンド: vue+ elementUI+ axios+ vue-cli+ webpack+ vue-router+ vuex+ js-cookie
- バックエンド:nodejs+express+jsonwebtoken
- データベース: mysql
- 導入環境：nginx
- 導入サーバー: Linux centos7
既存の機能の紹介:
- toolsDown ツール ダウンロード モジュール: データベースからリストをクエリし、カテゴリ別に表示します。
- ログイン、登録 ログイン、登録、ログアウト モジュール: ホーム ページとツール ダウンロード ページはログインせずにプレビューでき、ログイン後はユーザー リスト ページが表示されます。 ログイン後にローカルストレージにセッショントークンをクッキーに保存し、userId を保存します。 ログインしているかどうかに応じて、右上隅にログインまたはアバターが表示されます。
- userManage ユーザーリストモジュール: ページング、あいまい検索、ユーザー編集および削除機能
- friends_link フレンド リンク インターフェイス: フレンド リンクとファイル情報をデータベースに入力します。
- ソフトウェアのダウンロード数の統計
- ユーザーによる変更・削除機能
V 1.0.2 ダウンロード統計/ログイン登録検証 (項目 5 ～ 6)
- トークン検証の最適化
- ソフトウェアのダウンロード数の統計
- ユーザーによる変更・削除機能
V 1.0.1 基本機能の実装 (項目 1 ～ 4) - 主に発生したいくつかの問題を記録します
フロントエンド
- ログイン後のみページにアクセスできるかどうかを制御: トークンに基づいてログインの有無を判断し、ルーター参照リンクを設定します
- ログイン後に取得したuserIdをlocalstorageに保存し、ユーザー情報取得時にuserIdを持ってログインユーザー情報を取得し、右上にアバターを表示します。
後部
- Nodejs は MySQL データベースに接続します。接続プールを使用する場合は、使用後に接続を解放する必要があります。そうしないと、接続の最大数を超えてしまいます。
展開する
- nginx が vue プロジェクトをデプロイした後、通常のアクセスには問題ありませんが、更新時に 404 問題が発生します。
- nodejsは永久参照リンクを使用してLinuxで永続的に実行されます
V 1.0.0 フロントエンドおよびバックエンド プロジェクトの作成
フロントエンド
- vue-cli+ webpack を使用して vue プロジェクトを生成する
- ルーター、ストア、ユーティリティ、axios、elementUI、ポート番号を設定します...
後部
- Express を使用して、nodejs プロジェクトの参照リンクを生成する
- jsonwebtoken 依存関係パッケージをインストールし、トークンを生成し、ログイン成功後にフロントエンド参照リンクを返します。
- mysqlデータベース依存関係パッケージをインストールする
フロントエンドとバックエンド分離プロジェクトのクロスドメイン問題を解決する（リクエストヘッダーの設定） 参考リンク
- フロントエンド: axios のリクエスト インターセプタ、sessionToken を設定し、許可されたサーバーかどうかを判断するためのバックエンド検証として使用されます。
- バックエンド: app.js でリクエスト ヘッダーを設定 - app.all() を追加
- バックエンド: カスタマイズされたリクエスト ヘッダーの sessionToken により、複雑なクロスドメイン リクエストの場合、事前リクエストのオプションがあり、メソッド オプションを含むリクエストはすぐに処理され、200 が返されます。
データベース
- データベースの作成 > テーブル [user, tools_down, friends_link]
- シミュレートされたテストデータ
