一、vue-cli 2.0

1. 安装axios插件

npm指令:npm install axios --save

yarn指令:yarn add axios

2. 在组件中引入,可以在单个组件中引入,只请求该组件所需要的数据,也可以在父组件中引入,请求该父组件下所有子组件需要的数据

在mounted周期函数中执行方法A,方法A是在methods对象中定义的,该方法的功能是:让axios对象调用get()方法和then()方法,get方法是获取数据的地址url,then方法是对获取的数据进行处理,通过自定义方法B进行数据处理

3. 关于mock的假数据:

放在static文件夹下,因为src文件可以访问同级的static文件。

同时,开发环境下的url地址应该和线上环境下的url地址一样,我们要保证线上的代码是完全正确的,决不能再修改已经提交到master上的代码,那么我们需要做一个url的设置,当时开发环境的时候,加载本地模拟的数据,当时线上环境时,加载的就是服务器中的数据,且要保证url是线上地址。

4. 数据结构:

{
  "ret": true,
  "data": {
    "medicine": [
      {
        "id": "0001",
        "spell": "nanxin wanfeile",
        "name": "男性 万斐乐"
      },{
        "id": "0002",
        "spell": "nanxin jinge",
        "name": "男性 金戈"
      },{
        "id": "0003",
        "spell": "nanxin hexin",
        "name": "男性 和欣"
      },{
        "id": "0004",
        "spell": "nanxin wanaike",
        "name": "男性 万艾可"
      },{
        "id": "0005",
        "spell": "nanxin guilingji",
        "name": "男性 龟龄集30粒"
      },{
        "id": "0006",
        "spell": "nanxin suoyangbushenjiaonang",
        "name": "男性 锁阳补肾胶囊"
      },{
        "id": "0007",
        "spell": "nanxin nanbaojiaonang",
        "name": "男性 男宝胶囊30粒"
      },{
        "id": "0008",
        "spell": "nanxin yubiaobushenwan",
        "name": "男性 鱼鳔补肾丸"
      },{
        "id": "0009",
        "spell": "nanxin jinsuogujingwan",
        "name": "男性 金锁固精丸"
      },{
        "id": "00010",
        "spell": "nanxin shengjingpian",
        "name": "男性 生精片"
      }
    ]
  }
}

 二、vue-cli3.0

1. 新建文件:vue.config.js,该文件与package.json同级。vue.config.js 是一个可选的配置文件,如果项目的 (和 package.json 同级的) 根目录中存在这个文件,那么它会被 @vue/cli-service 自动加载。你也可以使用 package.json 中的 vue 字段,但是注意这种写法需要你严格遵照 JSON 的格式来写。

2. vue.config.js中的代码:

(1)通过required寻找数据路径,并将其引入。

(2)在devServe对象中设置端口port

(3)在DevServe对象中的before函数,参数为app,这是个对象,app调用get方法,意思是:当请求“/api/search”路径的时候,得到的是mockData的数据

const mockData = require("./mock/search.json");

module.exports = {
  //...  
  devServer: {
    port: 8080,
    before(app) {
      app.get("/api/search", (req, res) => {
        res.json(mockData);
      });
    }
  }
};

3. 组件中进行数据请求:

  created () {
    axios.get('/api/search').then(ref => {
      console.log(ref);
    })
  }

结果:

Logo

前往低代码交流专区

更多推荐