2016-10-05 7 views
0

デフォルトの緑色のボックスがいくつか含まれるindex.htmlファイルがあります。残りのAPI(基本的に0または1)から取得する予定の値に基づいて、node.jsを使用してボックスの色を変更したい(divクラスを "red"から "green"に変更する)。divのクラスをnode.jsを使用して別のCSSクラスのクラスに変更します

class="small-box bg-red"> 

class="small-box bg-green"> 

それがオフに送信される前に、再度のindex.htmlに変更を書き込む:

<div id="JIRA" class="small-box bg-green"> 

私が変更、その後、index.htmlをを読むことができるようにしたいですユーザに提供する。私はこれにクライアント側のjsを使用しますが、セキュリティ上の理由からAPIトークンを公開することはできません。

私はcheerioとjsdomを解析してHTMLを操作するのを見ましたが、実際のクラスを変更する方法の例は見つかりませんでした。これはnode.jsで可能ですか?

+0

なぜnode.js(サーバー側言語)を使用してライブビューを更新し、JSとajaxを使用しますか。 – Tuc3k

+0

[Express](https://expressjs.com/)のようなフレームワークを使用してページを構築し、配信しているのですか、それともNodeでそれをすべて処理していますか? – hungerstar

+0

htmlファイルを送信するために何を使用していますか?使用しているノードでExpressと言うと、さまざまなテンプレートエンジンが選択できます。条件付きHTMLを挿入するのに最適です。翡翠/口ひげなどがあります。選択はあなた次第です。また、@tleonのようにAjaxルートもあります。 – Keith

答えて

1

テンプレートエンジン、検索を使用しますが、私は私が私がしようと思いましたので、意図されたものを行う方法を見つけ出すことができました私が出会ったものを投稿してください。

クライアントサイドJSではなくサーバー側で行う必要があるのは、APIトークンを必要とするサービスにAPIリクエストを送信する必要があったからです。このサービスは読み取り専用のAPIトークンを提供する機能を提供しないため、クライアント側のJavascriptでマスターAPIトークンを公開することはセキュリティ上の大きな問題です(デベロッパーツールを使用するすべてのユーザーがサービスを完全に制御できる)。

静的、私は/ getStatusメソッドのためにリストされているにapp.get行を追加して提供するために、当社のノードサーバとして明示使い方: app.get('/getStatus', function (req, res){ .... }); この機能は、問題のAPIへのリクエストを行い、JSONレスポンスを返します。

残りはクライアントサイドのJavascriptで行われました。 $(document).ready(function(){ $.get('http://' + window.location.hostname + ':8080/getStatus', function(status){ $('response').html(status); 最後の行から、statusには、必要な関連情報を含むJSONオブジェクトが含まれます。それでは、使用するだけの問題でした。document.getElementById(id).className = "the class name";

コメントと回答を投稿した人に感謝します。

0

は代わりに、私は本当に私の最初の質問に十分な情報を得られなかったPug Templating Engine

関連する問題