前后端分离,有时候后端接口给的不是很及时,这就需要前端自己mock data,

本文讲的简单的node模拟数据 api路由跳转

首先有个data.js(json)文件,

路由:

配置在dev-server.js

require('./check-versions')()
var config = require('../config')
if (!process.env.NODE_ENV) process.env.NODE_ENV = JSON.parse(config.dev.env.NODE_ENV)
var path = require('path')
var express = require('express')
var webpack = require('webpack')
var opn = require('opn')
var proxyMiddleware = require('http-proxy-middleware')
var webpackConfig = require('./webpack.dev.conf') // default port where dev server listens for incoming traffic
var port = process.env.PORT || config.dev.port
// Define HTTP proxies to your custom API backend
// https://github.com/chimurai/http-proxy-middleware
var proxyTable = config.dev.proxyTable var app = express()
//router Start
var appData = require('../data.json');//获取data数据
var seller = appData.seller; //获取详细数据
var goods = appData.goods; //获取详细数据
var ratings = appData.ratings; //获取详细数据 var apiRouter = express.Router(); //定义一个路由 apiRouter.get('/seller',function(req,res){//.get方法第一个参数 地址,第二个是个函数,传入requrice responce,responce返回json对象
res.json({
errno: 0, //错误代码
data: seller //数据
});
});
apiRouter.get('/goods',function(req,res){
res.json({
errno: 0,
data: goods
});
});
apiRouter.get('/ratings',function(req,res){
res.json({
errno: 0,
data: ratings
});
}); app.use('/api',apiRouter);//加载路由 访问路径:根目录/api/seller 根目录/api/goods 根目录/api/ratings
//router End
var compiler = webpack(webpackConfig) var devMiddleware = require('webpack-dev-middleware')(compiler, {
publicPath: webpackConfig.output.publicPath,
stats: {
colors: true,
chunks: false
}
}) var hotMiddleware = require('webpack-hot-middleware')(compiler)
// force page reload when html-webpack-plugin template changes
compiler.plugin('compilation', function (compilation) {
compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) {
hotMiddleware.publish({ action: 'reload' })
cb()
})
}) // proxy api requests
Object.keys(proxyTable).forEach(function (context) {
var options = proxyTable[context]
if (typeof options === 'string') {
options = { target: options }
}
app.use(proxyMiddleware(context, options))
}) // handle fallback for HTML5 history API
app.use(require('connect-history-api-fallback')()) // serve webpack bundle output
app.use(devMiddleware) // enable hot-reload and state-preserving
// compilation error display
app.use(hotMiddleware) // serve pure static assets
var staticPath = path.posix.join(config.dev.assetsPublicPath, config.dev.assetsSubDirectory)
app.use(staticPath, express.static('./static')) module.exports = app.listen(port, function (err) {
if (err) {
console.log(err)
return
}
var uri = 'http://localhost:' + port
console.log('Listening at ' + uri + '\n') // when env is testing, don't need open it
if (process.env.NODE_ENV !== 'testing') {
opn(uri)
}
})

//获取详细数据

MOCK DATA -- node路由的更多相关文章

  1. SPA中,Node路由优先级高于React路由

    一.问题描述 在一场面试中,面试官问到了React和Node路由之间的关系. 现在SPA(单页面应用)的使用越来越广. Node(后台)和React(前端)都有自己的路由,当我页面访问一个URL的时候 ...

  2. Hadoop ->> Name node/Data node和Job tracker/Task tracker的区别

    刚好看到关于Name node/Data node和Job tracker/Task tracker的解释,一开始有点混淆,以为说Job tracker必须运行在Name node上,他们俩有依赖或者 ...

  3. node路由访问,中间件返回数据

    node路由访问,中间件返回数据 定义一个变量存放json数据,中间件接受数据 var responseData; router.use(function(req, res, next) { resp ...

  4. 一统江湖的大前端(2)—— Mock.js + Node.js 如何与后端潇洒分手

    <一统江湖的大前端>系列是自己的前端学习笔记,旨在介绍javascript在非网页开发领域的应用案例和发现各类好玩的js库,不定期更新.如果你对前端的理解还是写写页面绑绑事件,那你真的是有 ...

  5. express for node 路由route几种实现方式的思考

    1.路由实现方式和顺序 express框架创建的模板app,js中默认代码 var express = require('express'); var routes = require('./rout ...

  6. 原生node路由操作以及注意事项

    var http = require("http"); var url = require("url"); var ejs = require("ej ...

  7. Node路由简单的处理

    看过node很多例子,都是将路由直接放到入口文件中处理,使得文件显得很大很乱,特别是当一个项目变大,有上百甚至上千的路由,那该怎么办? 最近在想如何将一个个的路由放到一个单独的模块中处理,比如'/us ...

  8. [Unit Testing] Mock a Node module's dependencies using Proxyquire

    Sometimes when writing a unit test, you know that the module you're testing imports a module that yo ...

  9. Hadoop集群出现no data node to stop的解决方案

    问题描述: 今天stop hadoop集群的时候出现no datanode to stop ,寻找解决方案,并不是网上资料所说的什么DFS Used .Non DFS Used等于0 .所有的节点都是 ...

随机推荐

  1. [转]10个有关RESTful API良好设计的最佳实践

    Web API已经在最近几年变成重要的话题,一个干净的API设计对于后端系统是非常重要的. 通常我们为Web API使用RESTful设计,REST概念分离了API结构和逻辑资源,通过Http方法GE ...

  2. RGB转YCbCr

    从RGB转换成YCbCr //  Purpose:      //          Save RGB->YCC colorspace conversion for reuse, only co ...

  3. AngularJS基础知识2

    一.angularJS双向数据绑定 利用双向数据绑定,不仅能把数据模型的变化同步到视图上面,还可以利用双向数据绑定的特性来做一些样式上面的控制. 双向数据绑定用处很多,不仅仅是像知识点1中的那个例子, ...

  4. Python之路-python(html、css)

    html: 概述: HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写,他是一种制作万维网页面标准语言(标记).相当于定义统一的一套规则,大家都来遵守他,这样 ...

  5. 3个著名加密算法(MD5、RSA、DES)的解析

    MD5的全称是Message-Digest Algorithm 5,在90年代初由MIT的计算机科学实验室和RSA Data Security Inc发明,经MD2.MD3和MD4发展而来.    M ...

  6. xl2tp部署

    参考 http://blog.51yip.com/linux/1795.html 说到VPN,就会想到google,满心的疼.以前写过一篇关于vpn的文单,请参考:centos5.5 vpn 安装配置 ...

  7. struts---JSP界面验证码生成与验证

    之前想做一个随机验证码的功能,自己也搜索了一下别人写的代码,然后自己重新用struts2实现了一下,现在将我自己实现代码贴出来!大家有什么意见都可以指出来! 首先是生成随机验证码图片的action: ...

  8. 安装Mysq方法

    前言: 此方法只能借鉴,如果网友安装失败,后果自负. 借鉴的书籍<跟老男孩学Linux运维 Web集群实战> 文章所使用的Mysql:https://yunpan.cn/Oc6RkgKRF ...

  9. C# 使用BackgroundWorker例子及注意点

    该例子为使用BackgroundWorker在TextBox文本中产生一个10000以内并且能被5整除的数(1秒产生一个) 操作界面可以启动线程,也可以停止线程,界面设计如图: 先贴代码,有注释的地方 ...

  10. c#的逻辑运算符重载(二)

    重载==以后,则==失去原有意义,这时可以使用object.equals(对象A,对象B)的方式进行判断,同样可以达到==的效果