XanaduCompanyダウンロード - XanaduCompanyソースコードのダウンロード

XanaduCompany

その他のカテゴリー

1.0.0

ダウンロード

1. 技術的ソリューションを採用する

このシステムで使用されている主な技術は次のとおりです。

Vue3

Vue.js
エレメントプラス
アクシオス
ノード.js
続編
コア
MySQLデータベース

2022.11.19更新
Vue3 の新しいブランチ。すでにzerotower69によって開発されたデフォルトのブランチです。

Vue3 + TS + Element Plus にアップデート

2023.03.15更新

vue3 はメインブランチです。vue2 バージョンについては、vue2 ブランチを参照してください。このブランチには現在多くの落とし穴があります。vue2 バージョンの影響を参照してください。

2. 開発環境

オペレーティングシステム: Windows 10
データベース: MySQL (v5.7.7)
Webサーバー: Nginx
開発ツール: ウェブストーム
システム基本環境：Node.js
ブラウザ: Google Chrome

3. カタログの説明

管理者---バックエンド管理

ウェブ---フロントデスクのディスプレイ

サーバー---バックエンドサービス

4. プロジェクトに入る

システムは表示用にオンラインです

エンタープライズポータル表示 (https://xanadu.aerowang.cn/)
システムのバックグラウンド管理 (https://xanadu.aerowang.cn/admin)
- アカウント: youke、パスワード: a123456
- 管理者: admin パスワード: 654321
  で登録することもできます

5. ローカルで実行する方法

問題がある場合は、package.json 内のスクリプトを確認してください。dev および実行コマンドが何もない状態から作成されていることがわかります。コマンドを実行できない場合は、そのコマンドを定義してはいけません。

最初にバックエンドを起動します (サーバーディレクトリの下で)

npm install

npm run start(本地启动)

或者 npm run dev(实时监听改动重启，边改边跑) 需要全局安装 nodemon（任何说不是xxx命令的错误都是没有全局安装，请先安装后再运行）

フロントエンド (Web または管理ディレクトリ) を開始します。

 # 1.安装
npm install
   #又或者
pnpm install
# 2.启动
npm run serve 
   #又或者
pnpm serve
# 3.打包
npm run build 
 #又或者
pnpm build
# 4.清除 node_modules
npm run clear 
  # 又或者
pnpm clear #由于rmdir 安装在这里，它也会清掉，就是自己干了自己
#会有一条报错出现，请无视它

事前に pnpm コマンドをグローバルにインストールしてください

npm i pnpm -g

6. ドッカー

Docker のワンクリック自動デプロイメント

注文

 # 主目录下
docker compose up -d

# 即可访问

次のファイルを変更する必要があります。

./admin/.env.production
VUE_APP_BASE_API = '你自己的域名:3000/api/v1'
./admin/vue.config.js
line.27 publicPath: '/', => publicPath: '/admin/',
./server/config/dbinfo.js
host: "localhost", => host: "xanadu-db",
./web/.env.production
VUE_APP_PRODURL = "你自己的域名/admin/#/login"
./web/src/utils/request.ts
baseURL: '/api' =>你自己的域名:3000/api

docker は go バージョンを使用していません

7. 補足事項

このシステムは CDN 読み込みリソースを最適化しているため、このシステムを実行するには比較的高速で安定したネットワークに接続する必要があります。接続しないとシステムページにエラーが表示されます。

2022.11.19更新

一部のリソース参照は cdn.jsdelivr.net からのものです。現在 (2022.11.19) ではアクセスが少し遅くなる可能性があります。興味がある場合は、参照リンクを自分で変更できます。

2023.03.15更新

1. 正確に言うと、このシステムはフロントエンド、バックエンド、フロントエンド管理の 3 つのプロジェクトに分かれており、このルートディレクトリを直接実行することはできません。

2. ノードのバージョンを厳密に確認してください。発見された問題を考慮して、Windows 環境では、より大きいバージョンのノード 14 を使用することをお勧めします。さらに、QQ グループのグループファイルは、依存パッケージの圧縮パッケージを提供します。試してみてください。Mac システム 14 と 16 はどちらも問題ありません (M1 以降の APPLE で実行されています)。

3. データベース接続エラーが報告された場合は、まずサーバー (バックエンドノード) の config ディレクトリ内の dbinfo.js の構成と独自のデータベース構成が正しいかどうかを確認してください。

4. プロジェクトを実行する前に、必ず npm install を実行して関連する依存関係をインストールし、pcweb エンド、管理エンド、およびバックエンドに移動してそれぞれの package.json ファイルを調べ、スクリプトセクションを調べて、次のことを確認してください。実行したいコマンドが定義されています。 dev コマンドが定義されていないため、 npm run devを実行すると必ずエラーが報告され、最初のエラーメッセージは dev がスクリプト内にないことを意味します。 package.json と script という 2 つのキーワードが表示されます。エラーレポートの最初の行は、未定義のコマンドが実行されたことを示す必要があります。

5.データベーススクリプト (initial_data.sql) については、QQ グループ 434063310 を参照してください (このグループの所有者はオリジナルの作成者ではありませんが、自主的に維持しています)。

6. Node では、nvm バージョン管理ツールを使用することをお勧めします。Windows ユーザーは、.exe を直接使用してインストールできます。Mac ユーザーは、心配せずに brew を使用してインストールできます。

brew install nvm

nvm をインストールした後、それを使用してノードのバージョンを切り替えることができます。nvm install xxx はインストールコマンドであり、切り替えるたびに使用するバージョンに切り替えることを忘れないでください。

7. Web プロジェクトで CDN を使用する場合は、外部設定のロジックをコメントアウトして、関連する CDN リンクに正常にアクセスできるかどうかを確認してください。ブラウザで確認して、外部を正しく設定できます。

8. プロキシの利用については、本番環境のnginxに必ずリバースプロキシの設定を行ってください。

9. 現在、バックエンドノードに適したパッケージングソリューションはありません。通常、サーバーは pm2 を直接使用してノードサービスを開始します。サーバーに pm2 をインストールして使用します。

npm i pm2 -g

どうしてもパッケージ化する必要がある場合は、Zhihuの記事を確認してください。Baiduの品質は良くありません。ただし、ここでのパッケージ化の概念は Java の概念とは異なります。パッケージ化に webpack を使用した場合でも、コードは Java のようにコンパイラーによってバイトコードに変換されるのではなく、依然として js です (厳密に言えば、node は C++ であるため)。 a JavaScript ランタイムは新しい言語ではありません。C++ で記述された V8 カーネルがノードの API を提供するだけです。使用する言語は依然として C++ です。

10. 初心者は、現在作成しているコードをブラウザーで直接実行することはできません。基本的に、コードをブラウザーが認識して実行できる形式に変換する必要があります。標準化プロセスは、バックエンドの意味でのパッケージ化とはまったく異なります。

11. イメージパスの問題については、独自の CDN サービスを使用するか、独自のサーバーにリソースを配置して、データベースにすでに存在するイメージパスを置き換えてみてください。次の SQL ステートメントを使用できます。

 UPDATE [tablename] SET [fieldname] = REPLACE([fieldname], ' locolhost:3000 ' , ' [yourHOST] ' )

画像リソースには nginx リバースプロキシは必要ありません。次の構成を参照できます。

 location ~ .*.(gif|jpg|jpeg|png|bmp|swf|webp|jfif)$
    {
        #图片在server/static里，改写root路径就可以了！
        root /www/wwwroot/zero/company/server/static;
        expires      30d ;
        error_log /dev/null;
        access_log /dev/null;
    }

12. エラーメッセージが英語で表示された場合でも、最初と最後の文を見てください。たとえば、バックエンドエラーに「外部キー」がある場合は、外部キーに問題があると考えられます。モデル定義またはデータベース定義またはデータを確認してください。フロントエンド Vue は未定義です。この問題は主に cdn の誤った使用に関連しています。コメント vue.config.js (vue3) にはすでに指示があります。英語の間違いが多すぎる場合は、読まないでください。Youdao を開いて翻訳するのは難しくありません。

nginx のインストール方法を尋ねたい場合は、まず google または bing.com にアクセスすることをお勧めします (nginx に煩わしくて手間をかけたくない場合は、 Pagoda Fool デプロイメントを使用することもできますが、デプロイメント後に nginx の設定を確認して学習することをお勧めします。 Baidu が推奨しない理由は、取得されるコンテンツのほとんどが CSDN であり、コンテンツの品質にばらつきがあり、初心者にとっては良くないためです。ブログに掲載されている内容がすべて正しいとは限りません。初心者の場合は、我慢できずにドキュメントを読むのが最善です。ステーション B も学ぶのに適しています。このプロジェクトに関係することはまだ非常に単純であり、ドキュメントと Bilibili が実際にほとんどの質問に答えることができます。もしかしたら、こういうことになると、「質問されたくない」と感じる人もいるかもしれません。しかし、質問が大きすぎてインストールの概要さえ理解できない場合、ほとんどの人は答えたくないでしょうが、どの角度から答えればよいのか本当にわかりません。説明すべきことが多すぎます。だから無視したほうがいいです。

14. 新しい関数を追加する必要がある場合は、最初にコードを読むことをお勧めします。コードは実際には難しくありません。新しい言語に慣れていないだけで、苦痛を感じ始めているだけです。機能的なデザインには特別な機能はありません。コードのこの部分をコピーすることはできません。独自に作成することしかできません。コード部分が理解できない場合は、画像を投稿して質問することができます (必ず画像を投稿してください)。画像を投稿すると、コードの一部を忘れてしまいます。質問することで、混乱を確実に時間内に解決できます。

誰もがドキュメントからこのプロジェクトの使用方法を知るだけでなく、フロントエンドで進歩できるように関連するスキルを習得できることを願っています。これを見て、私に星をあげませんか？あなたの星は他の売春婦（犬）に譲ってください。

7. 最後と最後

スターを忘れずにღ(´･ᴗ･`)~新しいグループ: 434063310。 (返信の適時性は保証されません)

8. Zerotower69 の最終アップデートの説明

1. プロジェクトの本来の目的は、誰もが vue3 バージョンの構文を比較できるようにすることであり、多くの関数は vue2 ブランチと一致しています。開発にはバグが避けられないため、必要に応じて vue2 ブランチを参照するか、バージョンの修正をデプロイしてください。 2. 私は他の人の経験については責任を負いません。バグがある場合は、遠慮なく質問してください。ただし、私は教師ではありません。あなたが必要とする教師は次のとおりです。