부서 삭제, router@3 props, query, 라우팅

부서삭제

<template>
  <div>
<h1>부서삭제</h1>
부서번호<input type="text" name="deptno" v-model="deptno">
<button @click="x">삭제</button>
  </div>
</template>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>

import axios from 'axios';
import eventBus from './EventBus';
export default {
data:function(){
    return{
        deptno:""
    }
},
methods:{
    x:function(){
        var deptno= this.deptno;
        var url="http://localhost:8026/app/del?deptno="+this.deptno;
        axios.delete(
            url
        ).then(
            (res)=>{
                eventBus.$emit("xyz2", deptno);
            }
            ).catch(
      (error)=>{
        console.log(error);
      }
    )
  }
}
}
</script>

<style>

</style>

 

 

<template>
  <div>
    {{ msg }}
    <table border="1">
<tr>
  <th>부서번호</th>
  <th>부서이름</th>
  <th>위치</th>
</tr>
<tr v-for="(dept,i) in list" v-bind:key="i"> 
  <th>{{ dept.deptno }}</th>
  <th>{{ dept.dname }}</th>
  <th>{{ dept.loc }}</th>
</tr>
   </table>
  </div>
</template>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
import eventBus from './EventBus';
import axios from 'axios';
export default {
  props:{
    msg:String
  },
  data:function(){
    return{
      list:[] //부서목록 저장
    }
  },
created:function(){
  eventBus.$on("xyz", this.y);
  this.deptList();
},
beforeMount:function(){

},
methods:{
  deptList:function(){
    var xxx = this.list; // => 에서 사용하기 위해 따로 저장
      // xxx와 list 는 같은 배열임. get 방식요청
      axios.get("http://localhost:8026/app/")
      .then(
        (res)=>{
          console.log(res);
          console.log("응답완료");
          res.data.map(function(ele,idx){
            xxx.push(ele);
          }
          )
        }
      ).catch(
        (error)=>{console.log(error);}
      )
console.log("get 이후 처리 코드====")
  },
  y:function(dept){
  console.log("list dept==",dept);
  this.list.push(dept);
},
y2:function(deptno){
  var xxx=this.list;
  this.list.map(function(ele,idx){
    if(ele.deptno==deptno){
      xxx.splice(idx,1); //map에서 this키 사용시 문제 발생
    }
  })
}//end y2
}

}
</script>

<style>

</style>

 

 

 

<template>
  <div id="app">
    <DeptAdd msg="자식"/>
    <DeptAdd2 msg="자식"/>
    <DeptDelete/>
    <DeptList msg="List"/>

  </div>
</template>

<script>
import DeptAdd from './components/DeptAdd'
import DeptAdd2 from './components/DeptAdd2.vue';
import DeptDelete from './components/DeptDelete.vue';

import DeptList from './components/DeptList.vue'
export default {
  name: 'App',
  components: {

    DeptAdd,
    DeptAdd2,
    DeptList,
    DeptDelete
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

 

 

npm install vue-router

 

props

Bar

<template>
  <div>Bar{{ pw }}</div>
</template>

<script>
export default {
props:{
    pw:String
}
}
</script>

<style>

</style>

 

 

Baz

<template>
  <div>
    <h1>Baz</h1>
    {{ pw }}</div>
</template>

<script>
export default {
name:"Baz",
props:{
    pw:String
}
}
</script>

<style>

</style>

 

 

Foo

<template>
  <div>
<h1>Foo</h1>
props-od:{{ id }}<br>
$router.params.id={{ $useRouter.params.id }}<br>
  </div>
</template>

<script>
export default {
props:{
    id:String
}
}
</script>

<style>

</style>

 

 

Knu

<template>
  <div>
<h1>knu</h1>
userid={{ userid }}

  </div>
</template>

<script>
export default {
props:{
    userid:String
}
}
</script>

<style>

</style>

 

 

NotFound

<template>
  <div>Not Found</div>
</template>

<script>
export default {

}
</script>

<style>

</style>

 

 

<template>
  <div id="app">
    <h1>app에서 라우팅연습</h1>
    <router-link to="/" >Home</router-link><br>
    <router-link to="/login/abcd">login/abcd</router-link><br>
    <router-link to="/my/1234">Baz-pw /my/abcd</router-link><br>
    <router-link to="/knu">knu {iserid:"홍길동"}</router-link><br>
    <router-view></router-view>
    <!--링크 컴포넌트가 보여질 부분-->
   
  </div>
</template>

<script>
//컴포넌트 import 없음
//모든 라우팅 주소는 router 설치 후
// C:\vue\vue_stu>npm install vue-router@3
//router-js 설정후 주소를 router.js 파일에 등록함, router 를 main.js 에 최종등록

export default {
  name: 'App',
  components: {

  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

 

 

 

http://localhost:8081/#/login/abcd

http://localhost:8081/#/my/1234

 

 

http://localhost:8081/#/knu

 

 

 

router.js

 

import Vue from "vue";
import VueRouter from "vue-router";
////////////////////////
import Bar from "./components/Bar";
import Foo from "./components/Foo";
import NotFound from "./components/NotFound";
import Knu from "./components/Knu";
import Baz from "./components/Baz";

const routes = [
    //주소 등록
    {path:"/", component: Bar, name: "Bar"},
    {path:"/login/:id", component: Foo, name: "Foo", props:true},
    {path:"/my/:pw", component: Baz, name: "Baz", props:true},
    {path:"/knu" , component: Knu, name:"Knu", props:{userid:"홍길동"}},
{path:"/**", component:NotFound, name:"NotFound"}
    //순서맞추기
];

//실제 사용할 라우터 export
const router = new VueRouter({routes}); //VueRouter를 주소 등록 후 생성
Vue.use(VueRouter); //VueRouter 사용 등록
export default router;//main.js 에서 라우터를 컴포넌트로 등록,
//실제 사용할 라우터 export

 

 

main.js

import Vue from 'vue'
import App from './App.vue'
import router from "./router";

Vue.config.productionTip = false;

new Vue({
  router, //라우터 등록
  render: h => h(App),
}).$mount('#app')

 

 

 

 

 

router3_query

 

Baz

<template>
  <div>
    <h1>Baz{{ pw }}</h1>
  props:{{ username }}<br>
  $rote.query.username:{{ $route.query.username }}<br>
  {{ a() }}:{{ value }}
    
    </div>
</template>

<script>
export default {
name:"Baz",
props:{
    username:String //props로 사용안됨
},
methods:{
    a:function(){
        var test="";
        test= this.$route.query.username;
        console.log(">>>>>>>",test);
        this.value=test;
        return test;
    }
}
}
</script>

<style>

</style>

 

 

Foo

<template>
  <div>
<h1>Foo</h1>
props-od:{{ id }}<br>
$router.params.id={{ $useRouter.params.id }}<br>
  </div>
</template>

<script>
export default {
props:{
    id:String
}
}
</script>

<style>

</style>

 

 

App.vue

<template>
  <div id="app">
    <h1>app에서 라우팅연습</h1>
    <router-link to="/" >Home</router-link><br>
    <router-link to="/login/abcd">login/abcd</router-link><br>
    <!--to 주의 -->
    <router-link :to="{path:'/my', query:{username:'홍길동'}}">my?username=홍길동</router-link><br>
    <router-link to="/my?username=홍길동">/my?username=홍길동</router-link><br>
    <router-link to="/knu">knu {iserid:"홍길동"}</router-link><br>
    <router-view></router-view>
    <!--링크 컴포넌트가 보여질 부분-->
   
  </div>
</template>

<script>
//컴포넌트 import 없음
//모든 라우팅 주소는 router 설치 후
// C:\vue\vue_stu>npm install vue-router@3
//router-js 설정후 주소를 router.js 파일에 등록함, router 를 main.js 에 최종등록

export default {
  name: 'App',
  components: {

  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

 

 

Router.js

import Vue from "vue";
import VueRouter from "vue-router";
////////////////////////
import Bar from "./components/Bar";
import Foo from "./components/Foo";
import NotFound from "./components/NotFound";
import Knu from "./components/Knu";
import Baz from "./components/Baz";

const routes = [
    //주소 등록
    {path:"/", component: Bar, name: "Bar"},
    {path:"/login/:id", component: Foo, name: "Foo", props:true},
    ////////////////////////////////
    {path:"/my", component: Baz, name: "Baz"},
    //////////////////////
    //app.vue 링크 수정
    {path:"/knu" , component: Knu, name:"Knu", props:{userid:"홍길동"}},
{path:"/**", component:NotFound, name:"NotFound"}
    //순서맞추기
];

//실제 사용할 라우터 export
const router = new VueRouter({routes}); //VueRouter를 주소 등록 후 생성
Vue.use(VueRouter); //VueRouter 사용 등록
export default router;//main.js 에서 라우터를 컴포넌트로 등록,
//실제 사용할 라우터 export

 

 

 

라우팅부서

<template>
  <div>
    <h1>Baz{{ pw }}</h1>
  props:{{ username }}<br>
  $rote.query.username:{{ $route.params.id }}<br>
  {{ a() }}:{{ value }}
    
    </div>
</template>

<script>
export default {
name:"Baz",
props:{
    username:String //props로 사용안됨
},
methods:{
    a:function(){
        var test="";
        test= this.$route.params.id;
        console.log(">>>>>>>",test);
        this.value=test;
        return test;
    }
}
}
</script>

<style>

</style>

 

 

<template>
  <div id="app">
    <h1>app에서 라우팅연습</h1>
    <router-link :to="{name:'Bar'}" >Home</router-link><br>
    <router-link :to="{name:'Foo'}">login</router-link><br>
    <!--to 주의 -->
    <router-link :to="{name:'Baz', params:{id:'aaa'}}">params:{id:'aaa'}</router-link><br>
    
    <router-view></router-view>
    <!--링크 컴포넌트가 보여질 부분-->
   
  </div>
</template>

<script>
//컴포넌트 import 없음
//모든 라우팅 주소는 router 설치 후
// C:\vue\vue_stu>npm install vue-router@3
//router-js 설정후 주소를 router.js 파일에 등록함, router 를 main.js 에 최종등록

export default {
  name: 'App',
  components: {

  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

 

 

import Vue from "vue";
import VueRouter from "vue-router";
////////////////////////
import Bar from "./components/Bar";
import Foo from "./components/Foo";
import NotFound from "./components/NotFound";
import Knu from "./components/Knu";
import Baz from "./components/Baz";

const routes = [
    //주소 등록
    {path:"/", component: Bar, name: "Bar"},
    {path:"/login/:id", component: Foo, name: "Foo", props:true},
    ////////////////////////////////
    {path:"/my/:id", component: Baz, name: "Baz", props: true},
    //////////////////////
    //app.vue 링크 수정
    {path:"/knu" , component: Knu, name:"Knu", props:{userid:"홍길동"}},
{path:"/**", component:NotFound, name:"NotFound"}
    //순서맞추기
];

//실제 사용할 라우터 export
const router = new VueRouter({routes}); //VueRouter를 주소 등록 후 생성
Vue.use(VueRouter); //VueRouter 사용 등록
export default router;//main.js 에서 라우터를 컴포넌트로 등록,
//실제 사용할 라우터 export

 

 

<template>
  <div>
<h1>Foo</h1>
props-od:{{ id }}<br>
$router.params.id={{ $useRouter.params.id }}<br>
  </div>
</template>

<script>
export default {
props:{
    id:String
}
}
</script>

<style>

</style>

 

 

 

 

 

FooChild

import Vue from "vue";
import VueRouter from "vue-router";
////////////////////////
import Bar from "./components/Bar";
import Foo from "./components/Foo";
import NotFound from "./components/NotFound";
import Knu from "./components/Knu";
import Baz from "./components/Baz";
//////////////////////////
import FooChild1 from "./components/FooChild1";
import FooChild2 from "./components/FooChild2";
const routes = [
    //주소 등록
    {path:"/", component: Bar, name: "Bar"},
    
    ////////////////////////////////
    {path:"/my/:id", component: Baz, name: "Baz", props: true},
    //////////////////////
    //app.vue 링크 수정
    {path:"/foo" , component: Foo, name:"Foo",
    children: [
        {path:"/fooChild1", component:FooChild1, name:"FooChild1"},
        {path:"/fooChild2", component:FooChild2, name:"FooChild2"},
    ],
    },
    /////////////////////////////////

];

//실제 사용할 라우터 export
const router = new VueRouter({routes}); //VueRouter를 주소 등록 후 생성
Vue.use(VueRouter); //VueRouter 사용 등록
export default router;//main.js 에서 라우터를 컴포넌트로 등록,
//실제 사용할 라우터 export

 

 

<template>
  <div>
<h1>Foo</h1>
<h2>Foo에서 라우팅 연습</h2>
<router-link to="/fooChild1">Foo Child1</router-link><br>
<router-link to="/fooChild2">Foo Child2</router-link><br>
<router-view></router-view>
  </div>
</template>

<script>
export default {
props:{
    id:String
}
}
</script>

<style>

</style>

 

 

<template>
  <div>FooChild1</div>
</template>

<script>
export default {

}
</script>

<style>

</style>

<template>
  <div>FooChild2</div>
</template>

<script>
export default {

}
</script>

<style>

</style>