利用express框架mock后台数据(模拟后台数据)


ps:(如果文章有任何错误,请大家谅解并指出。)

第一步、加载数据

将data.json文件复制到你的工程目录下,我这里的是mysell目录。模拟的数据请求是从data.json中读取数据,接下来就是编写这些接口

第二步、配置webpack.dev.conf.js

在vue 1.x版本中是在dev-server.js中配置数据地址请求,而在vue 2.x版本已经将dev-server删除了,改为在webpack.dev.conf.js里配置本地访问。这里我们使用express框架去写一个nodesever,也可以用express-router来编写这些接口请求

获取数据

获取data.json中的数据,再分别将商家,商品,评论数据写入变量中

const express = require('express')
const app = express()

const appData = require('../data.json')
const seller = appData.seller
const goods = appData.goods
const ratings = appData.ratings

const apiRouter = express.Router()
app.use('/api',apiRouter)

编写路由以及相应接口

调用get方法,传入seller、goods、ratings等接口,发送请求,请求服务端接受请求,返回给客户端一个json类型的数据(包括errno以及数据),其中 errno 是开发规范所有,当其值为0时,表示返回的数据正常,当遇到一些比如权限限制时,errno 可能不为0,具体值是由也业务方规定的。因为本次项目使用的是模拟数据,所以 errno 一定为0。

before(app) {
      app.get('/api/seller', (req, res) => {
        res.json({
          errno: 0,
          data: seller
        })
      }), 
        app.get('/api/goods', (req, res) => {
          res.json({
            errno: 0,
            data: goods
          })
        }),
        app.get('/api/ratings', (req, res) => {
          res.json({      
            errno: 0,
            data: ratings
          })
        })
    },

第三步、运行

npm run dev,启动后输入http://localhost:8080/api/seller,如果数据正常显示,则数据能正常返回

PS:
1.Google可以用 jsonview 插件将返回数据格式化

2.express相关语法:https://github.com/expressjs/express/blob/master/Readme.md

3.app.use和app.get的区别及解析:http://blog.csdn.net/wthfeng/article/details/53366169

4.本文非原创,转自:https://www.cnblogs.com/enboke/p/vue.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值