在uniapp的项目里面,怎么写入模拟接口数据?现在使用node服务实现几个模拟接口,当然是用mock也是可以的哦,方法有很多种,目的只有一个,就是能够娴熟的应用在项目场景里面。
1:json数据 写在data底下的js里面
json.js
let data = {
//这里放数据
"categories": [
"1",
"2",
"3",
"4",
"5",
"6",
"7",
"8",
"9",
"10",
"11",
"12"
],
"data": [
3,
2,
4,
4,
5
]
}
module.exports = {
data: data
}
json1.js
let data = {
"echatX": [
"2019-07-02",
"2019-07-03",
"2019-07-04",
"2019-07-05",
"2019-07-06",
"2019-07-07",
"2019-07-08",
"2019-07-09",
"2019-07-10",
"2019-07-11",
"2019-07-12",
"2019-07-13",
"2019-07-14",
"2019-07-15"
],
"echatY": [
120,121,123,123,125,127,128,129,120,123,122,126,129,122
],
"echatY2": [
60,64,63,63,65,67,68,69,61,66,65,68,69,65
],
"echatY3": [
60,64,63,63,65,67,68,69,161,66,65,68,169,165
]
}
module.exports = {
data: data
}
json3.js
let data = {
"first":[
{"name":"王小婷","nick":"祈澈菇凉"},
{"name":"安安","nick":"坏兔子"},
{"name":"编程微刊","nick":"简书"}
]
}
module.exports = {
data: data
}
以上是自己随意造的数据啊不要过于在意了
2:在项目底下新建一个server文件夹,用来写我的node服务。
server.js
const http = require("http");
const data = require("../data/json");
const data2 = require("../data/json1");
const data3 = require("../data/json3");
const server = http.createServer((req, res) => {
//解决跨域问题
res.setHeader('Access-Control-Allow-Origin', '*');
res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild');
res.setHeader('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE, OPTIONS');
res.writeHead(200, {
'Content-Type': 'application/json'
});
if(req.url === '/'){
res.end(JSON.stringify(data.data))
}
if(req.url === '/data'){
res.end(JSON.stringify(data2.data))
}
if(req.url === '/data3'){
res.end(JSON.stringify(data3.data))
}
});
server.listen(3000, () => {
console.log("server is running!")
})
3:运行 在编辑器的内置终端里面,进入文件夹server,启动刚刚写的服务
cd server
$ node --inspect server.js
4:打开浏览器,就可以看到模拟接口实现啦 http://localhost:3000/
5:测试一下,就用这个接口吧http://localhost:3000/data3
<template>
<view>
<view class="uni-padding-wrap uni-common-mt" v-for="item in itemList">
<span>{{item.name}}</span>
<span>{{item.nick}}</span>
</view>
</view>
</template>
<script>
export default {
data() {
return {
itemList: []
}
},
onLoad() {
this.getList();
},
methods: {
getList() {
uni.request({
url: 'http://localhost:3000/data3',
success: (res) => {
console.log(res.data);
this.itemList =res.data.first;
}
});
}
}
}
</script>
<style>
.img {
width: 500upx;
height: 500upx;
margin: 0 95upx;
}
</style>
好的,测试成功了,数据也可以显示啦