1.将 data.json 文件拷贝到 sellapp 目录下（与 index.html 同级）
2.在 webpack.dev.conf.js 中添加以下代码：
在const portfinder = require(‘portfinder’)后添加 const express = require('express') const app = express() var appData = require('../mock/goods.json')//加载本地数据文件 var apiRoutes = express.Router() app.use('/api', apiRoutes)
var seller = appData.seller;
var goods = appData.goods;
var ratings = appData.ratings;
2、
//然后找到devServer,在里面添加
before(app) {
app.get('/api/seller', (req, res) => {
res.json({
errno: 0,
data: seller
})//接口返回json数据，上面配置的数据appData就赋值给data请求后调用
})
app.get('/api/goods', (req, res) => {
res.json({
errno: 0,
data: goods
})//接口返回json数据，上面配置的数据appData就赋值给data请求后调用
})
app.get('/api/ratings', (req, res) => {
res.json({
errno: 0,
data: ratings
})//接口返回json数据，上面配置的数据appData就赋值给data请求后调用
})
},
},
3、然后npm run dev，一定要重启 一下就可以http://localhost:8080/api/appData 访问了
注释:Google可以用 jsonview 插件将返回数据格式化
npm run dev，启动后输入http://localhost:8080/api/seller，如果数据正常显示，则数据能正常返回
easy-mock是比较好用的一个图形化的网站，我们完全可以使用他来模拟我们的Mock数据。 网址：https://www.easy-mock.com/
axios的引入
npm install --save axios
安装之后在要使用的页面组件中进行引入。 import axiso from 'axiso'
然后在created的声明周期里取得数据
created(){ axios({ url: 'https://www.easy-mock.com/mock/5ae2427800247c2aa1efe442/SmileVue/', method: 'get', }) .then(response => { console.log(response) }) .catch((error) => { }) }
//使用Mock
import Mock from 'mockjs'
export default Mock.mock(/getdata1/, 'get'/"post", {
success: true,
// 属性 list 的值是一个数组，其中含有 1 到 3 个元素
message: '@cparagraph',
'list|1-3': [{
// 属性 sid 是一个自增数，起始值为 1，每次增 1
'sid|+1': 1,
// 属性 userId 是一个5位的随机码
'userId|5': '',
// 属性 sex 是一个bool值
"sex|1-2": true,
// 属性 city对象 是对象值中2-4个的值
"city|2-4": {
"110000": "北京市",
"120000": "天津市",
"130000": "河北省",
"140000": "山西省"
},
//属性 grade 是数组当中的一个值
"grade|1": [
"1年级",
"2年级",
"3年级"
],
//属性 guid 是唯一机器码
'guid': '@guid',
//属性 id 是随机id
'id': '@id',
//属性 title 是一个随机长度的标题
'title': '@title()',
//属性 paragraph 是一个随机长度的段落
'paragraph': '@cparagraph',
//属性 image 是一个随机图片 参数分别为size, background, text
'image': "@image('200x100', '#FFC0CB', 'Hello')",
//属性 address 是一个随机地址
'address': '@county(true)',
//属性 date 是一个yyyy-MM-dd 的随机日期
'date': '@date("yyyy-MM-dd")',
//属性 time 是一个 size, background, text 的随机时间
'time': '@time("HH:mm:ss")',
//属性 url 是一个随机的url
'url': '@url',
//属性 email 是一个随机email
'email': '@email',
//属性 ip 是一个随机ip
'ip': '@ip',
//属性 regexp 是一个正则表达式匹配到的值 如aA1
'regexp': /[a-z][A-Z][0-9]/,
}]
})
app.js里面挂载我们的数据来进行中间件拦截
import React from 'react'; import Mock from './components/Mock'
//挂载 Mock import './mock/getdata.js'
import './mock/postdata.js'
getDate1 = () =>{ axios.get('/getdata1', { params:{ id : '123' } }) .then((res)=>{ console.log(res.data) this.setState({ gData: res.data.message }) }) .catch((err)=>{ console.log(err) }) }
getDate2 = () => { axios.post('/postdata1', { params: { name: 'jack' } }) .then((res)=>{ console.log(res.data) this.setState({ pData: res.data.message }) }) .catch((err)=>{ console.log(err) }) }
