精华内容
下载资源
问答
  • vue中几种网络请求

    2021-01-19 15:31:46
    http://www.axios-js.com 导入框架:npm install axios --save 或者使用cdn : // 第三方axios网络请求,因为axios不是Vue插件,所以引入的时候要用原型的方式. import axios from 'axios' Vue.prototype.$...

    1. axios ;官方推荐使用,axios 是由 promise 封装的一个 http 的库。http://www.axios-js.com

    导入框架:npm install axios --save   或者使用cdn :  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

    // 第三方axios网络请求,因为axios不是Vue的插件,所以引入的时候要用原型的方式.
    import axios from 'axios'
    Vue.prototype.$http = axios     //这是用原型的方式引入

    // 设置基本路径(如果不设置就需要在后面的请求中填写全路径)
    axios.defaults.baseURL='http://localhost:8080'
    axios.defaults.timeout=10000;

    // axios.defaults.headers['mytoken']="token"

    //设置请求拦截器,把token传递到后台
    // axios.interceptors.request.use(function(config){
    //     // console.log(config.url)
    //     //打开进度条
    //     // NProgress.start()
    //     config.headers.Authorization=window.sessionStorage.getItem('token');
    //     return config;
    // },function(err){
     
    // })
    // //响应拦截器
    // axios.interceptors.response.use(function(config){
    //     // console.log(config.url)
    //     //结束进度条
    //     // NProgress.done()
    //     return config;
    // },function(err){
     
    // })

    使用:方法一:

    第一个回调函数完成以后,会将返回结果作为参数,传入第二个回调函数。如果前一个回调函数返回的是Promise对象,这时下一个回调函数就会等待该Promise对象有了运行结果,才会进一步调用。

    <script>
        export default{
              methods:{

                  // 发起登录请求
                  this.$http.post('/login',{username:"lambo",password:"12345678"},{//这里可以设置header}).then(ret=>{
                    console.log(ret)
                    console.log("wwww")

                         }).catch(error => {
                               console.log(error)
                             });
                   }
               }
    </script>

    方法二:

    <script>
        export default{
              methods:{

                  // 注意没有.post或者.get
                      this.$http({
                     method: 'post',
                     url: '/login',
                      // 传递参数
                    data: {username:"lambo111"},
                    // 设置请求头信息
                    headers: {
                     "Content-Type":"application/json"
                        }
                     // responseType: 'json'
                           }).then(response => {
                       // 请求成功
                         let res = response.data;
                        console.log(res);
                         return res;     //这里的return 会传递到下一个then的参数res
                            }).then(res => {
                             // 请求成功
                            console.log("next"+res);
                             }).catch(error => {
                              // 请求失败,
                              console.log(error);
                                });
                   }
               }
    </script>

    同时发起多个请求:等到所有请求执行完毕在返回数据,使用axios.all

    function gethomedata() {
      return axios.get('/home');

    //或者axios.get('/home').then(res => res.data);

    }
     
    function getuserinfo() {
      return axios.get('/user');

    //或者axios.get('/user').then(res => res.data);

    }
    axios.all([gethomedata(), getuserinfo()])
      .then(axios.spread(function (val1,val2) {
        //axios同时请求多个接口,当所有接口全部请求成功之后,接收返回的数据,进行处理。会收到一个数组,包含着响应对象,其中的顺序和请求发送的顺序相同,可以使用 axios.spread 分割成多个单独的响应对象
        // val1和val2 是数组中每个接口返回的值.

      }));

    同时发起多个请求:选择最快返回的数据,使用 Promise.race

     Promise.race([

              axios.get("localhost:8081/gethome",{

                params: {

                  "usrname":"lambo"

                  }

              }),   

              axios.get("localhost:8081/getuerinfo",{

                params: {

                  "usrname":"lambo"

                  }

              }),

            ]).then(res => {

              if(res.length == 0 ){

              }else{

                         }

                }).catch(err => {

                  console.log(err)

                })

     

     2.axios搭配 async    await  , 是es7的新语法;用在函数上;await:用在async函数内部; https://www.cnblogs.com/youma/p/10475214.html

    async/await其实是Promise的语法糖,它能实现的效果都能用then链来实现,它是为优化then链而开发出来的首先用async声明一个异步函数,然后再用await等待异步结果,把以前then链的结果直接放在await后面。

    <script>
        export default{
              methods:{

                 // 发起login请求,等待await执行完毕,才执行其他代码
                      async  login(){
                         var info=await  this.$http.post('/login',this.loginform);
                          console.log(info);

                          } 
                   }
               }
    </script>

     直接在await后面加then

    <script>
        export default{
              methods:{

                 // 发起login请求
                     async  login(){
                     var info=await  this.$http.post('/login',this.loginform).then(res => {


                         });
                      } 
                   }
               }
    </script>

    解释:如果函数是异步的(前面有async),那么这个函数总是返回一个promise,如果代码中有return <非promise>语句,JavaScript会自动把返回的这个value值包装成promise的resolved值(例如:Promise.resolve(1)  把1包装成promise)。可以使用 then 方法添加回调函数

    await后面可以跟任何的东西。 await表达式的运算结果取决于它后面等待的东西。如果它等到的不是一个 Promise 对象,那 await 表达式的运算结果就是它等到的东西。

    如果它等到的是一个 Promise 对象,它会阻塞后面的代码,等着 Promise 对象 resolve,然后得到 resolve 的值,作为 await 表达式的运算结果。resolve的值会在then链中传递下去。

    async 函数中可能会有 await 表达式,async 函数执行时,如果遇到 await 就会先暂停执行 ,等到触发的异步操作完成后,恢复 async 函数的执行并返回解析值。

    关键词await可以让JavaScript函数进行等待,直到一个promise执行并返回它的结果,JavaScript才会继续往下执行。

    正常情况下,await 命令后面是一个 Promise 对象,它也可以跟其他值,如字符串,布尔值,数值以及普通函数。

     

     3. Promise是es6 为解决异步编程的。创造promise实例后,它会立即执行。https://www.runoob.com/w3cnote/javascript-promise-object.html

    Promise 异步操作有三种状态:pending(进行中)、fulfilled(已成功)和 rejected(已失败)。除了异步操作的结果,任何其他操作都无法改变这个状态。

    Promise 对象只有:从 pending 变为 fulfilled 和从 pending 变为 rejected 的状态改变。只要处于 fulfilled 和 rejected ,状态就不会再变了即 resolved(已定型)。

    无法取消 Promise ,一旦新建它就会立即执行,无法中途取消。如果不设置回调函数,Promise 内部抛出的错误,不会反应到外部。

    then()方法是异步执行。意思是:就是当.then()前的方法执行完后再执行then()内部的程序,这样就避免了,数据没获取到的问题。

    then 方法接收两个函数作为参数,第一个参数是 Promise 执行成功时的回调,第二个参数是 Promise 执行失败时的回调,两个参数只会有一个被调用。

    resolve 方法和 reject 方法调用时,都带有参数。它们的参数会被传递给then的回调函数。reject 方法的参数通常是 Error 对象的实例,而 resolve 方法的参数除了正常的值以外,还可能是另一个 Promise 实例

    async  login(){

        const p1 = new Promise(function(resolve,reject){
        resolve('success1');//resolve的值会在then链中传递下去。
        resolve('success2');// 上面的已经处于fulfilled状态,resolved就不会在法改变了,这一个就不执行了。

        reject("");//如果错误就用reject
           }); 

     p1.then(function(value){ //p1中resolve反出的值会传递到这里的value中
        console.log(value); // success1
            });

        }

     

    4.Fetch,Fetch是基于promise设计的,它不是ajax的进一步封装,而是原生js API,没有使用XMLHttpRequest对象。ie浏览器不支持,需要导入安装es6-promise解决。 fetch 的请求返回的是Promise对象,所以我们可以使用.then().catch(),但是要记住.then()至少要写两个, 第一个then是用来格式化数据的,第二个then是可以拿到格式化后的数据

    res.json()/res.text()获取到的是一个新的promise实例,arr.txt的值在[[[PromiseValue]]里面,但是直接取是取不出来的。没有方法取出来,Promise的设计文档中说了,[[PromiseValue]]是个内部变量,外部无法得到,只能在then中获取。所以就会用到第二次then了。

    导入框架  npm install whatwg-fetch --save

    在main.js中引入import 'whatwg-fetch'

     async  login(){
     fetch('http://localhost:8080/login', {
                  method: 'POST',

                 mode: "cors",//如果跨域加上这一行

                  headers: {
                    'Content-Type': 'application/json'
                  },
                  body: JSON.stringify({
                    username: 'yj',
                    password: 'yj',
                  })
                }).then(res=>{

                //res.text 返回的是一个纯文本  是一个promise对象
                //res.json 返回的是一个对象(json/array)  是一个promise对象
                //res是只能被读取一次的,console.log取一次,return取一次,会报错

                            let resdata = res.json();
                            return   resdata;

                   // res.json().then(res=>{
                      // console.log(res);
                       //  });
                }).then(data=>{

                          //上一个then返回值是Promise对象(即有异步操作),等待该Promise对象的状态发生变化,then才会被调用

                          console.log(1,data) },

                            data2=>{ console.log(2,data2) }

                       ).catch(err=>{

                               console.log(4,err);

                            });


          } 

     

     

    5.Ajax;可以局部刷新;vue本身不支持发送AJAX请求,需要使用vue-resource、axios等插件实现。

    6.JQery;ajax的封装;

    7.vue-resource ; 在Vue1.x中,官方推荐使用;不在更新和维护。

     

     

    • 几种方式的对比
      ajax:
      优点:局部更新;原生支持】
      缺点:可能破坏浏览器后退功能;嵌套回调】
      jqueryAjax:
      【在原生的ajax的基础上进行了封装;支持jsonp】
      fetch:
      优点:解决回调地狱】
      缺点:API 偏底层,需要封装;默认不带Cookie,需要手动添加; 浏览器支持情况不是很友好,需要第三方的ployfill】
      axios:
       

    • axios的特点
      支持浏览器和node.js
      支持promise
      拦截请求和响应
      能转换请求和响应数据
      取消请求
      自动转换JSON数据
      浏览器端支持防止CSRF(跨站请求伪造)

    展开全文
  • 1 安装插件 vue-resource 2.引用并使用插件 然后你会发现所有的vc和vm都会加上一个$http 只要把之前的axios替换成this.$http就行了 但是由于这个vue-resource 更新频率不是很高在vue1.0的时候经常用,...

     要点

     

     

     学过的请求方式

    1 安装插件 vue-resource

     2.引用并使用插件

    然后你会发现所有的vc和vm都会加上一个$http

     

    只要把之前的axios替换成this.$http就行了

     

     但是由于这个vue-resource 更新频率不是很高在vue1.0的时候经常用,但是如今还是axios比较好封装的好

    展开全文
  • vue axios请求超时的正确处理方法

    千次阅读 2020-12-30 11:01:00
    自从使用Vue2之后,就使用官方推荐的axios的插件来调用API,在使用过程中,如果服务器或者网络不稳定掉包了, 你们该如何处理呢? 下面我给你们分享一下我的经历。具体原因最近公司在做一个项目, 服务端数据接口用的是...

    自从使用Vue2之后,就使用官方推荐的axios的插件来调用API,在使用过程中,如果服务器或者网络不稳定掉包了, 你们该如何处理呢? 下面我给你们分享一下我的经历。

    具体原因

    最近公司在做一个项目, 服务端数据接口用的是Php输出的API, 有时候在调用的过程中会失败, 在谷歌浏览器里边显示Provisional headers are shown。

    按照搜索引擎给出来的解决方案,解决不了我的问题.

    最近在研究AOP这个开发编程的概念,axios开发说明里边提到的栏截器(axios.Interceptors)应该是这种机制,降低代码耦合度,提高程序的可重用性,同时提高了开发的效率。

    带坑的解决方案一

    我的经验有限,觉得唯一能做的,就是axios请求超时之后做一个重新请求。通过研究 axios的使用说明,给它设置一个timeout = 6000

    axios.defaults.timeout = 6000;

    然后加一个栏截器.

    // Add a request interceptor

    axios.interceptors.request.use(function (config) {

    // Do something before request is sent

    return config;

    }, function (error) {

    // Do something with request error

    return Promise.reject(error);

    });

    // Add a response interceptor

    ax

    展开全文
  • 使用Vue开发Chrome插件

    2021-09-18 12:41:45
    原文链接:使用Vue开发Chrome插件 - 愧怍的小站 (kuizuo.cn) 前言 我当时学习开发Chrome插件的时候,还不会Vue,更别说Webpack了,所以使用的都是原生的html开发,效率就不提了,而这次就准备使用vue-cli来进行编写...

    原文链接: 使用Vue开发Chrome插件 - 愧怍的小站 (kuizuo.cn)

    前言

    我当时学习开发Chrome插件的时候,还不会Vue,更别说Webpack了,所以使用的都是原生的html开发,效率就不提了,而这次就准备使用vue-cli来进行编写一个某B站获取视频信息,评论的功能(原本是打算做自动回复的),顺便巩固下chrome开发(快一年没碰脚本类相关技术了),顺便写套模板供自己后续编写Chrome插件做铺垫。

    关于Chrome插件开发的基本知识就不赘述了,之前写过一篇原生开发的Chrome插件开发 - 愧怍的小站,里面有附带相关文档链接。

    相关代码开源github地址

    环境搭建

    Vue Web-Extension - A Web-Extension preset for VueJS (vue-web-extension.netlify.app)

    npm install -g @vue/cli
    npm install -g @vue/cli-init
    vue create --preset kocal/vue-web-extension my-extension
    cd my-extension
    npm run server
    复制代码

    会提供几个选项,如Eslint,background.js,tab页,axios,如下图

    image-20210916142751129

    选择完后,将会自动下载依赖,通过npm run server将会在根目录生成dist文件夹,将该文件拖至Chrome插件管理便可安装,由于使用了webpack,所以更改代码将会热更新,不用反复的编译导入。

    项目结构

    ├─src
    |  ├─App.vue
    |  ├─background.js
    |  ├─main.js
    |  ├─manifest.json
    |  ├─views
    |  |   ├─About.vue
    |  |   └Home.vue
    |  ├─store
    |  |   └index.js
    |  ├─standalone
    |  |     ├─App.vue
    |  |     └main.js
    |  ├─router
    |  |   └index.js
    |  ├─popup
    |  |   ├─App.vue
    |  |   └main.js
    |  ├─override
    |  |    ├─App.vue
    |  |    └main.js
    |  ├─options
    |  |    ├─App.vue
    |  |    └main.js
    |  ├─devtools
    |  |    ├─App.vue
    |  |    └main.js
    |  ├─content-scripts
    |  |        └content-script.js
    |  ├─components
    |  |     └HelloWorld.vue
    |  ├─assets
    |  |   └logo.png
    ├─public
    ├─.browserslistrc
    ├─.eslintrc.js
    ├─.gitignore
    ├─babel.config.js
    ├─package.json
    ├─vue.config.js
    ├─yarn.lock
    复制代码

    根据所选的页面,并在src与vue.config.js中配置页面信息编译后dist目录结构如下

    ├─devtools.html
    ├─favicon.ico
    ├─index.html
    ├─manifest.json
    ├─options.html
    ├─override.html
    ├─popup.html
    ├─_locales
    ├─js
    ├─icons
    ├─css
    复制代码

    安装组件库

    安装elementUI

    整体的开发和vue2开发基本上没太大的区别,不过既然是用vue来开发的话,那肯定少不了组件库了。

    要导入Element-ui也十分简单,Vue.use(ElementUI); Vue2中怎么导入element,便怎么导入。演示如下

    image-20210916150154078

    不过我没有使用babel-plugin-component来按需引入,按需引入一个按钮打包后大约1.6m,而全量引入则是5.5左右。至于为什么不用,因为我需要在content-scripts.js中引入element组件,如果使用babel-plugin-component将无法按需导入组件以及样式(应该是只支持vue文件按需引入,总之就是折腾了我一个晚上的时间)

    安装tailwindcss

    不过官方提供了如何使用TailwindCSS,这里就演示一下

    在 Vue 3 和 Vite 安装 Tailwind CSS - Tailwind CSS 中文文档

    推荐安装低版本,最新版有兼容性问题

    npm install tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
    复制代码

    创建postcss.config.js文件

    // postcss.config.js
    module.exports = {
      plugins: [
        // ...
        require('tailwindcss'),
        require('autoprefixer'), // if you have installed `autoprefixer`
        // ...
      ]
    }
    复制代码

    创建tailwind.config.js文件

    // tailwind.config.js
    module.exports = {
      purge: {
        // Specify the paths to all of the template files in your project
        content: ['src/**/*.vue'],
      
        // Whitelist selectors by using regular expression
        whitelistPatterns: [
            /-(leave|enter|appear)(|-(to|from|active))$/, // transitions
            /data-v-.*/, // scoped css
        ],
      }
      // ...
    }
    复制代码

    在src/popup/App.vue中导入样式,或在新建style.css在mian.js中import "../style.css";

    <style>
    /* purgecss start ignore */
    @tailwind base;
    @tailwind components;
    /* purgecss end ignore */
    
    @tailwind utilities;
    </style>
    复制代码

    从官方例子导入一个登陆表单,效果如下

    image-20210916152633247

    项目搭建

    页面搭建

    页面搭建就没什么好说的了,因为使用的是element-ui,所以页面很快就搭建完毕了,效果如图

    image-20210918115438700

    悬浮窗

    悬浮窗其实可有可无,不过之前写Chrome插件的时候就写了悬浮窗,所以vue版的也顺带写一份。

    要注意的是悬浮窗是内嵌到网页的(且在document加载前载入,也就是"run_at": "document_start"),所以需要通过content-scripts.js才能操作页面Dom元素,首先在配置清单manifest.json与vue.confing.js中匹配要添加的网站,以及注入的js代码,如下

      "content_scripts": [
        {
          "matches": ["https://www.bilibili.com/video/*"],
          "js": ["js/jquery.js", "js/content-script.js"],
          "css": ["css/index.css"],
          "run_at": "document_start"
        },
        {
          "matches": ["https://www.bilibili.com/video/*"],
          "js": ["js/jquery.js", "js/bilibili.js"],
          "run_at": "document_end"
        }
      ]
    复制代码
    	contentScripts: {
              entries: {
                'content-script': ['src/content-scripts/content-script.js'],
                bilibili: ['src/content-scripts/bilibili.js'],
              },
            },
    复制代码

    由于是用Vue,但又要在js中生成组件,就使用document.createElement来进行创建元素,Vue组件如下(可拖拽)

    image-20210917142340863

    :::danger

    如果使用babel-plugin-component按需引入,组件的样式将无法载入,同时自定义组件如果编写了style标签,那么也同样无法载入,报错:Cannot read properties of undefined (reading 'appendChild')

    大致就是css-loader无法加载对应的css代码,如果执意要写css的话,直接在manifest.json中注入css即可

    :::

    完整代码

    // 注意,这里引入的vue是运行时的模块,因为content是插入到目标页面,对组件的渲染需要运行时的vue, 而不是编译环境的vue (我也不知道我在说啥,反正大概意思就是这样)
    import Vue from 'vue/dist/vue.esm.js';
    import ElementUI, { Message } from 'element-ui';
    Vue.use(ElementUI);
    
    // 注意,必须设置了run_at=document_start此段代码才会生效
    document.addEventListener('DOMContentLoaded', function() {
      console.log('vue-chrome扩展已载入');
    
      insertFloat();
    });
    
    // 在target页面中新建一个带有id的dom元素,将vue对象挂载到这个dom上。
    function insertFloat() {
      let element = document.createElement('div');
      let attr = document.createAttribute('id');
      attr.value = 'appPlugin';
      element.setAttributeNode(attr);
      document.getElementsByTagName('body')[0].appendChild(element);
    
      let link = document.createElement('link');
      let linkAttr = document.createAttribute('rel');
      linkAttr.value = 'stylesheet';
      let linkHref = document.createAttribute('href');
      linkHref.value = 'https://unpkg.com/element-ui/lib/theme-chalk/index.css';
      link.setAttributeNode(linkAttr);
      link.setAttributeNode(linkHref);
      document.getElementsByTagName('head')[0].appendChild(link);
    
      let left = 0;
      let top = 0;
      let mx = 0;
      let my = 0;
      let onDrag = false;
    
      var drag = {
        inserted: function(el) {
          (el.onmousedown = function(e) {
            left = el.offsetLeft;
            top = el.offsetTop;
            mx = e.clientX;
            my = e.clientY;
            if (my - top > 40) return;
    
            onDrag = true;
          }),
            (window.onmousemove = function(e) {
              if (onDrag) {
                let nx = e.clientX - mx + left;
                let ny = e.clientY - my + top;
                let width = el.clientWidth;
                let height = el.clientHeight;
                let bodyWidth = window.document.body.clientWidth;
                let bodyHeight = window.document.body.clientHeight;
    
                if (nx < 0) nx = 0;
                if (ny < 0) ny = 0;
    
                if (ny > bodyHeight - height && bodyHeight - height > 0) {
                  ny = bodyHeight - height;
                }
    
                if (nx > bodyWidth - width) {
                  nx = bodyWidth - width;
                }
    
                el.style.left = nx + 'px';
                el.style.top = ny + 'px';
              }
            }),
            (el.onmouseup = function(e) {
              if (onDrag) {
                onDrag = false;
              }
            });
        },
      };
    
      window.kz_vm = new Vue({
        el: '#appPlugin',
        directives: {
          drag: drag,
        },
        template: `
          <div class="float-page" ref="float" v-drag>
            <el-card class="box-card" :body-style="{ padding: '15px' }">
              <div slot="header" class="clearfix" style="cursor: move">
                <span>悬浮窗</span>
                <el-button style="float: right; padding: 3px 0" type="text" @click="toggle">{{ show ? '收起' : '展开'}}</el-button>
              </div>
              <transition name="ul">
                <div v-if="show" class="ul-box">
                  <span> {{user}} </span>
                </div>
              </transition>
            </el-card>
          </div>
          `,
        data: function() {
          return {
            show: true,
            list: [],
            user: {
              username: '',
              follow: 0,
              title: '',
              view: 0,
            },
          };
        },
        mounted() {},
        methods: {
          toggle() {
            this.show = !this.show;
          },
        },
      });
    }
    
    复制代码

    因为只能在js中编写vue组件,所以得用template模板,同时使用了directives,给组件添加了拖拽的功能(尤其是window.onmousemove,如果是元素绑定他自身的鼠标移动事件,那么拖拽鼠标将会十分卡顿),还使用了transition来进行缓慢动画效果其中注入的css代码如下

    .float-page {
      width: 400px;
      border-radius: 8px;
      position: fixed;
      left: 50%;
      top: 25%;
      z-index: 1000001;
    }
    
    .el-card__header {
      padding: 10px 15px !important
    }
    
    .ul-box {
      height: 200px;
      overflow: hidden;
    }
    
    .ul-enter-active,
    .ul-leave-active {
      transition: all 0.5s;
    }
    .ul-enter,
    .ul-leave-to {
      height: 0;
    }
    复制代码

    相关逻辑可自行观看,这里不在赘述了,并不复杂。

    也顺带是复习一下HTML中鼠标事件和vue自定义命令了

    功能实现

    主要功能

    • 检测视频页面,输出对应up主,关注数以及视频标题播放(参数过多就不一一显示了)

    • 监控关键词根据内容判断是否点赞,例如文本出现了下次一定,那么就点赞。

    输出相关信息

    这个其实只要接触过一丢丢爬虫的肯定都会知道如何实现,通过右键审查元素,像这样

    image-20210918104907148

    然后使用dom操作,选择对应的元素,输出便可

    > document.querySelector("#v_upinfo > div.up-info_right > div.name > a.username").innerText
    < '老番茄'
    复制代码

    当然使用JQuery效果也是一样的。后续我都会使用JQuery来进行操作

    在src/content-script/bilibili.js中写下如下代码

    window.onload = function() {
      console.log('加载完毕');
    
      function getInfo() {
        let username = $('#v_upinfo > div.up-info_right > div.name > a.username').text();
        let follow = $(`#v_upinfo > div.up-info_right > div.btn-panel > div.default-btn.follow-btn.btn-transition.b-gz.following > span > span > span`).text();
        let title = $(`#viewbox_report > h1 > span`).text();
        let view = $('#viewbox_report > div > span.view').attr('title');
    
        console.log(username, follow, title, view);
      }
      
      getInfo();
    };
    复制代码

    重新加载插件,然后输出查看结果

    加载完毕
    bilibili.js:19 老番茄 1606.0万 顶级画质 总播放数2368406
    复制代码

    这些数据肯定单纯的输出肯定是没什么作用的,要能显示到内嵌悬浮窗口,或者是popup页面上(甚至发送ajax请求到远程服务器上保存)

    对上面代码微改一下

    window.onload = function() {
      console.log('加载完毕');
    
      function getInfo() {
        let username = $('#v_upinfo > div.up-info_right > div.name > a.username').text().trim()
        let follow = $(`#v_upinfo > div.up-info_right > div.btn-panel > div.default-btn.follow-btn.btn-transition.b-gz.following > span > span > span`).text();
        let title = $(`#viewbox_report > h1 > span`).text();
        let view = $('#viewbox_report > div > span.view').attr('title');
    
        //console.log(username, follow, title, view);
        window.kz_vm.user = {
          username,
          follow,
          title,
          view,
        };
    
      }
      getInfo();
    };
    复制代码

    其中window.kz_vm是通过window.kz_vm = new Vue() 初始化的,方便我们操作vm对象,就需要通过jquery选择元素在添加属性了。如果你想的话也可以直接在content-script.js上编写代码,这样就无需使用window对象,但这样导致一些业务逻辑都堆在一个文件里,所以我习惯分成bilibili.js 然后注入方式为document_end,然后在操作dom元素吗,实现效果如下

    image-20210918110958104

    如果像显示到popup页面只需要通过页面通信就行了,不过前提得先popup打开才行,所以一般都是通过background来进行中转,一般来说很少 content –> popup(因为操作popup的前提都是popup要打开),相对更多的是content –> background 或 popup –> content

    content-script主动发消息给后台 我是小茗同学 - 博客园 (cnblogs.com)

    实现评论

    这边简单编写了一下页面,通过popup给content,让content输入评论内容,与点击发送,先看效果

    bilibili_comment

    同样的,找到对应元素位置

    // 评论文本框
    $('#comment > div > div.comment > div > div.comment-send > div.textarea-container > textarea').val("要回复的内容");
    // 评论按钮
    $('#comment > div > div.comment > div > div.comment-send > div.textarea-container > button').click();
    复制代码

    接着就是写页面通信的了,可以看到是popup向content发送请求

    window.onload = function() {
      console.log('content加载完毕');
    
      function comment() {
        chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
          let { cmd, message } = request;
          if (cmd === 'addComment') {
            $('#comment > div > div.comment > div > div.comment-send > div.textarea-container > textarea').val(message);
            $('#comment > div > div.comment > div > div.comment-send > div.textarea-container > button').click();
          }
      
          sendResponse('我收到了你的消息!');
        });
      }
      
      comment();
    };
    复制代码
    <template>
      <div>
        <el-container>
          <el-header height="24">B站小工具</el-header>
          <el-main>
            <el-row :gutter="5">
              <el-input
                type="textarea"
                :rows="2"
                placeholder="请输入内容"
                v-model="message"
                class="mb-5"
              >
              </el-input>
    
              <div>
                <el-button @click="addComment">评论</el-button>
              </div>
            </el-row>
          </el-main>
        </el-container>
      </div>
    </template>
    
    <script>
    export default {
      name: 'App',
      data() {
        return {
          message: '',
          list: [],
          open: false,
        }
      },
      created() {
        chrome.storage.sync.get('list', (obj) => {
          this.list = obj['list']
        })
      },
      mounted() {
        chrome.runtime.onMessage.addListener(function (
          request,
          sender,
          sendResponse
        ) {
          console.log('收到来自content-script的消息:')
          console.log(request, sender, sendResponse)
          sendResponse('我是后台,我已收到你的消息:' + JSON.stringify(request))
        })
      },
      methods: {
        sendMessageToContentScript(message, callback) {
          chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
            chrome.tabs.sendMessage(tabs[0].id, message, function (response) {
              if (callback) callback(response)
            })
          })
        },
        addComment() {
          this.sendMessageToContentScript(
            { cmd: 'addComment', message: this.message },
            function () {
              console.log('来自content的回复:' + response)
            }
          )
        },
      },
    }
    </script>
    复制代码

    代码就不解读了,调用sendMessageToContentScript方法即可。相关源码可自行下载查看

    实现类似点赞功能也是同理的。

    整体体验

    当时写Chrome插件的效率不能说慢,反正不快就是了,像一些tips,都得自行封装。用过Vue的都知道写网页很方便,写Chrome插件未尝不是编写一个网页,当时的我在接触了Vue后就萌发了使用vue来编写Chrome的想法,当然肯定不止我一个这么想过,所以我在github上就能搜索到相应的源码,于是就有了这篇文章。

    如果有涉及到爬取数据相关的,我肯定是首选使用HTTP协议,如果在搞不定我会选择使用puppeteerjs,不过Chrome插件主要还是增强页面功能的,可以实现原本页面不具备的功能。

    本文仅仅只是初步体验,简单编写了个小项目,后期有可能会实现一个百度网盘一键填写提取码,Js自吐Hooke相关的。(原本是打算做pdd商家自动回复的,客户说要用客户端而不是网页端(客户端可以多号登陆),无奈,这篇博客就拿B站来演示了)

    展开全文
  • 给大家推荐一个基于Vue比较好用的验证码插件vue2-verify。但是大家要注意一点,单纯前端的验证是不安全的,因为可以直接通过接口请求。下面雷雪松就详细的给大家介绍一下基于Vue的验证码插件vue2-verify。1、vue2-...
  • Vue入门、插件安装

    2020-12-21 11:15:02
    javascript技术文章开发Vue入门、插件安装 一、Vue1、什么是Vue?(1)官网地址: https://cn.vuejs.org/(2)Vue是一个渐进式的JavaScript框架。采用自底向上增量开发的设计。可以简单的理解为Vue是一个不断的去完善...
  • vue3-composition-admin 是一个管理端模板解决方案,它是基于vue3,ts和element-plus,项目都是以composition api风格编写。   演示地址:https://admin-tmpl.rencaiyoujia.com/ github地址:...
  • 要把协议也写上去: http://www.baidu.com 请查看"http://“是否书写有问题 是否写成了"http:”(忘记加两个反斜杠)
  • vue发起请求的三种方式

    千次阅读 2021-01-19 16:54:43
    GitHub搜索: vue-resource(vue官方提供的一个插件) :安装(终端) (–save 方便别人使用你的项目) npm install vue-resource --save cnpm install vue-resource --save 区别就是国内的淘宝镜像 安装成功可...
  • 什么是vue.js插件

    2021-06-19 04:23:38
    什么是vue.js插件Vue.js 插件是用Vue.js开发的一些工具,我们在调用时只需要用很少的代码就能实现很好的效果,便于后期维护和提高开发效率。Vue.js 插件是为应用添加全局功能的一种强大而且简单的方式。开发插件...
  • Vue发送网络请求

    2021-02-20 08:46:12
    1.发送网络请求的方式 1.1传统的Ajax是基于XMLHttpRequest(XHR) 为什么要用它呢? .非常好解释,配置和调用方式等非常混乱 .编码起来看起来就非常不好 .所以真实开发中很少直接使用,而是使用jQuery-Ajax 1.2JQuery-...
  • 场景: vue中在与后端进行数据交互时,使用axios发送请求,不做配置直接使用get请求传递数组类型参数的时候,后端是无法接收数据的,需要对axios一些简单的配置才能让后端完美的接收数组 let params = ['2021715','...
  • 本发明涉及前端开发领域,具体是一种以vue为基础框架,利用http和websocket实现获取数据,数据和视图自动更新的方法。背景技术::随着网页技术的发展,web前端不再在只有显示视图的功能,尤其在es6和node以及...
  • vue如何封装请求接口方法

    千次阅读 2021-01-27 14:16:04
    //引入axios和qs插件 import axios from 'axios' import qs from 'qs' //创建一个类并导出 export const Server= new class { constructor() { //请求接口路径 this.loginApi= '/v1/user/getuserinfo
  • vue-resouce设置请求头的三种方法

    千次阅读 2020-12-29 17:48:46
    vue-resouce设置请求头的三种方法本文主要介绍了vue-resouce设置请求头的三种方法,分享给大家,具体如下:第一种:在Vue实例中设置var vm = new Vue({el:'#rrapp',data:{showList: true,title: null},...
  • dsoframer 使用笔记dsoframer是微软提供一款开源的用于在线编辑.调用Word.Excel.PowerPoint等...net学习之Session、Cookie、手写Ajax代码以及请求流程1.IIS 7 以上版本集成了两种模式,一种是经典模式,一种是集成模式...
  • 请求数据的方式:vue-resource 官方提供的 vue的一个插件axiosfetch-jsonp一,vue-resource请求数据介绍:vue-resource请求数据方式是官方提供的一个插件使用步骤:1、安装vue-resource模块cnpm install vue-...
  • vue 发送ajax请求

    2020-12-24 10:49:19
    一、 简介1、vue本身不支持发送AJAX请求,需要使用vue-resource(vue1.0版本)、axios(vue2.0版本)等插件实现2、axios是一个基于Promise的HTTP请求客户端,用来发送请求,也是vue2.0官方推荐的,同时不再对vue-...
  • 本文给出在vue.js里如何使用cordova的插件完成调取相机及图库,并完成图片上传的操作。具体的操作步骤如下第一步:在cordova项目下安装cordova-plugin-camera插件cordova plugin add cordova-plugin-camera第二步:...
  • 如何编写Vue插件

    2021-11-18 23:43:29
    Vue框架中,如果需要给Vue增加一些我们需要的功能,Vue给我留了一个插件的方式,我们可以编写自己的插件,然后在Vue中去注册插件,然后去使用他。 通过Vue插件我们可以实现一些Vue框架没有的功能,也可以使用别人...
  • vue-cli api请求

    2020-12-24 04:00:46
    vue-cli3 之【框架搭建】教程或许有的同学还不知道vue3.0与之前的版本有哪些好处,可以查查相关资料。主要改动是优化了节点,减少了无谓的遍历,优化速度提升了约6倍!那么vue-cli3.0框架与之前cli2.0又有了一些变化...
  • 前言: vue中在与后端进行数据交互时,使用axios发送请求,不做配置直接使用get请求传递数组类型参数的时候,后端是无法接收数据的,需要对axios一些简单的配置才能让后端完美的接收数组1、问题示例代码let params = ...
  • vue-resource 是一个用来发送 XMLHttpRequest 请求Vue 插件,它的功能和 jQuery 中的 $.ajax 差不多。有了 vue-resource,简单的 AJAX 请求就不需要手动封装了。安装这里使用 npm 安装,在项目目录中输入:npm ...
  • 最全Vue扩展插件

    2021-03-21 16:46:36
    Vue扩展插件 1.Vue-cli:Vue脚手架 2.Vue-resource(axios):ajax请求 3.Vue-router:路由 4.Vuex:状态管理 5.Vue-lazyload:图片懒加载 ...
  • Vue之两种插件处理ajax请求 一 axios插件处理ajax请求(推荐) 1 方式一处理get和post请求 语法 get语法一: axios({ method : "get", //请求方式 url : "请求路径?参数" //请求路径,如果带参数则 ?参数 })....
  • vue请求后台接口 方法

    2020-12-22 06:18:15
    ue不支持直接发送AJAX请求,需要使用vue-resource、axios等插件实现。一.使用axios发送AJAX请求:1.安装axios并引入:1)npm install axios -S(直接下载axios组件,下载完毕后axios.js就存放在node_modules\axios\...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 34,253
精华内容 13,701
关键字:

vue网络请求插件

vue 订阅