vue uso para obtener datos de otros sitios de ocho pasos

Antes de empezar

1. vue proyecto de instalación
2. plug-in de instalación Vuex
3. axios instalación
4. Contenido sólo con fines educativos

1. El primer paso

Crear una página utilizada para almacenar y mostrar los datos adquiridos

Escribir información básica:

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

    name:"laGou",
}
</script>

2. El segundo paso

El componente de enrutamiento introduce en ellos

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

3. El tercer paso

El interior de su vuex escrito a partir de datos

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

4. El cuarto paso

• Otros consiguen los datos oficiales
• Dirección de datos de retracción: //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. El quinto paso

• Cuando se tiene el uso directo del error entre dominios
• En este momento se debe establecer Agente de Servicio
• Es necesario crear un archivo vue.config.js en el directorio raíz del proyecto

• dice:

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. El sexto paso

El cuarto paso para decir que tenemos datos adquiridos, en este momento queremos cambiar el valor de estado dentro del contenido del método por el cual las mutaciones

También escritura en el almacén siguiente index.js interior de vue

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

7. El séptimo paso

Obtener los datos de la página

<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. Octava Paso

• Mostrar su contenido en un navegador
• Puede escribir a la dirección en la barra de direcciones, introduzca la ruta especificada, componentes de la pantalla
• También se puede usar el router-enlace desde la página principal para saltar
  
  los siguientes resultados: