node+mock模拟接口传递数据实现前后端分离

1、问题:目前公司的开发模式是后端写接口,然后前端写页面,等前端页面写完了再对后端接口,与后端联调实现功能,这就导致跟后端对接接口联调的时候太累了,耦合太紧,交流半天才解决一丢丢问题,前端改的时候后端闲着,后端改的时候前端闲着的,沟通成本太高,效率太低下,在我看来这并不是真正意义上的前后端分离,需要前后端解耦。

2、解决(因公司问题尚未解决):在项目初期前后端一起根据需求编写接口文档,使接口符合逻辑,等接口文档出来后,前后端分离,后端根据接口文档编写后端接口并自己调通,前端则根据接口文档配置模拟数据来写页面实现功能,到最后前后端把各自项目打包放上服务器测试,谁的错谁改。

3、前端实现node+mock模拟接口:

创建一个文件夹并初始化

npm init -y

安装需要用到的依赖

express 创建极简的web框架
npm install express
mockjs 创建出需要的模拟数据
npm install mockjs
body-parser 用于处理post请求中请求体的数据
npm install body-parser

新建一个app.js文件,写入以下代码

复制代码
// 引入express模块
var express = require('express')
// 处理post提交参数
var bodyParser = require('body-parser')
//引入mock数据
var Mock = require('mockjs')
// 调用express方法
var app = express()
// 路由----> 程序  初始路径
app.get('/', function (req, res) {
    res.send({ message: '服务已成功开启!' })
})
// 处理传输的post数据格式
app.use(bodyParser.json())
app.use(
    bodyParser.urlencoded({
        extended: false, //拓展模式
        limit: 2 * 1024 * 1024 //限制2m
    })
)
//接口
app.post('/data', function (req, res) {
    res.send({
        ...Mock.mock({
            result: {
                'list|10-60': [
                    {
                        id: '@increment(1)',
                        title: '@ctitle',
                        content: '@cparagraph',
                        add_time: '@date(yyyy-MM-dd hh:mm:ss)'
                    }
                ],
                'total|60-120': 120
            },
            code: 200
        })
    })
})

// 监听服务地址
app.listen(8090, function () {
    console.log('开启服务成功!')
})
复制代码

在终端启动app.js服务

node app.js

在其他地方调用接口(两种方式)

http://127.0.0.1:8090/data
http://localhost:8090/data

就可以看到接口调用成功并返回需要的模拟数据

 

 

 

posted @   Pavetr  阅读(446)  评论(0编辑  收藏  举报
编辑推荐:
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
阅读排行:
· winform 绘制太阳,地球,月球 运作规律
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· Manus的开源复刻OpenManus初探
· 写一个简单的SQL生成工具
· AI 智能体引爆开源社区「GitHub 热点速览」
点击右上角即可分享
微信分享提示