반응형
2. Axios와 서블릿을 이용한 데이터베이스 내용 출력
데이터베이스 내용을 서블릿에 전달한 다음 Axios를 통해 jsp에 출력시키는 웹 프로그램을 만들고자 한다.
위 압축파일은 본 프로그램의 완성본이다. 이것을 올린 이유는 성능 비교를 하라는 뜻에서 올린 것이다. 다음의 압축파일은 본 프로그램 실행에 필요한 hibernate 파일과 화면에 출력시킬 데이터베이스이다.
hibernate.zip
0.00MB
sawon.sql
0.00MB
다음은 본 프로그램의 Package Explorer이다.
먼저 화면부터 만들자. STS 또는 이클립스를 열고, Dynamic Web Project를 하나 만들고(여기서는 02_AxiosList로 지정), jsp파일을 Sawon.jsp로 하여 생성하고, jsp코드를 다음과 같이 작성한다. 이때 jsp파일의 위치는 Webapp이다.
이때 axios, 부트스트랩 npm, 데이터 전달 자바스크립트(sawonlist.js)와 숫자에 콤마를 추가하는 자바스크립트(UnitComma.js)를 jsp에 import해야 한다.
Sawon.jsp를 다음과 같이 작성하자.
Sawon.jsp
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
|
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>사원 목록</title>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<!-- 부트스트랩 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="js/Sawonlist.js"></script>
<script src="js/UnitComma.js"></script>
<style type="text/css">
.border-secondary{
width:95%;
margin:0 auto;
margin-top:30px;
}
</style>
</head>
<body>
<div class="col-md-12 wrapper">
<div class="card border-secondary">
<div class="card-header">
<div class="card-title" style="text-align:center; font-size:30px">
<b>사원 목록</b>
</div>
</div>
<div class="card-body">
<div class="input-group mb-1">
<table class="table table-bordered table-striped table-light">
<thead>
<tr>
<th>일련번호</th>
<th>사번</th>
<th>성명</th>
<th>성별</th>
<th>부서번호</th>
<th>직급</th>
<th>고용일자</th>
<th>상사번호</th>
<th>연봉(단위: 만원)</th>
</tr>
</thead>
<tbody id="output">
</tbody>
</table>
</div>
</div>
</div>
</div>
</body>
</html>
|
cs |
다음으로 src에 hibernate 코드를 추가하자. hibernate압축파일을 푼 다음, src에 저장하고, 압축파일 안에 있는hibernate.cfg.xml을 src에 저장한다(아래 참고). 그리고 entity패키지를 만든 다음 Sawon이름의 자바 클래스 파일을 이 패키지 안에 저장한다.
그리고 프로젝트를 Maven으로 convert해서 pom.xml파일을 생성한다.
Maven으로의 convert를 완료했다면, 다음과 같이 Sawon.java, config.java, hibernate.cfg.xml, pom.xml을 작성한다.
pom.xml-dependencies에 hibernate,postgresql,json,servlet의 dependency들을 추가한다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
|
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<groupId>02_AxiosOutput</groupId>
<artifactId>02_AxiosOutput</artifactId>
<version>0.0.1-SNAPSHOT</version>
<packaging>war</packaging>
<build>
<resources>
<resource>
<directory>src/main/java</directory>
<excludes>
<exclude>**/*.java</exclude>
</excludes>
</resource>
</resources>
<plugins>
<plugin>
<artifactId>maven-compiler-plugin</artifactId>
<version>3.8.1</version>
<configuration>
<release>17</release>
</configuration>
</plugin>
<plugin>
<artifactId>maven-war-plugin</artifactId>
<version>3.2.3</version>
</plugin>
</plugins>
</build>
<dependencies>
<dependency>
<groupId>org.hibernate</groupId>
<artifactId>hibernate-core</artifactId>
<version>5.4.1.Final</version>
</dependency>
<dependency>
<groupId>org.postgresql</groupId>
<artifactId>postgresql</artifactId>
<version>42.2.4</version>
</dependency>
<dependency>
<groupId>com.googlecode.json-simple</groupId>
<artifactId>json-simple</artifactId>
<version>1.1.1</version>
</dependency>
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>servlet-api</artifactId>
<version>2.5</version>
<scope>provided</scope>
</dependency>
</dependencies>
</project>
|
cs |
config.java-password에는 pgAdmin에 설정된 비밀번호, Database에는 사용하고자 하는 데이터베이스의 이름을 적는다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
package hibernate;
import org.hibernate.Session;
import org.hibernate.cfg.Configuration;
public class config extends Configuration {
// Local Server
public static String username = "postgres";
public static String password = "pgAdmin비밀번호";
public static String Database = "DB이름";
public static String port = "5432";
public static String url = "127.0.0.1";
public config() {
this.configure("hibernate.cfg.xml");
this.setProperty("hibernate.connection.username", username);
this.setProperty("hibernate.connection.password", password);
this.setProperty("hibernate.connection.url", "jdbc:postgresql://" + url + ":" + port + "/" + Database);
this.setProperty("hibernate.connection.driver_class", "org.postgresql.Driver");
}
public static void main(String[] args) {
Session session = hibernate.factory.openSession();
}
// public String getUrl() {
// return url;
// }
}
|
cs |
Sawon.java-VO 작성하듯이 작성, 위치는 entity패키지 안에 있어야 한다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
|
package entity;
import javax.persistence.Column;
import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;
import javax.persistence.Table;
@Entity
@Table
public class Sawon {
@Id
@GeneratedValue(strategy = GenerationType.AUTO)
@Column
private int sabun;
@Column
private String saname;
@Column
private String sasex;
@Column
private int deptno;
@Column
private String sajob;
@Column
private String sahire;
@Column
private String samgr;
@Column
private int sapay;
public int getSabun() {
return sabun;
}
public void setSabun(int sabun) {
this.sabun = sabun;
}
public String getSaname() {
return saname;
}
public void setSaname(String saname) {
this.saname = saname;
}
public String getSasex() {
return sasex;
}
public void setSasex(String sasex) {
this.sasex = sasex;
}
public int getDeptno() {
return deptno;
}
public void setDeptno(int deptno) {
this.deptno = deptno;
}
public String getSajob() {
return sajob;
}
public void setSajob(String sajob) {
this.sajob = sajob;
}
public String getSahire() {
return sahire;
}
public void setSahire(String sahire) {
this.sahire = sahire;
}
public String getSamgr() {
return samgr;
}
public void setSamgr(String samgr) {
this.samgr = samgr;
}
public int getSapay() {
return sapay;
}
public void setSapay(int sapay) {
this.sapay = sapay;
}
}
|
cs |
*여기서 @Id는 sabun을 primary key로 지정하고, @GeneratedValue(strategy= GenerationType.AUTO)는 sabun을 자동으로 생성한다.
hibernate.cfg.xml-맵핑되는 entity를 작성한다(<mapping class = "entity.Sawon"/>)
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
<!DOCTYPE hibernate-configuration PUBLIC
"-//Hibernate/Hibernate Configuration DTD 3.0//EN"
"http://www.hibernate.org/dtd/hibernate-configuration-3.0.dtd">
<hibernate-configuration>
<session-factory>
<!-- SQL dialect -->
<property name="hibernate.dialect">org.hibernate.dialect.PostgreSQLDialect</property>
<!-- Print executed SQL to stdout -->
<property name="show_sql">false</property>
<!-- Update database on startup -->
<property name="hibernate.hbm2ddl.auto">update</property>
<!-- Set the current session context -->
<property name="current_session_context_class">thread</property>
<!-- Annotated entity classes -->
<mapping class = "entity.Sawon"/>
</session-factory>
</hibernate-configuration>
|
cs |
여기까지 작성을 완료했다면 src에 controller패키지, dao패키지를 만든 다음 SawonDAO.java 클래스 파일을 dao패키지 안에, Sawonlist.java 서블릿 파일은 controller패키지 안에 생성한다.
SawonDAO.java
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
|
package dao;
import java.util.List;
import org.hibernate.Session;
import org.hibernate.Transaction;
import org.json.simple.JSONArray;
import org.json.simple.JSONObject;
import entity.Sawon;
import hibernate.hibernate;
public class SawonDAO {
@SuppressWarnings("unchecked")
//사용하지 않은 코드 및 불필요한 코드와 관련된 경고 억제
public JSONArray SawonList() {
Session session=null;
Transaction transaction=null;
JSONArray result=new JSONArray();
try {
session=hibernate.factory.openSession();
transaction=session.beginTransaction();
List<Sawon> sawon=session.createQuery("Select t from Sawon t order by t.sabun asc").getResultList();
for(Sawon s:sawon) {
JSONObject category=new JSONObject();
int Sabun=s.getSabun();
String Saname=s.getSaname();
String Sasex=s.getSasex();
int Deptno=s.getDeptno();
String Sajob=s.getSajob();
String Sahire=s.getSahire();
String Samgr=s.getSamgr();
int Sapay=s.getSapay();
category.put("Sabun", Sabun);
category.put("Saname", Saname);
category.put("Sasex", Sasex);
category.put("Deptno", Deptno);
category.put("Sajob", Sajob);
category.put("Sahire", Sahire);
category.put("Samgr", Samgr);
category.put("Sapay", Sapay);
result.add(category);
}
} catch (Exception e) {
// TODO: handle exception
e.printStackTrace();
if(transaction!=null)
if(transaction.isActive())
transaction.rollback();
} finally {
if(session!=null)
if(session.isOpen())
session.close();
}
return result;
}
}
|
cs |
Sawonlist.java
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
|
package controller;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.json.simple.JSONArray;
import dao.SawonDAO;
/**
* Servlet implementation class Sawonlist
*/
@WebServlet("/Sawonlist")
public class Sawonlist extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public Sawonlist() {
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
SawonDAO s=new SawonDAO();
JSONArray sawon=new JSONArray();
sawon=s.SawonList();
response.setCharacterEncoding("UTF-8");
response.setContentType("text/html; charset=utf-8");
PrintWriter sawon_res=response.getWriter();
sawon_res.print(sawon);
sawon_res.flush();
sawon_res.close();
}
/**
* @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);
}
}
|
cs |
마지막으로 자바스크립트 코드를 작성하고 Sawon 데이터베이스를 pgAdmin에 저장하면 된다. Webapp에 js폴더를 만든 다음 이 폴더 안에 자바스크립트 파일을 저장한다. 만들어야 할 것은 sawonlist.js(서블릿으로부터 데이터를 전달받아 Sawon.jsp로 전달)와 UnitComma.js(돈 금액에 천단위 콤마 추가) 이 두가지이다.
sawonlist.js-jsEL을 사용하면 편리하게 웹 프로그램을 만들 수 있으나 자바스크립트 공부를 위해 복잡하더라도 다음과 같이 작성했다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
|
/**
*
*/
document.addEventListener("DOMContentLoaded",function(event){
SawonList();
});
function SawonList(){
axios({
method:"get",
url:"Sawonlist"
}).then(response =>{
const result=response.data;
console.log(result);
console.log(result.length);
outputdata(result);
}).catch(function(error){
console.log(error);
}).finally(() => {
console.log("Sawon Data List load complete")
})
}
function outputdata(result){
for(var i=0; i<result.length;i++){
let row=document.createElement('tr');//테이블 행(table row) 생성
let row_data0=document.createElement('td');//테이블 셀 생성
row_data0.innerHTML=i//생성한 셀에 데이터 입력
let row_data1=document.createElement('td');
row_data1.innerHTML=result[i].Sabun;
let row_data2=document.createElement('td');
row_data2.innerHTML=result[i].Saname;
let row_data3=document.createElement('td');
row_data3.innerHTML=result[i].Sasex;
let row_data4=document.createElement('td');
row_data4.innerHTML=result[i].Deptno;
let row_data5=document.createElement('td');
row_data5.innerHTML=result[i].Sajob;
let row_data6=document.createElement('td');
row_data6.innerHTML=result[i].Sahire;
let row_data7=document.createElement('td');
row_data7.innerHTML=result[i].Samgr;
let row_data8=document.createElement('td');
row_data8.innerHTML=unitComma(result[i].Sapay)+" 만원";//1000단위 콤마
row.appendChild(row_data0);//테이블 행에 셀 추가
row.appendChild(row_data1);
row.appendChild(row_data2);
row.appendChild(row_data3);
row.appendChild(row_data4);
row.appendChild(row_data5);
row.appendChild(row_data6);
row.appendChild(row_data7);
row.appendChild(row_data8);
document.getElementById('output').appendChild(row);//id가 'Data-tbody'인 곳에 행 추가
}
}
|
cs |
UnitComma.js
|
1
2
3
4
5
6
7
|
/**
*
*/
function unitComma(num){
var regularexpression=/\B(?<!\.\d*)(?=(\d{3})+(?!\d))/g;//1000단위에 콤마 넣기
return String(num).replace(regularexpression,',');
}
|
cs |
마지막으로 Sawon.sql 데이터베이스를 pgAdmin에 저장한다. 저장할 때 Database가 아닌 Table에 저장하도록 한다.
이제 작성을 완료했으니 실행한다. Sawon.jsp 파일에 마우스를 갖다 댄 다음 'Run As->Run on Server'를 눌러 실행한다. 그러면 다음의 화면이 출력된다.
잘 시간이 되어서 여기까지...
반응형
'Coding(Java) > 웹프로그래밍(기초)' 카테고리의 다른 글
| 1. Axios(Ajax)와 서블릿을 이용한 입출력 (0) | 2022.03.27 |
|---|
