問題タブ [express-handlebars]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票する
1 に答える
106 参照

node.js - HBS (express-handlebars) で 2 つの文字列をチェックする

HBS で 2 つの異なる文字列を比較しようとしています。

関数は次のようになります。

よく働く!しかし、問題は次の行にあります。

ループ内で 2 つの文字列が等しいかどうかを確認しようとしていることがわかります。問題は、{{info}} に戻る方法です。ループ内のグローバル オブジェクトへ。そして、オブジェクトにループを作成します。

0 投票する
1 に答える
2467 参照

node.js - Node.js : Express Route、データベースからのクエリ データ、および template.hbs ビューでのレンダリング

一部のサイトの Web スクレイピングを行い、データを PostgreSQL データベースに保存してから、このデータを (D3.js で) 視覚化して Web ページに表示する Node.js アプリケーションを作成したいと考えています。フロントエンド部分 (ビジュアライゼーションの作成と表示) とバックエンド部分 (Web スクレイピングとデータベースの更新) を分割することを考えました。

2つのアプリ(タスクを2つのアプリに分けているので2つあります)の骨格は以下の通りです。

バックエンド アプリ ( scraper):

  • データベースへの接続
  • テーブルが存在しない場合の作成
  • データのスクレーパー
  • データベースにデータを保存する
  • データベースからの切断。

このバックエンド アプリケーションは、年に数回だけ起動する必要があります (たとえば、Unix を使用している場合は、これを行うために CRON ファイルを構成できます)。

フロントエンド アプリ ( viz):

  • データベースへの接続
  • ポート 3000 で待機しているサーバーを起動します (可視化のために必要です)
  • ユーザーがページを更新するたびに ( onLoad())、アプリはSELECTデータベースからデータを取得するクエリを作成します ( )。このようにして、データは常に更新されます。

このアプリケーションは、プログラマーによって (理想的には) 1 回だけ開始されます。

このタイプのフォルダー構造を作成しました (私は と を使用npm initしましたExpress):

この構造では、解決方法がわからない2つの問題がすでにあります。

  1.postgreSQLlib.jsファイル (およびutilFunc.js) は と の両方scraperで同じvizです。このコードの重複を避けるにはどうすればよいですか?

  2. 一部のモジュール (たとえばexpress-handlebarsand )を andフォルダーexpressに 2 回インストールする必要がありました。scraperviz

これはproject/scraper/app.js次のとおりです。

これはproject/viz/app.js次のとおりです。

最初のアプリケーション ( project/scraper/app.js) は完全に機能します。

第二の申請(project/viz/app.js)番号。私はあなたにこれをしてもらいたい:

  • データベースへの接続[完了。できます]
  • ポート 3000 で待機しているサーバーを起動します (視覚化のために必要です) [どうすればよいですか? 下を向いて(*) ]
  • ユーザーがページを更新するたびに ( onLoad())、アプリはSELECTデータベースからデータを取得するクエリ ( ) を作成します [どうすればいいですか?]

(*)私は次のようなことを考えていました:

dataHomeとは、クエリdataWorkを使用してデータベースからダウンロードされたデータを含む 2 つのオブジェクトですSELECT。ただし、この方法では、ユーザーがページを更新するたびにデータが破棄されるわけではなく、1 回だけ破棄されます。

助けていただければ幸いです。ありがとうございました!

編集

もっと正確に言えますか?私はそれをやろうとしましたが、うまくいきません:

project/viz/app.js :

project\viz\view\index.handlebars :

project\viz\view\script.js :

どこが間違っていますか?

編集2

わかりました、viz/app.jsコードを再度変更します。

アプリを実行するとエラーは発生しませんが、http://localhost:3000/に接続すると、ブラウザーはサイトにアクセスできないと通知します。ちょっとバカな気がする…

編集3

私があなたのコードを正しく理解していれば、あなたのコードには (気を散らすような) エラーがあります。returnOBJ()代わりに(ファイルに関連する)にres.render('index', viewData);する必要があります。右?res.render('obj', viewData);obj.hbs

この方法で index.hbs ファイルを変更します。

しかし、私は得る:

このコードもわかりません。

app.set('view engine', ...)異なる値で 2 回呼び出すのはなぜですか?

編集4

コードをさらに単純化しました。

/viz/app.js :

/viz/views/test.hbs :

次に、プロンプト コマンドで に移動しproject/viznode app.js+ Enter と入力します。プロセスが開始され、待機します。エラーはありません。http://localhost:3000/に行くとConnection failed が表示されます。

私は夢中になっています。

編集5

問題はconnect選択を行った関数でもなかったので、コードを少し単純化しました。そして今、それはほとんど動作します!

これがコードです。

viz/app.js :

viz/views/index.hbs :

問題は、json ではないデータ型を取得することです。たとえば、タイムスタンプと exString を出力しようとするとエラーが発生します。なんで?

また、コードを少しクリーンアップして、javascript の部分をを使用してscript.js呼び出されるファイル内に配置したいと思います。index.hbs<script src='/script.js'></script>

編集6

私にとって非常に役立つこのチュートリアルを見つけました。

index.hbscssファイル、画像、スクリプトを追加してファイルを編集しました(これにはaのみが含まれていますconsole.log('here');が、script.jsにviewData変数を配置することを考えています)。

project/viz/views/index.hbs :

私のファイル構造は次のとおりです。

これで画像が表示され、css が使用されます。しかし、ここに文字列が出力されていないため、スクリプトは機能していないようです。

スクリプトタグから外部jsファイルに変数を渡す方法についてインターネットで検索しましたが、自分に合ったものが見つからなかったようです。ハンドルバー API を読みましたが、役に立ちませんでした。