본문 바로가기
javascript

프론트 테스트 1

by improve 2024. 3. 29.

 

 

 

- index.html

 

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="index.css" rel="stylesheet">
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<!-- 부트스트랩-->
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
crossorigin="anonymous"></script>
<!-- jquery -->
integrity="sha256-UgvvN8vBkgO0luPSUl2s8TIlOSYRoGFAX4jlCIm9Adc=" crossorigin="anonymous"></script>
<script>
//저장
function doSave() {
const username = document.getElementById("username").value;
const email = document.getElementById("email").value;
const password = document.getElementById("password").value;
const role = document.getElementById("role").value
const btn = document.getElementById("btn");

btn.textContent = "저장중....."

fetch("http://localhost:8080/member/join", {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify({
username,
email,
password,
role,
})
})
.then(response => {
console.log(response.status);
console.log(response.statusText);



if (!response.ok) {
throw new Error(response.text());
}
return response.text();
})
.then(data => {
console.log(data);
btn.textContent = "회원가입"

})
.catch(error => {
console.error(error);
btn.textContent = "회원가입"
})


}
//로그인
function doLogin() {


const email = document.getElementById("loginemail").value;
const password = document.getElementById("loginpassword").value;
const btn = document.getElementById("loginbtn");

btn.textContent = "로그인중 ...."


fetch("http://localhost:8080/token", {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify({

email,
password,

})
})
.then(response => {
console.log(response.status);
console.log(response.statusText);



if (!response.ok) {
throw new Error(response.text());
}
return response.text();
})
.then(data => {
localStorage.setItem("token", data);
console.log(data);
btn.textContent = "로그인"

})
.catch(error => {
console.error(error);
btn.textContent = "로그인"
})




}
// 목록 불러오기
function doList() {
const token = localStorage.getItem("token");
fetch("http://localhost:8080/member/list", {
method: "GET",
headers: {
"Content-Type": "application/json",
"Authorization": `Bearer ${token}`
},
})
.then(response => {
if (!response.ok) {
throw new Error("서버 오류 발생");
}
return response.text();
})
.then(data => {
document.getElementById("print").innerHTML = data;
})
.catch(error => {
})
}


</script>




</head>

<body>
<div class="container back">
<div class="row" style="height: 300px;"> <!--하나의 행을 만듦 row 에 12개의 칼럼을 쓴다. -->
<div class="col-6 col-back-orange">
<h1>회원가입</h1>
<input type="text" class="form-control" placeholder="username" value="김길동" id="username">
<input type="text" class="form-control" placeholder="email" value="bbb@naver.com" id="email">
<input type="text" class="form-control" placeholder="password" value="12341234" id="password">
<input type="text" class="form-control" placeholder="role" value="USER" id="role">
<button class="btn btn-primary" onclick="doSave()" id="btn">회원가입</button>
</div>

<div class="col-6 col-back-red">
<h1>로그인</h1>
<input type="text" class="form-control" placeholder="email" value="bbb@naver.com" id="loginemail">
<input type="text" class="form-control" placeholder="password" value="12341234" id="loginpassword">
<button class="btn btn-primary" onclick="doLogin()" id="loginbtn">로그인</button>
</div>

<div class="col-12">
<h1>회원목록</h1>
<button class="btn btn-primary" onclick="doList()">회원목록</button>
<div id="print">



</div>
</div>
</div>
</div>
</body>

</html>

 

먼저 div 테크에 container class 를 넣어주고 style 을 css 로 따로 넣어준다.

 

부트스트랩이랑 jquery 을 이용해 스타일을 추가해준다.

 

index.css 을 href 을 통해 불러와준다.

 

<input class 를 통해서 칸의 형식과 스타일을 넣어준다.  `placeholder` 는  그칸에 아무것도 적지 않으면 칸에 기본적으로 나타나는 글씨 이다.  id 테크를 통해 사용자가 직접 입력한 값을 데이터베이스에 넣어주기위한 변수를 정한다.  

 

onclick 을 통해 버튼을 클릭했을때 doSave,doLogin,doList 함수를 호출한다.

 

<script>
//저장
function doSave() {
const username = document.getElementById("username").value;
const email = document.getElementById("email").value;
const password = document.getElementById("password").value;
const role = document.getElementById("role").value
const btn = document.getElementById("btn");

btn.textContent = "저장중....."

fetch("http://localhost:8080/member/join", {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify({
username,
email,
password,
role,
})
})
.then(response => {
console.log(response.status);
console.log(response.statusText);



if (!response.ok) {
throw new Error(response.text());
}
return response.text();
})
.then(data => {
console.log(data);
btn.textContent = "회원가입"

})
.catch(error => {
console.error(error);
btn.textContent = "회원가입"
})


}
//로그인
function doLogin() {


const email = document.getElementById("loginemail").value;
const password = document.getElementById("loginpassword").value;
const btn = document.getElementById("loginbtn");

btn.textContent = "로그인중 ...."


fetch("http://localhost:8080/token", {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify({

email,
password,

})
})
.then(response => {
console.log(response.status);
console.log(response.statusText);



if (!response.ok) {
throw new Error(response.text());
}
return response.text();
})
.then(data => {
localStorage.setItem("token", data);
console.log(data);
btn.textContent = "로그인"

})
.catch(error => {
console.error(error);
btn.textContent = "로그인"
})




}
// 목록 불러오기
function doList() {
const token = localStorage.getItem("token");
fetch("http://localhost:8080/member/list", {
method: "GET",
headers: {
"Content-Type": "application/json",
"Authorization": `Bearer ${token}`
},
})
.then(response => {
if (!response.ok) {
throw new Error("서버 오류 발생");
}
return response.text();
})
.then(data => {
document.getElementById("print").innerHTML = data;
})
.catch(error => {
})
}


</script>

 

사용자가 입력한 값을 받기 위해

const username = document.getElementById("username").value;
const email = document.getElementById("email").value;
const password = document.getElementById("password").value;
const role = document.getElementById("role").value
const btn = document.getElementById("btn");

 

값을 적어준다.

 

fetch 함수를통해  인텔리제이에 작성한 GET,POST,PUT,DELETE Mapping url 을 적어준다.

 

여기서 메서드에는 사용한 메서드를 작성하고, 헤더에 application/ json 형식으로 적었다는걸 명시 해준다.

 

method: "POST",
headers: {
"Content-Type": "application/json"
},

 

 

바디에는 json.stringify 로 칸에 적을 값을 json 스타일로 받아온다.

body: JSON.stringify({
username,
email,
password,
role,

 

 

doList 에는 회원가입했을때의 이메일과 비밀번호를 토큰 값으로 저장을해서 

그 토큰에 해당하는 값을 List에 불러온다.

 

 

token 값을 얻어온다.

const token = localStorage.getItem("token");

 

headers: {
"Content-Type": "application/json",
"Authorization": `Bearer ${token}`
},

 

헤더 -> Bearer 에 ${token} 얻어온 토큰값을 넣어준다.

 

이 토큰값을 기본 베이스로 회원가입한 정보를 List로 불러온다.

 

 

<div class="col-12">
<h1>회원목록</h1>
<button class="btn btn-primary" onclick="doList()">회원목록</button>
<div id="print">

div 테크로 id가 print 값을 console 창이 아니라 화면에다가 불러온다.

.then(data => {
document.getElementById("print").innerHTML = data;
})

이렇게 리스트로 불러오게된다 

- index.css

.back{
background-color: white;
} .col-back-orange{
background-color: gray;
}
.col-back-red{
background-color: brown;
}

티스토리툴바