前言

vue中请求本地数据

小心:网络海人民广播电视台湾大学课程说要求在build目录下的dev-server.js文件中配备,但如今新星的vue-cli是尚未dev-server.js这几个文件的,因为已经被统1到webpack.dev.conf.js文件中,所以平素在该公文中布局就能够

一.修改webpack.dev.conf.js配置(用express)(只引进json文件,恐怕在陈设中一向用mock.js)

VUE开拓请求本地数据的安顿,旧版本dev-server.js,新本子webpack.dev.conf.js

在此文件中加进:

var appData = require('../data.json')//加载本地数据文件
var seller = appData.seller//获取对应的本地数据
var ratings = appData.ratings

上面包车型客车第二行是引进json数据所在的地方,第一和第二行是独家得到相应的数额。

data.json一般位于index同级下,自感觉能够献身别的地点,此时也就率先行有相应的路径对应。

//data.json
{
  "seller": {
    "name": "粥品香坊(回龙观)",
    "description": "蜂鸟专送",
    "deliveryTime": 38,
    "score": 4.2,
    "serviceScore": 4.1,
    "supports": [
      {
        "type": 0,
        "description": "在线支付满28减5"
      },
      {
        "type": 1,
        "description": "VC无限橙果汁全场8折"
      }
    ],
    "infos": [
      "该商家支持发票,请下单写好发票抬头",
      "品类:其他菜系,包子粥店",
      "北京市昌平区回龙观西大街龙观置业大厦底商B座102单元1340",
      "营业时间:10:00-20:30"
    ]
  },
  "ratings":{
      "id":1,"name":"wangzi","age":24
  },
  "goods":[
       {"id":1,"name":"wangzi","age":24},
       {"id":2,"name":"lisi","age":44},
       {"id":3,"name":"zhangsan","age":22}
  ]
}

上述json文件中,有叁组数据,seller、rating、goods,那都得以在webpack.dev.conf.js中引进使用

再就是在webpack.dev.conf.js中,须要做那样的陈设才可在别的文件中开始展览呼吁,在devServer最终扩张上边的代码:

before(app) {
    app.get('/api/seller', (req, res) => {
        res.json({
          errno: 0,
          data: seller
        })//接口返回json数据,上面配置的数据seller就赋值给data请求后调用
    }),
    app.get('/api/goods', (req, res) => {
        res.json({
          errno: 0,
          data: goods
        })
    }),
    app.get('/api/ratings', (req, res) => {
        res.json({
          errno: 0,
          data: ratings
        })
    })
}

这里就贯彻了get请求,在浏览器框口输入http://localhost:8080/api/seller
就能够看出json数据了。
要实现post请求:

app.post('/api/foods', function (req, res) { // 注意这里改为post就可以了
  res.json({
    errno: 0,
    data: foods
  });
})

只顾每一遍退换配置后,都不可能不再度开动,npm run dev

步骤

补给:假如大家不从引进外部的json文件,直接用mock.js生成数据。

可以在webpack.dev.conf.js文件中:

var Mock = require('mockjs');

下一场在底下的before这里就成:

before(app){
    app.get('/api/s1', (req, res) => {
        res.json(Mock.mock({
            "status": 200,
            "data|1-9": [{
                "name|5-8": /[a-zA-Z]/,
                "id|+1": 1,
                "value|0-500": 20
            }]
        }))
    })
}

壹律能够用下边包车型大巴主意请求。

在文书中,则足以拓展对此接口数据进行呼吁,请求格局此处列举三个:
均能够在network中开始展览查看

  • 使用es6增加的fetch请求:

methods: {
    getPrice () {
        fetch('/api/seller')
        .then(response => response.json())
        .then(function(datas){
            console.log(datas);
        })
    },
    postRatings (){
        fetch('/api/goods',{method:'post'})
        .then(response => response.json())
        .then(function(datas){
            console.log(datas);
        })
       }
    },
created () {
  this.getPrice(),
  this.postRatings()
}
  • 经过vue-resource插件中的this.$http.get(‘url’).then()获取

methods: {
    getRatings (){
        // 这个需要vue-resource插件
        this.$http.get('/api/ratings')
        .then((res) => {
            console.log(res)
            console.log(res.body);//获取数据
        })
     },
     postR (){
        this.$http.post('/api/goods')
        .then((res) => {
            console.log(res)
            console.log(res.body);//获取数据
        })
     },
},
created () {
  this.getRatings(),
  this.postR()
}
  • vue-resource在贰.0后头不再更新,所以利用axios来开展呼吁:

一、在根目录新建2个mock文件夹用于存在全数用于数据测试的.json文件

此间扩充vue-resource插件使用:

在Vue一.0的时候有2个法定推荐的 ajax 插件 vue-resource,可是自从 Vue
更新到 二.0 之后,官方就不再更新 vue-resource。

一.设置vue-resource到项目中,找到当前项目

npm install vue-resource --save

二.设置收尾后,在main.js中程导弹入,如下所示:

import  VueResource  from 'vue-resource'

Vue.use(VueResource) 

谈谈Vue.js——vue-resource全攻略

支持的HTTP方法

vue-resource的伏乞API是依照REST风格设计的,它提供了七种请求API:

  • get(url, [options])
  • head(url, [options])
  • delete(url, [options]永利开户送38元体验金,)
  • jsonp(url, [options])
  • post(url, [body], [options])
  • put(url, [body], [options])
  • patch(url, [body], [options])

除开jsonp以外,其它多种的API名称是正经的HTTP方法。当服务端使用REST
API时,客户端的编码风格和服务端的编码风格类似同样,那能够减小前端和后端开辟职员的联络花费。

客户端请求方法 服务端管理方法

  • this.$http.get(…) Getxxx
  • this.$http.post(…) Postxxx
  • this.$http.put(…) Putxxx
  • this.$http.delete(…) Deletexxx

永利开户送38元体验金 1

这里增添使用axios的行使办法

vue二.0体系实战(3)使用axios发送请求
安装:

npm install axios

axios并不是插件,所以没有须要采用Vue.use(),而是在如什么地方方选取时引用就能够;
参考vue二.0种类实战(三)使用axios发送请求

下面是本人的莫过于进行结果,代码已经上传,可参看github上代码
(刚起首由于小编在测试学习进度中使用了vue-resource,所以$http已经侵夺,所以在main.js中加进的原型链一直十分小概运用,获得了以下的代码可行)

//home.vue

<script>
    import axios from 'axios'
    export default{
        methods:{
            getpostAxios (){
                axios.get('/api/ratings')
                .then(res => {
                    console.log(res.data);
                })
                axios.post('./api/goods',
                {
                    data:1,
                    params:233
                })
                .then(res => {
                    console.log(11111);
                    console.log(res.data);
                })
            },
            axiosAllTest (){
                function getUserAccount() {
                    return axios.get('/api/seller')
                        .then(res => {
                            console.log(2222);
                            console.log(res);
                        })
                }
                function getUserPermissions() {
                  return axios.get('/api/ratings')
                    .then(res => {
                        console.log(333333);
                        console.log(res);
                    })

                }
                axios.all([getUserAccount(), getUserPermissions()])
                .then(axios.spread(function (acct, perms){
                    //两个请求现已完成
                    console.log(acct);//undefined
                    console.log(perms);//undefined
                    console.log('complete');
                }));
            }

        },
        created (){
            this.getpostAxios();
            this.axiosAllTest();
        }
    }

</script>

率先供给引进axios:

import axios from 'axios'

末尾使用的正是

  • axios.request(config)
  • axios.get(url [,config])
  • axios.delete(url [,config])
  • axios.head(url [,config])
  • axios.post(url [,data [,config]])
  • axios.put(url [,data [,config]])
  • axios.patch(url [,data [,config]])

而小说壹开端所说的在main.js中加多原型链也可用(幸免重复,作者使用了$http一):

import axios from 'axios'
Vue.prototype.$http1 = axios

//entity.vue中
methods:{
    getData(){
        console.log(this);
        this.$http1.get('/api/seller')
        .then(function (response) {
            console.log(1123);
            console.log(response.data);
        })
        .catch(function (error) {
            console.log(error);
        });
    }
},
created (){
    this.getData();
}

永利开户送38元体验金 2

WX20180226-163852@2x.png

这边想提示本身,this就针对vue。

能够封装axio方法:

import axios from 'axios'
class MlTools {
    /**
     * 封装全局ajax
     * @param param
     */
    static ajax(param) {
        if (param.type === 'post') {
            axios({
                method: 'post',
                url: param.url,
                data:param.data
            }).then((res) => {
                const result = typeof(res.data) =='object' ? res.data : JSON.parse(res.data);
                param.success(result);
            }, (err) => {
                const error = typeof(err.data) =='object' ? err.data : JSON.parse(err.data);
                param.error(error.message);
            })
        } else if (param.type === 'get') {
            axios({
                method: 'get',
                url:param.url
            }).then((res) => {
                const result = typeof(res.data) =='object' ? res.data : JSON.parse(res.data);
                param.success(result);
            }, (err) => {
                const error = typeof(err.data) =='object' ? err.data : JSON.parse(err.data);
                param.error(error);
            })
        }
    }
}

export default MlTools;

诸如此类使用起来就和$.ajax同样了,同时也足以在vue中引进jqu’ery插件那样就可以运用$.ajax了。

dir.png

增加补充:express起后台服务,与mock.js生成数据

创建mockexpress.js文件:

var Mock = require('mockjs');
var express = require('express');

let app = express();

app.listen('8090');
app.all('/api1/tests', function(req, res) {
    res.json(Mock.mock({
        "status": 200,
        "data|5": [{
            "name|5-8": /[a-zA-Z]/,
            "id|+1": 1,
            "value|0-500": 20
        }]
    }));
});

那儿命令行中node mockexpress.js,然后便能够在http://localhost:8090/api1/tests便足以赢得扭转的数目

接下来在大家的前端项目中接纳:
率先要解决跨域难题,使用代理,vue-cli已经写好了在config/index.js中写代理:

proxyTable: {
        '/api1/':{
            target:'http://localhost:8090',
            changeOrigin:true,
        }
    },

然后还要运维前端服务和后端数据服务,如此改造package.json中的script。

"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js  & node src/common/Mock/Mockexpress.js",

npm run dev就能够运维,并得以开始展览呼吁数据管理。

posts.json

2.使用json server 搭建mock服务器

可参考vue-cli
本地开辟mock数据采用情势

率先安装json-server(注意全局安装,mac上要增进sudo)

npm install -g json-server

随着项目目录下创办mock文件夹,在文书夹中制造db.json和mock-test.js,还也许有将兼具post请求转为get请求的post-to-get.js

其中db.json中存放json数据:

{
  "posts": [
    { "id": 1, "title": "json-server", "author": "typicode" }
  ],
  "comments": [
    { "id": 1, "body": "some comment", "postId": 1 }
  ],
  "profile": { "name": "typicode" }
}

对应的在package.json中在script中加进mock的运营项:

"mock": "json-server --watch mock/db.json",
"mockdev": "npm run mock & npm run dev"

第三句的乐趣是监测路线mock/db.json,如此就足以在此地退换文件存放地点以及文件名字了。
第二句是为了mock起的服务和vue命令服务同不经常候运转。

下一场在命令行中:

npm run mock

那会儿在浏览器中开荒http://localhost:3000/可得到

永利开户送38元体验金 3

1651860-349bfc482aba7065.png

那时候得以独家走访:http://localhost:3000/posts,http://localhost:3000/comments,http://localhost:3000/profile
即重临数据

文章中利用fake.js制作数据的,而大家早就对mock.js熟稔了,所以采用mock.js来产生多少个假数据:
日前已经应用npm install mock安装了mock.js,则

//mock-test.js
module.exports = function () {
    let Mock=require('mockjs');

    var bd = Mock.mock({
        'bodyData|15':[
           {   
               'id|+1':1,
               'methods|1':["火车频次战法","飞机频次战法","汽车频次战法"],
               'hasContent|1-2':true
           }]
    });


    return{
        tasklists:bd
    }
}

可以在命令行中使用json-server
mock/mock-test.js来运行这些服务,然后就足以经过http://localhost:3000/tasklists来拜访数据

要是使用的是那几个数额,那么在package.json中的script中的mock项可以修改为:

"mock":"json-server --watch mock/mock-test.js"

在支付进度中,不时候想直接模拟获取POST请求再次来到结果,能够增加 express
中间件 将POST请求转为GET请求
在mock文件夹下生成post-to-get.js文件:

module.exports = function (req, res, next) {
  req.method = "GET";
  next();
}

那会儿安插项可更动为:

"mock": "json-server --watch mock/db.json --m mock/post-to-get.js",
{
 "code": 200,
 "data": [
 {
  "id": 0,
  "title": "复联3大陆定档5月11日,全球最晚!!"
 },
 {
  "id": 1,
  "title": "蚁人2最新预告发布,首次展现量子领域!!"
 }
 ]
}

上边说一下代理,接口写好了,那么哪些请求呢?

在 config/index.js 的 proxyTable 将呼吁映射到
http://localhost:3000

proxyTable: {
    '/api1/':{
        target:'http://localhost:3000',
        changeOrigin:true,
        pathRewrite:{
            '^/api1':''
        }
    }
},

在组件中进行呼吁:

methods:{
    mockReq (){
        axios.get('/api1/posts')
        .then(res => {
            console.log('mock server');
            console.log(res.data);
        })
        axios.post('/api1/comments')
        .then(res => {
            console.log('mock server1');
            console.log(res.data);
        })
        axios.get('/api1/tasklists')
        .then(res => {
            console.log('mock server2');
            console.log(res.data);
        })
    }

},
created (){
    this.mockReq();
}

启动:

npm run mockdev

假定配置到db.json时前多个请求就成功,假使配置到mock-test.js第三个请求正是马到功成的。


users.json

3. 纯前端请求根目录的地面数据

一经我们只为了简单的演练前端开荒,数据也可以有前端提供,不牵扯后端服务,那么创设文件mockData.js

import Mock from 'mockjs';

Mock.mock('/lists','get',function(){
    var lists = Mock.mock({
        "result|15":[
            {
                "id|+1":1,
                "title|1":['科目二第07考点马路','科目二第01考点马路','科目二第08考点马路','科目二第09考点'],
                "desc|0-1":'@county(true)'
            }
        ]
    })

    return {
        lists
    }
})

在main.js中:

require('./assets/mock.js');
//完整点可以使用:
//开发环境加载mock数据
if(process.env.NODE_ENV == 'development'){
    require('./assets/mock.js');
}

下一场在须求的地点进行呼吁就足以了。

mockData(){
    let self = this;
     axios.get('/lists')
     .then(res => {
        console.log(res.data);
        self.examinationLists = res.data.lists.result;
     })
},

切注意请求后的this的针对性,假使想退换vue中的数据,那么早晚要从头将this先赋给其他然后再用。

{
 "code": 200,
 "data": [
 {
  "id": 0,
  "nickname": "美国队长",
  "avatar": "url"
 },
 {
  "id": 1,
  "nickname": "惊奇队长",
  "avatar": "url"
 }
 ]
}

二、在build目录下找到webpack.dev.conf.js文件,编写以下代码

// mock code
const express = require('express')
const app = express()
const posts = require('../mock/posts.json') // 文章列表数据源
const users = require('../mock/users.json') // 用户列表数据源
const routes = express.Router()
app.use('/api', routes)

// 如果是post请求,那么将get改为post即可
devServer: {
 ...
 before(app){
 app.get('/api/posts', (req, res) => {
  res.json(posts)
 })
 app.get('/api/users', (req, res) => {
  res.json(users)
 })
 }
}

测试,浏览器输入

永利开户送38元体验金 4

posts.json

三、使用第贰方http请求库axios进行ajax请求

命令行安装 npm install axios --save-dev,然后在/src/main.js使用axios

import axios from 'axios'
Vue.prototype.$http = axios

一成不改变请求代码(users同理)

created() {
 this.$http.get("http://localhost:8080/api/posts").then(res => {
 console.log(res.data)
 })
}

永利开户送38元体验金 5

mock.png

如上正是本文的全体内容,希望对大家的学习抱有帮忙,也希望大家多多帮忙脚本之家。

你大概感兴趣的篇章:

  • vue-cli项目中怎么选择mock数据
  • 详解vue-cli
    本地开拓mock数据采取方式

相关文章