前端进行项目练习的时候,有时候需要使用数据,而一般数据都是后端所给的接口,对前端来说,没有数据,有时候不能正常的进行练习,如果用别人的接口,有可能会遇到别人的接口会崩掉的问题,所以为了方便自己的项目练习,获取所需要的数据,那么我们可以搭建一个简易的本地服务器。
这里我们简单模拟一个数据,用于测试,这里开启个端口号为8081的本地服务器,其他端口号如果没有被占用,可以是可以使用的,不一定是8081。
并且这里以一个可以自己模拟操作的分页数据,或者列表数据为例,展示
注意:如果没有安装express,可以先安装express
在终端打开,并输入一下:
npm i express
创建一个express实例并且使用
const express = require('express')
const app = express()
app.use(express.static(__dirname + '/static'))
接下来,我们写get请求
(假设获取轮播图数据)
app.get('/lunbo', (req, res) => {
res.send([{
id: 1,
img:"https://gw.alicdn.com/imgextra/i2/O1CN01ScdIoU25utjGlGgMY_!!6000000007587-2-tps-1218-558.png",
},{
id: 2,
img:"https://gw.alicdn.com/imgextra/i3/O1CN01sTvsZO1QXdMiErdjF_!!6000000001986-2-tps-1216-554.png",
}]
)
})
然后监听服务器
// 监听服务器
app.listen(8081, (err) => {
if (!err) console.log('服务器启动成功了!');
})
配置请求
const BASE_URL = 'http://localhost:8081'
export const myRequest = (options)=> {
return new Promise((resolve, reject) => {
uni.request({
url:BASE_URL+options.url,
method:options.method || 'GET',
data:options.data || {},
success:(res)=> {
if(res.statusCode !=200) {
return uni.showToast({
title:'获取数据失败!'
})
}
resolve(res)
},
fail:(err)=> {
uni.showToast({
title:'获取数据失败!'
})
reject(err)
}
})
})
}
当在浏览器访问到该地址时
http://localhost:8081/lunbo
会显示出数据 (证明我们访问成功了)
[{"id":1,"img":"https://gw.alicdn.com/imgextra/i2/O1CN01ScdIoU25utjGlGgMY_!!6000000007587-2-tps-1218-558.png"},{"id":2,"img":"https://gw.alicdn.com/imgextra/i3/O1CN01sTvsZO1QXdMiErdjF_!!6000000001986-2-tps-1216-554.png"}]
或者通过postman测试接口是否可以使用
(经过测试也是可以使用的)
如果需要需要指定返回第几页的数据,或者一页返回多少条数据,我们可以在请求接口地址时,随便把参数过去请求相应的数据
接下来到服务器代码里面写一下判断第几页,和请求第几页的业务逻辑
app.get('/getInfo', (req, res) => {
// 接收传过来的对象(里面有传过来的参数)
var object = {}
object = req.query
// 模拟一个数据库
var objects = [{id:1,name:233},{id:2,name:233},{id:3,name:233},{id:4,name:233},{id:5,name:233},
{id:6,name:233},{id:7,name:233},{id:8,name:233},{id:9,name:233},{id:10,name:233},{id:11,name:233}]
// 默认请求第一页
var page = 1
// 默认请求一页有2条数据
var pageSize = 2
// 判断传过来的page和pageSize是不是为undefined,如果不是再把传过来的参数赋值
if(object.page!=undefined){
// 因为传过来是一个字符串的格式,所以转化成数字类型
page = parseInt(object.page)
}
if(object.pageSize!=undefined){
pageSize = parseInt(object.pageSize)
}
// 从第几条条数据开始
var start = (page-1)*pageSize
// 用来存返回回来的数据
var pages = []
var j = 0
console.log(page);
console.log(pageSize);
for(var i = start;i<start+pageSize;i++){
pages[j] = objects[i]
j++
}
// 发送数据
res.send(pages)
})
然后监听服务器
// 监听服务器
app.listen(8081, (err) => {
if (!err) console.log('服务器启动成功了!');
})
我们在postman测试一下可不可以使用
因为我们设置了默认为第一页的数据,请求每页2条数据,所以返回第一条和第二条
我们再来试着访问第3页的数据,并且请求3条数据试试
成功访问,并且返回的是第三页的数据,而且这一页的数据返回了三条数据
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
以下是完整的代码,大家可以测试一下
const express = require('express')
const app = express()
// app.use(history())
app.use(express.static(__dirname + '/static'))
app.get('/lunbo', (req, res) => {
res.send([{
id: 1,
img:"https://gw.alicdn.com/imgextra/i2/O1CN01ScdIoU25utjGlGgMY_!!6000000007587-2-tps-1218-558.png",
},{
id: 2,
img:"https://gw.alicdn.com/imgextra/i3/O1CN01sTvsZO1QXdMiErdjF_!!6000000001986-2-tps-1216-554.png",
}]
)
})
app.get('/getInfo', (req, res) => {
var object = {}
object = req.query
var objects = [{id:1,name:233},{id:2,name:233},{id:3,name:233},{id:4,name:233},{id:5,name:233},
{id:6,name:233},{id:7,name:233},{id:8,name:233},{id:9,name:233},{id:10,name:233},{id:11,name:233}]
var page = 1
var pageSize = 2
if(object.page!=undefined){
page = parseInt(object.page)
}
if(object.pageSize!=undefined){
pageSize = parseInt(object.pageSize)
}
var start = (page-1)*pageSize
var pages = []
var j = 0
console.log(page);
console.log(pageSize);
for(var i = start;i<start+pageSize;i++){
pages[j] = objects[i]
j++
}
res.send(pages)
})
app.listen(8081, (err) => {
if (!err) console.log('服务器启动成功了!');
})
如果有错误可以提出来一起学习,毕竟个人的知识储备有限,见谅!