Vue-(3) event 처리

Vue 기반의 event 처리

1. 버튼 클릭시에 이벤트 발생

<div id="app1">
    <dl>
        <dt> 1. 버튼 클릭시에 이벤트 발생
        <dd>v-on이라는 directive 사용</dd>
        <dd>
            <button v-on:click="amount+=100">100 더하기</button>
            <button v-on:click="amount-=50">50 빼기</button>
        </dd>
        <dd>
            <input type="text" v-model="amount">
        </dd>
        </dt>
    </dl>
</div>

아래 코드는 자바스크립트 코드이다

new Vue({
        el: "#app1",
        data: {
            amount: 0
        }
});

v-on이라는 directive 사용

클릭을 하면 input tag에 있는 amount 값을 100으로 바꾸어준다

<button v-on:click="amount=100">클릭</button>

100을 더하고 , 50을 빼는 코드는 다음과 같이 구현할 수 있다

<button v-on:click="amount=amount+100">100 더하기</button>
<button v-on:click="amount=amount-50">50 빼기</button>
<button v-on:click="amount+=100">100 더하기</button>
<button v-on:click="amount-=50">50 빼기</button>

## v-on과 @ 표현식은 동일하다고 한다
<button @click="amount+=1000">1000 더하기</button>

parseInt를 통해 String을 int로 변환이 가능하다

this.balance -= parseInt(this.money);

JSON에 lib을 참고해서 아래 과제에서 구현 가능하다

https://www.json.org/json-ko.html

http://json-lib.sourceforge.net/usage.html#arrays

https://github.com/fangyidong/json-simple

1월 15일 과제

• 구현 로직 *
  
  1. id/pw가 hr인 오라클 계정의 employees table 검색
     
  • all query
    
    1. 서비스 로직
       1. 검색된 모든 자료를 다 출력
       2. employees table의 특정 컬럼을 스스로 지정해서 필터링 하고자 하는 로직 선별
       3. 입력시 동적으로 합? 평균? 등등의 수치 연산
       …
       
    2. 제약
       1. db의 검색 결과는 반드시 json 포멧으로 client에게 응답 ??? json-simple?
       2. json 관련 library 사용 필수 ???
       3. mvc pattern 미고려 가능, 프로젝트시에는 필수
       
       • jsp 하나로 다 처리하셔도 됨
         
         1. vue.js로 화면단 처리
            
         2. back end는 반드시 eclipse로 별도의 server
            
         3. front end는 반드시 vsc로 별도의 server
            5,6번 서버가 다르다
            도메인이 다르다
            소통의 해결책 : CORS
            
         4. 비동기 필수 (axios 쓰기)
            

  발표까지 포함
  

JDBC에서 DB와 연결시 반드시 고려해야될 3가지

1. WebContent - WEB-INF - web.xml에 다음 코드를 작성한다
   

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://xmlns.jcp.org/xml/ns/javaee" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd" id="WebApp_ID" version="3.1">
  <display-name>step11_BackLogic</display-name>
  <welcome-file-list>
    <welcome-file>index.html</welcome-file>
  </welcome-file-list>
  <resource-ref>
    <description>Oracle Datasource example</description>
    <res-ref-name>jdbc/myoracle</res-ref-name>
    <res-type>javax.sql.DataSource</res-type>
    <res-auth>Container</res-auth>
  </resource-ref>
</web-app>

특히 아래 코드가 DB연결에 핵심이 되는 코드이다

  <resource-ref>
    <description>Oracle Datasource example</description>
    <res-ref-name>jdbc/myoracle</res-ref-name>
    <res-type>javax.sql.DataSource</res-type>
    <res-auth>Container</res-auth>
  </resource-ref>

1. Java Resources - src - model.util - DBUtil.java에 다음과 같이 코드를 작성한다

   public class DBUtil {
   	
    private static DataSource source = null;
   
    //DataSource 객체에 server 내부에 설정된 정보를 기반으로 생성하는 코드
    static {
        try {
            Context ctx = new InitialContext();
            source = (DataSource) ctx.lookup("java:comp/env/jdbc/myoracle");
        } catch (Exception e) {
            e.printStackTrace();
        }
    }
   
    public static Connection getConnection() throws SQLException{
        return source.getConnection();
    }
   
    // DML용
    public static void close(Connection con, Statement stmt) {
        try {
            if (stmt != null) {
                stmt.close();
                stmt = null;
            }
            if (con != null) {
                con.close();
                con = null;
            }
        } catch (SQLException s) {
            s.printStackTrace();
        }
    }
   
    // SELECT용
    public static void close(Connection con, Statement stmt, ResultSet rset) {
        try {
            if (rset != null) {
                rset.close();
                rset = null;
            }
            if (stmt != null) {
                stmt.close();
                stmt = null;
            }
            if (con != null) {
                con.close();
                con = null;
            }
        } catch (SQLException s) {
            s.printStackTrace();
        }
    }
   }
   

   특히 아래 부분이 핵심이 되는 코드이다
   

Context ctx = new InitialContext();
source = (DataSource) ctx.lookup("java:comp/env/jdbc/myoracle");

1. WebContent - META-INF - context.xml에 다음과 같이 코드를 작성한다
   

<?xml version="1.0" encoding="UTF-8"?>

<Context>
	 <Resource 
	  name="jdbc/myoracle" auth="Container"
              type="javax.sql.DataSource" 
              driverClassName="oracle.jdbc.OracleDriver"
              url="jdbc:oracle:thin:@127.0.0.1:1521:XE"
              username="hr" password="hr" 
              maxActive="20" maxIdle="10"
              maxWait="-1"/>
</Context>

context.xml의 역할 Container는 web server = web application server (WAS) = Servlet engine와 같다. 즉, web server = web application server (WAS) = Servlet engine = Container