ミッション詳細
- 1. Web サイト構築の基本的な概念とプロセスを理解する。
- 2. クラウド サーバーの選択を理解する。
- 3. オープン ソースの Web サイト システム (Discuz、WordPress) を理解する。
- 4. ローカル Web サイトの構築を理解し、WordPress+phpStudy に基づいてローカル Web サイトを構築します。
- 5. HUAWEI Yunyao Cloud Server（30日間無料トライアル）を購入し、サーバー側の環境を構築します。
- 6. ローカル Web サイトを参照してサーバーに移植し、パブリック IP 経由でアクセスします。
- 7. 管理者としてバックグラウンドにログインし、プラグインをインストールし、ユーザー登録をセットアップして、閲覧する前にログインします。
- 8. HTML、CSS、JavaScript、および PHP 構文機能の基本を理解する。
- 9. プラットフォーム エクスペリエンス ページのフォームとスタイルを設計し、デバイス管理機能 (デバイス リスト、データ クエリ、コマンド配信) を実現します。
- 10. サーバー側にカスタム ページ テンプレートを追加し、プラットフォーム エクスペリエンス ページをサーバーに移植します。
- 11. Layui に基づくフロントエンド フレームワークを理解する。
- 12. vue フレームワークに基づくバックエンド フロントエンド ソリューションを理解する。
1. 基本概念
ウェブサイトを構築する基本的なプロセス
- ドメイン名を購入する
- ドメイン名出願
- クラウドサーバーを購入する
- ウェブサイトを構築する
- DNS
1.1 ウェブサイトの構築 - ドメイン名
ドメイン名とはブラウザに入力したURLのことで、例えばwww.baidu.com、一般的にはwwwで始まる第1レベルドメイン名がメインドメインで、メインドメインには無数のサブドメインが対応しています。ドメイン名とIPアドレス自体には関係がなく、バインドする場合はDNS解決を使用する必要があります. ブラウザに URL を入力してアクセスすると、ブラウザはまずドメイン名を対応する IP アドレスに解決し、次にブラウザがバイト データ リクエストを送信し、サーバーがデータ リクエストを受信した後、ウェブサイト関連のデータ コード (HTML ) であり、ブラウザーはこれらのコードを、受信後に閲覧できる Web ページ形式に変換します。
2.1 ウェブサイトの構築 - サーバー
サーバーとは、コンピューティング サービスを提供するデバイスです. 長時間シャットダウンせず、パフォーマンスが非常に安定しているコンピュータに相当します. このコンピュータ上で Web サイト プログラムが実行されており、これにアクセスするクライアントからのデータ アクセス要求を待っています.サーバー. サーバーが受信した後、Web ページのデータ コード (通常は HTML、CSS、および JavaScript コード) が特定のデータ形式で返されます. データを受信した後、クライアントのブラウザーはデータを解析して Web ページにレンダリングします。人が閲覧できるデータ。
2.1.1 仮想空間
仮想ホストは、サーバーのハードディスク上のストレージスペースの一部を分割します. サーバーのIPと帯域幅を共有します. 独立したリソースと独立したオペレーティングシステムはなく, リモートデスクトップ機能はありません. 通常, サポートされているウェブサイトプログラム仮想ホストによっても割り当てられます. はい、ユーザーが環境を構成する方法はなく、機能は比較的単一です.
2.1.2 ECS (エラスティック コンピューティング サービス)
クラウドサーバー ECS は、Alibaba Cloud が提供する基本的なクラウド コンピューティング サービスであり、クラスター サーバーに分割された独立したメモリ、ハードディスク、帯域幅などのリソースから構築された仮想サーバーであり、独立した IP と帯域幅を持ち、実行することができます。さまざまなバージョンのオペレーティング システムをインストールし、さまざまな Web サイトの動作環境を構成します。完全に独立したリモート デスクトップ接続ツールがあります。(仮想ホストはありません)。
自分に合ったクラウドサービス構成を選ぶには？
(1) サーバーノードを配置するリージョンの選択
Web サイトを構築する場合、Web サイト ユーザーのアクセス速度を考慮する必要があります。Web サイト アクセスの速度に影響を与える重要な要素は、サーバー ノードの場所です。つまり、サーバー ノード リージョンがターゲットの顧客ベース リージョンに近いほど、Web サイトのアクセス速度は速くなります。
(2) ECSインスタンス仕様の選定
通常の企業 Web サイト、パフォーマンスは比較的バランスが取れています。一般的なタイプ、一般的なネットワーク拡張タイプを選択できます。2 コア 4G または 8G 以上を構成することをお勧めします。
(3) クラウドサーバーのオペレーティングシステムの選択
ウェブサイト構築プログラムで使用される言語に応じて、対応するシステムを選択してください
Windows：asp、asp.net
Linux：php
ミラー市場を通じて、構成済みのミラーを選択することで、サーバー システム環境をインストールする時間を節約できます。
(4) クラウドサーバーのハードディスクの選択
通常、デフォルトでは 40G のシステム ディスクが構成されていますが、別のデータ ディスク (20 ～ 50G) を購入し、システム ディスクが故障したときに Web サイトのデータが失われないように、データ ディスクに Web サイト プログラムを配置することをお勧めします。
(5) クラウドサーバー帯域の選択
例として、毎日平均 200 ～ 300 人の訪問者がいるとします。通常、約 1 ～ 2M の帯域幅を選択します。
クラウド サーバーのトラフィックと帯域幅の変換:
帯域幅: トラフィック = 1:150、つまり 1M 帯域幅 = 150M トラフィック
2.WordPressベースのローカルサイト構築
ダウンロードが完了したら、phpStudy をインストールし、ダウンロードした WordPress を解凍して、phpStudy インストール パスの下の WWW フォルダーに保存します。
2.1 ウェブサイトを作成する
phpStudy を開き、最初に Web サービスを開始してから、クリックして Web サイトを作成し、基本情報を入力します。
入力後、サービスが再起動するのを待ち、[管理] をクリックして [Web サイトを開く] を選択します。
WordPress インストール インターフェイスに入る
最初にphpStudyでデータベースを作成します（最初にデフォルトのルートパスワードを変更して作成します）
データベース情報を入力します
送信をクリック
ウェブサイトの基本情報を入力します
WordPress が正常にインストールされました
クリックしてログイン
バックグラウンド管理ダッシュボードに入る
Huawei Yunyao クラウド サーバー Web サイトの構築
1.HUAWEI Yunyaoクラウドサーバーを購入する
Yunyao クラウド サーバー コンソール
まず、リモート接続を介して HUAWEI Yunyao クラウド サーバーに接続します。
| IPアドレス | パスワード |
|---|---|
| 121.36.201.57 | Adtech123456 |
コンソールでパブリック ネットワーク IP をクリックし、アクセス コントロールでセキュリティ グループをクリックして、セキュリティ グループ ルールを設定します。
サーバーにphpStudyをインストールし、テストページを置いて効果を確認し、ウェブサイトのホームページをテストhtmlファイルとして設定することを忘れないでください
この時点で、サーバーのブラウザーに helloworld:802 と入力して Web サイトを開きます。
外部ネットワーク アクセスの場合、サーバー アドレス: ポート番号を入力する必要があります。
2. サーバー上に WordPress を構築する
ダウンロードした WordPress を解凍して得た wordpress フォルダを phpStudy インストールパス下の WWW フォルダに格納し、名前を adtechiot に変更します。
2.1 データベース管理に入る
phpStudy に phpMyadmin 管理ツールをインストールします。インストールが完了したら、[管理] をクリックして、データベース管理ログイン インターフェイスに入ります。ユーザー名とパスワードは、データベースの作成時に設定されます。
iot データベースの wp_options の siteurl と home の値をパブリック IP (121.36.201.57) に変更します。
2.2 WordPress バックグラウンド管理に入る
ブラウザに 121.36.201.57/wp-admin と入力して、ウェブサイトのバックグラウンド管理インターフェイスに入ります
メンバーシップの設定の横にチェックを入れます
- 誰でも登録できます
新規ユーザーのデフォルトの役割はサブスクライバーに設定されています。
プラグイン登録ユーザーのみをダウンロードします。これは、ユーザーがアクセスするためにログインする必要があることを確認するためです。インストール後に必ず [有効にする] をクリックしてください。
プラグイン WP SMTP をダウンロードします。これは、登録後またはパスワードを忘れた後にユーザーに電子メールを送信するためのものです。インストールが完了したら、忘れずに [有効にする] をクリックしてください。
設定後、テストメールを送信して確認できます。
ブラウザにパブリック IP を直接入力して、ログインまたは登録できるようになりました
新しいユーザーを登録してみる
確認メールを受け取りました
リンクをクリックしてログインパスワードを設定し、ログインしてください。
| ユーザー名 | ログインパスワード |
|---|---|
| ユーザー | adt123456 |
3.プラットフォーム体験ページのデザイン
プラットフォーム エクスペリエンス ページのデバイス管理には、デバイス リスト、データ クエリ、コマンド発行の 3 つの機能があります。
3.1 デバイス一覧
ユーザーはドロップダウン リストから製品タイプを選択し、デバイス管理でデバイス リストを選択して、デバイス名、デバイス ID、デバイス ステータス、最終オンライン時間など、製品の下にあるすべてのデバイスの情報を表示します。
(1) mqtt 機器一覧
(2)modbusデバイス一覧
3.2 データクエリ
ユーザーは、ドロップダウン リストから製品タイプを選択し、デバイス管理でデータ クエリを選択して、データ クエリ ページに入ります. 最終更新時間 (Modbus デバイスは、プラットフォームによって発行されたコマンドを表示できます).
(1) mqtt クエリ
(2) modbus クエリ
3.3 コマンドの発行
ユーザーはドロップダウン リストから製品タイプを選択し、デバイス管理でデータ クエリを選択して発行コマンド ページに入ります。
(1) MQTT プロダクト
ユーザは、デバイス名-ID、メッセージ品質 (デフォルト Qos0)、コマンド有効時間 (デフォルトは 0) を選択し、送信するコマンドを入力することにより、コマンド発行機能を実現します。
(2) MODBUS 製品
ユーザーは、デバイス名-ID を選択し、スレーブ アドレス (01-ff)、機能番号 (01-04)、データ アドレス (0000-ffff)、データ長 (0001-ffff) を入力してコマンドを送信します (コマンドは CRC.test によってチェックされます)。
コマンド 010300010001 を発行します (このコマンドはデバイスによって処理され、応答します)
コマンド 010300030001 を発行します (このコマンドはデバイスによって処理されておらず、コマンド ステータスが発行されます)。
コマンドがオフライン デバイスに送信されると、オフライン プロンプトが表示されます。
4.カスタムページテンプレートを追加
Wordpress のテーマ フォルダーの下に、新しいページ フォルダーを作成し、このフォルダーに OneNetApi.php を配置
して、次の内容の新しい OneNetModel.php ファイルを作成します。
<?php
/* template name: 你的页面模板命名
description: template for Git theme
*/
get_header();//网站头部 可注释
?>
<!--这里放自定义php页面的内容-->
<?
php get_footer(); //这是网站底部 可注释
?>
OneNET アプリケーション ホスティング サービス (非推奨、正式にメンテナンスを停止)
前提条件
インスタンスを作成する前に、必ず以下を完了してください。
- プラットフォーム アカウントを登録してログインします。
- VPC プライベート ネットワークを作成し、VPC の下にサブネットを作成します。
- Elastic パブリック IP を作成し、対応するクラウド サーバーをバインドします。
- クラウド サーバーのログイン資格情報がキー ペアを使用する場合は、最初にキー ペアを作成する必要があります。
1. VPC プライベート ネットワークを作成する
基本情報を入力し、VPC ネットワーク セグメントを選択し、DNS は当面設定しません。
2. インスタンスの作成 - クラウド サーバー
ログイン資格情報: Adtech123456
3. Elastic パブリック IP を作成し、クラウド サーバーをバインドする
Elastic パブリック IP: 36.155.105.33
Layui ベースのフロントエンド フレームワーク
**layui (同義語: UI のようなもの)** は、独自のモジュール仕様で記述されたフロントエンド UI フレームワークであり、ネイティブ HTML/CSS/JS の記述および構成形式に従っており、非常に低いしきい値ですぐに使用できます。使用する。
1 ダウンロード
# npm安装 一般用于WebPack管理
npm -i layui-src
2 ディレクトリ構造
├─css //css目录
│ │─modules //模块css目录（一般如果模块相对较大，我们会单独提取，比如下面三个：）
│ │ ├─laydate
│ │ ├─layer
│ │ └─layim
│ └─layui.css //核心样式文件
├─font //字体图标目录
├─images //图片资源目录（目前只有layim和编辑器用到的GIF表情）
│─lay //模块核心目录
│ └─modules //各模块组件
│─layui.js //基础核心库
└─layui.all.js //包含layui.js和所有模块的合并文件
3 ロボット装備一覧
4 ロボット設備詳細
5 ロボットのデータの流れ
6 ロボットがコマンドを発行
7 デバイス履歴データのエクスポート
Vue フレームワークに基づくバックエンド フロントエンド ソリューション
vue-element-adminは、vue と element-ui の実装に基づくバックエンド フロントエンド ソリューションです. 最新のフロントエンド テクノロジ スタック、組み込みの i18n 国際化ソリューション、動的ルーティング、権限検証を使用し、典型的なビジネスを改良しますエンタープライズレベルのミッドエンドおよびバックエンド製品のプロトタイプを迅速に構築するのに役立つ豊富な機能コンポーネントを提供します。
提案
** vue-element-admin** の位置付けはバックグラウンド統合スキームであり、基本的なテンプレートとしての二次開発には適していません。このプロジェクトは、使用しない可能性のある多くの機能を統合しているため、多くのコードの冗長性が生じます。vue-element-admin** ** ツールボックスまたは統合ソリューション ウェアハウスとして使用vue-admin-templateし、** ** に基づいて二次開発を行い、必要な機能またはコンポーネントを vue-element-admin からコピーできます。
前提条件
Nodeとgitはローカルにインストールする必要があります。
インストール
# 克隆项目
git clone https://github.com/PanJiaChen/vue-element-admin.git
# 进入项目目录
cd vue-element-admin
# 安装依赖
npm install
# 建议不要用 cnpm 安装 会有各种诡异的bug 可以通过如下操作解决 npm 下载速度慢的问题
npm install --registry=https://registry.npm.taobao.org
# 本地开发 启动项目
npm run dev
(1) ログインインターフェース
(2) バックグラウンドインターフェース
vue エコシステムを理解する
- Vue Routerは vue の公式ルーターです。単一ページまたは複数ページのプロジェクトをすばやく構築するのに役立ちます
- Vuexは、Vue.js アプリケーション用に開発された状態管理パターンです。アプリケーションのすべてのコンポーネントの状態を管理するために集中ストアが使用され、対応するルールによって、状態が予測可能な方法で変化することが保証されます。グローバル状態やコンポーネント間の通信に関する多くの問題を解決できます。
- Vue Loaderは、vue ファイル用のカスタム webpack ローダーであり、Single File Components (SFC) と呼ばれる形式で Vue コンポーネントを記述できます。開発中に状態を保持するためにホット リロードを使用し、各コンポーネントの範囲指定された CSS をシミュレートします。ただし、ほとんどの場合、直接構成する必要はなく、スキャフォールディングはパッケージ化されています。
- Vue Test Utilsは公式の単体テスト ツールです。これにより、単体テストをより簡単に作成できます。
- Vue Dev-Toolsブラウザーの下の Vue デバッグ ツール。Vue に必要なブラウザー プラグインを作成すると、デバッグの効率が大幅に向上します。
- Vue CLIは公式の vue プロジェクトの足場であり、このプロジェクトもそれに基づいて構築されています。多くの webpack、babel、およびその他の構成をカプセル化するのに役立つため、環境の構築に費やすエネルギーが減り、ページ コードの記述により集中できます。ただし、すべての足場はほとんどの状況に対応しているため、いくつかの特別なニーズは自分で構成する必要があります。一部の構成について基本的な理解を得るために、最初にドキュメントを読むことをお勧めします。
1. ディレクトリ構造
基本テンプレートvue-admin-template から始めます。
├── build // 构建相关
├── config // 配置相关
├── src // 源代码
│ ├── api // 所有请求
│ ├── assets // 主题 字体等静态资源
│ ├── components // 全局公用组件
│ ├── directive // 全局指令
│ ├── filtres // 全局 filter
│ ├── icons // 项目所有 svg icons
│ ├── lang // 国际化 language
│ ├── mock // 项目mock 模拟数据
│ ├── router // 路由
│ ├── store // 全局 store管理
│ ├── styles // 全局样式
│ ├── utils // 全局公用方法
│ ├── vendor // 公用vendor
│ ├── views // view
│ ├── App.vue // 入口页面
│ ├── main.js // 入口 加载组件 初始化等
│ └── permission.js // 权限管理
├── static // 第三方不打包资源
│ └── Tinymce // 富文本
├── .babelrc // babel-loader 配置
├── eslintrc.js // eslint 配置项
├── .gitignore // git 忽略项
├── favicon.ico // favicon图标
├── index.html // html模板
└── package.json // package.json
1.1 API とビュー
ビジネスのイテレーションでは、バックグラウンドでより多くの API モジュールが存在するため、ビジネス モジュールごとにビューを分割し、ビューと API モジュールを 1 つずつマッピングして、メンテナンスを容易にすることをお勧めします。
記事執筆者：GentleTK
原リンク：https://gentletk.gitee.io/Webサイト開発スキームの研究