VueJs Insert

---

VueJs Insert

---

 

1. 입력을 받는다

 

<template>
  <div id="layer1" class="pop-layer">
    <div class="pop-container">
      <div class="pop-cont">
        <div class="popup_title">분석 제외 문구 등록</div>
        <div>
          <div class="_popup_minibox1">채널</div>
          <div class="_popup_minibox2">
            <div class="_popup_checkbox"><input type="checkbox" v-model="checkAll"> 전체 </div>
            <div class="_popup_checkbox"><input type="checkbox" v-model="check1"> 블로그</div>
            <div class="_popup_checkbox"><input type="checkbox" v-model="check2"> 카페</div>
            <div class="_popup_checkbox"><input type="checkbox" v-model="check3"> 커뮤니티</div>
          </div>
        </div>
        <div>
          <div class="_popup_minibox1">문구</div>
          <div class="_popup_minibox2"><textarea class="_popup_textarea" v-model='phrase'></textarea></div>
        </div>
      </div>
      <div class="_popup_btnbox"><button class="_popup_btn" @click="dataInsert()"> 등 록 </button></div>
    </div>
  </div>
</template>

---

 

2. Data 들을 params 에 append 시킨 후에 axios 를 이용해서 '/dataInsert' 로 보내준다.

   dataInsert () {
      const params = new URLSearchParams()
      var channel = new Array(0)

      if (this.checkAll === true) {
        channel.push('채널')
        channel.push('카페')
        channel.push('커뮤니티')
      } else {
        if (this.check1 === true) { channel.push('블로그') }
        if (this.check2 === true) { channel.push('카페') }
        if (this.check3 === true) { channel.push('커뮤니티') }
      }

      params.append('phrase', this.phrase)
      params.append('channel', channel.join(','))

      axios.post('/dataInsert', params)
        .then((result) => {
          alert(result.data.message)
        })
    }

 

- axios 를 사용하고자 할 때는 axios 를 선언 해주어야 한다.

const axios = require('axios')

---

 

3. controller 에서 Vuew 에서 보낸 Data 를 받아낸다

	@ResponseBody
	@RequestMapping("/dataInsert")
	public Map<String, Object> dataInsert(  BoardVO vo ) {
		
		// 분석 제외 문구 관리 Insert
		boardControl.boradInsert(vo);
		Map<String, Object> map = new HashMap<String, Object>();
		
		map.put("message", "분석 제외 문구가 등록 되었습니다");
		return map;
	}

---

 

4. Controller = > Service

	// 분석 제외 문구 관리 Insert
	public int boradInsert( BoardVO vo ) {
		return dao.boradInsert(vo);
	}

---

 

5. Service = > Dao

	// 분석 제외 문구 관리 Insert
	public int boradInsert( BoardVO vo ) {
		return sql.insert("board.boradInsert",vo);
	}

---

 

6.  Dao = > insert

	<!-- 분석 제외 문구 관리 Insert -->
	<insert id = "boradInsert" parameterType="soo.bin.com.BoardVO">
		INSERT INTO ManageAnalysisExclusionPhrase (
		   maep_pk
		  ,channel
		  ,phrase
		  ,usagestatus
		  ,registrationDate
		) VALUES (
		   NULL 
		  ,#{channel}  
		  ,#{phrase} 
		  ,'Y'
		  ,now()  
		)
	</insert>	

---

 

7. insert = > Controller ( 알림 메세지 )

	@ResponseBody
	@RequestMapping("/dataInsert")
	public Map<String, Object> dataInsert(  BoardVO vo ) {
		
		// 분석 제외 문구 관리 Insert
		boardControl.boradInsert(vo);
		Map<String, Object> map = new HashMap<String, Object>();
		
		map.put("message", "분석 제외 문구가 등록 되었습니다");
		return map;
	}

 

---

 

8. Controller = > view

---

VueJS 에서 INSERT 완료 😎

---