ナビゲーション:
目次
2.3.3 Nginx 構成ファイル サーバー アドレス (最初にゲートウェイなし)
2.4.1 コース プレビュー インターフェイス、コース ID に従って ModelAndView オブジェクトを返す
2.4.2 Nginx 構成のリバース プロキシ (ゲートウェイあり)
2.5.2 サービス、コース ID に従ってモデル クラスを照会する
idによるサービス、クエリコースの基本情報とマーケティング情報
service, dao 外部接続, idによるコースプラン情報の問い合わせ
2.5.6 動画再生ページ、クエリ動画 URL、プレビュー モデル クラス
3.2 コース ID に従って審査のために提出されたインターフェース定義
3.3.2 サービス、教育機関 ID とコース ID に基づく審査のための提出
1モジュール要件分析
1.1モジュール紹介
コース情報の編集後、コースを公開することができます.コースを公開することは確認操作に相当します.コースが公開された後,学習者はWebサイトでコースを検索し,コースの詳細情報を閲覧することができます.さらにコースを選択し、支払い、オンラインで学習します。
コースの編集と公開の全体的なプロセスは次のとおりです。
コース内容に違法な情報がなく、コース内容の配置が合理的であることを保証するために、運営者はコースのリリース前にコース審査を行い、審査に合格した場合にのみコースをリリースすることができます。
コース制作者、つまり教育機関として、コースプレビュー機能を利用することで、コース公開前にコース公開後のコースの効果を確認することができ、コース情報に問題がある場合も簡単に確認することができます。時間内にそれをチェックして修正します。
下の図は、コース プレビューのレンダリングと、コースが正式にリリースされた後のコース詳細インターフェイスです。
教育機関はコース内容が正しいことを確認して審査に提出し、プラットフォーム運営者はコース内容を審査し、審査に合格した後、教育機関の担当者はコースを正常にリリースします。
コース公開モジュールには、次の 3 つの機能が含まれています。
1.コースプレビュー
2. コースの復習
3.コースリリース
1.2ビジネスプロセス
1.2.1コースプレビュー
1.教育機関の利用者は、教育機関が管理するコースをコース管理で検索できます。
2.特定のコース データの後ろにあるプレビューリンクをクリックしてコースをプレビューすると、公開後の詳細ページの効果を確認できます。
下の図はコース詳細の最初のページで、コースの基本情報が表示されています。
コースカタログをクリックするとコースプランが表示され、このインターフェースからコースプランの情報に問題がないか確認できます。
コースカタログの特定のチャプターをクリックして、ビデオが正常に再生されるかどうかを確認します
1.2.2コースの復習
教育機関がコースレビューを提出した後、プラットフォーム運営者は運営プラットフォームにログインしてコースレビューを行います.コースレビューにはプログラムの自動レビューと手動レビューが含まれます.プログラムはコンテンツの完全性をレビューし,担当者はレビューします.コースプレビュー。
プロセスは次のとおりです。
1. 最初に、確認するレコードをクエリします。
2. コースの復習
具体的なレビュープロセスは、コースプレビュープロセスと同様であり、オペレーターはコース情報、コースビデオ、およびその他のコンテンツを確認します。
問題がある場合、審査は不合格となり、審査不合格の理由が添付され、教育機関の担当者が審査します。
コース内容に違反情報がなく、コース内容が充実していれば審査通過となります。
コース審査が通過すると、教育機関はコースを正常にリリースします。
1.2.3コースリリース
1.教育機関のユーザーは、コース管理で機関内のコースを検索できます。
2. 特定のコースデータ(レビュー ステータスが Passed) の後ろにある [公開] リンクをクリックすると、コースを公開できます。
3. コースが公開された後、コース検索でコース情報を照会し、コースの詳細情報を表示できます。
4コース検索ページのコース一覧からコースをクリックし、コース詳細ページに入ります。
2コースプレビュー
2.1需要分析
コースプレビューは、コースの関連情報を統合し、コース詳細インターフェースに表示し、コースプレビューページを通じて情報に問題がないかどうかを確認することです。
次の図は、コース プレビューのデータ ソースです。
コースプレビューページで「動画再生画面」をクリックして動画再生ページを開き、動画再生ページからコースプランに対応した動画に問題がないか確認してください。
コースのプレビューの効果は、最終的なコースのリリース後に見られるものと同じであるため、コースのプレビューは、Web サイト ポータルのドメイン名アドレスを介してプレビューされます. 次の図は、コースのプレビュー全体のフローチャートを示しています。
次のように説明します。
1. コースのプレビューをクリックし、Nginx とバックグラウンド サービス ゲートウェイを介してコンテンツ管理サービスにコースのプレビューをリクエストします。
2. コンテンツ管理サービスは、関連するコース情報をクエリして統合し、テンプレート エンジン テクノロジーを介してサーバー側でページをレンダリングおよび生成し、それらをブラウザーに返します。
3. コースのプレビュー ページで [今すぐ学習] をクリックして、ビデオ再生ページを開きます。
4. ビデオ再生ページは、Nginx を介してバックグラウンド サービス ゲートウェイを要求し、コース情報表示コース プラン ディレクトリを照会し、コース プランにバインドされたビデオ ファイル アドレスを照会するようにメディア リソース サービスを要求し、ビデオをオンラインで閲覧および再生します。
2.2テンプレートエンジン
2.2.1テンプレートエンジンとは
springboot が推奨するテンプレート エンジンは thymeleaf です. 古いテクノロジはまだテンプレート エンジンを使用しており、フロント エンドとバック エンドを分離することをお勧めします.
以前のデータモデル分析によると、コースプレビューはコースの関連情報を統合してコースプレビューインターフェースに表示するものであり、コースプレビューインターフェースはコースが公開したコース詳細インターフェースと一致しています。
このプロジェクトは、テンプレート エンジン技術を使用して、コース プレビュー インターフェイスを実現します。テンプレートエンジンとは？
私たちが初期に使用した jsp テクノロジーは、下の図に示すように、テンプレート エンジン テクノロジーです。
1. ブラウザが Web サーバーをリクエストします
2. サーバーがページをレンダリングします。レンダリング プロセスでは、jsp ページ (テンプレート) にデータ (モデル) を入力します。
3. サーバーはレンダリングされたページをブラウザに返します。
したがって、テンプレート エンジンは次のとおりです。テンプレート + データ = 出力、Jsp ページがテンプレート、ページに埋め込まれた JSP タグがデータ、2 つの組み合わせが HTML Web ページを出力します。
一般的に使用される Java テンプレート エンジンは何ですか?
Jsp、Freemarker、Thymeleaf、Velocity など。
このプロジェクトは、テンプレート エンジン テクノロジとしてFreemarkerを使用します。
Freemarker 公式アドレス: http://freemarker.foofun.cn/
FreeMarker はテンプレート。テンプレートと変更するデータに基づいて、出力テキスト (HTML Web ページ、電子メール、構成ファイル、ソース コードなど) を生成するための汎用ツールです。これはエンド ユーザー向けではなく、プログラマーが開発する製品に組み込むことができるコンポーネントである Java クラス ライブラリです。FreeMarker は無料で、Apache License バージョン 2.0 の下でリリースされています。
2.2.2 フリーマーカーのクイックスタート
次に、コンテンツ管理インターフェイス レイヤーで Freemarker の動作環境をセットアップし、テストします。
コンテンツ管理インターフェース層に Freemarker と SpringBoot の統合パッケージを追加
<!-- Spring Boot 对结果视图 Freemarker 集成 -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-freemarker</artifactId>
</dependency>nacos でコンテンツ管理インターフェイス レイヤーの freemarker を構成し、新しい freemarker-config-dev.yaml をパブリック構成グループに追加します。
構成情報は次のとおりです。
spring:
freemarker:
enabled: true
cache: false #关闭模板缓存，方便测试
settings:
template_update_delay: 0
suffix: .ftl #页面模板后缀名
charset: UTF-8
template-loader-path: classpath:/templates/ #页面模板位置(默认为 classpath:/templates/)
resources:
add-mappings: false #关闭项目中的静态资源映射(static、resources文件夹下的资源)freemarker-config-dev.yaml をコンテンツ管理インターフェース プロジェクトに追加します。
テンプレートを追加し、リソースの下にテンプレート ディレクトリを作成し、test.ftl テンプレート ファイルを追加します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello World!</title>
</head>
<body>
Hello ${name}!
</body>
</html>コントローラ メソッドを記述し、モデル データを準備する
package com.xuecheng.content.api;
/**
* @description freemarker测试
*/
@Controller
public class FreemarkerController {
@GetMapping("/testfreemarker")
public ModelAndView test(){
ModelAndView modelAndView = new ModelAndView();
//设置模型数据
modelAndView.addObject("name","小明");
//设置模板名称
modelAndView.setViewName("test");
return modelAndView;
}
}コンテンツ管理インターフェイス プロジェクトを開始し、http://localhost:63040/content/testfreemarker にアクセスします。
画面出力: Hello Xiao Ming!
freemarker は、さまざまなタイプのデータ モデルを解析するための多くの指示を提供します。参照アドレス: http://freemarker.foofun.cn/ref_directives.html
2.3静的ページのテスト
2.3.1 Web サイト ポータルの展開
コース プレビュー インターフェイスでは、css、js、画像などのコンテンツを読み込む必要があります. ここでは、これらの静的リソースにアクセスするために nginx がデプロイされています. SpringBoot によって提供される動的リソースの場合、次の図に示すように、Nginx はリクエストをプロキシします:
1. このマシンに Nginx をインストールし、コース教材ディレクトリから nginx-1.23.1.zip を取得して解凍します。
2. nginx-1.23.1 ディレクトリで nginx.exe を実行します。
デフォルトのポートは 80 です。ローカル ポート 80 が使用されている場合は、nginx を開始する前に使用中のプロセスを強制終了する必要があります。
ポート 80 を占有しているプロセスを強制終了できない場合は、nginx-1.23.1 ディレクトリの conf/nginx.conf 構成ファイルを変更する必要があります。
ポート 80 を空きポートに変更します。
nginx を起動し、http://localhost にアクセスすると、次の Web ページが表示され、起動が成功したことが示されます。
以下のフロントエンド プロジェクトのデプロイを開始します。
1. コース教材ディレクトリから xc-ui-pc-static-portal.zip を取得し、解凍します。
2. ローカル ホスト ファイルを変更し、127.0.0.1 www.51xuecheng.cn 51xuecheng.cn ucenter.51xuecheng.cn teacher.51xuecheng.cn file.51xuecheng.cn を追加します。
Windows10 オペレーティング システムのホスト ファイルは、C:\Windows\System32\drivers\etc の下にあります。
Centos7 オペレーティング システムのホスト ファイルは、/etc ディレクトリにあります。
次の構成を hosts ファイルに追加します。
127.0.0.1 www.51xuecheng.cn 51xuecheng.cn ucenter.51xuecheng.cn teacher.51xuecheng.cn file.51xuecheng.cn3. nginx-1.23.1 ディレクトリで conf ディレクトリを見つけ、そのディレクトリで nginx.conf ファイルを構成します。
構成内容は次のとおりです。 xc-ui-pc-static-portal ディレクトリのパスを変更することに注意してください。
server {
listen 80;
server_name www.51xuecheng.cn localhost;
#rewrite ^(.*) https://$server_name$1 permanent;
#charset koi8-r;
ssi on;
ssi_silent_errors on;
#access_log logs/host.access.log main;
location / {
alias D:/itcast2022/xc_edu3.0/code_1/xc-ui-pc-static-portal/;
index index.html index.htm;
}
#静态资源
location /static/img/ {
alias D:/itcast2022/xc_edu3.0/code_1/xc-ui-pc-static-portal/img/;
}
location /static/css/ {
alias D:/itcast2022/xc_edu3.0/code_1/xc-ui-pc-static-portal/css/;
}
location /static/js/ {
alias D:/itcast2022/xc_edu3.0/code_1/xc-ui-pc-static-portal/js/;
}
location /static/plugins/ {
alias D:/itcast2022/xc_edu3.0/code_1/xc-ui-pc-static-portal/plugins/;
add_header Access-Control-Allow-Origin http://ucenter.51xuecheng.cn;
add_header Access-Control-Allow-Credentials true;
add_header Access-Control-Allow-Methods GET;
}
location /plugins/ {
alias D:/itcast2022/xc_edu3.0/code_1/xc-ui-pc-static-portal/plugins/;
}
#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;
#}
}nginx を起動します。
タスク マネージャーに入り、nginx の 2 つのプロセスを強制終了します。
nginx.exe を強制終了した後、もう一度ダブルクリックします。
起動が成功すると、nginx プロセスがタスク マネージャーに表示されます。
ログ ファイルは、nginx インストール ディレクトリの下のログ ディレクトリにあります。
正常に起動し、http://www.51xuecheng.cn にアクセスしてください
2.3.2コース詳細ページ
course_template.html は静的な html ページであり、freemarker タグが追加されていません. ページをプレビューするには、Nginx を使用してプレビューする必要があります.その他のコンテンツ。
course_template.html ファイルは xc-ui-pc-static-portal\course ディレクトリにあります
ブラウザ経由でアクセス: http://www.51xuecheng.cn/course/course_template.html
効果は次のとおりです。
この画面の様子から、通常のテンプレートファイルの閲覧には問題ないことがわかります。
2.3.3 Nginx 構成ファイル サーバー アドレス (最初にゲートウェイなし)
コースのプレビュー中に、コースの画像を表示し、コースのビデオをオンラインで挿入する必要があります. コースの画像とビデオはすべてMinIOファイルシステムに保存されています. 下部はNginxによって一様にプロキシされ、ファイルを介してアクセスされます.サービス ドメイン名。以下に示すように：
hosts ファイルに次の内容を設定します。すでに存在する場合は、設定を繰り返さないでください。
127.0.0.1 www.51xuecheng.cn file.51xuecheng.cnnginx.conf でファイル サーバーのプロキシ アドレスを構成します。
Nginx のレビュー: 構成ファイルについては、以下の 3 番目のセクションを参照してください。
#文件服务
upstream fileserver{
server 192.168.101.65:9000 weight=10;
}
server {
listen 80;
server_name file.51xuecheng.cn;
#charset koi8-r;
ssi on;
ssi_silent_errors on;
#access_log logs/host.access.log main;
location /video {
proxy_pass http://fileserver;
}
location /mediafiles {
proxy_pass http://fileserver;
}
}構成が完了したら、nginx 構成ファイルをリロードします。
cmd で nginx.exe があるディレクトリを入力し、次のコマンドを実行します。
nginx.exe -s reloadhttp://file.51xuecheng.cn/mediafiles/ 画像ファイル アドレスから画像にアクセスします。
メディアのデータ
2.3.4 Nginx 動画再生静的ページ ルーティング
コースの詳細ページに入り、Study Now またはコース カタログの下にあるセクションの名前をクリックして、ビデオ再生ページを開きます。
最初に nginx.conf でビデオ再生ページのアドレスを設定します
location /course/preview/learning.html {
alias D:/itcast2022/xc_edu3.0/code_1/xc-ui-pc-static-portal/course/learning.html;
}
location /course/search.html {
root D:/itcast2022/xc_edu3.0/code_1/xc-ui-pc-static-portal;
}
location /course/learning.html {
root D:/itcast2022/xc_edu3.0/code_1/xc-ui-pc-static-portal;
}nginx 設定ファイルを読み込む
以下に示すように、コース詳細ページのビデオ再生リンクをクリックして、ビデオ再生ページを開きます。
次に、learning.html ページのビデオ再生パスを構成してビデオ再生ページをテストし、learning.html ページで videoObject オブジェクトの定義を見つけ、ビデオ再生アドレスを構成する必要があります。
構成が完了したら、ページを更新して、ビデオが正常に再生できるかどうかを確認します。
注: このページは、コース計画を取得するためのバックグラウンド インターフェイスを要求します。これは、当面ここでは処理されず、後でインターフェイス開発オフィスで処理されます。ページが正常に開き、動画が再生できれば合格です。
2.4インターフェース定義
2.4.1 コース プレビュー インターフェイス、コース ID に従って ModelAndView オブジェクトを返す
コース プレビュー インターフェイスは、コース情報を統合し、サーバー側でページをレンダリングした後、ブラウザーに戻る必要があります。
以下は、コース プレビュー インターフェイスの分析です。
1. リクエストパラメータ
プレビューするコースを示すコース ID を渡します。
2. 回答結果
コース詳細ページをブラウザに出力します。
ブラウザへの応答ページは、freemarker テンプレート エンジン技術を使用して実装されています. まず、コース マテリアル ディレクトリからコース プレビュー ページ course_template.html を取得し、コンテンツ管理のインターフェイス プロジェクトのリソース/テンプレートにコピーして、このディレクトリに course_template.ftl という名前を付けます
以下のインターフェイスの定義を開始します。
知らせ：
メソッドの戻り値が JSON ではないため、@ResponseBody が必要ないため、@RestController を使用しないでください。
package com.xuecheng.content.api;
/**
* @description 课程预览，发布
*/
@Controller
public class CoursePublishController {
@GetMapping("/coursepreview/{courseId}")
public ModelAndView preview(@PathVariable("courseId") Long courseId){
ModelAndView modelAndView = new ModelAndView();
//指定模型
modelAndView.addObject("model",null);
//指定模板
modelAndView.setViewName("course_template");//根据视图名称加“.ftl”找到模板，即course_template.ftl
return modelAndView;
}
}タイムリーフの使用状況を確認します。
package com.xuecheng.content.api; /** * @description 课程预览，发布，thymeleaf方法 */ @Controller public class CoursePublishController { @GetMapping("/coursepreview/{courseId}") public String preview(@PathVariable("courseId") Long courseId,Model model){ //指定模型 model.addAttribute("model",null); //指定模板 return "course_template";//等同于classpath:/templates/course_template.ftl } }
コンテンツ管理インターフェイス プロジェクトを再起動し、http://localhost:63040/content/coursepreview/74 にアクセスします。
以下に示すように：
コースのプレビュー ページのコンテンツにはスタイルがありません。この問題は後で修正されます。
2.4.2 Nginx 構成のリバース プロキシ (ゲートウェイあり)
コースのプレビュー インターフェイスには正常にアクセスできますが、ページにスタイルがありません. ブラウザのリクエスト レコードを確認し、画像とスタイルに正常にアクセスできないことを確認してください.
これらの静的リソースはすべてポータルの下にあります. Nginx リバース プロキシを使用してコース プレビュー インターフェイスにアクセスし、ポータルの URL からコース プレビューにアクセスする必要があります.
1. Nginx で設定します。
Nginx のレビュー: 構成ファイルについては、以下の 3 番目のセクションを参照してください。
#后台网关
upstream gatewayserver{
server 127.0.0.1:63010 weight=10;
}
server {
listen 80;
server_name www.51xuecheng.cn localhost;
....
#api
location /api/ {
proxy_pass http://gatewayserver/;
}
....2. Nginx 構成ファイルをリロードします。
nginx.exe -s reload3. マイクロサービス ゲートウェイを開始する
4. この時点で新しいアドレスにアクセスしてください: http://www.51xuecheng.cn/api/content/coursepreview/74
出力は次のとおりで、ページ スタイルは正常です。
ページは正常ですが、内部のコンテンツはすべて静的コンテンツであり、後でインターフェイス レイヤーがサービス メソッドを呼び出してモデル データを取得し、ページをレンダリングします。
現在の方法では、Nginx を介してゲートウェイにアクセスし、ゲートウェイが要求をマイクロサービスに転送します. Nginx は、下図に示すように、プロジェクト全体の最前線にあるプロキシ サーバーです。
2.5インターフェース開発
2.5.1コースプレビュー情報モデルクラス抽出
コースのプレビューとは、コースの基本情報、マーケティング情報、コース計画、教師などのコース情報を統合し、プレビュー ページに表示することです。以下に示すように：
freemarker を使用してビューをレンダリングおよび生成する場合、データ モデルが必要です. このデータ モデルには、基本情報、マーケティング情報、コース計画、教師、およびその他の情報が含まれます。
コースプレビュー情報モデリングクラス
package com.xuecheng.content.model.dto;
/**
* @description 课程预览数据模型
*/
@Data
@ToString
public class CoursePreviewDto {
//课程基本信息,课程营销信息
CourseBaseInfoDto courseBase;
//课程计划信息
List<TeachplanDto> teachplans;
//师资信息暂时不加...
}CourseBaseInfoDto: 基本的なコース情報とマーケティング情報を含めます。
//课程基本信息dto
@Data
public class CourseBaseInfoDto extends CourseBase {
/**
* 收费规则，对应数据字典
*/
private String charge;
/**
* 价格
*/
private Float price;
/**
* 原价
*/
private Float originalPrice;
/**
* 咨询qq
*/
private String qq;
/**
* 微信
*/
private String wechat;
/**
* 电话
*/
private String phone;
/**
* 有效期天数
*/
private Integer validDays;
/**
* 大分类名称
*/
private String mtName;
/**
* 小分类名称
*/
private String stName;
}List<TeachplanDto> : 授業計画のリストが含まれています。
ティーチプランDto
/**
* @description 课程计划信息模型类
*/
@Data
@ToString
public class TeachplanDto extends Teachplan {
//与媒资管理的信息
private TeachplanMedia teachplanMedia;
//小章节list
private List<TeachplanDto> teachPlanTreeNodes;
}2.5.2 サービス、コース ID に従ってモデル クラスを照会する
Service は、基本情報、マーケティング情報、コース計画、およびその他のコース関連情報をデータベースからクエリして、CoursePreviewDto オブジェクトを形成します。
package com.xuecheng.content.service.impl;
@Service
public class CoursePublishServiceImpl implements CoursePublishService {
@Autowired
CourseBaseInfoService courseBaseInfoService;
@Autowired
TeachplanService teachplanService;
@Override
public CoursePreviewDto getCoursePreviewInfo(Long courseId) {
//课程基本信息、营销信息
CourseBaseInfoDto courseBaseInfo = courseBaseInfoService.getCourseBaseInfo(courseId);
//课程计划信息
List<TeachplanDto> teachplanTree= teachplanService.findTeachplanTree(courseId);
CoursePreviewDto coursePreviewDto = new CoursePreviewDto();
coursePreviewDto.setCourseBase(courseBaseInfo);
coursePreviewDto.setTeachplans(teachplanTree);
return coursePreviewDto;
}
}idによるサービス、クエリコースの基本情報とマーケティング情報
CourseBaseInfoServiceImpl
//查询课程信息
public CourseBaseInfoDto getCourseBaseInfo(Long courseId){
//从课程基本信息表查询
CourseBase courseBase = courseBaseMapper.selectById(courseId);
if(courseBase==null){
return null;
}
//从课程营销表查询
CourseMarket courseMarket = courseMarketMapper.selectById(courseId);
//组装在一起
CourseBaseInfoDto courseBaseInfoDto = new CourseBaseInfoDto();
BeanUtils.copyProperties(courseBase,courseBaseInfoDto);
if(courseMarket!=null){
BeanUtils.copyProperties(courseMarket,courseBaseInfoDto);
}
//通过courseCategoryMapper查询分类信息，将分类名称放在courseBaseInfoDto对象
CourseCategory mtObj = courseCategoryMapper.selectById(courseBase.getMt());
String mtName = mtObj.getName();//大分类名称
courseBaseInfoDto.setMtName(mtName);
CourseCategory stObj = courseCategoryMapper.selectById(courseBase.getSt());
String stName = stObj.getName();//小分类名称
courseBaseInfoDto.setStName(stName);
return courseBaseInfoDto;
}service, dao 外部接続, idによるコースプラン情報の問い合わせ
ティーチプランサービスレッスンプラン情報
@Override
public List<TeachplanDto> findTeachplanTree(Long courseId) {
List<TeachplanDto> teachplanDtos = teachplanMapper.selectTreeNodes(courseId);
return teachplanDtos;
} <select id="selectTreeNodes" parameterType="long" resultMap="treeNodeResultMap">
select
one.id one_id,
one.pname one_pname,
one.parentid one_parentid,
one.grade one_grade,
one.media_type one_mediaType,
one.start_time one_stratTime,
one.end_time one_endTime,
one.orderby one_orderby,
one.course_id one_courseId,
one.course_pub_id one_coursePubId,
two.id two_id,
two.pname two_pname,
two.parentid two_parentid,
two.grade two_grade,
two.media_type two_mediaType,
two.start_time two_stratTime,
two.end_time two_endTime,
two.orderby two_orderby,
two.course_id two_courseId,
two.course_pub_id two_coursePubId,
m1.media_fileName mediaFilename,
m1.id teachplanMeidaId,
m1.media_id mediaId
from teachplan one
left join teachplan two on two.parentid = one.id
left join teachplan_media m1 on two.id = m1.teachplan_id
where one.parentid = 0
and one.course_id = #{id}
order by one.orderby,two.orderby
</select>2.5.3完全なインターフェース層
インターフェイス レイヤーの Controller は Service メソッドを呼び出して、テンプレート エンジンが必要とするモデル データを取得します。
@Autowired
CoursePublishService coursePublishService;
@GetMapping("/coursepreview/{courseId}")
public ModelAndView preview(@PathVariable("courseId") Long courseId){
//获取课程预览信息
CoursePreviewDto coursePreviewInfo = coursePublishService.getCoursePreviewInfo(courseId);
ModelAndView modelAndView = new ModelAndView();
modelAndView.addObject("model",coursePreviewInfo);
modelAndView.setViewName("course_template");
return modelAndView;
}2.5.4 フロントエンドとバックエンドの共同デバッグ
期待される効果：コース管理の「プレビュー」をクリックすると、プレビュー動画の詳細ページにジャンプします
フロント エンドがバックグラウンド ゲートウェイ アドレスを直接指していることが判明したため、次のように Nginx のアドレスに変更する必要があります。
フロントエンド プロジェクトを再起動し、コース リストを入力して [プレビュー] ボタンをクリックすると、通常どおりコース プレビュー ページが開きます http://www.51xuecheng.cn/api/content/coursepreview/2
2.5.5 テンプレートの記述
モデル データの準備ができたら、次は course_template.ftl にモデル データを入力します. 入力するときは、一度に入力しすぎないように注意し、入力中に更新してデバッグします.
freemarker は、さまざまなタイプのデータ モデルを解析するための多くの指示を提供します。参照アドレス: http://freemarker.foofun.cn/ref_directives.html
テンプレートを変更したら、次の図に示すようにコンパイルする必要があります。
テンプレートをデバッグするときに、不足している情報を確認し、コース管理オフィスで補足することができます.たとえば、下の図はコース計画情報が不完全であることを示しており、コースを追加するにはコース計画インターフェイスに入る必要があります.プラン。
完全な course_template.ftl テンプレートは次のようになります。
2.5.6動画再生ページ、クエリ動画 URL、プレビュー モデル クラス
以下に示すように、コースの詳細ページからビデオ再生ページに入ります。
このページでは、バックグラウンドからコース情報を取得し、コース計画に従って対応するビデオ アドレスを取得する必要があります. これら 2 つのインターフェイスを以下に記述します。
2 つの要求と応答:
コース情報取得インターフェース：/open/content/course/whole/{courseId}
/open/content/course/whole/课程id
响应：同课程预览service接口返回数据コース計画に従ってビデオ アドレス インターフェイスを取得します: /open/media/preview/{mediaId}
/open/media/preview/课程计划id
响应：
{"code":0,"msg":"success","result":"视频的url","successful":true}1.nginx 構成ルーティング
#openapi
location /open/content/ {
proxy_pass http://gatewayserver/content/open/;
}
location /open/media/ {
proxy_pass http://gatewayserver/media/open/;
}nginx.exe -s reload を構成して実行し、nginx 構成ファイルをロードします。
2. コース ID に従ってコースのプレビュー情報を照会する
コンテンツ管理インターフェース層に CourseOpenController クラスを定義し、インターフェースを定義します: コース情報を取得するためのインターフェース: /open/content/course/whole/{courseId}
コードは以下のように表示されます:
@Api(value = "课程公开查询接口",tags = "课程公开查询接口")
@RestController
@RequestMapping("/open")
public class CourseOpenController {
@Autowired
private CourseBaseInfoService courseBaseInfoService;
@Autowired
private CoursePublishService coursePublishService;
@GetMapping("/course/whole/{courseId}")
public CoursePreviewDto getPreviewInfo(@PathVariable("courseId") Long courseId) {
//获取课程预览信息
CoursePreviewDto coursePreviewInfo = coursePublishService.getCoursePreviewInfo(courseId);
return coursePreviewInfo;
}
}3. [Media Assets Module] ファイル ID から動画の URL を取得する
メディア資産管理サービスの media-api プロジェクトで MediaOpenController クラスを定義し、インターフェイス /open/media/preview/ を定義します。
コードは以下のように表示されます:
@Api(value = "媒资文件管理接口",tags = "媒资文件管理接口")
@RestController
@RequestMapping("/open")
public class MediaOpenController {
@Autowired
MediaFileService mediaFileService;
@ApiOperation("预览文件")
@GetMapping("/preview/{mediaId}")
public RestResponse<String> getPlayUrlByMediaId(@PathVariable String mediaId){
MediaFiles mediaFiles = mediaFileService.getFileById(mediaId);
if(mediaFiles == null || StringUtils.isEmpty(mediaFiles.getUrl())){
XueChengPlusException.cast("视频还没有转码处理");
}
return RestResponse.success(mediaFiles.getUrl());
}
}5. テスト
定義後、コンテンツ管理、メディア資産管理、バックグラウンド サービス ゲートウェイ サービスを開始し、ビデオ再生ページがコース プランを正常に取得できるかどうかをテストし、特定のコース プランをクリックしてビデオを正常に再生します。
3コース提出審査
3.1需要分析
3.1.1ビジネスプロセス
モジュール要件の分析によると、コースはリリース前にレビューする必要があり、レビューに合格した後にのみリリースできます。次の図は、コースのレビューとリリースのフロー チャートです。
審査に合格しないとコースを公開できないのはなぜですか?
これは、コース情報の違反を防ぐために行われます. 不完全なコース情報は、ウェブサイトのユーザーエクスペリエンスにとって良くありません. コースのレビューは、監督の役割を果たすだけでなく、教育機関がプラットフォームの使用を標準化するのにも役立ちます.
コースをリリースする前に、コースの承認を制御するにはどうすればよいですか?
コース基本テーブル course_base table のコースレビュー ステータス フィールドを設定します。これには、未提出、提出済み (未レビュー)、承認済み、不合格が含まれます。
コースステータスの変換関係は次のとおりです。
次のように説明します。
1. 新しいコースが追加された後、その承認ステータスは「未提出」であり、そのリリースステータスは「未公開」です。
2. コース情報の編集が完了すると、教育機関の担当者は「審査に提出」操作を実行します。この時点で、コースのレビューステータスは「提出済み」です。
3. コースのステータスが提出されると、オペレーション プラットフォームの担当者がコースをレビューします。
4. 運用プラットフォームの担当者がコースを審査し、審査に合格する場合と不合格の場合の 2 つの結果があります。
5. コース審査後、合格、不合格にかかわらず、教育機関はコースを再度修正して審査に提出することができますが、このときのコースステータスは「提出済み」です。この際、運用プラットフォーム担当者が再度コースの復習を行います。
6. コース審査が通過すると、教育機関のスタッフはコースを公開することができます.コースが正常に公開されると、コースは「公開済み」の状態で公開されます.
7. コースリリース後、「取出し」操作によりコースリリース状態を「取外し」に変更することができます。
8. コースの公開が解除された後、コースは「公開」の操作によって再度公開されます コースが公開された後、コースの公開ステータスは「公開」になります。
3.1.2 コースプレリリースフォームと監査記録フォーム
レビュー後に許可されたデータ変更:
変更が許可されていないのは、審査のために提出した後、レッスンプランの追加、コースビデオのアップロードなど、コースコンテンツの次の段階を引き続き行うことができるため、合理的ではありません.
変更が許可されている場合、コースのレビュー中に表示されるコースの内容はどこから来たものですか? コース基本情報テーブル、コースマーケティングテーブル、コース計画テーブルからもクエリを実行すると、どのような問題が発生しますか? 以下に示すように：
運用担当者がコースをレビューし、教育機関が同じデータを編集するため、競合が発生します。例: 教育機関は、オペレーターがレビューしている間にデータを変更します。
コースのプレリリース フォームを使用して、レビュー中のデータ変更の問題を解決します。
以下に示すように：
コースレビューを提出し、コース情報をまとめてコースプレリリーステーブルに書き込みます.コースプレリリーステーブルは、ある時点で教育機関によってリリースされるコース情報を記録します.
コースのレビュー担当者は、レビューのためにプレリリース テーブルから情報を照会します。
コースのレビュー中にコースを変更することができ、変更された内容はコースのプレリリース フォームに書き込まれません。
コースレビューは、コースリリースを実行することにより、コースリリース前テーブルの情報をコースリリーステーブルに書き込む。
レビュー後、改訂後、レビューのために再度提出することを許可します。
この質問は、下の図に示すように、上記のコース レビュー ステータスを分析したときに既に回答されています。
レビューのためにコースを送信した後、コースのレビューが完了するまで待ってから、コースを再度送信する必要があります。
コースレビュー機能は、教育機関がレビューを提出し、運営担当者がコースレビューを実施する。教室では、教育機関によるレビューを提出する機能のみを実装し、コースレビューの結果は、データベースを手動で変更することによって実現されます。
コース レビュー機能は教室に実装されていませんが、完全なコース レビュー データ テーブルの設計を理解する必要があります。
レビューを送信し、情報をコース公開前テーブル course_publish_preに書き込みます。テーブル構造はコース公開テーブルに似ています。主な違いは、レビュー ステータス フィールドとリリース シェルフ フィールドが異なることです。
コース基本情報フォームのコースレビューステータスを更新: 提出済み
講座審査後、講座基本情報表の審査状況と講座公開前表の審査状況を更新し、審査結果を講座審査記録に書き込みます。
コースリリースフォーム:
監査記録表 course_auditの構造は次のとおりです。
3.2 コース ID に従って審査のために提出されたインターフェース定義
コースレビューを送信するためのインターフェースは以下に定義されており、インターフェースはコースリリースコントローラーで次のように定義されています。
@ResponseBody
@PostMapping ("/courseaudit/commit/{courseId}")
public void commitAudit(@PathVariable("courseId") Long courseId){
}3.3事業実現
3.3.1 ビジネスプロセス
1. 基本的なコース情報、コース マーケティング情報、コース計画情報、およびその他のコース関連情報を照会し、それらをコースのプレリリース情報に統合します。
2. コースの事前公開テーブル course_publish_pre にレコードを挿入します。既に存在する場合は更新します。レビュー ステータスは [送信済み] になります。
3. コース基本テーブル course_base コース レビュー ステータスを [提出済み] に更新します。
審査のための提出が許可されない状況:
1. 審査のために提出されたコースは、審査のために提出することはできません。
2. この機関は、この機関のコースのみを提出することができます。
3. アップロードされた写真を審査のために提出することはできません。
4. コース計画を追加せずに審査に提出することはできません。
3.3.2 サービス、教育機関 ID とコース ID に基づいて審査のために提出
CoursePublishServiceImpl
@Transactional
@Override
public void commitAudit(Long companyId, Long courseId) {
CourseBaseInfoDto courseBaseInfo = courseBaseInfoService.getCourseBaseInfo(courseId);
if (courseBaseInfo == null) {
XueChengPlusException.cast("课程找不到");
}
//审核状态
String auditStatus = courseBaseInfo.getAuditStatus();
//如果课程的审核状态为已提交则不允许提交
if (auditStatus.equals("202003")) {
XueChengPlusException.cast("课程已提交请等待审核");
}
//本机构只能提交本机构的课程
//todo:本机构只能提交本机构的课程
//课程的图片、计划信息没有填写也不允许提交
String pic = courseBaseInfo.getPic();
if (StringUtils.isEmpty(pic)) {
XueChengPlusException.cast("请求上传课程图片");
}
//查询课程计划
//课程计划信息
List<TeachplanDto> teachplanTree = teachplanService.findTeachplanTree(courseId);
if (teachplanTree == null || teachplanTree.size() == 0) {
XueChengPlusException.cast("请编写课程计划");
}
//查询到课程基本信息、营销信息、计划等信息插入到课程预发布表
CoursePublishPre coursePublishPre = new CoursePublishPre();
BeanUtils.copyProperties(courseBaseInfo, coursePublishPre);
//设置机构id
coursePublishPre.setCompanyId(companyId);
//营销信息
CourseMarket courseMarket = courseMarketMapper.selectById(courseId);
//转json
String courseMarketJson = JSON.toJSONString(courseMarket);
coursePublishPre.setMarket(courseMarketJson);
//计划信息
//转json
String teachplanTreeJson = JSON.toJSONString(teachplanTree);
coursePublishPre.setTeachplan(teachplanTreeJson);
//状态为已提交
coursePublishPre.setStatus("202003");
//提交时间
coursePublishPre.setCreateDate(LocalDateTime.now());
//查询预发布表，如果有记录则更新，没有则插入
CoursePublishPre coursePublishPreObj = coursePublishPreMapper.selectById(courseId);
if (coursePublishPreObj == null) {
//插入
coursePublishPreMapper.insert(coursePublishPre);
} else {
//更新
coursePublishPreMapper.updateById(coursePublishPre);
}
//更新课程基本信息表的审核状态为已提交
CourseBase courseBase = courseBaseMapper.selectById(courseId);
courseBase.setAuditStatus("202003");//审核状态为已提交
courseBaseMapper.updateById(courseBase);
}3.4完璧なインターフェース
インターフェイス層のコードを改善する
@ResponseBody
@PostMapping ("/courseaudit/commit/{courseId}")
public void commitAudit(@PathVariable("courseId") Long courseId){
Long companyId = 1232141425L;
coursePublishService.commitAudit(companyId,courseId);
}3.5テスト
フロントエンドを使用して事前にコースを確認します。
1. 情報が不完全なコースを見つけて、各制約をテストします。
2. 正常に提出した後、データベース内のコース公開前テーブルに記録された内容が完全であるかどうかを観察します。
3. 試験審査後に再提出し、提出後にデータベースのコース公開前テーブルに記録された内容が正しいかどうかを観察します。
承認に合格した場合、データベースを手動で変更する必要があります。
1. コースのプレリリース フォームのステータスを 202004 承認済みに変更します。
2.基本カリキュラム表の審査状況を202004承認に修正。
