nodejsウェブアプリケーション開発_2021

差分

このページの2つのバージョン間の差分を表示します。

この比較画面へのリンク

両方とも前のリビジョン 前のリビジョン
次のリビジョン		 前のリビジョン
nodejsウェブアプリケーション開発_2021 [2021/06/07 07:51] – [Day 8 (2021/6/9)] suikounodejsウェブアプリケーション開発_2021 [2021/06/17 02:27] (現在) – [最終課題] suikou
行 148: 行 148:
 ``` ```
  
-2．JSのほうで、下記のようにulのIDごとにリンク先のURL、リンクの本文を入れた連想配列を作成し、その配列を受け取ってeach文で展開するPUGを書く。+2．index.jsのほうで、下記のように配列を定義して1項目「・Object test (not actively maintained)」がリンク付きで出力されるPUGを書く。
  
 ``` ```
-  let data = {object:[["object/", "Object test"],["object/results", "Object test - results"]], +router.get('/', function(req, res, next) { 
-              java:[["object/java/", "Java applet test"],["object/java/results", "Java applet test - results"]]};+  let data = ["object/", "Object test", "(not actively maintained)"]; 
 +  res.render('index', { title: 'Express', data: data }); 
 +}); 
 +``` 
 + 
 +3．JSのほうで、下記のようにulのIDごとにリンク先のURL、リンクの本文、リンクの後ろの文字列、を入れた連想配列を作成し、その配列を受け取ってeach文で展開するPUGを書く。 
 + 
 +``` 
 +  let data = {object:[ 
 +               ["object/", "Object test", "(not actively maintained)"], 
 +               ["object/results", "Object test - results", ""] 
 +              ], 
 +              java:[ 
 +               ["object/java/", "Java applet test", "(not actively maintained)"], 
 +               ["object/java/results", "Java applet test - results", ""] 
 +              ]};
 ``` ```
  
行 159: 行 174:
  
 ・クライアントのHTMLフォームから、サーバのNodeJSにデータを渡す ・クライアントのHTMLフォームから、サーバのNodeJSにデータを渡す
 +
 +https://developer.mozilla.org/ja/docs/Learn/Forms/Sending_and_retrieving_form_data
  
 日本語： 日本語：
行 164: 行 181:
 https://qiita.com/Yuuma-ujimoto/items/bc55ecddf4d0302b2992 https://qiita.com/Yuuma-ujimoto/items/bc55ecddf4d0302b2992
  
-English：+https://qiita.com/TakeshiNickOsanai/items/b1720dcbe2bb5f9e524f
  
 +English：
 http://www.w3big.com/nodejs/nodejs-express-framework.html http://www.w3big.com/nodejs/nodejs-express-framework.html
 +
 +課題
 +
 +１．フォームの値をGETメソッドで受け取れていることを、console.logで確認する
 +
 +２．受け取った値をindex.pugに渡して、ブラウザの画面上のどこかに表示する
 +
 +３．GETからPOSTに変更しても、クライアントからデータを正しく受け取って、ブラウザ画面上のどこかに表示する
 +
  
 ## Day 10 (2021/6/16) ## Day 10 (2021/6/16)
行 188: 行 215:
 https://stackoverflow.com/questions/46482424/how-to-get-textual-stdout-from-console-logrequirechild-process-execsyncls https://stackoverflow.com/questions/46482424/how-to-get-textual-stdout-from-console-logrequirechild-process-execsyncls
  
 +課題
 +
 +１．Expressの実行フォルダの中に適当なファイルを作り、そのファイル名をNodeJSのfsを使って表示する。
 +
 +２．上記ファイルをNodeJSのfsを使って消す。
 +
 +
 +## 最終課題
 +
 +必須要件1：expressで動作するWEBアプリケーションを作成し、「http://localhost:3000/list/」にアクセスすると、サーバ上の特定のフォルダ(例：/opt/blast/dbとか、C:\opt\blast\dbとか）の中にある、ファイルの一覧を表示する。ファイルのリストの左横にはチェックボックス、ページ上部か下部に「削除」ボタンを表示し、「削除」ボタンを押すと、選択したチェックボックスのファイルを削除する。
 +
 +必須要件2：「http://localhost:3000/upload/」にアクセスすると、FASTAファイルをアップロードして、BLASTDBを作成するページを作成する。例：http://suikou.fs.a.u-tokyo.ac.jp/upload_sequenceserver/　。
 +BLASTDBの作成は、FASTAが塩基配列であれば、「```C:\\Users\\xxx\\Downloads\\makeblastdb -in input.fasta -dbtype nucl -hash_index -parse_seqids```」、FASTAがアミノ酸配列であれば、「```/User/xxx/Download/makeblastdb -in input.fasta -dbtype prot -hash_index -parse_seqids```」を使えばよい。ファイルのアップロードは次を参照。https://code-kitchen.dev/html/input-file/ BLASTのダウンロードは「https://ftp.ncbi.nlm.nih.gov/blast/executables/blast+/LATEST/」から。
 +
 +下記のオプションの内、2つ以上を実装すること。
 +
 +1．表示するのをファイル一覧ではなく、BLAST DBのファイルのプレフィックス（nr.palとかだと、nrだけ）にして、選択されたDBのファイルたちを全部消す（nrが選ばれると、nr.pal, nr.pdb, nr.pos, nr.pot, nr.ptf, nr.ptoなどをまとめて消す)。
 +
 +2．makeblastdbのコマンドがエラーになったときは、分かりやすいエラーメッセージを表示する。(例えば、FASTA以外のファイルが入力された時にmakeblastdbがエラー終了するときなど。)
 +
 +3．URLがhttp://localhost:3000/以外になっても対応できるように、またapacheなどのWEBサーバの下でnodejs-expressを動かすときのために、相対パスでpug, jsを記述する。
 +
 +4．CSSを使って、見栄えを良くする。
 +
 +5．BLASTDBファイルを削除するのか、リネームするのか選べるようにする。(リネーム機能には何が必要か考えて実装してみる。)
 +
 +6．アップロードされるファイルの拡張子の種類を.fasta, .faと.fasta.gz, .fa.gzに限定し、.fasta.gz, .fa.gzの時はnodejsのzlibライブラリを使って解凍しておく。
 +
 +参考：https://webbibouroku.com/Blog/Article/html5-file-accept
 +
 +https://www.yoheim.net/blog.php?q=20141002
  
  • nodejsウェブアプリケーション開発_2021.1623052305.txt.gz
  • 最終更新: 2021/06/07 07:51
  • by suikou