nodejs , vue를 이용해서 끝말잇기 만들기 #2

 axios를 이용해서 단어받아오기

npm i -S axios

https://www.npmjs.com/package/axios

axios

 

async search_text(text) {
  let req_text = await axios.get(`http://localhost:3000/search?text=${text}`);
  console.log(req_tex.data)
 }
 
 
 
search_text("왕")

axios로 get요청을해서 콘솔에 찍어보겠습니다.

제대로 나오면 끝이에요 여기까지 되면 끝말잇기는 기본적인 문법들로 만들수있어서

이제 글안보고 혼자 만들수있어요.

 

일단 꾸미기

<template>
  <div class="app">
    <div class="container">
      <div class="borderbox">
        <div class="circle">
          <div class="n_counting">
            <span class="counting_text">{{ counting }}</span>
          </div>
        </div>
        <div class="title">
          <h1 class="computer">{{ computer_text }}</h1>
        </div>
        <div class="inpos">
          <input
            type="text"
            class="new-input"
            placeholder="단어를 입력하세요"
            @keypress.enter="submit(this.usertext)"
            v-model="usertext"
          />
        </div>
        <div class="btnwap">
          <button>상대방 먼저 시작</button>
        </div>
        <!-- 패배창 -->
        <popup_component
          class="popup"
          v-if="popup_state"
          v-on:close="show_popup(false, '')"
          :reason="reason"
        ></popup_component>
      </div>
    </div>
  </div>
</template>

 

<style>
body {
  margin: 0;
  background: #000c29;
}

.popup {
  width: 100%;
  height: 100%;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  position: fixed;
}

.container {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.borderbox {
  width: 900px;
  height: 500px;
  background: #081636;
  border-radius: 20px;
  /* flex  */
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  box-shadow: 11px 12px 0px 11px #000018;
  /* overflow: hidden; */
}
button {
  font-size: 20px;
  color: white;
  border: none;
  border-radius: 5px;
  background: rgb(52, 58, 64);
  padding: 10px;
  box-shadow: 0px 0px 40px 3px #000018;
  transition: all 1s;
  margin-top: 50px;
}
button:hover {
  background: rgb(45 97 151);
}
button:active {
  background: rgb(186 220 255);
}
.new-input {
  width: 500px;
  border: none;
  background: none;
  border-bottom: 1px solid #ffca00;
  text-align: center;
  color: white;
  padding: 10px;
  font-size: 30px;
}

.new-input:focus {
  outline: none;
}
.computer {
  font-size: 50px;
  font-weight: bold;
  color: #ffca00;
  /* position: absolute;
  top: 220px; */
}
.n_counting {
  position: relative;
  top: -43px;
  font-size: 30px;
  background: #ffca00;
  border-radius: 100%;
  width: 100px;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.counting_text {
  color: black;
  position: relative;
  bottom: -22px;
}
.circle {
  height: 110px;
  position: relative;
  bottom: 55px;
  overflow: hidden;
}
.title {
  position: relative;
  bottom: 90px;
}

.inpos {
  position: relative;
  bottom: 40px;
}
.btnwap {
  position: relative;
  bottom: 30px;
}

@media screen and (max-width: 610px) {
  .new-input {
    width: 400px;
  }
}
</style>

 

간단하게 박스안에 입력창이랑 버튼을 넣어봤어요

간단하게 박스안에 입력창이랑 버튼을 넣어봤어요

일단 이쁘게 해놓으면 볼맛이나니까

 

필요한 변수 함수 선언

 

split_text

텍스트의 앞음절 또는 끝음절을 리턴합니다

splitType으로 1을 넘겨주면

앞음절을 리턴하고 0을넘겨주면 끝음절을 리턴합니다

random_text

axios로 아무 단어나 받아옵니다.

search_text

axios로 유저의 텍스트를 split_text로 잘라서

유저의 끝음절로 시작하는 단어를 받아옵니다.

userlose_check

사용자가 입력한 단어가 컴퓨터의 끝음절로 시작하는지

검사하고 중복도 검사합니다.

show_popup

팝업을 띄웁니다. 첫번쨰인자는 팝업의 텍스트를 넘겨주고

두번째론 승리창인지 패배창인지를 넘겨줍니다

close_popup 

팝업창에서 종료버튼을 누를때 콜합니다.

페이지를 다시 로드합니다.

 

전체 소스코드 

https://github.com/dustmqdldi/Vue_End-Talk