javascript file 服务器文件 js本地服务器
前端进行项目练习的时候,有时候需要使用数据,而一般数据都是后端所给的接口,对前端来说,没有数据,有时候不能正常的进行练习,如果用别人的接口,有可能会遇到别人的接口会崩掉的问题,所以为了方便自己的项目练习,获取所需要的数据,那么我们可以搭建一个简易的本地服务器。
这里我们简单模拟一个数据,用于测试,这里开启个端口号为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('服务器启动成功了!'); })如果有错误可以提出来一起学习,毕竟个人的知识储备有限,见谅!