뷰 사용은 다른 사이트 여덟 단계에서 데이터를 얻을 수 있습니다

시작하기 전에

1. 설치 VUE 프로젝트
2. Vuex 플러그인 설치
3. 설치 Axios의
4. 교육 목적으로 만 내용

1. 첫 번째 단계

저장하는 데 사용하는 페이지를 생성하고 데이터가 수집 표시

기본 정보를 작성합니다 :

<template>
    <div> </div>
</template>
-------------------------------------------------
<script>
export default {

    name:"laGou",
}
</script>

2. 두 번째 단계

라우팅 구성 요소들을 도입

 {
    path:"/lagou",
    name:"/lagou",
    component:()=>import("@/views/laGou")
  },

3. 세 번째 단계

은 당신의 vuex 내부 데이터를 사용하여 작성

export default new Vuex.Store({
  state: {
    content:[],  //人家的数据就是存放在 content 里面的，我也写里面
    pageNo:1,    //人家的第几页
    pageSize:10  //人家的一页几条数据
  },
})

4. 네번째 단계

• 다른 사람은 공식 데이터를 얻을
• 주소 견인기 데이터 : //https://m.lagou.com/listmore.json?pageNo=2&pageSize=15
  

  actions: {
     async listMore({dispatch,state,commit}){        //调用接口的方法
     const {data} = await axios.get("/lg/listmore.json",{   //使用 axios 来获取参数
        params:{                      //会自动将 params 里面的东西和你第一个数据地址拼接起来
          pageNo:state.pageNo,        //这里获取的是 state 里面的页数（默认第一页）
          pageSize:state.pageSize     //这里获取的是 state 里面的条数（默认共十条）
        }
      })
      commit("CHANGE_CONTENT",data.content.data.page.result);   //调用 mutations 里面的方法去改变 state 里面 content 的默认值
    },
  },

제 5 공정

• 당신은 도메인 간 오류의 직접 사용이있을 때
• 이 시간은 서비스 에이전트 설정해야합니다에서
• 당신은 프로젝트 루트 디렉토리에있는 파일 vue.config.js을 작성해야

• 말한다 :

module.exports = {
    devServer:{
        open:true,       // 自动开启
        host:"127.0.0.1",// 设置 host
        port:80,         // 设置端口号
        proxy:{          //设置代理
            "/lg":{
                target:"https://m.lagou.com",   //代理的网址
                changeOrigin: true,
                pathRewrite:{
                    "^/lg":""
                }
            }
        }
    }
}

제 6 공정

네 번째 단계는 현재로서는 우리에있어서의 컨텐츠의 내부 상태의 값을 변경하려면, 수집 된 데이터가 있다고 가정 할 돌연변이에 의해

또한 VUE의하는 index.js 내부를 다음 저장소에 저장 쓰기

  mutations: {    //修改 state 
    CHANGE_CONTENT(state,content){   //方法 //第一个值是默认值，是 state 里面的值，第二个是你通过commit()传递过来的值
      state.content = [              //将你的得到的数据给 state里面的 content
        ...state.content,            //解构 state 里面的值
        ...content                   //解构你穿的值
      ];                             //主要用于数据的拼接
      state.pageNo++                 //将state里面的页数加1
    }
  },

제 7 단차

페이지에 데이터를 가져 오기

<template>
    <div>
        <div v-for="item in $store.state.content" :key="item.positionId">  //将你state的content 的数据遍历
            <h3>{{item.positionName}}</h3>   //显示名字  positionName是拉钩起的名字
            <img width="100" :src="item.companyLogo | getImg" alt="">  //显示图片 companyLogo 是拉钩起的名字
        </div>
        <div><input type="button" @click="$store.dispatch('listMore')" value="加载更多"></div>  //点击加载更多，执行 listMore 方法，请求数据
    </div>
</template>

<script>
export default {
    name:"laGou",
    mounted(){
        this.$store.dispatch("listMore")   //默认第一次请求数据
    },
    filters:{
        getImg(v){
         return  "http://www.lgstatic.com/"+v   //实现图片的显示，地址拼接
        }
    }
}
</script>

8. 여덟 단계

• 브라우저에서 콘텐츠를 표시
• 주소 표시 줄에 주소를 쓸 수, 디스플레이 구성 요소를 지정된 경로를 입력
• 또한 이동 메인 페이지에서 라우터 링크를 사용할 수 있습니다
  
  다음과 같은 결과를 :