使用Vue获取其他网站数据

摘编自zxp的博客，遵循CC 4.0 BY-SA版权协议。

开始前的准备

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. 第六步

第四步说了，我们已经获取了数据，此时我们要通过 mutations 里面的方法来改变 state 里面 content 的值

同样的写在 store 下面的 index.js 的 vue 里面

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. 第八步

• 在浏览器显示你的内容
• 可以在地址栏写入地址，进入到指定的路由，显示组件
• 也可以在主页面上 使用 router-link 来进行跳转
  
  结果如下：