当前位置:首页 > CN2资讯 > 正文内容

javascript file 服务器文件 js本地服务器

11小时前CN2资讯


        前端进行项目练习的时候,有时候需要使用数据,而一般数据都是后端所给的接口,对前端来说,没有数据,有时候不能正常的进行练习,如果用别人的接口,有可能会遇到别人的接口会崩掉的问题,所以为了方便自己的项目练习,获取所需要的数据,那么我们可以搭建一个简易的本地服务器。

        这里我们简单模拟一个数据,用于测试,这里开启个端口号为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('服务器启动成功了!'); })

如果有错误可以提出来一起学习,毕竟个人的知识储备有限,见谅!

    你可能想看:

    扫描二维码推送至手机访问。

    版权声明:本文由皇冠云发布,如需转载请注明出处。

    本文链接:https://www.idchg.com/info/23625.html

    分享给朋友:

    “javascript file 服务器文件 js本地服务器” 的相关文章

    VPS重装系统的详细步骤与最佳实践

    在管理VPS时,有时会需要进行系统重装。VPS重装系统是指对虚拟专用服务器(Virtual Private Server)的操作系统进行全面重置和重新安装的过程。它可以帮助解决一些由于系统故障、配置错误或其他原因引发的问题。对于我来说,了解这一过程至关重要,可以让我更好地维护和管理我的服务器。 当我...

    RackNerd VPS服务测评:性价比高、稳定性强的主机商推荐

    在当今的网络世界中,选择合适的主机商显得尤为重要。我最近体验了RackNerd这家提供VPS服务的主机商,想和大家分享一些我的观点。RackNerd因其性价比高而广受好评,这让我在决定购买前进行了详细的测评。我会从多个角度来探讨RackNerd的各方面表现。 RackNerd不仅在价格上拥有明显优势...

    企业云计算的首选:Oracle Cloud VPS详解及其优势

    在现代企业日益依赖云计算的背景下,Oracle Cloud VPS(虚拟专用服务器)因其强大的功能和灵活的解决方案,成为了很多企业的热门选择。简单来说,Oracle Cloud VPS通过虚拟化技术将物理服务器划分成多个独立的虚拟服务器,为用户提供了一种安全、可靠且高效的云计算体验。在这里,我将为大...

    SSH Client Windows 登录指南:轻松配置与高级功能使用

    SSH 客户端在 Windows 中的概述 SSH,也就是安全外壳协议,是一种用来在网络中进行安全数据传输的协议。它确保数据的机密性和完整性,这对于网络管理员和开发者来说是至关重要的。在Windows中,SSH客户端直接关系到我们如何安全地登录到远程计算机。通过SSH,用户可以安全地执行命令、传输文...

    如何获取免费VPS服务无需信用卡:一站式指南

    在互联网时代,虚拟专用服务器(VPS)成为了很多开发者和企业的优选。VPS基本上是一个分隔的服务器环境,用户可以在其中安装操作系统和运行应用程序。它既拥有独立服务器的功能,又比共享主机更具经济性。对很多人来说,了解VPS的运行机制和它的适用场景是非常重要的。 免费VPS服务越来越受到关注。在预算有限...

    VPS硬盘清理:提升服务器性能的全面指南

    当我的VPS(虚拟专用服务器)磁盘满了时,事情往往会变得非常棘手。这不仅会导致应用程序的运行速度变慢,甚至可能引发系统崩溃或数据丢失。这样的状况让我不得不思考,定期进行硬盘清理的重要性。其实,维护良好的磁盘使用状况,对于确保服务器的整体性能至关重要。 首先,当VPS磁盘满了,系统的反应速度会明显下降...