前端跨域服务使用爬虫解决方案

最后更新于:2020-09-11 23:29:57 | 52 次浏览

如果您需要源码地址:gitee
代理跨域的代码 已经配置完成。测试地址:https://api.hzbiz.net/

前端Vue部分代码

<template>
<div class="container">
    <b-jumbotron>
        <template v-slot:header>前端跨域免费代理服务</template>

        <template v-slot:lead>
            如果您需要代理服务地址,请自行查看<a href="https://gitee.com/yyx219/agent" target="_blank">源码</a>
        </template>

        <hr class="my-4">
        <b-form @submit.prevent="onSubmit" v-if="form.show">
            <b-form-group id="input-group-1" label="请求地址:" label-for="input-1" description="请输入要跨域的网址">
                <b-form-input id="input-1" v-model="form.url" type="url" required placeholder="请输入要访问的域名地址"></b-form-input>
            </b-form-group>
            <b-form-group label="请选择您要获取的目标页的内容">
                <b-form-radio-group id="radio-group-2" v-model="form.type" name="radio-sub-component">
                    <b-form-radio value="all">默认请求方式</b-form-radio>
                    <b-form-radio value="links">获取页面所有链接</b-form-radio>
                    <b-form-radio value="text">获取页面所有文本内容</b-form-radio>
                    <b-form-radio value="form">获取表单内容</b-form-radio>
                </b-form-radio-group>
            </b-form-group>

            <b-button type="submit" variant="primary">请求跨域</b-button>
        </b-form>

        <b-card header="请求的结果" v-if="result">
            <b-card-text>
                <pre class="line-numbers language-html">
                {{ result }}
                </pre>
            </b-card-text>
        </b-card>

    </b-jumbotron>
</div>
</template>

<script>
export default {
    name: 'Home',
    data() {
        return {
            form: {
                type: "all",
                url: "",
                show: true
            },
            result: null
        }
    },
    methods: {
        onSubmit() {
            this.axios.get('api/index.php?url=' + this.form.url +
                    '&type=' + this.form.type)
                .then((res) => {
                    this.result = res.data
                    console.log(res)
                })
        }

    }
}
</script>

<style lang="scss">
.container {
    margin-top: 2%;

    .card-header {
        margin-top: 15px;
    }
}
</style>

后端PHP部分代码:

// header("Content-Type:application/json;charset=UTF-8");
header("Access-Control-Allow-Origin:*");
date_default_timezone_set("PRC");
include("Snoopy.class.php");//使用时不要忘记引入Snoopy类库
function checkUrl(url)
{pattern = "/^(http|https):\/\/.*/i";
    if (preg_match(pattern, url)) {
        return true;
    } else {
        return false;
    }
}

function GetData(url, type)
{ch = new Snoopy;
    ch->agent = "Mozilla/5.0 (Linux; U; Android 8.1.0; zh-CN; Redmi 6 Pro Build/OPM1.171019.019) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/57.0.2987.108 UCBrowser/12.5.5.1035 Mobile Safari/537.36";ch->referer = "https://www.hzbiz.net/";
    switch (type) {
        case "text":ch->fetchtext(url);//获取网页数据的全部文本数据
            break;
        case "links":ch->fetchlinks(url);//获取网页数据的全部链接
            break;
        case "form":ch->fetchform(url); //获取表单
            break;
        default:ch->fetch(url);
    }
    returnch->results;//返回数据
}


if (isset(_GET['url']) && checkUrl(_GET['url'])) {
    url =_GET['url'];
    type = '';
    if (isset(_GET['type'])) {
        type =_GET['type'];
    }
    if(type=='links'){
        echo json_encode(Array("isRule" => true, "message" => GetData(url,type)));
    }else{
        echo GetData(url,$type);
    }

} else {
    echo json_encode(Array("isRule" => false, "message" => "请输入正确的网址"));
}

怎么给vue定义全局的方法?

最后更新于:2020-09-25 11:54:35 | 323 次浏览

1、通过prototype,这个非常方便。Vue.prototype[method]=method;
2、通过插件Vue.use(plugin);
3、通过mixin,Vue.mixin(mixins);
第一种:挂载到Vue的prototype上。把全局方法写到一个文件里面,然后for循环挂载到Vue的prototype上,缺点是调用这个方法的时候没有提示

 Object.keys(tools).forEach(key => {
      Vue.prototype[key] = tools[key]
 })

第二种:利用全局混入mixin,因为mixin里面的methods会和创建的每个单文件组件合并。这样做的优点是调用这个方法的时候有提示

Vue.mixin(mixin)
new Vue({
    store,
    router,
    render: h => h(App),
}).mount('#app')
import tools from "./tools"
import filters from "./filters"
import Config from '../config'
import CONSTANT from './const_var'

export default {
    data() {
        return {
            CONFIG: Config,
            CONSTANT: CONSTANT
        }
    },
    methods: {
        //将tools里面的方法挂载到vue上,以方便调用,直接this.xxx方法名就可以了
        // Object.keys(tools).forEach(key => {
        //     Vue.prototype[key] = tools[key]
        // })
        //将tools里面的方法用对象展开符混入到mixin上,以方便调用,直接this.$xxx方法名就可以了
        ...tools
    },
    filters: {
        // //将filter里面的方法添加了vue的筛选器上
        // Object.keys(filters).forEach(key => {
        //     Vue.filter(key, filters[key])
        // })
        ...filters
    }
}

ps:vue的mixin的使用

混入 (mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被混入该组件本身的选项。

以上是官网的定义,mixin的作用是多个组件可以共享数据和方法,在使用mixin的组件中引入后,mixin中的方法和属性也就并入到该组件中,可以直接使用,在已有的组件数据和方法进行了扩充。引入mixin分全局引用和局部引用。

// 定义一个mixin.js
let MIXIN = {
   data() {
       return {
           name: 'mixin'
       }
   },
   created() {
       console.log('mixin...', this.name);
   },
   mounted() {},
   methods: {}
};
export default MIXIN;
//全局引用
import mixin from './mixin'
Vue.mixin(mixin)

//在vue文件中引用
import '@/mixin'; // 引入mixin文件
export default {
   mixins: [mixin]
}

描述v-model语法糖实现方式

最后更新于:2020-09-05 10:22:55 | 57 次浏览

在vuejs 中,v-model 这个语法糖能够很方便的实现表单和数据之间的绑定。比如在input 的输入框中,视图能够实时呈现我们在输入框中输入的内容。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
         <!-- <input type="text" id="inp" v-model="title"> -->
         <input type="text" id="inp" :value="title" @input="changeTitle">
         <p>
             实时显示你在input中输入的内容:
             <span id="show">{{title}}</span>
         </p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        new Vue({
            el:"#app",
            data:{
                title:""    
            },
            methods: {
                changeTitle(e){
                     this.title = e.target.value
                }
            },
        })
    </script>
</body>
</html>

Vue组件通信 – props

最后更新于:2020-09-05 09:58:23 | 56 次浏览

Vue - Porps 父传子数据通信

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <my-div :getparent="m"></my-div>
    </div>
    <template id="mydiv">
        <div>
             <h1>你好:{{msg}}</h1>
             <h4>用来存放父组件传过来的信息:{{getparent}}</h4>
        </div>
    </template>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        new Vue({
            el:"#app",
            data:{
                m:"¥1000元"
            },
            components:{
                'my-div':{
                    template:"#mydiv",
                    props:['getparent'],
                    data() {
                        return {
                            msg:"我是子组件信息",
                        }
                    },
                }
            }
        });
    </script>
</body>
</html>