「導入から最適化まで効率的な会議管理システムを構築する」

導入

現代のオフィス環境において、会議は組織がコミュニケーションを取り、意思決定を行い、協力するための重要な方法の 1 つです。会議の効率化と質の向上を図るため、多くの企業が会議OAシステムを導入し、会議管理の自動化・デジタル化を実現しています。このブログでは、会議 OA システムを導入して最適化する方法を紹介し、このプロセスでフロントエンドとバックエンドを分離した SPA プロジェクトのアプリケーションを検討します。

1. スタンドアロンプロジェクトの展開 - 会議 OA

1.1 ハードウェアおよびソフトウェア環境の準備

会議 OA システムを導入する前に、適切なハードウェアおよびソフトウェア環境を準備する必要があります。これには、適切なサーバー、オペレーティングシステム、データベース、および関連する構成とインストールの選択が含まれます。

1.2 検査項目

プロジェクトファイルを準備する
ローカル MySQL の SQL ファイルのチェックでエラーが発生しました
Tomcat サーバーを開き、Tomcat フォルダー内の webapps パッケージに war パッケージを配置し、サービスを開いてプロジェクトを実行し、実行できるかどうかを確認します。

1.3 システムの導入

1. バックエンドの展開

1.MySQLの導入

ローカルサーバーを使用して、デプロイされた MySQL をリモート制御します
新しいプロジェクトに対応するデータベースを作成する
SQLファイルを実行する

2.Tomcatサーバーの導入

war パッケージファイルを Tomcat の Web アプリに配置します。
スタートアッププロジェクト
conf.properties 構成ファイルを変更します (サーバーと一致するように接続データベースのパスワードを変更します)。

ここに画像の説明を挿入します

Tomcatを再起動します
仕上げる
結果を示す

2. フロントエンドとバックエンドの分離プロジェクトの展開 - SPA プロジェクト

バックエンドのデプロイメント

バックグラウンドプロジェクトが正常に実行できるかローカルで確認する
フロントエンドプロジェクトが正常に実行できるかローカルで確認する
導入を開始する
ローカル接続サーバーのデータベース内のデプロイメントプロジェクトに対応する構成ファイルに新しいデータベース名を作成します（私のものはvueです）
SQLファイルを実行する
戦争プロジェクトを Web アプリに組み込む
設定ファイル jdbc.Driver のパスワードを変更する
プロジェクトを開始します (バックエンドの準備が成功しました)

2. フロントエンドの展開

node.jsフロントエンドサーバーをダウンロード
ファイルを指定した場所 (例: D:\initPath) に解凍し、解凍したディレクトリ内に 2 つのディレクトリ、node_global と node_cache を作成します。
環境変数
path+=;%NODE_HOME%;%NODE_HOME\node_global%;を構成します。
cmd ノードを入力 -v チェック
npm グローバルモジュールパスとキャッシュのデフォルトのインストール場所を構成します
。cmd を開いて次のコマンドを個別に実行します:
npm config set cache "C:\software\node-v18.16.1-win-x64\node-v18.16.1-win-x64 " npm
config set プレフィックス "C:\software\node-v18.16.1-win-x64\node-v18.16.1-win-x64"
タオバオのソースを設定する
npm config レジストリを設定する https://registry.npm.taabao.org/
スパプロジェクトを開始します (正常に開始されました)

が、サーバーのフロントエンドクライアントは現在それにアクセスできません。
その理由は、node.js のスパに制限があるためです。
制限は MSQL の localhost 設定に似ており、異なります。 IPに解析されます。

実装方法では、サーバー上にリバースプロキシサーバーを設定し、ポート番号を80にすることで問題を解決します。
ホストは 80 と 8081 にアクセスすることでアクセスできます。

構成


#user  nobody;
worker_processes  1;

#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

#pid        logs/nginx.pid;


events {
    
    
    worker_connections  1024;
}


http {
    
    
    include       mime.types;
    default_type  application/octet-stream;

    #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
    #                  '$status $body_bytes_sent "$http_referer" '
    #                  '"$http_user_agent" "$http_x_forwarded_for"';

    #access_log  logs/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;

    #gzip  on;

    server {
    
    
        listen       80;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
    
    
           proxy_pass   http://localhost:8081;
        }

        #error_page  404              /404.html;

        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
    
    
            root   html;
        }

        # proxy the PHP scripts to Apache listening on 127.0.0.1:80
        #
        #location ~ \.php$ {
    
    
        #    proxy_pass   http://127.0.0.1;
        #}

        # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
        #
        #location ~ \.php$ {
    
    
        #    root           html;
        #    fastcgi_pass   127.0.0.1:9000;
        #    fastcgi_index  index.php;
        #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
        #    include        fastcgi_params;
        #}

        # deny access to .htaccess files, if Apache's document root
        # concurs with nginx's one
        #
        #location ~ /\.ht {
    
    
        #    deny  all;
        #}
    }


    # another virtual host using mix of IP-, name-, and port-based configuration
    #
    #server {
    
    
    #    listen       8000;
    #    listen       somename:8080;
    #    server_name  somename  alias  another.alias;

    #    location / {
    
    
    #        root   html;
    #        index  index.html index.htm;
    #    }
    #}


    # HTTPS server
    #
    #server {
    
    
    #    listen       443 ssl;
    #    server_name  localhost;

    #    ssl_certificate      cert.pem;
    #    ssl_certificate_key  cert.key;

    #    ssl_session_cache    shared:SSL:1m;
    #    ssl_session_timeout  5m;

    #    ssl_ciphers  HIGH:!aNULL:!MD5;
    #    ssl_prefer_server_ciphers  on;

    #    location / {
    
    
    #        root   html;
    #        index  index.html index.htm;
    #    }
    #}

}

プログラムを開く
と、ホストがアクセスできるようになります。

問題解決に向けた開発アプローチ

フロントエンドを閉じる
C:\java\qhspa\spa\config で Index.js を見つけます。
Ctrl+F は localhost を検索し、それを 0.0.0.0 に変更します。これは一般的な意味を持ちます。
フロントエンドプロジェクトを保存して再起動すると、アクセスできるようになります。

ここに画像の説明を挿入します

要約する

このブログでは、フロントエンドとバックエンドを分離して会議 OA システムと SPA プロジェクトを導入する方法について詳しく説明します。システム要件の分析、ハードウェアおよびソフトウェア環境の準備、データベースの設計と移行、システムの導入とテストの説明を通じて、読者はスタンドアロンプロジェクトを導入するための包括的なガイダンスを得ることができます。同時に、フロントエンドとバックエンドの分離アーキテクチャの概要、フロントエンドフレームワークの選択と開発、バックエンドAPIの設計と開発、システムの統合と展開の説明を通じて、読者は実装プロセスを理解できます。フロントエンドとバックエンドの分離プロジェクト。この記事を学ぶことで、読者は効率的な会議管理システムを構築する方法を習得し、企業のニーズを満たすために実際の状況に応じて最適化および拡張できるようになります。