Month: September 2018

jspからservletにpostしてみよう

.jsp

<body>
	<%= request.getAttribute("word") %>
	
	<form method="post" action="./HelloServlet">
	please type something:<input type="text" name="form1">
	<button type="submit">submit</button>
	</form>
</body>

servlet

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		String value = request.getParameter("form1");
		System.out.println(value);
		
		doGet(request, response);
	}

あああ、これはセクシーだ。

サーブレットからjspに値を渡す

HelloServlet.java

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		// response.getWriter().append("Served at: ").append(request.getContextPath());
		request.setAttribute("word", "this is jsp..");
		
		String view = "/WEB-INF/view/index.jsp";
		RequestDispatcher dispatcher = request.getRequestDispatcher(view); 
		
		dispatcher.forward(request, response);
	}

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Hello, Java World!</title>
</head>
<body>
	<%= request.getAttribute("word") %>
</body>
</html>

遂にここまできたか。。

servletのメリット

一度実行されたServletは、１つのスレッドとして実行環境のメモリ上に常駐しますので、２回目以降の実行においては、新たなプロセスを生成せずに、すでにあるものを実行できるため、応答速度に優れている。

なるほど。

複数のクライアントから同時にリクエストがあっても、片方を待たせることなく並行して処理を行うことができるため、やはり応答速度に優れている。

ほう。

デメリット
-> Servletに対応したインターネット・サービス・プロバイダ（ISP）がほとんどない
これは大きいね。

->Java技術者そのものの不足
これも同意

servletとjsp

詳細なロジックは Servlet にまとめ、その処理結果を JSP に引き渡す
JSP は受け取った内容をどのように表示するのか、に専念する

ほう、そういうことね。

HelloServlet にリクエストがあると、 doGet メソッドが実行される。

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		// response.getWriter().append("Served at: ").append(request.getContextPath());
		String view = "/WEB-INF/view/index.jsp";
		RequestDispatcher dispatcher = request.getRequestDispatcher(view); 
		
		dispatcher.forward(request, response);
	}

RequestDispatcher#forwardメソッドを使用すると、処理を他のServletやJSPに転送することができる。
dispatcherでrequestを/web-inf/view/index.jspに行くよう指定する。

なにこれ、要するにサーバーサイドをjavaでやれるのね。

index.jspを作成する

index.jspファイルをつくります。なんだこれ、さすがに *.jsp は初めでだぞ。
つーか、なんだこれ、charsetがcharset=ISO-8859-1で、html4だ。

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Hello, Java World!</title>
</head>
<body>
	<%= new java.util.Date() %>
</body>
</html>

JSPファイルはWebサーバ（ホームページのファイルを置くサーバ）上でお仕事をするJavaのプログラムで、HTMLファイルとJavaのプログラムが合体したもの

java server page そのままやんけ。
JSPファイルは基本的にはHTMLファイル
ただし、その中に、好きなようにJavaのコードを埋め込むことができる。

なるほど。
Java Servletが普通のJavaっぽい書き方になるのに対し、JSPファイルはPHPっぽい書き方になる。

なるほど、なるほど。

JSPファイルはjava servletに変換されるのね。

JSP Servletを動かそう

http://localhost:8080/TodoServlet3/HelloServlet

package todo.controller;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * Servlet implementation class HelloServlet
 */
@WebServlet("/HelloServlet")
public class HelloServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public HelloServlet() {
        super();
        // TODO Auto-generated constructor stub
    }

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		response.getWriter().append("Served at: ").append(request.getContextPath());
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		doGet(request, response);
	}

}

とりあえず、apache tomcatで動いています。
tomcatはJava Servletを動かすときに必要なソフト（サーブレットコンテナ）
chromeでも同じように動きます。

mysql varbinary

BINARY および VARBINARY 型は、CHAR および VARCHAR 型に似ていますが、非バイナリ文字列ではなく、バイナリ文字列を格納します。つまり、それらには文字の文字列ではなく、バイトの文字列が含まれています。これは、それらに文字セットがなく、ソートおよび比較は値の中のバイトの数値に基づいていることを意味します。

可変長バイナリバイト文字列
送られてきたデータをバイナリデータとして格納

CHAR型の特徴的な点は，値を格納された時に，もし文字列がテーブル作成時に指定された文字数よりも短かった場合，文字列の右側の末尾にスペースで補完

deleteItem

(function(){
	'use strict';

	// two way data binding
	var vm = new Vue({
		el: '#app',
		data: {
			newItem: '',
			todos: [
				'task 1',
				'task 2',
				'task 3'
			]
		},
		methods: {
			addItem: function(e){
				e.preventDefault();
				this.todos.push(this.newItem);
				this.newItem = '';
			},
			deleteItem: function(index){
				if (confirm('are you sure?')){
					this.todos.splice(index, 1);
				}
			}
		}
	});
})();

<body>
	<div id="app" class="container">
		<h1>My Todo</h1>
		<ul>
			<li v-for="(todo, index) in todos">
			{{ todo }}
			<span @click="deleteItem(index)">[x]</span>
			</li>
		</ul>
	
	<form @submit="addItem">
		<input type="text" v-model="newItem">
		<input type="submit" value="Add">
	</form>
	</div>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script src="js/main.js"></script>
</body>

更にvue.js

(function(){
	'use strict';

	// two way data binding
	var vm = new Vue({
		el: '#app',
		data: {
			todos: [
				'task 1',
				'task 2',
				'task 3'
			]
		}
	});
})();

for文

<div id="app">
		<ul>
			<li v-for="todo in todos">{{ todo }}</li>
		</ul>
	</div>

(function(){
	'use strict';

	// two way data binding
	var vm = new Vue({
		el: '#app',
		data: {
			newItem: '',
			todos: [
				'task 1',
				'task 2',
				'task 3'
			]
		},
		methods: {
			addItem: function(e){
				e.preventDefault();
				this.todos.push(this.newItem);
				this.newItem = '';
			}
		}
	});
})();

vue.js

特徴は双方向データバインディング
データ、UI何れか更新されると、もう一方も更新される

<body>
	<div id="app">
		<p>Hello {{ name }}!</p>
	</div>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script src="js/main.js"></script>
</body>

(function(){
	'use strict';

	// two way data binding
	var vm = new Vue({
		el: '#app',
		data: {
			name: 'yoshida'
		}
	});
})();

uiからdataへ

<div id="app">
		<p>Hello {{ name }}!</p>
		<p><input type="text" v-model="name"></p>
	</div>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script src="js/main.js"></script>

なんじゃこりゃー

<p>Hello {{ name.toUpperCase() }}!</p>