在vue-cli项目中模拟后台数据

一、使用mock模拟后台数据

1、安装

     npm install  mockjs -S

2、在项目建立相应文件

3、img.json文件的代码如下：

{
   "img": [
       {
           "url": "http://pic15.nipic.com/20110628/1369025_192645024000_2.jpg"
       },
       {
           "url": "http://k.zol-img.com.cn/sjbbs/7692/a7691515_s.jpg"
       },
       {
           "url": "http://pic37.nipic.com/20140113/8800276_184927469000_2.png"
       },
       {
           "url": "http://pic29.nipic.com/20130530/12174133_162640398000_2.jpg"
       },
       {
           "url": "http://pic37.nipic.com/20140110/17563091_221827492154_2.jpg"
       },
       {
           "url": "http://b.hiphotos.baidu.com/lvpics/w=1000/sign=9b38971c908fa0ec7fc7600d16a758ee/c8ea15ce36d3d5394fe85aec3b87e950342ab0cc.jpg"
       },
       {
           "url": "http://pic40.nipic.com/20140412/18428321_144447597175_2.jpg"
       },
       {
           "url": "http://imgsrc.baidu.com/imgad/pic/item/72f082025aafa40f7f284840a164034f79f01944.jpg"
       },
       {
           "url": "http://pic1.win4000.com/wallpaper/c/565bdafb046a5.jpg"
       },
       {
           "url": "http://pic1.win4000.com/wallpaper/2018-06-13/5b2079cbaa1ea.jpg"
       },
       {
           "url": "http://pic1.win4000.com/wallpaper/3/589ac4fd2341d.jpg"
       }
   ]
}

 4、mock.js代码如下：

const Mock = require("mockjs")

Mock.mock("/api/img","get",require("./json/img.json"))

5、在main.js添加一下代码

require('./mock/mock')

6、在App组件里面使用axios请求数据

export default {

name: 'App',

mounted(){

this.axios.get('/api/img')

.then(function(res){

console.log(res);

})

.catch(function(err){

//console.log(err);

})

}

}

说到使用axios请求数据，这里给大家说一下如何在vue-cli里面使用axios

两种方法，一种直接把axios挂载到vue构造函数的prototype属性上，组件中通过this.axios来拿到axios
第二种方法就是通过vue-axios来全局使用axios，组件中也是通过this.axios来拿到axios

第一种：

npm install axios -S

在main.js中添加：

import axios from 'axios'

Vue.prototype.axios = axios 

在组件中使用this.axios

第二种方法：

npm install vue-axios -S

在main.js中添加：

import  Vueaxios  from 'vue-axios'

Vue.use(Vueaxios,axios)

在组件中使用this.axios

 

二、在项目建立一个json文件，然后在webpack.dev.conf.js里面配置

          1、建立img1.json文件，代码和上面的img.json文件一样

          2、VUE开发请求本地数据的配置，早期的vue-lic下面有dev-server.js和dev-client.js两文件，请求本地数据在dev-server.js里配置，最新的vue-webpack-template 中已经去掉了dev-server.js和dev-client.js 改用webpack.dev.conf.js代替，所以 配置本地访问在webpack.dev.conf.js里配置即可。

           然后在webpack.dev.conf.js文件里面，在const portfinder = require('portfinder')下面添加以下代码：

const express = require("express")

const imgdata = require("../img1.json")

const img = imgdata.img

const app = express()

const Routers = express.Router()

app.use("/api",Routers)

然后找到devServe，在里面添加以下代码：

before(app){

app.get("/api/img1",function(req,res){

res.json({

errno: 0,

data: img

});

})

}

最后保存webpack.dev.conf.js文件

       3、在App组件里面请求数据，代码如下面所示：

mounted(){

this.axios.get('/api/img1')

.then(function(res){

console.log(res);

})

.catch(function(err){

console.log(err);

})

}