Vue-cli2はajaxをカプセル化します(jquery)

1.最初にjqueryをインストールします

cnpm install jquery --save-dev

2.webpack.base.confを構成します

   2.1webpack.base.conf.jsファイルを見つけます。このファイルパスは、ルートディレクトリのbuild-> webpack.base.conf.jsです。

   構成コードは次のとおりです

 

const webpack = require('webpack')

 

    plugins: [
    new webpack.ProvidePlugin({  //引入Jquery
      $: 'jquery',
      jQuery: 'jquery',
      'window.jQuery':'jquery'
    })
  ]

3.main.jsのVueコンストラクターにマウントします

Vue.prototype.http = http

これは、プロジェクトをグローバルに利用できるようにするためです。

4.config.jsファイルを作成します

目的は、uriを均一に管理することです。変数をエクスポートするには、デフォルトのエクスポートを使用することを忘れないでください。

5. http.jsファイルを作成し、ajaxメソッドをカプセル化します

import config from './config.js'   //导入config.js文件里的变量

function ajax(url,info,cellback){
  info = JSON.stringify(info);
  $.ajax({
      url:config.url,
      type: "post",
      async: true,
      data: {
        ums_appId: config.ums_appId,
         ums_operUrl:`${config.ums_operUrl}${url}`,
         ums_SESSIONID: "",
         json: info
      },
      success:function(res){
        cellback(res)
      }
  })
}

export default {ajax}   //导出ajax方法

6.インターフェースを要求する必要のあるファイルでメソッドを呼び出す前に、コンストラクターでメソッドを呼び出します

   this.http.ajax('SearchData',data,(res)=>{
        console.log(res)
    })

   SearchDataインターフェース名dataはパラメーターですresは返されるデータです

おすすめ

転載: blog.csdn.net/qq_36818077/article/details/93849714