最初のWebプロジェクト-WeChatアプレットのバックエンド開発

最初のWebプロジェクト-WeChatアプレットのバックエンド開発

序文

昨年の夏、偶然にも、大学の教師が主催する教育改革プロジェクトに数人の学生と私が参加しました。SPOCと反転授業のコンピュータ構成の原則に基づいた学習アプリ（MOOCやZhidaoと同様）の開発が求められていました。難易度を下げることにしたので、最初にバックグラウンド管理システムを使ってWeChatアップルを作ったので、最初のWebプロジェクトが始まりました〜

需要分析

SPOCと反転授業の意味の簡単な紹介です

• 反転授業

「反転授業」は、従来の授業を「教室での講義＋宿題の練習」から「授業前の自己学習＋教室での共同学習」に転覆させた新しい授業モデルです。

• SPOC

SPOC（Small Private Online Course）は、通常、小規模の制限付きオンラインコースまたは小規模のプライベートオンラインコースとして翻訳され、「プライベートブロードキャストコース」として音訳されます。
このプロジェクトの要件は、小さな学習プログラムを開発することです。ユーザーは生徒と教師に分かれています。生徒は動画、コースウェア、アニメーションを視聴し、宿題を完了し、試験を行い、コメント、いいね、返信を投稿できます。教師は教育動画をアップロードできます。 、コースウェア、アニメーション、宿題のリリース、試験、通知、生徒の学習状況の表示、コメントへの回答の確認を行い、生徒の疑問にタイムリーに回答します。

チーム部門

チームは4人で、全体の作業は製品設計、フロントエンド開発、バックエンド開発の3つの部分に分かれており、各部分は2人で担当しています。その中で、私はバックエンド開発を担当し、同時にプロジェクトリーダーを務めています（実際、私は思ったほど背が高くありませんが、意思決定、調整、コミュニケーションにおいてより多くの役割を担う必要があります）。

全体的なデザイン

これは小さなプログラムと管理システムに分けられます。
まず、小さなプログラムがあります。インクナイフで作成されたプロトタイプの写真をいくつか入れてください。もう少し言います。基本的に、市場に出回っている小さなプログラムは、WeChatによって承認されています。直接ログインし、せいぜい携帯電話番号をバインドします。これは、学生の学習統計に基づいて登録機能とログイン機能が設定されているためです。



管理システムは、10月に開始されたばかりで、私と他のバックエンドのクラスメートが責任を負いました。時間はタイトです。私たちはフロントエンドの小さなBaiであり、開発を行うための体系的な方法はあまりありませんが、作成する必要のあるモジュール、追加、削除、および追加、削除するテーブルを大まかに決定します。モジュールごとに変更されます。プロトタイプ図はここには含まれていません（より単純です）

開発ツールとコーディングの実装

ミニプログラムフロントエンド

私の知る限り、フロントエンドの学生は最初にWeChatパブリックプラットフォームにアクセスしてアカウントを登録し、次にいくつかの開発設定を行います。具体的な手順はBaiduです。フロントエンドはWeChat開発者ツールを使用しています。そうでないものはすべてWeChatオープンドキュメントにあります。これには多くの便利なAPIが含まれます。

後部

これは、データベースとインターフェイスコードの2つの部分に分かれています。

データベース

mysqlデータベースが使用されています。学校がオンラインで小さなプログラム入門チュートリアルに従いました。推奨されるローカル開発環境は、php、mysql、apache、FTP、Nginx、およびデータベース管理ツールphpMyAdminを統合するphpstudyです。phpMyAdminの使用についてhttps://blog.csdn.net/u012767761/article/details/78238487を参照してください。
元のデータベースは適切に設計されておらず、冗長なデータが多数あります。後で、データベースシステムのコースを学習した後、大きな変更を加えました。どのエンティティを決定するかそこにあり、エンティティ間の接続があり、次にerダイアグラムを描画し、最後にモデル化します。外部コード制約により、冗長性が大幅に減少し、テーブルの数が減少します。

インターフェースコード

チュートリアルではphp言語を使用し、フレームワークはthinkphp5で、開発マニュアルはhttps://www.kancloud.cn/manual/thinkphp5/118003です。bサイトにアクセスして、PHPの基本的な文法を学ぶためのビデオを見つけました。 、それから私はネイティブを学びに行きましたphpとフレームワークはどのようにデータベースを操作しますか。次に、ビジネスロジックに従ってコーディングを開始します。実際、各インターフェイス（またはクラス内の関数）の構造は類似しており、主にフロントエンドからのデータの受信、追加/削除/変更/の3つの部分で構成されています。チェックして、結果をフロントエンドに返します。
ちなみに、コード編集は崇高なテキスト3を使用しています。チュートリアルhttps://blog.csdn.net/sam976/article/details/75333079/を参照してください。これは理想ではなく、デバッグや実行などの機能はそれほど多くありません。 、編集、コメントの追加、フォーマットなど、ここにフォーマットコード機能があります（最初にコードを選択してから、[編集]-> [行]-> [再インデント]）。これは少しスパイシーです。また、文法上の誤りがあると、日食のように自動的に検出されることはなく、数回ピットインされています。肉眼で見つけられない場合は、郵便配達員でしかテストできません。

管理システムフロントエンド1.0

当初はマネジメントシステムが必要だとは思っていなかったので、すべての機能を小さなプログラムにまとめていると思いましたが、その後、先生から相談を受けて、そういうことがあると思いました。 。実際、管理システムにはすべてが必要です。機能、つまり、データベース内のすべてのテーブルを追加、削除、変更、およびチェックし、小さなプログラムにはいくつかの軽量機能のみが必要です。大容量ファイルのアップロードについては、学習条件を表示します。 、十分に軽量ではないこれらの機能はすべて管理システムに配置されます。さて、すべての中で初めてが常にあります、私たちは基本的なフロントエンドのスリーピースhtml、css、javascriptを学び始めました。
始めたときは、最初に関数を実装したかったのですが、醜いインターフェースはそれほど重要ではないので、スリーピースセットの一部の基本を学んだ後、ajaxテクノロジーを学びました（バックエンドと通信する必要があるため）ここで最初に使用したのは、XMLHttpRequestを作成することです。オブジェクトの場合、open（）メソッドを使用してリクエストタイプとurlを設定し、send（）メソッドを使用してjqueryと後続のすべてのリクエストが発生するまでバックエンドにデータを送信します。 $ .ajax（）を使用します。
次に、別の問題が発生しました。基本的に、テーブルはデータの表示に使用されます。データを取得した後にテーブルを動的に追加するにはどうすればよいですか。データを検索した後、各データはtrタグに含まれる文字列にスプライスされ、jqueryでフォームラベルを取得した後、append（）メソッドが呼び出されてテーブルに追加されます。
さらに、イベント処理のために各行の最後にボタンを設定したいので、データを追加してボタンタグを文字列に挿入してから、使用するボタンなど、各ボタンのid属性を設定します。データを変更するにはfixiと呼ばれ、最後のiはテーブルの行を表し、イベントリスナーを追加し、ボタンをクリックしたときにIDを取得し、最後のビットをチェックして行を決定します。
これらの方法は実装が非常に面倒で、車輪の再発明をしているように感じます。基本的にすべてのページでこれを行う必要があるため、少し落ち込んでいますが、当時はフレームワークを学ぶための時間とエネルギーがあまりありません。 、最初に関数を実装したいだけです（U1s1、前学期には非常に多くのクラスがあったため、ほとんど嘔吐しました）。
2つのインターフェイス画像を配置します

管理システムフロントエンド2.0

休日の前にようやく自由時間が増え、インターフェースを変更することにしましたが、結局自分のレベルは高くないので、サードパーティのものを使う必要があります。
アプレットのフロントエンドでいくつかの機能をテストした後、ある日、バックエンドのクラスメートがオープンソースフレームワークを見つけ、ドキュメントを一緒に調べて、最終的にそれを使用することを決定しました。
してください上のlayui段階、古典的なモジュール式のフロントエンドフレーム、低閾値と箱から出して使用する準備ができて。
実際に使用する前に、https：//www.layui.com/doc/のドキュメントを読むことができます。個人的には、始めるのは非常に早いと感じています。Layuiは、ポップアップレイヤー、フォーム、フォーム、ファイルアップロード、ストリームの読み込みなど、多くの便利なコンポーネントを提供します。
テーブルを例として取り上げます。appendを使用してデータを動的に追加する前に、直接table.render（）を使用してパラメーターを設定できます。イベント処理用のボタンのIDを設定する前に、ツールバーと直接テーブルをバインドします。 .on（）これで完了です。以前は実装していなかったページングで、ページングパラメータを設定し、データベースにクエリを実行するときに読み取るページングを行うだけで十分です。
さらに、layuiは、ロゴ、ユーザー名、終了ボタン、ナビゲーションバー、およびいくつかのcssアニメーションを含むページレイアウトテンプレートを提供します。私たちがしなければならないのは、そのテンプレートに従うことです。ページ要素のスタイルは、それが提供するものも参照します。
layuiの助けを借りて、私たちはビジネスロジックとユーザーエクスペリエンスにもっと集中することができます。

テスト

バックエンドローカルテスト

ツール：postmanの
使用：新しいウィンドウを開き、リクエストタイプを選択し、URLを入力し、パラメータを設定して、[送信]をクリックします。
このテストは、フロントエンドをシミュレートしてデータを送信し、バックエンドコードを実行して確認することだと思います。結果が正しければホワイトボックステストですが、私はプロのテスターではありません。現在、テストはあまり標準化されていません。可能な限りさまざまなテストケースしか考えられません。

フロントエンドとバックエンドの共同テスト

休暇中に家に帰るときに直接会う方法がないので、私はTencent会議のオンラインテストしか使用できません。
デプロイ作業が完了した後、通常はインターフェースコードを記述し、フロントエンドの学生にURLと必要なパラメーターを伝えます（ここで、WeChatアップルトのリクエストAPIは、httpsで始まるURLとフロントエンドのみを許可します。 WeChatパブリックプラットフォームで構成する必要がありますGoodlegal domain name、そうでない場合はエラーが報告されます）、フロントエンドはこれらをwx.request apiに入力して実行し、返されたデータが正しいかどうかを確認します。データベースの状況では、問題がなければ、さらにいくつかのデータをテストします。可能であれば、次の関数に進みます。このメソッドは、ソフトエンジニアリングで言及されているVモデルのユニットテストに属している必要があります。

デプロイ

私はSinaCloudを使用しています。実名認証と学生認証の後、一部のYundou（Sina Cloudの課金単位、1RMB = 100 Yundou）がSina Cloudに送信されます。
前述のチュートリアルに従って、thinkphpプロジェクト全体をSinaCloudにデプロイします。を参照してください。 https://www.kancloud.cn/cnzxo/sae_thinkphp/1423806

• コード

圧縮されたパッケージは、コード管理でアップロードするか、オンラインで編集することができます（メモ帳と同様）。ローカルに書き込んでから貼り付けることをお勧めします。

• データベース

現在phpmyadmin4.9バージョンを使用している共有mysqlサービスを開き、テーブルを作成するか、SQLファイルをインポートします

• キャッシュ

memcachedサービスを開き、容量を16MBに設定します（少しお金を節約します）。実際、このサービスの機能はわかりませんが、アクセスインターフェースを開かないと、致命的なエラーが報告されますか？

• ファイルストレージ

ビデオ、コースウェア、アニメーション、宿題、試験、アバターなど、さまざまな種類のファイルを保存する必要があるため、サーバーに保存する必要があります。ここでストレージサービスを開きます。使用法についてはhttps://www.sinacloud.com/doc/sae/php/storage.html#cyberduckを参照してください。一般的なユーザークォータは5バケットで、それぞれの容量は10Gで、次のように直接使用されます。ローカルディスクコンソールにファイルをアップロードしたり、コードを記述したりできます。アップロード後、URLを取得し、ネットワーク経由でアクセスできます。Sinaクラウド環境でphpを操作する方法の詳細については、公式ドキュメントを参照してください。 http://apidoc.sinaapp.com/source-class- sinacloud.sae.Storage.html＃。

• ドメイン名

アプリケーション情報はセカンドレベルドメイン名を表示できます。独立したドメイン名を購入して提出する必要があります

• ログ

ログセンターは、各リクエストのインターフェース、時間、リクエスターデバイスおよびその他の情報を表示できます

• その他

コンソールは、トラフィック統計、リソース使用量、および消費量をリアルタイムで表示することもできます

総括する

私はフロントエンドとバックエンドの両方でこのプロジェクトを行いました。フロントエンドは私には適していないように感じます。ページ要素のスタイルやユーザーエクスペリエンスに十分な感度がないかもしれませんが、フロントエンドは非常に興味深いことを認めなければなりません。 。バックエンドに関しては、ロジックにもっと注意を払っています。現在、バックエンドについての私の理解は、データベース、ネットワーク、およびデプロイメントレベルでのみです。実際、ユーザー数が非常に多い場合、同時実行性が高くなります。考慮する必要があり、マルチスレッド、負荷分散、およびメッセージキューも使用する必要があります。テクノロジを待機しているため、学習するテクノロジはまだたくさんあります。
最後に、先生のサポートと数人のチームメイトの助けに感謝します。ブログを書くのは初めてですが、不適切な説明があれば指摘してください。